New Docs Site with Astro (#102)

- uses astro for a new docs site. Decided to use a lightweight ssg
instead of vanilla js since it isn't really a good use of time to have
to write the entire site from scratch.
- install via `npm i`
- run via `npm run start`

- [x] Figure out what to do for the logo on the front page
- [x] Move all docs in the README.md files in subdirectories out of
those folders and just put it in the docs site.
- [x] Update the docs site so it lists all the key commands
- [x] Create a few tutorials / link to some gifs / link to a few videos

If anyone wants to help, I could particularly benefit from videos or
gifs

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/workflows/docs.yml

@@ -1,56 +1,39 @@
-name: Docs
+name: Deploy to GitHub Pages
 
 on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
   push:
     branches: [main]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
 jobs:
-  docs:
+  build:
     runs-on: ubuntu-latest
-
-    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-    permissions:
-      contents: read
-      pages: write
-      id-token: write
-
-    # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-    # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-    concurrency:
-      group: "pages"
-      cancel-in-progress: false
-
     steps:
-      - uses: actions/checkout@v3
-
-      - name: Set up Python 3.10
-        uses: actions/setup-python@v4
-        with:
-          python-version: "3.10"
-          cache: "pip"
-          cache-dependency-path: |
-            .github/requirements-docs.txt
-
-      - name: Install dependencies
-        run: pip install -r .github/requirements-docs.txt
-
-      - name: Move conf.py to root
-        # Move sphinx configuration to root since we normally don't want it there
-        run: mv docs/conf.py conf.py; mv docs/docs_root.md index.md
-
-      - name: Build docs
-        run: |
-          python -X utf8 -m talondoc autogen -o docs --generate-index
-          python -X utf8 -m talondoc build ./ docs/_build
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-
-      - name: Upload Pages artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: docs/_build
-
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+      - name: Install, build, and upload your site
+        uses: withastro/action@v2
+        # with:
+        # path: . # The root location of your Astro project inside the repository. (optional)
+        # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
+        # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.vscode/extensions.json

@@ -2,6 +2,8 @@
     "recommendations": [
         "ms-python.python",
         "ms-python.vscode-pylance",
-        "charliermarsh.ruff"
+        "charliermarsh.ruff",
+        "astro-build.astro-vscode",
+        "unifiedjs.vscode-mdx"
     ]
 }

GPT/readme.md

@@ -2,18 +2,6 @@
 
 Query language models with voice commands. Helpful to automatically generate text, fix errors from dictation automatically, and generally speed up your Talon workflow.
 
-## Usage
-
-| Command                                                       | Description                                                          | Example                                       |
-| ------------------------------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------- |
-| `model <prompt>`                                              | Generate text from a prompt and paste it                             | "model summarize"                             |
-| `model help`                                                  | Show the help menu with all the prompts                              | "model help"                                  |
-| `model please <text>`                                         | Say an arbitrary prompt and then apply it                            | "model please translate this to Japanese"     |
-| `model ask <text>`                                            | Ask a question to the model                                          | "model ask what is the meaning of life"       |
-| `model <prompt> <cursorless_target> <cursorless_destination>` | Select with cursorless, apply a prompt, and paste to the destination | "model explain line this after block red air" |
-| `model <prompt> below`                                        | Apply a prompt and then paste the result below the cursor            | "model format bullets below"                  |
-| `model <prompt> clipped`                                      | Apply a prompt and return the result in the clipboard                | "model explain this clipped"                  |
-
 ## Help
 
 - See [the list of prompts](lists/staticPrompt.talon-list) for all the prompts that can be used with the `model` command.

docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

docs/README.md

@@ -1,13 +1,55 @@
-# Documentation for talon-ai-tools
+# Starlight Starter Kit: Basics
 
-This is a placeholder. Documentation is automatically generated using talondoc and Github Actions. See each folder for the associated README.md file which documents behavior, or the website at [https://colton.bio/talon-ai-tools/](https://colton.bio/talon-ai-tools/)
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
 
-## Generation
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 
-To generate the documentation locally, run:
+## 🚀 Project Structure
 
-```sh
-python -X utf8 -m talondoc autogen -o docs --generate-index
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
 ```
 
-**NOTE**: To generate docs locally you need to move the conf.py and docs_root.md files to the root of the repo. This is normally done in CI to make the repo cleaner.
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

docs/astro.config.mjs

@@ -0,0 +1,30 @@
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+
+// https://astro.build/config
+export default defineConfig({
+    site: "https://colton.place/talon-ai-tools",
+    base: "/",
+    integrations: [
+        starlight({
+            title: "talon-ai-tools Docs",
+            social: {
+                github: "https://github.com/C-Loftus/talon-ai-tools",
+            },
+            sidebar: [
+                {
+                    label: "Guides",
+                    items: [
+                        // Each item here is one entry in the navigation menu.
+                        { label: "Quickstart", slug: "guides/quickstart" },
+                        { label: "Customizing", slug: "guides/customizing" },
+                    ],
+                },
+                {
+                    label: "Reference",
+                    autogenerate: { directory: "reference" },
+                },
+            ],
+        }),
+    ],
+});

docs/components/FetchedData.astro

@@ -0,0 +1,31 @@
+---
+const { data } = Astro.props; // Receive the data as a prop
+const response = await fetch(data);
+const fetchedData = await response.text();
+
+// Function to extract the basename from a URL
+const getBasename = (url: string | URL) => {
+  const urlObj = new URL(url);
+  return urlObj.pathname.split('/').filter(Boolean).pop() || 'Index';
+};
+
+const basename = getBasename(data);
+---
+
+<style>
+  .data-container pre {
+    white-space: pre-wrap; /* Allows wrapping of long lines */
+    word-wrap: break-word; /* Ensures long words break and wrap */
+    overflow-x: auto; /* Adds horizontal scrollbar if necessary */
+  }
+
+  .data-container a {
+    text-decoration: none; /* Removes underline from link */
+    color: #007bff; /* Link color */
+  }
+</style>
+
+<div class="data-container">
+  <h2>Data from <a href={data}>{basename}</a></h2>
+  <pre>{fetchedData}</pre> <!-- Display the raw data inside a <pre> tag for formatting -->
+</div>