From 5ccce34ba54e7db054fd1c7d48131df503537c98 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 10 Jan 2024 09:58:01 +0100
Subject: [PATCH] docs: move sidebar for npm packages (#97)

## Description

Move sidebar items for packages below components so that users
navigating with the next buttons come across the components before the
other npm packages. I also removed the dedicated sidebar for the npm
packages and directly added them to the "regular" sidebar to reduce
confusions while navigating our documentation.
---
 apps/docs/src/.vitepress/config.ts | 83 ++++++++++--------------------
 apps/docs/src/packages/index.md    | 19 -------
 2 files changed, 26 insertions(+), 76 deletions(-)
 delete mode 100644 apps/docs/src/packages/index.md

diff --git a/apps/docs/src/.vitepress/config.ts b/apps/docs/src/.vitepress/config.ts
index 14e26e47eb..dc05634b86 100644
--- a/apps/docs/src/.vitepress/config.ts
+++ b/apps/docs/src/.vitepress/config.ts
@@ -29,62 +29,31 @@ export default defineConfig({
       { text: "Q&A", link: "https://github.com/schwarzit/onyx/discussions/categories/q-a" },
     ],
     socialLinks: [{ icon: "github", link: packageJson.repository.url }],
-    sidebar: {
-      // default sidebar items
-      "/": [
-        {
-          text: "Introduction",
-          collapsed: false,
-          items: [
-            { text: "Getting Started", link: "/getting-started" },
-            { text: "The Team", link: "/team" },
-          ],
-        },
-        {
-          text: "Advanced",
-          collapsed: false,
-          items: [
-            {
-              text: "Additional packages",
-              link: "/packages/",
-            },
-          ],
-        },
-        {
-          text: "Components",
-          base: "/components",
-          collapsed: false,
-          items: getComponents().map((name) => ({ text: name, link: `/${name}` })),
-        },
-      ],
-      // standalone sidebar for documentation about our additional packages
-      "/packages/": [
-        {
-          text: "Introduction",
-          items: [
-            { text: "Back to Onyx", link: "/getting-started" },
-            { text: "About", link: "/packages/" },
-          ],
-        },
-        {
-          text: "Additional packages",
-          base: "/packages",
-          items: [
-            {
-              text: "@sit-onyx/figma-utils",
-              link: "/figma-utils",
-            },
-            {
-              text: "@sit-onyx/headless",
-              link: "/headless",
-            },
-            {
-              text: "@sit-onyx/storybook-utils",
-              link: "/storybook-utils",
-            },
-          ],
-        },
-      ],
-    },
+    sidebar: [
+      {
+        text: "Introduction",
+        collapsed: false,
+        items: [
+          { text: "Getting Started", link: "/getting-started" },
+          { text: "The Team", link: "/team" },
+        ],
+      },
+      {
+        text: "Components",
+        base: "/components",
+        collapsed: false,
+        items: getComponents().map((name) => ({ text: name, link: `/${name}` })),
+      },
+      {
+        text: "Other Onyx npm packages",
+        base: "/packages",
+        collapsed: false,
+        items: [
+          { text: "Figma utilities", link: "/figma-utils" },
+          { text: "Headless composables", link: "/headless" },
+          { text: "Storybook utilities", link: "/storybook-utils" },
+        ],
+      },
+    ],
   },
 });
diff --git a/apps/docs/src/packages/index.md b/apps/docs/src/packages/index.md
deleted file mode 100644
index 644408cd0a..0000000000
--- a/apps/docs/src/packages/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import figmaUtilsPackageJson from "../../../../packages/figma-utils/package.json";
-import headlessPackageJson from "../../../../packages/headless/package.json";
-import storybookUtilsPackageJson from "../../../../packages/storybook-utils/package.json";
-
-// make sure to also add a sidebar item in ../.vitepress/config.ts and a file matching the package name in this folder
-// to make the link below work when adding another package to this list.
-const packages = [figmaUtilsPackageJson, headlessPackageJson, storybookUtilsPackageJson];
-</script>
-
-# Additional packages
-
-Besides the [`sit-onyx`](/getting-started) package that contains our Vue.js components, we also offer additional npm packages that you might find helpful such as:
-
-<ul>
-  <li v-for="p in packages" :key="p.name">
-    <a :href="`/packages/${p.name.replace('@sit-onyx/', '')}`">{{ p.name }}</a>: {{ p.description }}
-  </li>
-</ul>