@sit-onyx/nuxt-docs 0.3.0 → 0.4.0-dev-20260304095137

package/app/components/GlobalSearch.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { Collections } from "@nuxt/content";
 import {
   iconCircleContrast,
   iconFile,
@@ -25,7 +26,7 @@ watch(isOpen, (open) => {
 const { data, status } = await useLazyAsyncData(
   () => `search-sections-${locale.value}`,
   () => {
-    const collection = `content_${locale.value}` as const;
+    const collection = `content_${locale.value}` as keyof Collections;
     return queryCollectionSearchSections(collection);
   },
 );

package/app/components/TableOfContents.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { TocLink } from "@nuxtjs/mdc";
+
+const props = defineProps<{
+  /**
+   * Table of contents links, e.g. received from `queryCollection()`.
+   */
+  links: TocLink[];
+}>();
+</script>
+
+<template>
+  <OnyxUnstableTableOfContents>
+    <OnyxUnstableTableOfContentsItem
+      v-for="link in props.links"
+      :key="link.id"
+      :link="`#${link.id}`"
+    >
+      {{ link.text }}
+
+      <template v-if="link.children?.length" #children>
+        <OnyxUnstableTableOfContentsItem
+          v-for="child in link.children"
+          :key="child.id"
+          :link="`#${child.id}`"
+        >
+          {{ child.text }}
+        </OnyxUnstableTableOfContentsItem>
+      </template>
+    </OnyxUnstableTableOfContentsItem>
+  </OnyxUnstableTableOfContents>
+</template>

package/app/composables/useCollection.ts

@@ -0,0 +1,24 @@
+import type { Collections } from "@nuxt/content";
+
+/**
+ * Composable for loading the collection content for the current route and locale.
+ */
+export const useCollection = () => {
+  const route = useRoute();
+  const { locale } = useI18n();
+
+  const slug = computed(() => {
+    const path = Array.isArray(route.params.slug)
+      ? route.params.slug.join("/")
+      : (route.params.slug ?? "");
+    return path.startsWith("/") ? path : `/${path}`;
+  });
+
+  return useAsyncData(
+    () => `page-${slug.value}-${locale.value}`,
+    () => {
+      const collection = `content_${locale.value}` as keyof Collections;
+      return queryCollection(collection).path(slug.value).first();
+    },
+  );
+};

package/app/layouts/sidebar.vue

@@ -38,6 +38,9 @@ const slots = defineSlots<{
 }>();
 
 const { navigation, previousRootItem } = await useSidebarNavigation();
+
+const collection = await useCollection();
+const toc = computed(() => collection.data.value?.body.toc?.links ?? []);
 </script>
 
 <template>
@@ -76,7 +79,13 @@ const { navigation, previousRootItem } = await useSidebarNavigation();
       </OnyxSidebar>
     </template>
 
-    <slot></slot>
+    <div class="content">
+      <div>
+        <slot></slot>
+      </div>
+
+      <TableOfContents v-if="toc.length" class="content__toc" :links="toc" />
+    </div>
 
     <template v-if="!!slots.footer" #footer>
       <slot name="footer"></slot>
@@ -89,9 +98,7 @@ const { navigation, previousRootItem } = await useSidebarNavigation();
 </template>
 
 <style lang="scss" scoped>
-.content {
-  white-space: pre-line;
-}
+@use "sit-onyx/breakpoints.scss";
 
 .sidebar {
   &__empty {
@@ -103,4 +110,29 @@ const { navigation, previousRootItem } = await useSidebarNavigation();
     justify-content: flex-start;
   }
 }
+
+.content {
+  /** Gap between page content and TOC. Equivalent to one grid column + 2 * grid gutter/gap */
+  --onyx-content-toc-gap: calc(2 * var(--onyx-grid-gutter) + (100 / var(--onyx-grid-columns)) * 1%);
+  display: grid;
+  gap: var(--onyx-content-toc-gap);
+
+  // see: https://storybook.onyx.schwarz/?path=/docs/navigation-tableofcontents--docs
+  grid-template-columns: 1fr minmax(8rem, 15rem);
+
+  &__toc {
+    position: sticky;
+    top: var(--onyx-grid-margin-vertical);
+    height: calc(100vh - var(--onyx-nav-bar-height) - 2 * var(--onyx-grid-margin-vertical));
+  }
+
+  // hide TOC on smaller screens
+  @include breakpoints.container(max, md) {
+    grid-template-columns: 1fr;
+
+    .content__toc {
+      display: none;
+    }
+  }
+}
 </style>

package/app/pages/[...slug].vue

@@ -1,23 +1,7 @@
 <script setup lang="ts">
 definePageMeta({ layout: "sidebar" });
 
-const route = useRoute();
-const { locale } = useI18n();
-
-const slug = computed(() => {
-  const path = Array.isArray(route.params.slug)
-    ? route.params.slug.join("/")
-    : (route.params.slug ?? "");
-  return path.startsWith("/") ? path : `/${path}`;
-});
-
-const collection = await useAsyncData(
-  () => `page-${slug.value}-${locale.value}`,
-  () => {
-    const collection = `content_${locale.value}` as const;
-    return queryCollection(collection).path(slug.value).first();
-  },
-);
+const collection = await useCollection();
 
 watch(
   () => collection.data.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.3.0",
+  "version": "0.4.0-dev-20260304095137",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -31,9 +31,9 @@
     "@nuxtjs/i18n": ">= 10",
     "@nuxtjs/mdc": ">= 0.20.1",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.6.0",
+    "@sit-onyx/icons": "^1.7.0",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.8.0"
+    "sit-onyx": "^1.10.0-dev-20260304095137"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -48,11 +48,11 @@
     "nuxt": "4.3.1",
     "sass-embedded": "1.97.3",
     "typescript": "5.9.3",
-    "vue": "3.5.28",
-    "@sit-onyx/icons": "^1.6.0",
+    "vue": "3.5.29",
     "@sit-onyx/nuxt": "^1.0.1",
+    "sit-onyx": "^1.10.0-dev-20260304095137",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.8.0"
+    "@sit-onyx/icons": "^1.7.0"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",