Sight Docs

Documentation site for the Sight Chrome extension, built with VitePress - the same static-site framework used by Vue.js, Vite, Vitest, and Pinia.

Light/dark mode is built into VitePress by default (toggle in the top-right of the nav bar) - no extra setup needed.

Develop locally

npm install
npm run docs:dev

Opens a local dev server (default http://localhost:5173) with hot reload as you edit the Markdown files in docs/.

Build for production

npm run docs:build

Outputs a fully static site to docs/.vitepress/dist/ - just upload that folder anywhere (Vercel, Netlify, GitHub Pages, S3, etc.).

Preview the production build

npm run docs:preview

Project structure

docs/
├── .vitepress/
│   ├── config.js        # site title, nav, sidebar, theme options
│   └── theme/
│       ├── index.js     # extends the default theme
│       └── custom.css   # brand color overrides (light + dark)
├── public/
│   └── favicon.svg      # site icon
├── index.md             # homepage (hero + feature grid)
├── changelog.md
└── guide/
    ├── getting-started.md
    ├── features.md
    ├── advanced-features.md
    ├── permissions.md
    ├── architecture.md
    ├── sound.md
    └── limitations.md

Deploying to GitHub Pages

VitePress has a built-in guide for this: https://vitepress.dev/guide/deploy#github-pages - in short, build the site and publish docs/.vitepress/dist to your gh-pages branch (or use their sample GitHub Action).

Editing content

Every page is plain Markdown in docs/. To add a new page:

1. Create docs/guide/my-page.md
2. Add it to the sidebar array in docs/.vitepress/config.js