Add new docs website

.github/workflows/doc.yaml

@@ -1,49 +1,56 @@
-name: "Publish documentation"
+name: Deploy to GitHub Pages
+
 on:
-  release:
-    types: [published]
   workflow_dispatch:
+  push:
+    paths:
+      - 'docs/**'
+      - '.github/workflows/doc.yaml'
+
+defaults:
+  run:
+    shell: bash
+    working-directory: ./docs
 
 jobs:
-  publish-documentation:
+  build:
+    name: Build Docusaurus
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Build website
+        run: npm run build
+
+      - name: Upload Build Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/build
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: docs/build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
     permissions:
-      id-token: "write"
-      pages: "write"
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
 
+    # Deploy to the github-pages environment
     environment:
-      name: "github-pages"
-      url: "${{ steps.deployment.outputs.page_url }}"
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
 
-    runs-on: "ubuntu-latest"
+    runs-on: ubuntu-latest
     steps:
-      - id: "checkout"
-        name: "Check out Git repository"
-        uses: "actions/checkout@v4"
-
-      - id: "setup-node"
-        name: "Set up Node.js"
-        uses: "actions/setup-node@v4"
-        with:
-          cache: "npm"
-
-      - id: "install-dependencies"
-        name: "Install Node.js dependencies"
-        run: |
-          npm ci
-      - id: "build"
-        name: "Build documentation"
-        run: |
-          npm run doc
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-
-      - id: "upload-documentation"
-        name: "Upload Pages artifact"
-        uses: "actions/upload-pages-artifact@v3"
-        with:
-          path: "docs/"
-
-      - id: "deployment"
-        name: "Deploy documentation to GitHub Pages"
-        uses: "actions/deploy-pages@v4"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

CHANGELOG.md

@@ -1,9 +1,9 @@
 # v0.2.0
 - TODO: Add description
-- Inital release of local web UI (Frontend uses Next.js, backend uses Express.js)
+- Initial release of local web UI (Frontend uses Next.js, backend uses Express.js)
 - Server API support (--server) (gets API keys from environment variables)
 - Reworked AI script generation by giving each video type its own prompt to build its data object
-- Support for getting API keys from environment variables
+- Support for getting API keys from environment variables (`.env` file)
 - OpenAI API support
 - Google Gemini AI API support
 - Anthropic (Claude) API support

README.md

@@ -348,7 +348,8 @@ The package is structured as follows:
 - [ ] Add user authentication for UI and view past videos
 - [ ] Add more error handling
 - [ ] Add more tests
-- [ ] Add more documentation
+- [x] Add more documentation
+- [ ] Add documentation for adding new video types
 - [ ] Fix external dependencies vulnerabilities (only on dev dependencies)
 - [ ] Expose more options for video customization (ElevenLabs voice customization, LLM temperature, etc.)
 

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2024-10-05-welcome.mdx

@@ -0,0 +1,26 @@
+---
+slug: first-post
+title: First blog post - what to expect
+authors: [alamshafil]
+tags: [autoshorts, updates, release]
+---
+
+Welcome to the AutoShorts blog! We're excited to share our journey with you. Here's what you can expect from our blog:
+
+1. **Updates**: We'll keep you posted on the latest features and improvements to AutoShorts.
+
+2. **Tutorials**: Learn how to use AutoShorts to create engaging videos.
+
+3. **Tips & Tricks**: Get the most out of AutoShorts with our tips.
+
+4. And more! (hopefully)
+
+<!-- truncate -->
+
+Stay tuned for more updates, and don't forget to follow the dev on [Twitter / X](https://x.com/alamshafil) for the latest news. If you have any questions or topics you'd like us to cover, feel free to reach out. We're here to help you make the most of AutoShorts!
+
+This blog post marks the release of AutoShorts v0.1.0. 🎉
+
+Get ready for the v0.2.0 release of AutoShorts! (with UI!) 🚀
+
+Happy video making! 🎥🚀

docs/blog/2024-10-08-new-version-0-2.mdx

@@ -0,0 +1,33 @@
+---
+slug: new-version-0.2
+title: What to expect from v0.2.0 release of AutoShorts
+authors: [alamshafil]
+tags: [autoshorts, updates]
+---
+
+We, *actually just me*, are excited to announce the future release of v0.2.0 of AutoShorts. This release brings major changes to the project and will be a significant milestone in the project's development. 
+
+Note this release is still in development and the features mentioned here are subject to change.
+
+<!-- truncate -->
+
+Here are some of the changes you can expect in the upcoming release:
+
+- **New Web UI:** The new version will feature a web UI that will allow users to interact with the project without having to use the command line. The web UI will provide a more user-friendly interface for creating videos and managing projects. The web UI will be built using Next.js and Tailwind CSS. The backend will be provided by the existing AutoShorts API.
+
+- **New server support:** The new version will feature a server mode that will allow users to run the project as a server. This will allow users to create videos programmatically using the AutoShorts API. The server mode will be built using Express.js and will provide a RESTful API for creating videos. Run via `npx autoshorts --server`. The server reads environment variables `.env` for configuration, such as the port, resource path, and temporary directory.
+
+- **API key read from environment variables:** The new version will support reading API keys from environment variables. This will allow users to store their API keys securely and avoid hardcoding them in the project configuration. Use `.env` file to store your API keys.
+
+- **AI Output is now structured:** The new version will feature structured AI output.The AI script generation has been be reworked to give each video type its own prompt to build its data object.
+
+
+- **Added video orientation support:** The new version will support video orientation. Users can now specify whether they want their video to be vertical or horizontal.
+
+- **Forked `ffcreator` and `inkpaint`:** The new version will feature a forked version of `ffcreator` and `inkpaint` as internal dependencies in `packages` directory. This will allow us to make changes to these libraries without affecting the original repositories.
+
+- **OpenAI API support:** The new version will support the OpenAI API. This will allow users to use GPT-4o, GPT-4o-mini, o1, and other OpenAI models to generate video scripts. This also supports custom endpoints to use Groq AI, local Ollama API, and other OpenAI compatible APIs.
+
+- **Google Gemini AI API support:** Users can now use the Google Gemini AI API to generate video scripts. This will allow users to use the Google Gemini AI model such as Gemini-1.5-Flash and Gemini-1.5-Pro to generate video scripts.
+
+- **Anthropic (Claude) API support:** Users can now use the Anthropic (Claude) API to generate video scripts. This will allow users to use the Claude 3.5 Sonnet, Claude 3 Opus, Claude 3 Sonnet, and Claude 3 Haiku models to generate video scripts.

docs/blog/authors.yml

@@ -0,0 +1,12 @@
+alamshafil:
+  name: Shafil Alam
+  title: Software Developer and Creator
+  url: https://shafilalam.com
+  image_url: https://github.com/alamshafil.png
+  page:
+    # customize the url of the author page at /blog/authors/<permalink>
+    permalink: '/all-alamshafil-articles'
+  socials:
+    x: alamshafil
+    linkedin: shafilalam
+    github: alamshafil

docs/blog/tags.yml

@@ -0,0 +1,19 @@
+docusaurus:
+  label: Docusaurus
+  permalink: /docusaurus
+  description: Docusaurus tag description
+
+release:
+  label: Release
+  permalink: /release
+  description: Release tag description
+
+autoshorts:
+  label: Autoshorts
+  permalink: /autoshorts
+  description: Autoshorts tag description
+
+updates:
+  label: Updates
+  permalink: /updates
+  description: Updates tag description

docs/docs/config.md

@@ -0,0 +1,83 @@
+---
+sidebar_position: 3
+---
+
+# Configuration
+
+## CLI options
+
+This document provides detailed information about the CLI options available for the AutoShorts AI video generator.
+
+To display the help message with all available options, run:
+
+```bash
+npx auto-shorts --help
+```
+
+### Options
+
+- `--download`: Download models needed for AI generation.
+
+- `--server`: Start API server. IP and port come from environment variables.
+
+- `-p`, `--prompt [text]`: The prompt to use for the AI to generate video.
+
+- `--aiType [type]`: The AI provider to use. Can be OpenAIGen, GoogleAIGen, AnthropicAIGen, OllamaAIGen.
+
+- `--ttsType [type]`: The TTS provider to use. Can be ElevenLabs, BuiltinTTS, NeetsTTS.
+
+- `--imageType [type]`: The image provider to use. Can be PexelsImageGen, GoogleScraperImageGen.
+
+- `--orientation [orientation]`: The orientation of the video. Options are vertical or horizontal.
+
+- `--tempPath [path]`: The temporary path to save video files. Default is ./video_temp.
+
+- `--resPath [path]`: The path to the resources directory. Default is ./res.
+
+- `--jsonFile [path]`: The JSON file to use for video generation. Overrides AI.
+
+- `-h, --help`: Print the usage guide.
+
+### Advanced Options
+
+- `--changePhotos`: Change photos in video. Used to prevent overriding wanted photos. Default is true.
+
+- `--disableTTS`: Disable TTS in video. Used to prevent overriding wanted TTS. Default is false.
+
+- `--bgMusic [path]`: Use custom background music.
+
+- `--bgVideo [path]`: Use custom background video, if applicable.
+
+- `--useMock`: Use mock JSON data. Default is false.
+
+- `--disableSubtitles`: Disable subtitles in video. Default is false.
+
+- `--systemPromptOverride [text]`: Override system prompt. May not work with all AI types.
+
+- `--openAIEndpoint [endpoint]`: OpenAI endpoint URL to use, if applicable.
+
+- `--model model`: AI model to use, if applicable.
+
+### API Keys
+
+:::note
+
+Note: Some of the following API keys are optional and only required if you are using the corresponding AI provider.
+
+Also API keys can be set in the environment variables via the `.env` file in root.
+
+:::
+
+- `--elevenlabsAPIKey [key]`: Eleven Labs API key, if applicable. OR set `ELEVENLABS_API_KEY` in environment variables.
+
+- `--pexelsAPIKey [key]`: Pexels API key, if applicable. OR set `PEXELS_API_KEY` in environment variables.
+
+- `--neetsAPIKey [key]`: Neets API key, if applicable. OR set `NEETS_API_KEY` in environment variables.
+
+- `--openaiAPIKey [key]`: OpenAI API key, if applicable. OR set `OPENAI_API_KEY` in environment variables.
+
+- `--googleaiAPIKey [key]`: Google AI API key, if applicable. OR set `GOOGLE_AI_API_KEY` in environment variables.
+
+- `--anthropicAPIKey [key]`: Anthropic AI API key, if applicable. OR set `ANTHROPIC_API_KEY` in environment variables.
+
+**Created by Shafil Alam.**

docs/docs/contrib.md

@@ -0,0 +1,22 @@
+---
+sidebar_position: 5
+---
+
+# Contributing
+
+If this package is missing any video types or AI tools that you would like to see, feel free to create an issue on the GitHub repo. You can also contribute to the package by creating a pull request to add new video types or AI tools.
+
+# Project Layout
+
+The package is structured as follows:
+- `src`: Contains the source code for the package
+- `ui`: Contains the GUI code for the package
+- `test`: Contains test code for the package
+- `packages`: Contains the internal dependencies for the package (forked versions of `ffcreator` and `inkpaint`)
+
+```mermaid
+graph TD
+    A[src] -->|Source code| B(ui)
+    A -->|Testing code| D(test)
+    A -->|Internal dependencies| E(packages)
+```

docs/docs/installation/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "How to install",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to install auto-shorts UI, CLI, and the JS library."
+  }
+}