sidebar component

docs/package.json

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

packages/astropi/components/SidebarNavigation.astro

@@ -0,0 +1,61 @@
+---
+import {} from "../utils/collections-entries"
+import { getCurrentArchetype } from "../utils/archetypes"
+import { getCollectionEntries } from "../utils/collections-entries"
+import HeaderNavLink from "./header/HeaderNavLink.astro"
+/**
+ * Sidebar navigation, used to navigate between pages in the same collection.
+ * Pages are fetched from the collection specified in the archetype, and grouped
+ * by categories (folders in the collection, if any).
+ */
+const archetype = getCurrentArchetype(Astro.url)
+const allEntries = await getCollectionEntries(archetype.collection)
+// Check if a link is the current page, used to apply the active class
+const isCurrentPage = (path: string) => {
+  const currentPage = Astro.url.pathname.split("/")[2]
+  return currentPage === path
+}
+---
+
+<aside class="sidebar">
+  <h3>Getting started</h3>
+  {
+    allEntries.map((doc) => (
+      <HeaderNavLink
+        url={`/${archetype.path}/${doc.slug}`}
+        isCurrent={isCurrentPage(doc.slug)}
+      >
+        {doc.data.title}
+      </HeaderNavLink>
+    ))
+  }
+</aside>
+<style>
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    margin: 1.5rem;
+    width: 250px;
+    font-size: 0.9rem;
+  }
+  .sidebar a {
+    display: flex;
+    padding: 0.25rem 0.5rem;
+    gap: 0.25rem;
+    align-items: center;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    text-decoration-line: none;
+  }
+  .sidebar a:hover {
+    background-color: var(--color-lighter);
+  }
+  .sidebar a:active {
+    color: var(--color-primary);
+  }
+  .sidebar h3 {
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+</style>

packages/astropi/pages/[...docs-content].astro

@@ -1,43 +1,21 @@
 ---
-import { getCollectionTypeEntries } from "../utils/collections-entries"
+import {} from "../utils/collections-entries"
 import Layout from "../layouts/Layout.astro"
-import HeaderNavLink from "../components/header/HeaderNavLink.astro"
+import SidebarNavigation from "../components/SidebarNavigation.astro"
+import { getCollectionTypeEntries } from "../utils/collections-entries"
 /**
  * this generate the pages inside blog's collections.
  */
 export async function getStaticPaths() {
   return getCollectionTypeEntries("docs-content")
 }
 
-// Check if a path matches the current page
-const isCurrentPage = (path: string) => {
-  const currentPage = Astro.url.pathname.split("/")[2]
-  return currentPage === path
-}
-
-const allDocs = await getCollectionTypeEntries("docs-content")
 const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
 <Layout title={entry.data.title} description={entry.data.description}>
-  <aside class="sidebar">
-    <select>
-      <option value="en">v1.2.0</option>
-      <option value="es">v0.15.4</option></select
-    >
-    <h3>Getting started</h3>
-    {
-      allDocs.map((doc) => (
-        <HeaderNavLink
-          url={doc.params.slug}
-          isCurrent={isCurrentPage(doc.params.slug)}
-        >
-          {doc.props.entry.data.title}
-        </HeaderNavLink>
-      ))
-    }
-  </aside>
+  <SidebarNavigation />
   <main>
     <section>
       <h1>{entry.data.title}</h1>
@@ -54,39 +32,5 @@ const { Content } = await entry.render()
     main {
       width: 70ch;
     }
-    .sidebar {
-      display: flex;
-      flex-direction: column;
-      margin: 1.5rem;
-      width: 250px;
-      font-size: 0.9rem;
-    }
-    .sidebar a {
-      display: flex;
-      padding: 0.25rem 0.5rem;
-      gap: 0.25rem;
-      align-items: center;
-      border-radius: 0.5rem;
-      border: 1px solid transparent;
-      text-decoration-line: none;
-    }
-    .sidebar a:hover {
-      background-color: var(--color-lighter);
-    }
-    .sidebar a:active {
-      color: var(--color-primary);
-    }
-    .sidebar h3 {
-      font-size: 0.9rem;
-      margin-left: 0.5rem;
-      margin-bottom: 0.25rem;
-    }
-    .sidebar select {
-      margin-bottom: 1rem;
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      border: 1px solid var(--color-light);
-      background-color: white;
-    }
   </style>
 </Layout>

packages/astropi/pages/docs-content.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import SidebarNavigation from "../components/SidebarNavigation.astro"
 import { getCurrentArchetype } from "../utils/archetypes"
 import { getCollectionEntries } from "../utils/collections-entries"
 /**
@@ -11,6 +12,7 @@ const allDocsEntries = await getCollectionEntries(archetype.collection)
 ---
 
 <Layout title={archetype?.name || ""} description={archetype?.name || ""}>
+  <SidebarNavigation allEntries={allDocsEntries} />
   <main>
     <section>
       <h1>{archetype?.name}</h1>

packages/astropi/utils/collections-entries.ts

@@ -2,7 +2,11 @@
  * COLLECTIONS ENTRIES UTILS
  * This module contains functions to generate or get collections entries.
  */
-import { getCollection } from "astro:content"
+import {
+  getCollection,
+  type CollectionEntry,
+  type CollectionKey,
+} from "astro:content"
 import { userConfig } from "virtual:astropi-user-config"
 
 /**
@@ -42,7 +46,9 @@ export async function getCollectionTypeEntries(type: string) {
  * For a given collection, get all the published collection entries.
  * @param collection - The collection to get the entries from
  */
-export async function getCollectionEntries(collection: string) {
+export async function getCollectionEntries(
+  collection: string
+): Promise<Array<CollectionEntry<CollectionKey>>> {
   // Get the collection archetypes created by the user
   const { archetypes } = userConfig
   // Get every Astropi collections from the archetypes