@sit-onyx/nuxt-docs 1.0.0-beta.13 → 1.0.0-beta.130

package/{app.vue → app/app.vue}

@@ -1,5 +1,5 @@
 <template>
-  <OnyxAppLayout class="onyx-grid-max-md onyx-grid-center">
+  <OnyxAppLayout class="onyx-grid-max-lg onyx-grid-center">
     <template #navBar>
       <NavBar />
     </template>

package/app/components/ColorSchemeSwitch.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { iconCircleContrast } from "@sit-onyx/icons";
+import type { ColorSchemeValue } from "sit-onyx";
+
+const colorMode = useColorMode();
+const isColorSchemeDialogOpen = ref(false);
+
+const colorScheme = computed({
+  get: () => {
+    return colorMode.preference === "system" ? "auto" : (colorMode.preference as ColorSchemeValue);
+  },
+  set: (newValue) => {
+    colorMode.preference = newValue === "auto" ? "system" : newValue;
+  },
+});
+</script>
+
+<template>
+  <OnyxIconButton
+    label="Toggle color scheme"
+    :icon="iconCircleContrast"
+    color="neutral"
+    @click="isColorSchemeDialogOpen = true"
+  />
+
+  <OnyxColorSchemeDialog v-model="colorScheme" v-model:open="isColorSchemeDialogOpen" />
+</template>

package/app/components/LocaleSwitch.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { iconTranslate } from "@sit-onyx/icons";
+import type { SelectDialogOption } from "sit-onyx";
+
+const { locale, setLocale, locales } = useI18n();
+const isLanguageDialogOpen = ref(false);
+
+const languageOptions = computed(() => {
+  return locales.value.map((locale) => {
+    return {
+      label: locale.name ?? locale.code,
+      value: locale.code,
+    } satisfies SelectDialogOption;
+  });
+});
+
+const currentLocaleLabel = computed(() => {
+  // using "!" here is safe since splitting a string will always return at least one string in the returned array
+  return locale.value.split("-")[0]!.split("_")[0]!.toUpperCase();
+});
+</script>
+
+<template>
+  <OnyxButton
+    :label="currentLocaleLabel"
+    :icon="iconTranslate"
+    color="neutral"
+    mode="plain"
+    @click="isLanguageDialogOpen = true"
+  />
+
+  <OnyxSelectDialog
+    v-model:open="isLanguageDialogOpen"
+    :label="$t('onyx.languageSelect.headline')"
+    :model-value="locale"
+    :options="languageOptions"
+    @update:model-value="setLocale($event)"
+  >
+    <template #description> {{ $t("onyx.languageSelect.subtitle") }} </template>
+  </OnyxSelectDialog>
+</template>

package/app/components/NavBar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { OnyxNavBarProps, OnyxNavBarSlots } from "sit-onyx";
+import ColorSchemeSwitch from "./ColorSchemeSwitch.vue";
+
+const props = withDefaults(defineProps<OnyxNavBarProps>(), {
+  appName: "Documentation",
+  withBackButton: true,
+  // Vue defaults booleans to false so this explicit "undefined" is needed to correctly set the default breakpoint
+  mobile: undefined,
+});
+
+const slots = defineSlots<OnyxNavBarSlots>();
+
+const router = useRouter();
+const { locales } = useI18n();
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <OnyxNavBar
+    v-bind="props"
+    :app-area="props.appArea ?? { link: localePath('/') }"
+    @navigate-back="router.back"
+  >
+    <!-- eslint-disable vue/require-explicit-slots -- slots type is imported from onyx but eslint does not seem to be able to handle this -->
+    <template v-if="slots.appArea" #appArea>
+      <slot name="appArea"></slot>
+    </template>
+
+    <slot></slot>
+
+    <template v-if="slots.globalContextArea" #globalContextArea>
+      <slot name="globalContextArea"></slot>
+    </template>
+
+    <template v-if="slots.mobileActivePage" #mobileActivePage>
+      <slot name="mobileActivePage"></slot>
+    </template>
+
+    <template #contextArea>
+      <slot name="contextArea">
+        <!-- using lazy here so the locale switch code is not loaded when only one locale exists -->
+        <LazyLocaleSwitch v-if="locales.length > 1" />
+        <ColorSchemeSwitch />
+      </slot>
+    </template>
+    <!-- eslint-enable vue/require-explicit-slots -->
+  </OnyxNavBar>
+</template>

package/app/components/SidebarItem.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { ContentNavigationItem } from "@nuxt/content";
+
+const props = defineProps<{
+  item: ContentNavigationItem;
+}>();
+
+const localePath = useLocalePath();
+
+const isAccordionOpen = ref(true);
+
+const children = computed(() => {
+  // filter out children that are directories
+  return props.item.children?.filter((child) => child.page !== false);
+});
+</script>
+
+<template>
+  <OnyxSidebarItem v-if="!children" class="sidebar-item" :link="localePath(props.item.path)">
+    {{ props.item.title }}
+  </OnyxSidebarItem>
+
+  <OnyxAccordion
+    v-else
+    :model-value="isAccordionOpen ? [localePath(item.path)] : undefined"
+    class="sidebar-accordion"
+    type="nested-large"
+    @update:model-value="isAccordionOpen = !isAccordionOpen"
+  >
+    <OnyxAccordionItem :value="localePath(item.path)">
+      <template #header>{{ props.item.title }}</template>
+
+      <div class="sidebar-item__children">
+        <OnyxSidebarItem
+          v-for="child in children"
+          :key="localePath(child.path)"
+          :link="localePath(child.path)"
+        >
+          {{ child.title }}
+        </OnyxSidebarItem>
+      </div>
+    </OnyxAccordionItem>
+  </OnyxAccordion>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-item {
+  margin: var(--onyx-density-2xs) var(--onyx-density-xs);
+
+  &:first-of-type {
+    margin-top: var(--onyx-density-xs);
+  }
+
+  &__children {
+    display: flex;
+    flex-direction: column;
+    gap: var(--onyx-density-2xs);
+  }
+}
+
+.sidebar-accordion {
+  > .onyx-accordion-item {
+    :deep(> .onyx-accordion-item__panel) {
+      padding-top: 0;
+    }
+  }
+}
+</style>

package/{components → app/components}/content/ProseH1.vue

@@ -13,3 +13,9 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-bottom: var(--onyx-density-lg);
+}
+</style>

package/{components → app/components}/content/ProseH2.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/{components → app/components}/content/ProseH3.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-2xs);
+}
+</style>

package/{components → app/components}/content/ProseH4.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/{components → app/components}/content/ProseH5.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/{components → app/components}/content/ProseH6.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/app/components/content/ProseOl.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <ol>
+    <slot></slot>
+  </ol>
+</template>
+
+<style lang="scss" scoped>
+ol {
+  margin-top: var(--onyx-density-xs);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/app/components/content/ProseUl.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <ul>
+    <slot></slot>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  margin-top: var(--onyx-density-xs);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/app/error.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+import App from "./app.vue";
+
+const props = defineProps<{
+  error: NuxtError;
+}>();
+
+defineSlots<{
+  /**
+   * Slot to override the default "Back to home" action(s).
+   *
+   * @params clearError - Function to clear the error and redirect to the home page
+   */
+  actions?(props: { clearError: typeof _clearError }): unknown;
+  /**
+   * Slot to override the error details section.
+   * By default, an accordion will be displayed that shows the technical error details.
+   */
+  details?(): unknown;
+}>();
+
+const localePath = useLocalePath();
+
+const _clearError = () => clearError({ redirect: localePath("/") });
+</script>
+
+<template>
+  <App>
+    <div class="error">
+      <OnyxErrorSVG class="error__image" />
+
+      <div class="error__headline">
+        <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
+
+        <slot name="actions" :clear-error="_clearError">
+          <OnyxButton label="Back to home" @click="_clearError" />
+        </slot>
+      </div>
+
+      <slot name="details">
+        <OnyxAccordion>
+          <OnyxAccordionItem value="details">
+            <template #header>Technical error details</template>
+            <pre class="error__details">{{ JSON.stringify(props.error, null, 2) }}</pre>
+          </OnyxAccordionItem>
+        </OnyxAccordion>
+      </slot>
+    </div>
+  </App>
+</template>
+
+<style lang="scss" scoped>
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--onyx-density-3xl);
+
+  &__image {
+    width: 32rem;
+    display: block;
+  }
+
+  &__headline {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--onyx-density-md);
+  }
+
+  &__details {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-family: var(--onyx-font-family-mono);
+  }
+}
+</style>

package/app/layouts/default.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineSlots<{
+  /**
+   * Main page content.
+   */
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <OnyxPageLayout>
+    <slot></slot>
+  </OnyxPageLayout>
+</template>

package/app/layouts/sidebar.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { ContentNavigationItem } from "@nuxt/content";
+import { iconSearch } from "@sit-onyx/icons";
+import { normalizedIncludes, type OnyxPageLayoutProps, type OnyxSidebarProps } from "sit-onyx";
+
+const props = defineProps<
+  OnyxPageLayoutProps & {
+    sidebar?: OnyxSidebarProps;
+  }
+>();
+
+const slots = defineSlots<{
+  /**
+   * Main page content.
+   */
+  default(): unknown;
+  /**
+   * Page footer content.
+   */
+  footer?(): unknown;
+  /**
+   * Optional right sidebar.
+   */
+  sidebarRight?(): unknown;
+  /**
+   * Optionally override the main sidebar body content.
+   */
+  sidebarBody?(props: { items: ContentNavigationItem[] }): unknown;
+  /**
+   * Optionally override the sidebar header content.
+   */
+  sidebarHeader?(): unknown;
+  /**
+   * Sidebar footer content.
+   */
+  sidebarFooter?(): unknown;
+}>();
+
+const { locale } = useI18n();
+const localePath = useLocalePath();
+
+const navigation = await useAsyncData(
+  () => `navigation-${locale.value}`,
+  () => {
+    const collection = `content_${locale.value}` as const;
+    return queryCollectionNavigation(collection);
+  },
+);
+
+const searchTerm = ref("");
+
+const allSidebarItems = computed(() => navigation.data.value ?? []);
+
+const filterItem = (
+  item: ContentNavigationItem,
+  search: string,
+): ContentNavigationItem | undefined => {
+  if (!item.children) {
+    return normalizedIncludes(item.title, search) ? item : undefined;
+  }
+
+  const children = item.children
+    .map((child) => filterItem(child, search))
+    .filter((child) => child != undefined);
+
+  if (!children.length) return undefined;
+  return { ...item, children };
+};
+
+const filteredSidebarItems = computed(() => {
+  if (!searchTerm.value) return allSidebarItems.value;
+
+  const items = allSidebarItems.value
+    .map((item) => filterItem(item, searchTerm.value))
+    .filter((item) => item != undefined);
+
+  return items;
+});
+</script>
+
+<template>
+  <OnyxPageLayout v-bind="props">
+    <template #sidebar>
+      <OnyxSidebar
+        class="sidebar"
+        v-bind="props.sidebar"
+        :label="$t('onyx.navigation.navigationHeadline')"
+      >
+        <template #header>
+          <slot name="sidebarHeader">
+            <OnyxInput
+              v-model="searchTerm"
+              :label="$t('onyx.select.searchPlaceholder')"
+              hide-label
+              :placeholder="$t('onyx.select.searchPlaceholder')"
+            >
+              <template #leading>
+                <OnyxIcon :icon="iconSearch" />
+              </template>
+            </OnyxInput>
+          </slot>
+        </template>
+
+        <slot name="sidebarBody" :items="filteredSidebarItems">
+          <SidebarItem
+            v-for="item in filteredSidebarItems"
+            :key="localePath(item.path)"
+            :item="item"
+          />
+
+          <OnyxEmpty v-if="!filteredSidebarItems.length" class="sidebar__empty">
+            {{ $t("onyx.select.empty") }}
+          </OnyxEmpty>
+        </slot>
+
+        <template v-if="!!slots.sidebarFooter" #footer>
+          <slot name="sidebarFooter"></slot>
+        </template>
+      </OnyxSidebar>
+    </template>
+
+    <slot></slot>
+
+    <template v-if="!!slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+
+    <template v-if="!!slots.sidebarRight" #sidebarRight>
+      <slot name="sidebarRight"></slot>
+    </template>
+  </OnyxPageLayout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  white-space: pre-line;
+}
+
+.sidebar {
+  &__empty {
+    max-width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,46 @@
+<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();
+  },
+);
+
+watch(
+  () => collection.data.value,
+  (data) => {
+    // if data is "null", the page content was not found. "undefined" means it is not loaded yet
+    if (data !== null) return;
+    throw showError({
+      message: "Page not found",
+      statusCode: 404,
+    });
+  },
+  { immediate: true },
+);
+
+const data = computed(() => collection.data.value);
+
+useSeoMeta({
+  title: computed(() => collection.data.value?.seo.title),
+  description: computed(() => collection.data.value?.seo.description),
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if  -- the v-if here is theoretically not needed because we throw above it ifs undefined so the user will be redirected to the error page. However, there is still a console warning so we include the v-if here to prevent it. -->
+<template>
+  <ContentRenderer v-if="data" :value="data" />
+</template>

package/content.config.ts

@@ -1,10 +1,16 @@
 import { defineCollection, defineContentConfig } from "@nuxt/content";
+import path from "node:path";
 
 export default defineContentConfig({
   collections: {
-    content: defineCollection({
+    content_en: defineCollection({
       type: "page",
-      source: "**/*.md",
+      source: [
+        // include files from content folder of the extending app
+        { cwd: path.resolve("content"), include: "en/**", prefix: "" },
+        // include files from playground (mainly needed for this monorepo)
+        { cwd: path.resolve("playground/content"), include: "en/**", prefix: "" },
+      ],
     }),
   },
 });

package/nuxt.config.ts

@@ -1,11 +1,23 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  $meta: {
+    // the name is used to generate import aliases so the user can easily import
+    // any component or file from this layer from "#layers/onyx"
+    // see: https://nuxt.com/docs/4.x/guide/going-further/layers#named-layer-aliases
+    name: "onyx",
+  },
   devtools: { enabled: true },
   compatibilityDate: "2025-01-20",
   typescript: { typeCheck: "build" },
-  modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
+  modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image", "@nuxtjs/i18n"],
   css: ["@fontsource-variable/source-code-pro", "@fontsource-variable/source-sans-3"],
   colorMode: {
     classSuffix: "",
   },
+  i18n: {
+    defaultLocale: "en",
+    // we explicitly don't define any default locales here so the project is fully in charge if defining which locales to use.
+    // Otherwise if we would e.g. add en here, the project would always be forced to register en, even if it does not plan to add en translations
+    // which could conflict with e.g. "const { locales } = useI18n()" to render a language switch which would always include en then
+  },
 });

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "type": "module",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.130",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
+  "type": "module",
+  "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/schwarzit/onyx",
+    "url": "https://github.com/SchwarzIT/onyx",
     "directory": "packages/nuxt-docs"
   },
   "bugs": {
-    "url": "https://github.com/schwarzit/onyx/issues"
+    "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "main": "./nuxt.config.ts",
   "files": [
-    "components",
-    "composables",
-    "layouts",
-    "pages",
-    "*.ts",
-    "*.vue",
-    "*.json"
+    "app",
+    "content.config.ts",
+    "nuxt.config.ts"
   ],
   "peerDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -28,29 +28,32 @@
     "@nuxt/content": ">= 3",
     "@nuxt/image": ">= 1",
     "@nuxtjs/color-mode": ">= 3",
+    "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.0.0-beta.15",
-    "@sit-onyx/nuxt": "^1.0.0-beta.202",
-    "sit-onyx": "^1.0.0-beta.200"
+    "@sit-onyx/icons": "^1.0.0-beta.26",
+    "@sit-onyx/nuxt": "^1.0.0-beta.313",
+    "sit-onyx": "^1.0.0-beta.328"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
     "@fontsource-variable/source-sans-3": ">= 5",
     "@nuxt/content": ">= 3",
     "@nuxt/image": ">= 1",
-    "@nuxt/test-utils": "^3.17.2",
+    "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/color-mode": ">= 3",
-    "nuxt": "^3.16.2",
-    "sass-embedded": "1.86.3",
-    "typescript": "5.8.3",
-    "vue": "3.5.13",
-    "@sit-onyx/shared": "^1.0.0-beta.2",
-    "@sit-onyx/nuxt": "^1.0.0-beta.202",
-    "@sit-onyx/icons": "^1.0.0-beta.15",
-    "sit-onyx": "^1.0.0-beta.200"
+    "@playwright/experimental-ct-vue": "1.55.0",
+    "@playwright/test": "1.55.0",
+    "nuxt": "^4.0.3",
+    "sass-embedded": "1.91.0",
+    "typescript": "5.9.2",
+    "vue": "3.5.20",
+    "@sit-onyx/icons": "^1.0.0-beta.26",
+    "@sit-onyx/nuxt": "^1.0.0-beta.313",
+    "@sit-onyx/shared": "^1.0.0-beta.4",
+    "sit-onyx": "^1.0.0-beta.328"
   },
   "scripts": {
-    "dev": "nuxi dev playground",
+    "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:prepare": "nuxt prepare playground",
     "build": "nuxt build playground",
     "generate": "nuxt generate playground",

package/app.config.ts

@@ -1,32 +0,0 @@
-import type { OnyxNavBarProps, OnyxNavItemProps } from "sit-onyx";
-
-// TYPES
-declare module "@nuxt/schema" {
-  interface AppConfigInput {
-    onyxDocs?: OnyxAppConfig;
-  }
-
-  interface AppConfig {
-    onyxDocs: OnyxAppConfig & typeof defaultAppConfig;
-  }
-}
-
-export type OnyxAppConfig = {
-  nav?: Partial<OnyxNavBarProps> & {
-    items?: NavItem[];
-  };
-};
-
-export type NavItem = OnyxNavItemProps & { children?: NavItem[] };
-
-// CONFIG
-const defaultAppConfig = {
-  nav: {
-    appName: "Documentation",
-    withBackButton: true,
-  },
-} satisfies OnyxAppConfig;
-
-export default defineAppConfig({
-  onyxDocs: defaultAppConfig,
-});

package/components/ErrorSVG.vue

@@ -1,211 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  title: string;
-}>();
-</script>
-
-<template>
-  <svg
-    class="error__image"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1119.60911 699"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    role="img"
-  >
-    <title>{{ props.title }}</title>
-    <circle cx="292.60911" cy="213" r="213" fill="var(--onyx-color-base-neutral-200)" />
-    <path
-      d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <path
-      d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-base-primary-500)"
-    />
-    <path
-      d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-base-primary-500)"
-    />
-    <path
-      d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="var(--onyx-color-steel-800)" />
-    <ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
-    <ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="var(--onyx-color-steel-800)" />
-    <ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="var(--onyx-color-steel-800)" />
-    <path
-      d="M494,726.5c90,23,263-30,282-90"
-      transform="translate(-31.39089 -100.5)"
-      fill="none"
-      stroke="var(--onyx-color-steel-700)"
-      stroke-miterlimit="10"
-      stroke-width="2"
-    />
-    <path
-      d="M341,359.5s130-36,138,80-107,149-17,172"
-      transform="translate(-31.39089 -100.5)"
-      fill="none"
-      stroke="var(--onyx-color-steel-700)"
-      stroke-miterlimit="10"
-      stroke-width="2"
-    />
-    <path
-      d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
-      transform="translate(-31.39089 -100.5)"
-      fill="none"
-      stroke="var(--onyx-color-steel-700)"
-      stroke-miterlimit="10"
-      stroke-width="2"
-    />
-    <path
-      d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <path
-      d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
-      transform="translate(-31.39089 -100.5)"
-      opacity="0.1"
-    />
-    <rect
-      x="578.43291"
-      y="212.68859"
-      width="513.25314"
-      height="357.51989"
-      rx="18.04568"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <rect
-      x="595.70294"
-      y="231.77652"
-      width="478.71308"
-      height="267.83694"
-      fill="var(--onyx-color-steel-800)"
-    />
-    <circle cx="835.05948" cy="223.29299" r="3.02983" fill="var(--onyx-color-steel-200)" />
-    <path
-      d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <polygon
-      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <path
-      d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <path
-      d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-      transform="translate(-31.39089 -100.5)"
-      opacity="0.1"
-    />
-    <ellipse
-      cx="1066.53846"
-      cy="654.13477"
-      rx="7.87756"
-      ry="2.42386"
-      fill="var(--onyx-color-steel-200)"
-    />
-    <circle cx="835.05948" cy="545.66686" r="11.51335" fill="var(--onyx-color-steel-200)" />
-    <polygon
-      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
-      opacity="0.1"
-    />
-    <rect x="108.60911" y="159" width="208" height="242" fill="var(--onyx-color-steel-900)" />
-    <rect x="87.60911" y="135" width="250" height="86" fill="var(--onyx-color-steel-800)" />
-    <rect x="87.60911" y="237" width="250" height="86" fill="var(--onyx-color-steel-800)" />
-    <rect x="87.60911" y="339" width="250" height="86" fill="var(--onyx-color-steel-800)" />
-    <rect
-      x="271.60911"
-      y="150"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.4"
-    />
-    <rect
-      x="294.60911"
-      y="150"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.8"
-    />
-    <rect x="317.60911" y="150" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
-    <rect
-      x="271.60911"
-      y="251"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.4"
-    />
-    <rect
-      x="294.60911"
-      y="251"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.8"
-    />
-    <rect x="317.60911" y="251" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
-    <rect
-      x="271.60911"
-      y="352"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.4"
-    />
-    <rect
-      x="294.60911"
-      y="352"
-      width="16"
-      height="16"
-      fill="var(--onyx-color-base-primary-500)"
-      opacity="0.8"
-    />
-    <rect x="317.60911" y="352" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
-    <circle cx="316.60911" cy="538" r="79" fill="var(--onyx-color-steel-900)" />
-    <rect x="280.60911" y="600" width="24" height="43" fill="var(--onyx-color-steel-900)" />
-    <rect x="328.60911" y="600" width="24" height="43" fill="var(--onyx-color-steel-900)" />
-    <ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="var(--onyx-color-steel-900)" />
-    <ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="var(--onyx-color-steel-900)" />
-    <circle cx="318.60911" cy="518" r="27" fill="#fff" />
-    <circle cx="318.60911" cy="518" r="9" fill="var(--onyx-color-steel-800)" />
-    <path
-      d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
-      transform="translate(-31.39089 -100.5)"
-      fill="var(--onyx-color-base-primary-500)"
-    />
-    <ellipse
-      cx="417.21511"
-      cy="611.34365"
-      rx="39.5"
-      ry="12.40027"
-      transform="translate(-238.28665 112.98044) rotate(-23.17116)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <ellipse
-      cx="269.21511"
-      cy="664.34365"
-      rx="39.5"
-      ry="12.40027"
-      transform="translate(-271.07969 59.02084) rotate(-23.17116)"
-      fill="var(--onyx-color-steel-900)"
-    />
-    <path
-      d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
-      transform="translate(-31.39089 -100.5)"
-      fill="#fff"
-    />
-  </svg>
-</template>

package/components/NavBar.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import circleContrast from "@sit-onyx/icons/circle-contrast.svg?raw";
-import { extractLinkProps, type ColorSchemeValue } from "sit-onyx";
-
-const { onyxDocs } = useAppConfig();
-const router = useRouter();
-const colorMode = useColorMode();
-
-const isColorSchemeDialogOpen = ref(false);
-
-const colorScheme = computed({
-  get: () => {
-    return colorMode.preference === "system" ? "auto" : (colorMode.preference as ColorSchemeValue);
-  },
-  set: (newValue) => {
-    colorMode.preference = newValue === "auto" ? "system" : newValue;
-  },
-});
-</script>
-
-<template>
-  <OnyxNavBar v-bind="onyxDocs.nav" @navigate-back="router.back">
-    <NavItem
-      v-for="item in onyxDocs.nav?.items"
-      :key="extractLinkProps(item.link ?? '').href"
-      v-bind="item"
-    />
-
-    <template #contextArea>
-      <OnyxIconButton
-        label="Toggle color scheme"
-        :icon="circleContrast"
-        color="neutral"
-        @click="isColorSchemeDialogOpen = true"
-      />
-    </template>
-
-    <OnyxColorSchemeDialog
-      v-model="colorScheme"
-      :open="isColorSchemeDialogOpen"
-      @close="isColorSchemeDialogOpen = false"
-    />
-  </OnyxNavBar>
-</template>

package/components/NavItem.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { NavItem } from "../app.config";
-
-const props = defineProps<NavItem>();
-
-/**
- * Same as `props` but without the `children` property to prevent console warnings when using `v-bind`.
- */
-const navItemProps = computed(() => {
-  const { children: _, ...rest } = props;
-  return rest;
-});
-</script>
-
-<template>
-  <OnyxNavItem v-bind="navItemProps">
-    <template v-if="props.children?.length" #children>
-      <NavItem v-for="child in props.children" :key="child.label" v-bind="child" />
-    </template>
-  </OnyxNavItem>
-</template>

package/error.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { NuxtError } from "#app";
-import App from "./app.vue";
-
-const props = defineProps<{
-  error: NuxtError;
-}>();
-
-const handleError = () => clearError({ redirect: "/" });
-</script>
-
-<template>
-  <App>
-    <div class="error">
-      <ErrorSVG :title="props.error.message" />
-
-      <div class="error__headline">
-        <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
-        <OnyxButton label="Back to home" @click="handleError" />
-      </div>
-
-      <OnyxAccordion>
-        <OnyxAccordionItem value="details">
-          <template #header>Technical error details</template>
-          <pre class="error__details">{{ props.error }}</pre>
-        </OnyxAccordionItem>
-      </OnyxAccordion>
-    </div>
-  </App>
-</template>
-
-<style lang="scss" scoped>
-.error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--onyx-density-3xl);
-
-  &__image {
-    width: 32rem;
-    display: block;
-  }
-
-  &__headline {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--onyx-density-md);
-  }
-
-  &__details {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    font-family: var(--onyx-font-family-mono);
-  }
-}
-</style>

package/layouts/default.vue

@@ -1,7 +0,0 @@
-<template>
-  <OnyxPageLayout>
-    <div class="onyx-grid-container">
-      <slot />
-    </div>
-  </OnyxPageLayout>
-</template>

package/pages/[...path].vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const route = useRoute();
-const collection = await useAsyncData(() => queryCollection("content").path(route.path).first());
-
-if (!collection.data.value) {
-  throw createError({
-    message: "Page not found",
-    statusCode: 404,
-  });
-}
-
-const data = toRef(() => collection.data.value!);
-useSeoMeta({ ...data.value.seo });
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if  -- the v-if here is theoretically not needed because we throw above it ifs undefined so the user will be redirected to the error page. However, there is still a console warning so we include the v-if here to prevent it. -->
-<template>
-  <ContentRenderer v-if="data" :value="data" />
-</template>

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./playground/.nuxt/tsconfig.json"
-}