Merge pull request #35 from menloresearch/rp/docs-updates

docs: add navigation system for Jan Browser Extension docs

Author: ramonpzg

docs/README.md

@@ -1,28 +1,65 @@
-# Jan's Website
+# Jan Browser Extension Documentation
 
-This website is [built with Starlight](https://starlight.astro.build)
+This documentation site is built with [Starlight](https://starlight.astro.build) and mirrors the main [Jan documentation](https://docs.jan.ai) structure for consistency across the Jan ecosystem.
 
+## 🎯 For Jan Browser Extension Developers
 
-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.
+**Focus Area**: Work primarily in `./docs/src/content/docs/browser/` - this is where all Jan Browser Extension-specific documentation lives.
 
-Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+The navigation automatically routes to the main Jan docs:
+- **"Docs"** → `https://docs.jan.ai`
+- **"API Reference"** → `https://docs.jan.ai/api`
 
-Static assets, like favicons, can be placed in the `public/` directory.
+### Adding New Documentation
 
-If you want to add new pages, these can go in the `src/pages/` directory. Because of the topics plugin
-we are using ([starlight sidebar topics](https://starlight-sidebar-topics.netlify.app/docs/guides/excluded-pages/))
-you will need to exclude them from the sidebar by adding them to the exclude list in `astro.config.mjs`, e.g., `exclude: ['/example'],`.
+1. **Create files** in `./docs/src/content/docs/browser/`
+2. **Update sidebar** in `astro.config.mjs` under the "Browser Extension" section:
+
+```js
+{
+  label: "Browser Extension",
+  items: [
+    { label: "Overview", slug: "browser" },
+    { label: "Your New Page", slug: "browser/your-new-page" }, // Add here
+    // ... existing items
+  ],
+}
+```
 
 ## 🧞 Commands
 
-All commands are run from the root of the project, from a terminal:
+All commands run from the `./docs/` directory:
+
+| Command               | Action                                    |
+| :-------------------- | :---------------------------------------- |
+| `bun install`         | Install dependencies                      |
+| `bun dev`             | Start dev server at `localhost:4321`     |
+| `bun build`           | Build production site to `./dist/`       |
+| `bun preview`         | Preview build locally                     |
+
+**⚠️ Important**: After running `bun dev`, manually navigate to `http://localhost:4321/browser/` since the main index page doesn't exist in this repo (it's in the main Jan repository).
+
+## 📁 Structure
+
+```
+docs/
+├── src/content/docs/
+│   └── browser/          ← Your work goes here
+├── astro.config.mjs      ← Update sidebar here
+└── public/
+    ├── scripts/
+    └── styles/
+```
+
+## 🔗 Navigation
+
+The site automatically includes navigation that links back to the main Jan documentation ecosystem. This ensures users can easily move between Jan Desktop docs, API Reference, and Jan Browser Extension docs.
+
+## 📝 Writing Guidelines
+
+- Use clear, concise language
+- Include code examples where helpful
+- Follow the existing documentation patterns from the main Jan docs
+- Test your changes with `bun dev` before committing
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `bun install`             | Installs dependencies                            |
-| `bun dev`             | Starts local dev server at `localhost:4321`      |
-| `bun build`           | Build your production site to `./dist/`          |
-| `bun preview`         | Preview your build locally, before deploying     |
-| `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `bun astro -- --help` | Get help using the Astro CLI                     |
+For questions about the documentation structure or navigation, refer to the main [Jan documentation repository](https://github.com/menloresearch/jan).

docs/astro.config.mjs

@@ -24,18 +24,16 @@ export default defineConfig({
     }),
     starlight({
       title: "👋 Jan",
-      favicon: "jan2.png",
+      favicon: "favicon.ico",
+      customCss: ["./src/styles/global.css"],
       head: [
         {
           tag: "script",
-          content: `
-            document.addEventListener('DOMContentLoaded', function() {
-              const logoLink = document.querySelector('a[href="/"]');
-              if (logoLink) {
-                logoLink.href = 'https://jan.ai';
-              }
-            });
-          `,
+          attrs: { src: "/scripts/inject-navigation.js", defer: true },
+        },
+        {
+          tag: "link",
+          attrs: { rel: "stylesheet", href: "/styles/navigation.css" },
         },
       ],
       plugins: [