feat: sidebar navigation in docs (#16)

* first try

* doc

* sidebar component

* second draft

* fix build

* update doc

.changeset/silly-months-trade.md

@@ -0,0 +1,5 @@
+---
+"@goulvenclech/astropi": minor
+---
+
+Adds SidebarNavigation component and function to generate a collection navigation.

.github/workflows/ci.yml

@@ -18,6 +18,8 @@ jobs:
 
       - name: Setup PNPM
         uses: pnpm/action-setup@v3
+        with:
+          version: 9
 
       - name: Setup Node
         uses: actions/setup-node@v4

docs/package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@goulvenclech/astropi": "workspace:*",
-    "astro": "^4.8.0"
-  },
-  "devDependencies": {}
+    "astro": "^4.10.2"
+  }
 }

docs/src/content/learn/1-getting-started/1-new-project.md

@@ -0,0 +1,57 @@
+---
+slug: "getting-started/new-project"
+title: "Launch a new project"
+---
+
+Run the following command to create a new Astropi project from the starter template:
+
+```bash
+# If you use pnpm
+pnpm create astro --template github:goulvenclech/astropi/starter
+# If you use npm
+npm create astro --template github:goulvenclech/astropi/starter
+# If you use yarn
+yarn create astro --template github:goulvenclech/astropi/starter
+```
+
+Astro CLI will ask you a few questions to set up your project and init a Git repository.
+
+## Starter structure
+
+Astropi starter is a minimalistic Astro project with a few markdown files to get you started. Here is the project structure:
+
+```
+your_project/
+├─ src/
+│    ├─ content/ <- Where you put your markdown files
+│    |  ├─ [...]
+│    |  └─ config.ts <- Collections Zod schemas
+│    └─ env.d.ts 
+├─ astro.config.mjs <- Astro & Astropi configuration
+├─ package.json
+└─ README.md
+```
+## Starter configuration
+
+The `astro.config.mjs` file contains the configuration for Astro and Astropi. You can customize it to fit your needs.
+
+Here is the default Astropi configuration:
+
+```ts
+astropi({
+      projectName: "Astropi", // Add your project name
+      archetypes: [
+        {
+          path: "blog",
+          name: "Blog",
+          collection: "blog",
+          type: "blog-content",
+        },
+      ],
+}),
+```
+
+
+
+
+

docs/src/content/learn/1-getting-started/2-add-existing-project.md

@@ -0,0 +1,33 @@
+---
+slug: "getting-started/add-existing-project"
+title: "Add to an existing project"
+---
+
+Because Astropi is an Astro integration, you can easly add Astropi to your existing Astro project:
+
+```bash
+# If you use pnpm
+pnpm astro add @goulvenclech/astropi
+# If you use npm
+npx astro add @goulvenclech/astropi
+# If you use yarn
+yarn astro add @goulvenclech/astropi
+```
+
+Then, add Astropi integration to your Astro configuration file `astro.config.mjs`:
+
+```ts
+import { astropi } from "@goulvenclech/astropi";
+
+// [...]
+
+export default defineConfig({
+  // Other Astro configuration
+  integrations: [
+    astropi({
+      projectName: "Your project name", // Add your project name
+      archetypes: [],
+    }),
+  ],
+};
+```

docs/src/content/learn/1-getting-started/3-writing-content.md

@@ -0,0 +1,106 @@
+---
+slug: "getting-started/writing-content"
+title: "Writing content"
+---
+
+By default, Astropi uses markdown files to create content, here is the supported syntax:
+
+## Frontmatter
+
+Frontmatter is a block of YAML or JSON at the beginning of a file that is used to define metadata. In Astropi, frontmatter is used to define the title, date, abstract, and other metadata of a content.
+
+Here is an example of frontmatter:
+
+```md
+---
+title: "Hello world!"
+date: 2024-04-30
+abstract: "This is an example of a blog post."
+---
+```
+
+## Headers
+
+Note that the level 1 title is automatically added to the page title and the navigation.
+
+```md
+## Level 2 title
+### Level 3 title
+```
+
+## Text
+
+```md
+This is a paragraph.
+
+This is another paragraph.
+```
+
+## Emphasis
+
+```md
+*italic*
+**bold**
+```
+
+## Lists
+
+```md
+- Item 1
+- Item 2
+  - Subitem 1
+  - Subitem 2
+```
+
+## Links
+
+```md
+[Link text](https://example.com)
+```
+
+## Images
+
+```md
+![Alt text](https://example.com/image.jpg)
+```
+
+## Code
+
+```md
+`inline code`
+```
+
+## Code block
+
+```md
+\`\`\`ts
+const example = "code block";
+\`\`\`
+```
+
+## Blockquote
+
+```md
+> This is a blockquote.
+```
+
+## Horizontal rule
+
+```md
+---
+```
+
+## Line break
+
+```md
+This is a line
+This is a line break.
+```
+
+## Tables
+
+```md
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+```

docs/src/content/learn/1-getting-started/4-run-project.md

@@ -0,0 +1,60 @@
+---
+slug: "getting-started/run-project"
+title: "Run the project"
+---
+
+This are the main commands to run your Astropi project, you can run them in your terminal at the root of your project.
+
+## Development mode
+
+Run the following command to start the development server:
+
+```bash
+# If you use pnpm
+pnpm run dev
+# If you use npm
+npm run dev
+# If you use yarn
+yarn dev
+```
+
+The development server will start and you can access your project at `http://localhost:4321`.
+
+Expose your project to the network with the following command:
+
+```bash
+# If you use pnpm
+pnpm run dev --host
+# If you use npm
+npm run dev --host
+# If you use yarn
+yarn dev --host
+```
+
+You can access your project from any device on the same network at `http://your-ip:4321`.
+
+## Production mode
+
+Run the following command to build your project for production:
+
+```bash
+# If you use pnpm
+pnpm run build
+# If you use npm
+npm run build
+# If you use yarn
+yarn build
+```
+
+Then, run the following command to start the production server:
+
+```bash
+# If you use pnpm
+pnpm run preview
+# If you use npm
+npm run preview
+# If you use yarn
+yarn preview
+```
+
+The production server will start and you can access your project at `http://localhost:4321`.

docs/src/content/learn/1-getting-started/index.md

@@ -0,0 +1,4 @@
+---
+slug: "getting-started"
+title: "Getting started"
+---

docs/src/content/learn/3-create-a-blog.md → docs/src/content/learn/2-archetypes/1-content-blog.md

@@ -1,8 +1,13 @@
 ---
-title: "Create a blog"
+slug: "archetypes/content-blog"
+title: "Content blog"
 ---
 
-First, create a collection with the Blog Content zod shema. In `/src/content/config.ts` :
+A content blog is a collection based on markdown files that are displayed in the UI as a blog. This archetype is perfect for creating a blog for your project.
+
+## How to create a content blog
+
+First, create a collection with the Blog Content zod shema. In `/src/content/config.ts`:
 
 ```ts
 import { blogContentCollection } from "@goulvenclech/astropi"
@@ -17,7 +22,7 @@ Then, create an Astropi archetype based on this collection. In `docs/astro.confi
 ```ts
   archetypes: [
     {
-      path: "blog", // Dsed in the URL
+      path: "blog", // Used in the URL
       name: "Blog", // Displayed in the UI
       collection: "blog", // The collection name (see above)
       type: "blog-content", // Don't change this
@@ -37,7 +42,4 @@ abstract: "This is an example of a blog post."
 Welcome to my blog, this is my first post!
 ```
 
-Run `npm run dev` and go to `http://localhost:4321/blog/my-first-blog-post` to see your blog post.
-
 If you want to hide your blog post in production, add a `status: "draft"` field in the frontmatter. In development mode, you will still be able to access your draft through the URL, but it won't be displayed in the UI.
-