Docs update and smooth out AI

Author: MrBlankCoding

.github/workflows/static.yml

@@ -1,4 +1,4 @@
-name: Deploy static content to Pages
+name: Build and Deploy Docs to Pages
 
 on:
   push:
@@ -15,20 +15,39 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Setup Pages
         uses: actions/configure-pages@v5
+
+      - name: Build docs
+        run: npm run docs:build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: 'docs'
+          path: docs-src/.vitepress/dist
+
+  deploy:
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.gitignore

@@ -108,6 +108,11 @@ dist
 # vuepress v2.x temp and cache directory
 .temp
 
+# VitePress output/cache
+docs/
+docs-src/.vitepress/cache/
+docs-src/.vitepress/dist/
+
 # Docusaurus cache and generated files
 .docusaurus
 
@@ -135,4 +140,4 @@ dist
 
 ### Node Patch ###
 # Serverless Webpack directories
-.webpack/
+.webpack/

README.md

@@ -43,19 +43,6 @@ npm build.js
 
 ---
 
-## TODO List
-
-### Editor
-
-* [ ] Link CodeMirror minimap toggle
-* [ ] Move helper functions (`exportScript`, `generateTamperMonkeyHeader`) to separate files
-
-### UI
-* [ ] Fix editor optimizations
-* [ ] Can you make it so if you have mutiple scripts running at once on the same page the notifications will expand verticlly and not all overlap
-
----
-
 ## Acknowledgments
 
 * Built with [CodeMirror](https://codemirror.net/)

docs-src/.vitepress/config.mjs

@@ -0,0 +1,57 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  title: 'CodeTweak Docs',
+  description: 'Simple docs for using CodeTweak',
+  lang: 'en-US',
+  base: '/CodeTweak/',
+  lastUpdated: true,
+  cleanUrls: true,
+  themeConfig: {
+    logo: '/assets/icons/icon32.png',
+    nav: [
+      { text: 'Guide', link: '/guide/getting-started' },
+      { text: 'API', link: '/reference/gm-apis' },
+      { text: 'Troubleshooting', link: '/troubleshooting/common-issues' }
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Install CodeTweak', link: '/guide/installation' },
+          { text: 'Use the Editor', link: '/guide/editor' },
+          { text: 'Manage Scripts', link: '/guide/dashboard' },
+          { text: 'Install From Greasy Fork', link: '/guide/greasyfork' },
+          { text: 'Privacy and Permissions', link: '/guide/privacy' }
+        ]
+      },
+      {
+        text: 'Reference',
+        items: [
+          { text: 'GM APIs', link: '/reference/gm-apis' },
+          { text: 'Run Timing', link: '/reference/run-timing' },
+          { text: 'Match Patterns', link: '/reference/match-patterns' }
+        ]
+      },
+      {
+        text: 'Troubleshooting',
+        items: [
+          { text: 'Common Issues', link: '/troubleshooting/common-issues' },
+          { text: 'Strict Sites', link: '/troubleshooting/strict-sites' }
+        ]
+      }
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/MrBlankCoding/CodeTweak' }
+    ],
+    search: {
+      provider: 'local'
+    },
+    footer: {
+      message: 'MIT License',
+      copyright: 'Copyright © CodeTweak Contributors'
+    }
+  },
+  srcExclude: ['README.md']
+});

docs-src/README.md

@@ -0,0 +1,5 @@
+# CodeTweak Docs Source
+
+This folder contains VitePress source files.
+
+Build output is generated into `/docs` for GitHub Pages.

docs-src/guide/dashboard.md

@@ -0,0 +1,28 @@
+# Manage Scripts
+
+Use the dashboard to control all scripts.
+
+## Script list
+
+You can:
+
+- Enable or disable scripts
+- Search by name
+- Filter by website, status, and run timing
+- Edit or delete scripts
+
+## Settings tab
+
+Main settings include:
+
+- Enable scripts by default
+- Show notifications
+- Enhanced debugging
+- Allow external resources
+- Confirm first run
+
+## Best practices
+
+- Keep unused scripts disabled.
+- Review scripts with broad `@match` rules.
+- Keep `allow external resources` off unless needed.

docs-src/guide/editor.md

@@ -0,0 +1,32 @@
+# Use the Editor
+
+The editor is where you write and save scripts.
+
+## Create a script
+
+1. Open dashboard.
+2. Click `New Script`.
+3. Fill script name and metadata.
+
+## Recommended metadata
+
+```javascript
+// ==UserScript==
+// @name         My Script
+// @match        *://example.com/*
+// @run-at       document_end
+// ==/UserScript==
+```
+
+## Run timing
+
+- `document_start`: runs early
+- `document_end`: runs when DOM is ready
+- `document_idle`: runs after page load
+
+## Tips
+
+- Keep one purpose per script.
+- Use clear names.
+- Keep match patterns narrow.
+- Test on one site before broad patterns.

docs-src/guide/getting-started.md

@@ -0,0 +1,30 @@
+# Getting Started
+
+CodeTweak is a Chrome extension for userscripts.
+
+Use this flow:
+
+1. Install the extension.
+2. Create or import a script.
+3. Set where it runs.
+4. Save and test.
+
+## Before you begin
+
+- Chrome or Chromium browser
+- Developer mode enabled only for manual install
+
+## Quick start
+
+1. Open the CodeTweak dashboard.
+2. Click `New Script`.
+3. Add metadata (`@name`, `@match`, `@run-at`).
+4. Write your script code.
+5. Save.
+6. Open a matching page and confirm it runs.
+
+## Next pages
+
+- [Install CodeTweak](/guide/installation)
+- [Use the Editor](/guide/editor)
+- [Manage Scripts](/guide/dashboard)

docs-src/guide/greasyfork.md

@@ -0,0 +1,26 @@
+# Install From Greasy Fork
+
+CodeTweak supports Greasy Fork in two ways.
+
+## From dashboard
+
+1. Open dashboard.
+2. Click `Browse Scripts`.
+3. Search by script name or keyword.
+4. Click `Import`.
+5. Review code in editor and save.
+
+## From greasyfork.org
+
+CodeTweak can intercept `.user.js` install links and open them in CodeTweak.
+
+## After import
+
+Always review:
+
+- `@match` rules
+- `@grant` usage
+- external `@require` URLs
+- network requests in code
+
+If the script is too broad, edit it before enabling.

docs-src/guide/installation.md

@@ -0,0 +1,37 @@
+# Install CodeTweak
+
+## Chrome Web Store install
+
+1. Open the Chrome Web Store listing.
+2. Click `Add to Chrome`.
+3. Pin the extension if you want quick access.
+
+## Manual install (developer mode)
+
+1. Build the extension:
+
+```bash
+npm install
+npm run build:chrome
+```
+
+2. Open `chrome://extensions`.
+3. Enable `Developer mode`.
+4. Click `Load unpacked`.
+5. Select `build/chrome`.
+
+## Update manual install
+
+1. Rebuild:
+
+```bash
+npm run build:chrome
+```
+
+2. In `chrome://extensions`, click `Reload` on CodeTweak.
+
+## Verify install
+
+- Open the popup.
+- Open the dashboard.
+- Create a test script.