Merge pull request #6 from DeepanshKhurana/docs/integrate-docusaurus

docs(docsite): add Docusaurus-based docsite with .md imports

Author: DeepanshKhurana

README.md

@@ -30,32 +30,32 @@ You can find a live demo of the app [here](https://ode-demo.vercel.app/).
 
 ## Screenshots
 
-> [!NOTE]  
+> [!NOTE]
 > For theme-specific screenshots, see [THEMING.md](https://github.com/DeepanshKhurana/ode/blob/main/THEMING.md)
 
 <table>
   <tr>
     <td width="50%">
-      <img src=".github/media/homepage_light.png" alt="Homepage - Light Mode">
+      ![Homepage - Light Mode](.github/media/homepage_light.png)
     </td>
     <td width="50%">
-      <img src=".github/media/homepage_dark.png" alt="Homepage - Dark Mode">
+      ![Homepage - Dark Mode](.github/media/homepage_dark.png)
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/reader_light.png" alt="Reader Mode - Light">
+      ![Reader Mode - Light](.github/media/reader_light.png)
     </td>
     <td width="50%">
-      <img src=".github/media/reader_dark.png" alt="Reader Mode - Dark">
+      ![Reader Mode - Dark](.github/media/reader_dark.png)
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/caps_light.png" alt="Default case - Light">
+      ![Default case - Light](.github/media/caps_light.png)
     </td>
     <td width="50%">
-      <img src=".github/media/caps_dark.png" alt="Default case - Dark">
+      ![Default case - Dark](.github/media/caps_dark.png)
     </td>
   </tr>
 </table>
@@ -115,7 +115,7 @@ services:
       - /path/to/your/public:/app/public
 ```
 
-> [!TIP]  
+> [!TIP]
 > Use an absolute path for the volume mount (e.g., `/home/user/my-site/public`). Relative paths may not work correctly with tools like Portainer.
 
 Run:
@@ -132,7 +132,7 @@ docker compose restart
 
 ### Other Deployment Options
 
-> [!NOTE]  
+> [!NOTE]
 > In this case, you need to replace the content in `public/` with your own.
 
 Once you have your Fork or branch ready, you can deploy the app but the reader position Permalinks as well as the Body of Work links will fail. This is due to SPA handling of paths and (from my understanding) how React works. But this can be fixed.
@@ -193,7 +193,7 @@ Tell everyone everything!
 
 ## Theming
 
-> [!NOTE]  
+> [!NOTE]
 > For complete theming documentation, including all available presets, customization options, and local font support, see [THEMING.md](https://github.com/DeepanshKhurana/ode/blob/main/THEMING.md)
 
 Ode comes with 10 built-in themes that you can use and customize. Switch between presets, override colors and fonts, or build your own theme from scratch.

THEMING.md

@@ -20,101 +20,101 @@ Ode comes with 10 built-in themes, each is named and carefully designed after a
 <table>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/almanac_light.png" alt="Almanac - Light Mode">
+      ![Almanac - Light Mode](.github/media/themes/almanac_light.png)
       <p align="center"><strong>almanac</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/almanac_dark.png" alt="Almanac - Dark Mode">
+      ![Almanac - Dark Mode](.github/media/themes/almanac_dark.png)
       <p align="center"><strong>almanac</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/blueprint_light.png" alt="Blueprint - Light Mode">
+      ![Blueprint - Light Mode](.github/media/themes/blueprint_light.png)
       <p align="center"><strong>blueprint</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/blueprint_dark.png" alt="Blueprint - Dark Mode">
+      ![Blueprint - Dark Mode](.github/media/themes/blueprint_dark.png)
       <p align="center"><strong>blueprint</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/comic_light.png" alt="Comic - Light Mode">
+      ![Comic - Light Mode](.github/media/themes/comic_light.png)
       <p align="center"><strong>comic</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/comic_dark.png" alt="Comic - Dark Mode">
+      ![Comic - Dark Mode](.github/media/themes/comic_dark.png)
       <p align="center"><strong>comic</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/doodle_light.png" alt="Doodle - Light Mode">
+      ![Doodle - Light Mode](.github/media/themes/doodle_light.png)
       <p align="center"><strong>doodle</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/doodle_dark.png" alt="Doodle - Dark Mode">
+      ![Doodle - Dark Mode](.github/media/themes/doodle_dark.png)
       <p align="center"><strong>doodle</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/exploit_light.png" alt="Exploit - Light Mode">
+      ![Exploit - Light Mode](.github/media/themes/exploit_light.png)
       <p align="center"><strong>exploit</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/exploit_dark.png" alt="Exploit - Dark Mode">
+      ![Exploit - Dark Mode](.github/media/themes/exploit_dark.png)
       <p align="center"><strong>exploit</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/journal_light.png" alt="Journal - Light Mode">
+      ![Journal - Light Mode](.github/media/themes/journal_light.png)
       <p align="center"><strong>journal</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/journal_dark.png" alt="Journal - Dark Mode">
+      ![Journal - Dark Mode](.github/media/themes/journal_dark.png)
       <p align="center"><strong>journal</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/manuscript_light.png" alt="Manuscript - Light Mode">
+      ![Manuscript - Light Mode](.github/media/themes/manuscript_light.png)
       <p align="center"><strong>manuscript</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/manuscript_dark.png" alt="Manuscript - Dark Mode">
+      ![Manuscript - Dark Mode](.github/media/themes/manuscript_dark.png)
       <p align="center"><strong>manuscript</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/recipe_light.png" alt="Recipe - Light Mode">
+      ![Recipe - Light Mode](.github/media/themes/recipe_light.png)
       <p align="center"><strong>recipe</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/recipe_dark.png" alt="Recipe - Dark Mode">
+      ![Recipe - Dark Mode](.github/media/themes/recipe_dark.png)
       <p align="center"><strong>recipe</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/screenplay_light.png" alt="Screenplay - Light Mode">
+      ![Screenplay - Light Mode](.github/media/themes/screenplay_light.png)
       <p align="center"><strong>screenplay</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/screenplay_dark.png" alt="Screenplay - Dark Mode">
+      ![Screenplay - Dark Mode](.github/media/themes/screenplay_dark.png)
       <p align="center"><strong>screenplay</strong> - dark</p>
     </td>
   </tr>
   <tr>
     <td width="50%">
-      <img src=".github/media/themes/sketch_light.png" alt="Sketch - Light Mode">
+      ![Sketch - Light Mode](.github/media/themes/sketch_light.png)
       <p align="center"><strong>sketch</strong> - light</p>
     </td>
     <td width="50%">
-      <img src=".github/media/themes/sketch_dark.png" alt="Sketch - Dark Mode">
+      ![Sketch - Dark Mode](.github/media/themes/sketch_dark.png)
       <p align="center"><strong>sketch</strong> - dark</p>
     </td>
   </tr>
@@ -131,7 +131,7 @@ ui:
     defaultMode: "dark"
 ```
 
-> [!WARNING]  
+> [!WARNING]
 > The `defaultMode` only applies on first visit. After that, the user's lamp toggle preference is saved.
 
 ## Partial Customization

WRITING.md

@@ -4,7 +4,7 @@ Ode separates **code** and **content** so you can keep your writing clean, porta
 
 ## 1. What This Repository Contains
 
-> [!NOTE]  
+> [!NOTE]
 > For theming and visual customization, see [THEMING.md](https://github.com/DeepanshKhurana/ode/blob/main/THEMING.md)
 
 Your content repo mirrors the `public/` directory structure:

docsite/.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*

docsite/README.md

@@ -0,0 +1,33 @@
+# Ode Documentation
+
+This is the documentation site for **Ode**, built with [Docusaurus](https://docusaurus.io/).
+
+## Overview
+
+The documentation is programmatically linked to the root markdown files of the Ode project. This ensures that the documentation site is always in sync with the main repository without duplicating content.
+
+## Local Development
+
+```bash
+npm install
+npm start
+```
+
+This command starts a local development server. Most changes are reflected live.
+
+## Build
+
+```bash
+npm run build
+```
+
+This command generates static content into the `build` directory.
+
+## Changes
+
+Some changes are made to the default Docusaurus way of doing things.
+
+- **Live Imports**: Root markdown files are inlined during the build process.
+- **GitHub Alerts**: GitHub-style admonitions (`> [!NOTE]`) are automatically converted to Docusaurus callouts.
+- **Image Resolution**: Images in `.github/media/` are automatically resolved and made clickable.
+- **Search**: Local search is powered by `@easyops-cn/docusaurus-search-local`.

docsite/docs/changelog.mdx

@@ -0,0 +1,10 @@
+---
+title: Changelog
+hide_title: true
+sidebar_label: Changelog
+sidebar_position: 6
+---
+
+import Content from '@site/../CHANGELOG.md';
+
+<Content />

docsite/docs/ethos.mdx

@@ -0,0 +1,10 @@
+---
+title: Ethos
+hide_title: true
+sidebar_label: Ethos
+sidebar_position: 2
+---
+
+import Content from '@site/../ETHOS.md';
+
+<Content />

docsite/docs/intro.mdx

@@ -0,0 +1,11 @@
+---
+title: Introduction
+hide_title: true
+slug: /
+sidebar_label: Introduction
+sidebar_position: 1
+---
+
+import README from '@site/../README.md';
+
+<README />

docsite/docs/license.mdx

@@ -0,0 +1,10 @@
+---
+title: License
+hide_title: true
+sidebar_label: License
+sidebar_position: 7
+---
+
+import LICENSE from '@site/../LICENSE';
+
+<LICENSE />

docsite/docs/references.mdx

@@ -0,0 +1,10 @@
+---
+title: References
+hide_title: true
+sidebar_label: References
+sidebar_position: 5
+---
+
+import Content from '@site/../REFERENCES.md';
+
+<Content />