@sit-onyx/nuxt-docs 0.5.0 → 0.5.1-dev-20260401171305

package/app/components/PackageManagerCodeTabs.vue

@@ -42,6 +42,6 @@ const tabs = computed(() => {
 
 <style lang="scss" scoped>
 .tabs {
-  margin-block: var(--onyx-docs-density-paragraph);
+  margin-block: var(--onyx-markdown-renderer-margin-block);
 }
 </style>

package/app/components/content/InfoCard.global.vue

@@ -24,6 +24,6 @@ const { icon: iconContent } = useIcon(
 
 <style lang="scss" scoped>
 .card {
-  margin-block: var(--onyx-docs-density-paragraph);
+  margin-block: var(--onyx-markdown-renderer-margin-block);
 }
 </style>

package/nuxt.config.ts

@@ -1,8 +1,3 @@
-import { createResolver } from "nuxt/kit";
-
-// using a resolver here so path are correctly resolved when extending this app as Nuxt layer
-const { resolve } = createResolver(import.meta.url);
-
 /**
  * @see https://nuxt.com/docs/api/configuration/nuxt-config
  */
@@ -17,23 +12,11 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-01-20",
   typescript: { typeCheck: "build" },
   modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxtjs/i18n"],
-  css: [
-    "@fontsource-variable/source-code-pro",
-    "@fontsource-variable/source-sans-3",
-    resolve("./app/assets/styles/index.scss"),
-  ],
+  css: ["@fontsource-variable/source-code-pro", "@fontsource-variable/source-sans-3"],
   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
   },
-  mdc: {
-    components: {
-      map: {
-        br: "ProseBr",
-        hr: "ProseHr",
-      },
-    },
-  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.5.0",
+  "version": "0.5.1-dev-20260401171305",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -22,6 +22,9 @@
     "content.config.ts",
     "nuxt.config.ts"
   ],
+  "dependencies": {
+    "@sit-onyx/mdc": "^0.1.0-dev-20260401171305"
+  },
   "peerDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
     "@fontsource-variable/source-sans-3": ">= 5",
@@ -30,27 +33,27 @@
     "@nuxtjs/i18n": ">= 10",
     "@nuxtjs/mdc": ">= 0.20.2",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.8.0",
+    "@sit-onyx/icons": "^1.9.0-dev-20260401171305",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.11.0"
+    "sit-onyx": "^1.12.0-dev-20260401171305"
   },
   "devDependencies": {
-    "@fontsource-variable/source-code-pro": ">= 5",
-    "@fontsource-variable/source-sans-3": ">= 5",
-    "@nuxt/content": ">= 3",
+    "@fontsource-variable/source-code-pro": "^5.2.7",
+    "@fontsource-variable/source-sans-3": "^5.2.9",
+    "@nuxt/content": "^3.12.0",
     "@nuxt/test-utils": "^4.0.0",
-    "@nuxtjs/color-mode": ">= 4",
-    "@nuxtjs/mdc": ">= 0.20.2",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@nuxtjs/mdc": "~0.21.0",
     "@playwright/experimental-ct-vue": "1.57.0",
     "@playwright/test": "1.57.0",
     "nuxt": "4.4.2",
     "sass-embedded": "1.98.0",
     "typescript": "5.9.3",
-    "vue": "3.5.30",
-    "@sit-onyx/icons": "^1.8.0",
+    "vue": "3.5.31",
+    "@sit-onyx/icons": "^1.9.0-dev-20260401171305",
     "@sit-onyx/nuxt": "^1.0.1",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.11.0"
+    "sit-onyx": "^1.12.0-dev-20260401171305"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",

package/app/assets/styles/index.scss

@@ -1,4 +0,0 @@
-:root {
-  /** Basic vertical spacing for markdown elements. */
-  --onyx-docs-density-paragraph: var(--onyx-density-md);
-}

package/app/components/content/ProseA.vue

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { isInternalLink, type LinkTarget } from "sit-onyx";
-
-const props = withDefaults(
-  defineProps<{
-    href?: string;
-    target?: LinkTarget;
-  }>(),
-  {
-    href: "",
-  },
-);
-
-defineSlots<{
-  default(): unknown;
-}>();
-
-// needed to show external link icon only on mounted to prevent hydration errors
-const isMounted = ref(false);
-onMounted(() => (isMounted.value = true));
-</script>
-
-<template>
-  <OnyxLink
-    v-bind="props"
-    :target="!isInternalLink(props.href) ? '_blank' : props.target"
-    :with-external-icon="isMounted ? 'auto' : false"
-  >
-    <slot></slot>
-  </OnyxLink>
-</template>

package/app/components/content/ProseBr.global.vue

@@ -1,13 +0,0 @@
-<!--
- Note: this component needs to marked as global so it is displayed correctly when building the app (since @nuxt/content does not include a ProseBr by default)
--->
-<template>
-  <br aria-hidden="true" />
-</template>
-
-<style lang="scss" scoped>
-br {
-  display: block;
-  height: 1lh;
-}
-</style>

package/app/components/content/ProseCode.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <code class="onyx-text--small">
-    <slot></slot>
-  </code>
-</template>
-
-<style lang="scss" scoped>
-code {
-  background-color: var(--onyx-color-base-background-blank);
-  border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
-  border-radius: var(--onyx-radius-sm);
-  padding: var(--onyx-density-3xs) var(--onyx-density-2xs);
-}
-</style>

package/app/components/content/ProseH1.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h1" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>
-
-<style lang="scss" scoped>
-.onyx-headline {
-  margin-bottom: var(--onyx-density-lg);
-}
-</style>

package/app/components/content/ProseH2.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h2" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>
-
-<style lang="scss" scoped>
-.onyx-headline {
-  margin-top: var(--onyx-density-2xl);
-  margin-bottom: var(--onyx-density-xs);
-}
-</style>

package/app/components/content/ProseH3.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h3" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>
-
-<style lang="scss" scoped>
-.onyx-headline {
-  margin-top: var(--onyx-density-xl);
-  margin-bottom: var(--onyx-density-2xs);
-}
-</style>

package/app/components/content/ProseH4.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h4" :hash="props.id">
-    <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/ProseH5.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h5" :hash="props.id">
-    <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/ProseH6.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h6" :hash="props.id">
-    <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/ProseHr.global.vue

@@ -1,12 +0,0 @@
-<!--
- Note: this component needs to marked as global so it is displayed correctly when building the app (since @nuxt/content does not include a ProseHr by default)
--->
-<template>
-  <OnyxSeparator class="separator" />
-</template>
-
-<style lang="scss" scoped>
-.separator {
-  margin-block: var(--onyx-docs-density-paragraph);
-}
-</style>

package/app/components/content/ProseOl.vue

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

package/app/components/content/ProseP.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <p>
-    <slot></slot>
-  </p>
-</template>
-
-<style lang="scss" scoped>
-p {
-  margin-block: var(--onyx-docs-density-paragraph);
-}
-</style>

package/app/components/content/ProsePre.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Raw code snippet.
-     */
-    code?: string;
-    /**
-     * Code language
-     *
-     * @example js, ts, html, css, etc.
-     */
-    language?: string;
-    /**
-     * Filename.
-     */
-    filename?: string;
-    /**
-     * Highlighted code line numbers.
-     */
-    highlights?: number[];
-    meta?: string;
-    class?: string;
-  }>(),
-  {
-    code: "",
-  },
-);
-
-defineSlots<{
-  /**
-   * Renderer code snippet.
-   */
-  default(): unknown;
-}>();
-
-const value = "tab-1";
-</script>
-
-<template>
-  <OnyxCodeTabs :model-value="value">
-    <OnyxCodeTab :value :code="props.code" :language="props.language" :label="props.filename">
-      <pre :class="props.class"><slot></slot></pre>
-    </OnyxCodeTab>
-  </OnyxCodeTabs>
-</template>

package/app/components/content/ProseTable.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import type { VNode } from "vue";
-
-const slots = defineSlots<{
-  default(): VNode[];
-}>();
-
-/**
- * Extracts all table rows `<tr>` vnodes from the given vnode (e.g. table head or body).
- */
-const extractTableRows = (vnode?: VNode): VNode[] => {
-  if (
-    !vnode?.children ||
-    typeof vnode.children !== "object" ||
-    !("default" in vnode.children) ||
-    typeof vnode.children.default !== "function"
-  ) {
-    return [];
-  }
-
-  return vnode.children.default();
-};
-
-const content = computed(() => {
-  const children = slots.default?.() ?? [];
-  const [head, body] = children;
-
-  return {
-    headRows: extractTableRows(head),
-    bodyRows: extractTableRows(body),
-  };
-});
-</script>
-
-<template>
-  <OnyxTable class="table" striped with-vertical-borders>
-    <template #head>
-      <component :is="tr" v-for="tr in content.headRows" :key="tr.key" />
-    </template>
-
-    <component :is="tr" v-for="tr in content.bodyRows" :key="tr.key" />
-  </OnyxTable>
-</template>
-
-<style lang="scss" scoped>
-.table {
-  margin-block: var(--onyx-docs-density-paragraph);
-}
-</style>

package/app/components/content/ProseUl.vue

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