@sewadah/selaras-docs 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# Selaras Docs
+
+A zero-config Nuxt documentation layer for Selaras.
+
+Install Nuxt and the layer as development dependencies:
+
+```sh
+bun add -d nuxt @sewadah/selaras-docs
+```
+
+Add the layer to `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  extends: ['@sewadah/selaras-docs'],
+})
+```
+
+Then create `content/index.md`:
+
+```md
+---
+title: My documentation
+description: Documentation for my project.
+---
+
+# My documentation
+
+Start writing.
+```
+
+The layer supplies Nuxt Content, Tailwind CSS v4, Selaras, an accessible
+responsive documentation shell, local navigation search, and dark mode. It
+uses neutral system font stacks by default. You do not
+need an app root, Content config, or stylesheet for the default setup.
+
+`nuxt` remains a peer because the documentation site is a Nuxt application;
+the layer is normally a development dependency, just like Nuxt itself.
+
+## Customization
+
+Use `app.config.ts` for site identity and the default shell:
+
+```ts
+export default defineAppConfig({
+  selarasDocs: {
+    site: {
+      name: 'My project',
+      description: 'Documentation for my project.',
+    },
+    repository: {
+      url: 'https://github.com/example/project',
+      editLinks: true,
+    },
+    header: {
+      links: [
+        { label: 'Guide', to: '/guide/getting-started' },
+        {
+          label: 'Resources',
+          children: [
+            { label: 'API reference', to: '/api' },
+            { label: 'GitHub', to: 'https://github.com/example/project', target: '_blank', rel: 'noreferrer' },
+          ],
+        },
+      ],
+    },
+  },
+})
+```
+
+Create an application component with the same name as a layer component, such
+as `components/DocsHeader.vue`, to replace that part of the shell. For a host
+that owns Tailwind compilation or uses a class prefix, set
+`selarasDocs: { css: false }` in `nuxt.config.ts` and import Selaras and the
+docs stylesheet from the host CSS entry.

package/app/app.config.ts

@@ -0,0 +1,22 @@
+export default defineAppConfig({
+  selarasDocs: {
+    site: {
+      name: 'Documentation',
+    },
+    repository: {
+      branch: 'main',
+      contentDirectory: 'content',
+      editLinks: true,
+    },
+    header: {
+      showTitle: true,
+      search: true,
+      colorMode: true,
+    },
+    toc: {
+      enabled: true,
+      title: 'On this page',
+    },
+    footer: {},
+  },
+})

package/app/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <SApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <ClientOnly>
+      <DocsSearch />
+    </ClientOnly>
+  </SApp>
+</template>

package/app/assets/style.css

@@ -0,0 +1,187 @@
+.selaras-docs-content button p,
+.selaras-docs-content a p {
+  margin: 0;
+  color: inherit;
+}
+
+.selaras-docs-root {
+  background: var(--selaras-resolved-surface-canvas, var(--selaras-resolved-surface-default));
+}
+
+.selaras-docs-skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 0.75rem;
+  left: 0.75rem;
+  transform: translateY(-160%);
+  border-radius: var(--selaras-resolved-radius-md);
+  background: var(--selaras-resolved-color-primary-fill);
+  color: var(--selaras-resolved-color-primary-on-fill);
+  padding: 0.5rem 0.75rem;
+  text-decoration: none;
+}
+
+.selaras-docs-skip-link:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--selaras-resolved-color-primary-focus);
+  outline-offset: 2px;
+}
+
+.selaras-docs-shell {
+  display: flex;
+  width: min(100%, 90rem);
+  min-height: calc(100vh - 4rem);
+  margin: 0 auto;
+}
+
+.selaras-docs-sidebar {
+  border-inline-end: 1px solid var(--selaras-resolved-border-default);
+}
+
+.selaras-docs-main {
+  min-width: 0;
+  flex: 1;
+  padding: 2rem;
+}
+
+.selaras-docs-page {
+  max-width: 78rem;
+  margin: 0 auto;
+}
+
+.selaras-docs-page-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 3rem;
+}
+
+.selaras-docs-article {
+  min-width: 0;
+}
+
+.selaras-docs-page-header {
+  margin-bottom: 1.5rem;
+}
+
+.selaras-docs-content {
+  min-width: 0;
+}
+
+.selaras-docs-toc {
+  width: 14rem;
+}
+
+.selaras-docs-edit-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 2.5rem;
+  color: var(--selaras-resolved-text-muted);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.selaras-docs-edit-link:hover {
+  color: var(--selaras-resolved-text-default);
+  text-decoration: underline;
+}
+
+.selaras-docs-surround {
+  margin-top: 2rem;
+}
+
+.selaras-docs-footer {
+  border-top: 1px solid var(--selaras-resolved-border-default);
+}
+
+.selaras-docs-footer-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: 5rem;
+}
+
+.selaras-docs-footer-text {
+  margin: 0;
+  color: var(--selaras-resolved-text-muted);
+  font-size: 0.875rem;
+}
+
+.selaras-docs-footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.selaras-docs-footer-links a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--selaras-resolved-text-muted);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.selaras-docs-footer-links a:hover {
+  color: var(--selaras-resolved-text-default);
+  text-decoration: underline;
+}
+
+@media (min-width: 64rem) {
+  .selaras-docs-nav-toggle {
+    display: none;
+  }
+
+  .selaras-docs-page-grid {
+    grid-template-columns: minmax(0, 1fr) 14rem;
+  }
+}
+
+@media (max-width: 63.999rem) {
+  .selaras-docs-main {
+    padding: 1.5rem;
+  }
+
+  .selaras-docs-header-link.selaras-docs-header-link--desktop {
+    display: none;
+  }
+
+  .selaras-docs-footer-inner {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.selaras-docs-brand {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.selaras-docs-brand {
+  gap: 0.625rem;
+  font-weight: 600;
+}
+
+.selaras-docs-logo {
+  display: block;
+  width: auto;
+  height: 1.75rem;
+}
+
+.selaras-docs-logo--dark {
+  display: none;
+}
+
+.dark .selaras-docs-logo--light {
+  display: none;
+}
+
+.dark .selaras-docs-logo--dark {
+  display: block;
+}

package/app/components/DocsEditLink.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  path: string
+}>()
+
+const appConfig = useAppConfig()
+const docsConfig = computed(() => appConfig.selarasDocs ?? {})
+
+const editUrl = computed(() => {
+  const repository = docsConfig.value.repository
+  if (!repository?.url || repository.editLinks === false)
+    return undefined
+
+  const base = repository.url.replace(/\/$/, '')
+  const relativePath = props.path === '/' ? 'index.md' : `${props.path.replace(/^\//, '')}.md`
+  const contentPath = [repository.contentDirectory ?? 'content', relativePath].join('/')
+  const branch = repository.branch ?? 'main'
+
+  if (base.startsWith('https://github.com/'))
+    return `${base}/edit/${branch}/${contentPath}`
+  if (base.startsWith('https://gitlab.com/'))
+    return `${base}/-/edit/${branch}/${contentPath}`
+  return undefined
+})
+</script>
+
+<template>
+  <a v-if="editUrl" :href="editUrl" class="selaras-docs-edit-link" target="_blank" rel="noreferrer">
+    Edit this page
+  </a>
+</template>

package/app/components/DocsFooter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const docsConfig = computed(() => appConfig.selarasDocs ?? {})
+const footer = computed(() => docsConfig.value.footer)
+</script>
+
+<template>
+  <footer v-if="footer?.text || footer?.links?.length" class="selaras-docs-footer">
+    <SContainer size="full" class="selaras-docs-footer-inner">
+      <p v-if="footer?.text" class="selaras-docs-footer-text">
+        {{ footer.text }}
+      </p>
+      <nav v-if="footer?.links?.length" class="selaras-docs-footer-links" aria-label="Footer navigation">
+        <NuxtLink
+          v-for="link in footer.links"
+          :key="`${link.to}:${link.label ?? link.icon ?? ''}`"
+          :to="link.to"
+          :target="link.target"
+          :aria-label="link.ariaLabel ?? link.label"
+        >
+          <SIcon v-if="link.icon" :name="link.icon" />
+          <span v-if="link.label">{{ link.label }}</span>
+        </NuxtLink>
+      </nav>
+    </SContainer>
+  </footer>
+</template>

package/app/components/DocsHeader.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const route = useRoute()
+const appConfig = useAppConfig()
+const { data: navigation } = useDocsNavigation()
+const navigationOpen = ref(false)
+
+const docsConfig = computed(() => appConfig.selarasDocs ?? {})
+const siteName = computed(() => docsConfig.value.header?.title ?? docsConfig.value.site?.name ?? 'Documentation')
+const showTitle = computed(() => docsConfig.value.header?.showTitle !== false)
+const logo = computed(() => docsConfig.value.site?.logo)
+const logoAlt = computed(() => typeof logo.value === 'object' ? (logo.value.alt ?? siteName.value) : siteName.value)
+const lightLogo = computed(() => typeof logo.value === 'string' ? logo.value : (logo.value?.light ?? logo.value?.dark))
+const darkLogo = computed(() => typeof logo.value === 'object' ? (logo.value.dark ?? logo.value.light) : logo.value)
+const hasDistinctLogos = computed(() => Boolean(lightLogo.value && darkLogo.value && lightLogo.value !== darkLogo.value))
+const headerLinks = computed(() => docsConfig.value.header?.links ?? [])
+const repositoryUrl = computed(() => docsConfig.value.repository?.url)
+
+watch(() => route.path, () => {
+  navigationOpen.value = false
+})
+</script>
+
+<template>
+  <SHeader>
+    <NuxtLink to="/" class="selaras-docs-brand" :aria-label="`${siteName} home`">
+      <template v-if="lightLogo">
+        <img :src="lightLogo" :alt="logoAlt" class="selaras-docs-logo" :class="{ 'selaras-docs-logo--light': hasDistinctLogos }">
+        <img v-if="hasDistinctLogos" :src="darkLogo" :alt="logoAlt" class="selaras-docs-logo selaras-docs-logo--dark">
+      </template>
+      <span v-if="showTitle">{{ siteName }}</span>
+    </NuxtLink>
+    <template #right>
+      <SNavigationMenu
+        v-if="headerLinks.length"
+        :items="headerLinks"
+        variant="link"
+        :ui="{ root: 'hidden w-auto lg:flex' }"
+      />
+      <DocsSearchButton v-if="docsConfig.header?.search !== false" />
+      <SColorModeToggle v-if="docsConfig.header?.colorMode !== false" />
+      <SButton
+        v-if="repositoryUrl"
+        as="a"
+        :href="repositoryUrl"
+        target="_blank"
+        rel="noreferrer"
+        aria-label="Source repository"
+        title="Source repository"
+        icon="hugeicons:github"
+        variant="ghost"
+        color="neutral"
+      />
+      <SButton
+        variant="ghost"
+        color="neutral"
+        class="selaras-docs-nav-toggle"
+        aria-label="Open documentation navigation"
+        @click="navigationOpen = true"
+      >
+        Menu
+      </SButton>
+    </template>
+  </SHeader>
+  <SDrawer v-model:open="navigationOpen" side="left" title="Documentation navigation" :handle="false">
+    <template #body>
+      <SContentNavigation :navigation="navigation ?? []" />
+    </template>
+  </SDrawer>
+</template>

package/app/components/DocsSearch.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CommandPaletteGroup } from '@sewadah/selaras/components/CommandPalette.vue'
+import type { ContentNavigationLink } from '@sewadah/selaras/components/ContentNavigation.vue'
+
+const appConfig = useAppConfig()
+const { data: navigation } = useDocsNavigation()
+const docsConfig = computed(() => appConfig.selarasDocs ?? {})
+
+function leafPages(links: ContentNavigationLink[]): ContentNavigationLink[] {
+  return links.flatMap(link => link.children?.length ? leafPages(link.children) : [link])
+}
+
+const groups = computed<CommandPaletteGroup[]>(() => {
+  return (navigation.value ?? [])
+    .map(section => ({
+      label: section.title,
+      items: leafPages(section.children?.length ? section.children : [section]).map(page => ({
+        label: page.title,
+        onSelect: () => navigateTo(page.path),
+      })),
+    }))
+    .filter(group => group.items.length > 0)
+})
+</script>
+
+<template>
+  <SCommandPalette v-if="docsConfig.header?.search !== false" :groups="groups" />
+</template>

package/app/components/DocsSearchButton.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { open } = useCommandPalette()
+const icons = useIcons()
+const messages = useMessages()
+</script>
+
+<template>
+  <SButton variant="soft" color="neutral" size="sm" :icon="icons.search" aria-label="Search documentation" @click="open">
+    <span class="hidden sm:inline">{{ messages.search }}</span>
+    <SKbd value="meta" size="sm" />
+    <SKbd value="K" size="sm" />
+  </SButton>
+</template>

package/app/components/DocsSidebar.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data: navigation } = useDocsNavigation()
+</script>
+
+<template>
+  <SPageAside
+    class="selaras-docs-sidebar"
+    aria-label="Documentation navigation"
+    :ui="{ root: 'top-16 h-[calc(100vh-4rem)]' }"
+  >
+    <SContentNavigation :navigation="navigation ?? []" />
+  </SPageAside>
+</template>

package/app/components/DocsTableOfContents.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TocLink } from '@sewadah/selaras/components/ContentToc.vue'
+
+defineProps<{
+  links: TocLink[]
+}>()
+
+const appConfig = useAppConfig()
+const docsConfig = computed(() => appConfig.selarasDocs ?? {})
+</script>
+
+<template>
+  <SPageAside
+    v-if="links.length && docsConfig.toc?.enabled !== false"
+    class="selaras-docs-toc"
+    aria-label="Table of contents"
+    :ui="{ root: 'top-16 h-[calc(100vh-4rem)]' }"
+  >
+    <SContentToc :links="links" :title="docsConfig.toc?.title" />
+  </SPageAside>
+</template>

package/app/components/content/DocsExample.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string
+}>()
+
+const exampleModules = import.meta.glob('~/components/content/examples/**/*.vue')
+
+function pascalCase(value: string) {
+  return value.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+const resolvedComponent = computed(() => {
+  const suffix = `/${pascalCase(props.name)}.vue`
+  const match = Object.entries(exampleModules).find(([path]) => path.endsWith(suffix))
+  return match ? defineAsyncComponent(match[1] as any) : null
+})
+</script>
+
+<template>
+  <section v-if="resolvedComponent" :data-example="name">
+    <component :is="resolvedComponent" />
+  </section>
+  <p v-else role="alert">
+    Example "{{ name }}" not found
+  </p>
+</template>

package/app/composables/useDocsNavigation.ts

@@ -0,0 +1,4 @@
+export function useDocsNavigation() {
+  return useAsyncData('selaras-docs-navigation', () =>
+    queryCollectionNavigation('docs').order('order', 'ASC'))
+}

package/app/composables/useDocsSurround.ts

@@ -0,0 +1,20 @@
+import type { ContentNavigationLink } from '@sewadah/selaras/components/ContentNavigation.vue'
+
+function flattenNavigation(links: ContentNavigationLink[]): ContentNavigationLink[] {
+  return links.flatMap(link => link.children?.length ? flattenNavigation(link.children) : [link])
+}
+
+/** The adjacent leaf pages in the collection's reading order. */
+export function useDocsSurround() {
+  const route = useRoute()
+  const { data: navigation } = useDocsNavigation()
+
+  return computed(() => {
+    const links = flattenNavigation(navigation.value ?? [])
+    const index = links.findIndex(link => link.path === route.path)
+
+    return index === -1
+      ? { prev: undefined, next: undefined }
+      : { prev: links[index - 1], next: links[index + 1] }
+  })
+}

package/app/layouts/selaras-docs.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="selaras-docs-root min-h-screen text-[var(--selaras-resolved-text-default)]">
+    <a class="selaras-docs-skip-link" href="#selaras-docs-main">Skip to content</a>
+    <DocsHeader />
+    <div class="selaras-docs-shell">
+      <DocsSidebar />
+      <main id="selaras-docs-main" class="selaras-docs-main" tabindex="-1">
+        <slot />
+      </main>
+    </div>
+    <DocsFooter />
+  </div>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { TocLink } from '@sewadah/selaras/components/ContentToc.vue'
+import ProseH1 from '@sewadah/selaras/components/ProseH1.vue'
+import ProseH2 from '@sewadah/selaras/components/ProseH2.vue'
+import ProseH3 from '@sewadah/selaras/components/ProseH3.vue'
+import ProseH4 from '@sewadah/selaras/components/ProseH4.vue'
+import ProseH5 from '@sewadah/selaras/components/ProseH5.vue'
+import ProseH6 from '@sewadah/selaras/components/ProseH6.vue'
+import ProsePre from '@sewadah/selaras/components/ProsePre.vue'
+
+const route = useRoute()
+const appConfig = useAppConfig()
+const { data: page } = await useAsyncData(`selaras-docs:${route.path}`, () => queryCollection('docs').path(route.path).first())
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Documentation page not found', fatal: true })
+}
+
+definePageMeta({ layout: 'selaras-docs' })
+useSeoMeta({ title: page.value.title, description: page.value.description ?? appConfig.selarasDocs?.site?.description })
+
+const proseComponents = {
+  h1: ProseH1,
+  h2: ProseH2,
+  h3: ProseH3,
+  h4: ProseH4,
+  h5: ProseH5,
+  h6: ProseH6,
+  pre: ProsePre,
+}
+
+const tocLinks = computed(() => (page.value?.body?.toc?.links ?? []) as unknown as TocLink[])
+const surround = useDocsSurround()
+</script>
+
+<template>
+  <SContainer size="full" class="selaras-docs-page">
+    <div class="selaras-docs-page-grid">
+      <article class="selaras-docs-article">
+        <p v-if="page!.description" class="selaras-docs-description">
+          {{ page!.description }}
+        </p>
+        <ContentRenderer :value="page!" :components="proseComponents" class="selaras-docs-content selaras-prose" />
+        <DocsEditLink :path="route.path" />
+        <SContentSurround :prev="surround.prev" :next="surround.next" class="selaras-docs-surround" />
+      </article>
+      <DocsTableOfContents :links="tocLinks" />
+    </div>
+  </SContainer>
+</template>

package/content.config.ts

@@ -0,0 +1,20 @@
+import { resolve } from 'node:path'
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { useNuxt } from '@nuxt/kit'
+
+const { options } = useNuxt()
+
+export default defineContentConfig({
+  collections: {
+    docs: defineCollection({
+      type: 'page',
+      source: {
+        cwd: resolve(options.rootDir, 'content'),
+        include: '**/*.md',
+      },
+      schema: z.object({
+        order: z.number().optional(),
+      }),
+    }),
+  },
+})

package/modules/docs.mjs

@@ -0,0 +1,41 @@
+import { resolve } from 'node:path'
+import { addTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
+
+function cssPath(path) {
+  return path.replaceAll('\\', '/')
+}
+
+export default defineNuxtModule({
+  meta: {
+    name: '@sewadah/selaras-docs',
+    configKey: 'selarasDocs',
+  },
+  defaults: {
+    css: true,
+  },
+  setup(options, nuxt) {
+    if (!options.css)
+      return
+
+    const { resolve: resolveLayer } = createResolver(import.meta.url)
+    const layerApp = cssPath(resolveLayer('../app'))
+    const consumerContent = cssPath(resolve(nuxt.options.rootDir, 'content'))
+    const consumerComponents = cssPath(resolve(nuxt.options.rootDir, 'components'))
+    const stylesheet = addTemplate({
+      filename: 'selaras-docs.css',
+      write: true,
+      getContents: () => `@import "tailwindcss";
+@import "@sewadah/selaras/theme.css";
+@import "#selaras/tailwind.css";
+@import "@sewadah/selaras/prose.css";
+@import "@sewadah/selaras-docs/style.css";
+
+@source "${layerApp}/**/*";
+@source "${consumerContent}/**/*";
+@source "${consumerComponents}/**/*";
+`,
+    })
+
+    nuxt.options.css.unshift(stylesheet.dst)
+  },
+})

package/nuxt.config.mjs

@@ -0,0 +1,15 @@
+import { createResolver } from '@nuxt/kit'
+import { defineNuxtConfig } from 'nuxt/config'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  modules: ['@sewadah/selaras', '@nuxt/content', resolve('./modules/docs.mjs')],
+  // Selaras supports Node versions with node:sqlite. Keeping Content on its
+  // native connector lets an installed docs layer avoid a native addon.
+  content: {
+    experimental: {
+      sqliteConnector: 'native',
+    },
+  },
+})

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@sewadah/selaras-docs",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Nuxt Content documentation layer for Selaras",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "import": "./nuxt.config.mjs"
+    },
+    "./style.css": "./app/assets/style.css"
+  },
+  "main": "./nuxt.config.mjs",
+  "files": [
+    "app",
+    "content.config.ts",
+    "modules",
+    "nuxt.config.mjs",
+    "types.d.ts"
+  ],
+  "engines": {
+    "node": "^22.19.0 || ^24.11.0 || >=26.0.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.5.2"
+  },
+  "dependencies": {
+    "@nuxt/content": "^3.16.0",
+    "@nuxt/kit": "^4.5.2",
+    "@sewadah/selaras": "^0.3.0",
+    "tailwindcss": "^4.3.0"
+  }
+}

package/types.d.ts

@@ -0,0 +1,92 @@
+export interface SelarasDocsModuleOptions {
+  /**
+   * Inject the default unprefixed Tailwind and Selaras stylesheet.
+   * Disable this when the consuming app owns a prefixed or complete-theme CSS entry.
+   * @default true
+   */
+  css?: boolean
+}
+
+export interface SelarasDocsLink {
+  label?: string
+  to: string
+  icon?: string
+  target?: string
+  ariaLabel?: string
+}
+
+/** A top-level header item rendered by Selaras' NavigationMenu. */
+export interface SelarasDocsNavigationItem {
+  /** Required so every header control has an accessible name. */
+  label: string
+  to?: string
+  icon?: string
+  target?: string
+  rel?: string
+  ariaLabel?: string
+  disabled?: boolean
+  children?: SelarasDocsNavigationItem[]
+}
+
+export interface SelarasDocsLogo {
+  light?: string
+  dark?: string
+  alt?: string
+}
+
+export interface SelarasDocsAppConfig {
+  site?: {
+    name?: string
+    description?: string
+    logo?: string | SelarasDocsLogo
+  }
+  repository?: {
+    url?: string
+    branch?: string
+    contentDirectory?: string
+    editLinks?: boolean
+  }
+  header?: {
+    title?: string
+    showTitle?: boolean
+    search?: boolean
+    colorMode?: boolean
+    links?: SelarasDocsNavigationItem[]
+  }
+  toc?: {
+    enabled?: boolean
+    title?: string
+  }
+  footer?: {
+    text?: string
+    links?: SelarasDocsLink[]
+  }
+}
+
+declare module '@nuxt/schema' {
+  interface AppConfig {
+    selarasDocs?: SelarasDocsAppConfig
+  }
+
+  interface NuxtConfig {
+    selarasDocs?: SelarasDocsModuleOptions
+  }
+
+  interface NuxtOptions {
+    selarasDocs: SelarasDocsModuleOptions
+  }
+}
+
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    selarasDocs?: SelarasDocsAppConfig
+  }
+
+  interface NuxtConfig {
+    selarasDocs?: SelarasDocsModuleOptions
+  }
+
+  interface NuxtOptions {
+    selarasDocs: SelarasDocsModuleOptions
+  }
+}