@movk/nuxt-docs 1.1.0

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { kebabCase } from 'scule'
+
+definePageMeta({
+  layout: 'docs',
+  heroBackground: 'opacity-30'
+})
+
+const route = useRoute()
+const { toc, github } = useAppConfig()
+
+const { data: page } = await useAsyncData(`docs-${kebabCase(route.path)}`, () => queryCollection('docs').path(route.path).first())
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const { data: surround } = await useAsyncData(`surround-${(kebabCase(route.path))}`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description']
+  })
+})
+
+const { findBreadcrumb } = useNavigation(navigation!)
+
+const breadcrumb = computed(() => findBreadcrumb(page.value?.path as string))
+
+const title = page.value?.seo?.title || page.value?.title
+const description = page.value?.seo?.description || page.value?.description
+
+const filterValidLinks = (links: Array<any>) => links.filter(Boolean)
+
+function buildFileLink(type: 'edit' | 'blob') {
+  if (!github)
+    return null
+
+  const segments = [
+    github.url,
+    type,
+    github.branch,
+    github.rootDir,
+    'content',
+    `${page.value?.stem}.${page.value?.extension}`
+  ].filter(Boolean)
+
+  return segments.join('/')
+}
+
+const pageLinks = computed(() => {
+  const links = []
+
+  if (github && github.url) {
+    links.push({
+      icon: 'i-lucide-file-code',
+      label: 'View source',
+      to: buildFileLink('blob'),
+      target: '_blank'
+    })
+  }
+
+  return filterValidLinks([...(page.value?.links || []), ...links])
+})
+
+const communityLinks = computed(() => {
+  const links = []
+
+  if (github && github.url) {
+    links.push({
+      icon: 'i-lucide-file-pen',
+      label: 'Edit this page',
+      to: buildFileLink('edit'),
+      target: '_blank'
+    })
+  }
+
+  return filterValidLinks([...links, ...(toc?.bottom?.links || [])])
+})
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+defineOgImageComponent('Nuxt', {
+  title,
+  description
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader :title="title">
+      <template #headline>
+        <UBreadcrumb :items="breadcrumb" />
+      </template>
+
+      <template #description>
+        <MDC
+          v-if="page.description"
+          :value="page.description"
+          unwrap="p"
+          :cache-key="`${kebabCase(route.path)}-description`"
+        />
+      </template>
+
+      <template #links>
+        <UButton
+          v-for="link in pageLinks"
+          :key="link.label"
+          color="neutral"
+          variant="outline"
+          :target="link.to?.startsWith('http') ? '_blank' : undefined"
+          size="sm"
+          v-bind="link"
+        >
+          <template v-if="link.avatar" #leading>
+            <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
+          </template>
+        </UButton>
+        <PageHeaderLinks />
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <ContentRenderer v-if="page.body" :value="page" />
+
+      <USeparator v-if="surround?.filter(Boolean).length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template v-if="page?.body?.toc?.links?.length" #right>
+      <UContentToc
+        :title="toc?.title"
+        :links="page.body?.toc?.links"
+        highlight
+        class="z-[2]"
+      >
+        <template v-if="toc?.bottom" #bottom>
+          <div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
+            <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
+
+            <UPageLinks v-if="communityLinks?.length" :title="toc.bottom.title" :links="communityLinks" />
+
+            <USeparator v-if="communityLinks?.length" type="dashed" />
+
+            <AdsCarbon />
+          </div>
+        </template>
+      </UContentToc>
+    </template>
+  </UPage>
+</template>

package/app/pages/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('landing', () => queryCollection('landing').path('/').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  titleTemplate: '',
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description
+})
+
+defineOgImageComponent('Nuxt', {
+  title,
+  description
+})
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+    :prose="false"
+  />
+</template>

package/app/pages/releases.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('releases', () => queryCollection('releases').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description
+})
+
+defineOgImageComponent('Nuxt', {
+  title,
+  description
+})
+
+const { data: versions } = await useFetch(page.value.hero.releases || '', {
+  transform: (data: {
+    releases: {
+      name?: string
+      tag: string
+      publishedAt: string
+      markdown: string
+    }[]
+  }) => {
+    return data.releases.map(release => ({
+      tag: release.tag,
+      title: release.name || release.tag,
+      date: release.publishedAt,
+      markdown: release.markdown
+    }))
+  }
+})
+</script>
+
+<template>
+  <div v-if="page">
+    <UPageHero
+      :title="page.hero.title"
+      :description="page.hero.description"
+      :links="page.hero.links"
+      class="md:border-b border-default"
+      :ui="{
+        container: 'relative lg:py-32'
+      }"
+    >
+      <template #top>
+        <div
+          class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80"
+        />
+      </template>
+
+      <LazyStarsBg />
+
+      <div
+        aria-hidden="true"
+        class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8"
+      />
+    </UPageHero>
+
+    <UPageSection :ui="{ container: '!py-0' }">
+      <div class="py-4 md:py-8 lg:py-16 md:border-x border-default">
+        <UContainer class="max-w-5xl">
+          <UChangelogVersions>
+            <UChangelogVersion
+              v-for="version in versions"
+              :key="version.tag"
+              v-bind="version"
+              :ui="{
+                root: 'flex items-start',
+                container: 'max-w-xl',
+                header: 'border-b border-default pb-4',
+                title: 'text-3xl',
+                date: 'text-xs/9 text-highlighted font-mono',
+                indicator: 'sticky top-0 pt-16 -mt-16 sm:pt-24 sm:-mt-24 lg:pt-32 lg:-mt-32'
+              }"
+            >
+              <template #body>
+                <MDC v-if="version.markdown" :value="version.markdown" />
+              </template>
+            </UChangelogVersion>
+          </UChangelogVersions>
+        </UContainer>
+      </div>
+    </UPageSection>
+  </div>
+</template>

package/app/plugins/prettier.ts

@@ -0,0 +1,67 @@
+import type { Options } from 'prettier'
+import { defu } from 'defu'
+import PrettierWorker from '@/workers/prettier.js?worker&inline'
+
+export interface SimplePrettier {
+  format: (source: string, options?: Options) => Promise<string>
+}
+
+function createPrettierWorkerApi(worker: Worker): SimplePrettier {
+  let counter = 0
+  const handlers: any = {}
+
+  worker.addEventListener('message', (event) => {
+    const { uid, message, error } = event.data
+
+    if (!handlers[uid]) {
+      return
+    }
+
+    const [resolve, reject] = handlers[uid]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete handlers[uid]
+
+    if (error) {
+      reject(error)
+    } else {
+      resolve(message)
+    }
+  })
+
+  function postMessage<T>(message: any) {
+    const uid = ++counter
+    return new Promise<T>((resolve, reject) => {
+      handlers[uid] = [resolve, reject]
+      worker.postMessage({ uid, message })
+    })
+  }
+
+  return {
+    format(source: string, options?: Options) {
+      return postMessage({ type: 'format', source, options })
+    }
+  }
+}
+
+export default defineNuxtPlugin(async () => {
+  let prettier: SimplePrettier
+  if (import.meta.server) {
+    const prettierModule = await import('prettier')
+    prettier = {
+      format(source, options = {}) {
+        return prettierModule.format(source, defu(options, {
+          parser: 'markdown'
+        }))
+      }
+    }
+  } else {
+    const worker = new PrettierWorker()
+    prettier = createPrettierWorkerApi(worker)
+  }
+
+  return {
+    provide: {
+      prettier
+    }
+  }
+})

package/app/plugins/theme.ts

@@ -0,0 +1,82 @@
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const appConfig = useAppConfig()
+    const site = useSiteConfig()
+
+    if (import.meta.client) {
+      function updateColor(type: 'primary' | 'neutral') {
+        const color = localStorage.getItem(`${site.name}-ui-${type}`)
+        if (color) {
+          appConfig.ui.colors[type] = color
+        }
+      }
+
+      function updateRadius() {
+        const radius = localStorage.getItem(`${site.name}-ui-radius`)
+        if (radius) {
+          appConfig.theme.radius = Number.parseFloat(radius)
+        }
+      }
+
+      function updateBlackAsPrimary() {
+        const blackAsPrimary = localStorage.getItem(`${site.name}-ui-black-as-primary`)
+        if (blackAsPrimary) {
+          appConfig.theme.blackAsPrimary = blackAsPrimary === 'true'
+        }
+      }
+
+      updateColor('primary')
+      updateColor('neutral')
+      updateRadius()
+      updateBlackAsPrimary()
+    }
+
+    if (import.meta.server) {
+      useHead({
+        script: [{
+          innerHTML: `
+            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;
+
+            if (localStorage.getItem('${site.name}-ui-primary')) {
+              const primaryColor = localStorage.getItem('${site.name}-ui-primary');
+              if (primaryColor !== 'black') {
+                html = html.replace(
+                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
+                  \`$1\${primaryColor}$2\`
+                );
+              }
+            }
+            if (localStorage.getItem('${site.name}-ui-neutral')) {
+              let neutralColor = localStorage.getItem('${site.name}-ui-neutral');
+              html = html.replace(
+                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
+                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
+              );
+            }
+
+            document.querySelector('style#nuxt-ui-colors').innerHTML = html;
+            `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
+        }, {
+          innerHTML: `
+            if (localStorage.getItem('${site.name}-ui-radius')) {
+              document.querySelector('style#nuxt-ui-radius').innerHTML = ':root { --ui-radius: ' + localStorage.getItem('${site.name}-ui-radius') + 'rem; }';
+            }
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
+        }, {
+          innerHTML: `
+            if (localStorage.getItem('${site.name}-ui-black-as-primary') === 'true') {
+              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = ':root { --ui-primary: black; } .dark { --ui-primary: white; }';
+            } else {
+              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
+            }
+          `.replace(/\s+/g, ' ')
+        }]
+      })
+    }
+  }
+})

package/app/types/index.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    seo: {
+      titleTemplate: string
+      title: string
+      description: string
+    }
+    header: {
+      title: string
+      to: string
+      search: boolean
+      colorMode: boolean
+      links: ButtonProps[]
+    }
+    footer: {
+      credits: string
+      socials: ButtonProps[]
+    }
+    toc: {
+      title: string
+      bottom: {
+        title: string
+        links: ButtonProps[]
+      }
+    }
+    github: {
+      url: string
+      branch: string
+      rootDir: string
+    } | false
+  }
+}
+
+// It is always important to ensure you import/export something when augmenting a type
+export { }

package/app/workers/prettier.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-undef */
+self.onmessage = async function (event) {
+  self.postMessage({
+    uid: event.data.uid,
+    message: await handleMessage(event.data.message)
+  })
+}
+
+function handleMessage(message) {
+  switch (message.type) {
+    case 'format':
+      return handleFormatMessage(message)
+  }
+}
+
+async function handleFormatMessage(message) {
+  if (!globalThis.prettier) {
+    await Promise.all([
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/standalone.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/babel.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/estree.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/html.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/markdown.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/typescript.js')
+    ])
+  }
+
+  const { options, source } = message
+  const formatted = await prettier.format(source, {
+    parser: 'markdown',
+    plugins: prettierPlugins,
+    ...options
+  })
+
+  return formatted
+}

package/content.config.ts

@@ -0,0 +1,68 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { useNuxt } from '@nuxt/kit'
+import { asSeoCollection } from '@nuxtjs/seo/content'
+import { joinURL } from 'ufo'
+
+const { options } = useNuxt()
+const cwd = joinURL(options.rootDir, 'content')
+
+const Avatar = z.object({
+  src: z.string(),
+  alt: z.string().optional()
+})
+
+const Button = z.object({
+  label: z.string(),
+  icon: z.string().optional(),
+  avatar: Avatar.optional(),
+  leadingIcon: z.string().optional(),
+  trailingIcon: z.string().optional(),
+  to: z.string().optional(),
+  target: z.enum(['_blank', '_self']).optional(),
+  color: z.enum(['primary', 'neutral', 'success', 'warning', 'error', 'info']).optional(),
+  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl']).optional(),
+  variant: z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']).optional(),
+  id: z.string().optional(),
+  class: z.string().optional()
+})
+
+export default defineContentConfig({
+  collections: {
+    landing: defineCollection(asSeoCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: 'index.md'
+      }
+    })),
+    docs: defineCollection(asSeoCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: 'docs/**/*'
+      },
+      schema: z.object({
+        links: z.array(Button),
+        category: z.string().optional(),
+        navigation: z.object({
+          title: z.string().optional()
+        })
+      })
+    })),
+    releases: defineCollection(asSeoCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: 'releases.yml'
+      },
+      schema: z.object({
+        hero: z.object({
+          title: z.string(),
+          description: z.string().optional(),
+          releases: z.string(),
+          links: z.array(Button).optional()
+        })
+      })
+    }))
+  }
+})

package/modules/component-example.ts

@@ -0,0 +1,128 @@
+import { existsSync, readFileSync } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { dirname, join } from 'pathe'
+import { defineNuxtModule, addTemplate, addServerHandler, createResolver } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'component-example'
+  },
+  async setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    let _configResolved: any
+    let components: Record<string, any>
+    const outputPath = join(nuxt.options.buildDir, 'component-example')
+
+    async function stubOutput() {
+      if (existsSync(outputPath + '.mjs')) {
+        return
+      }
+      await updateOutput('export default {}')
+    }
+
+    async function fetchComponent(component: string | any) {
+      if (typeof component === 'string') {
+        if (components[component]) {
+          component = components[component]
+        } else {
+          component = Object.entries(components).find(
+            ([, comp]: any) => comp.filePath === component
+          )
+          if (!component) {
+            return
+          }
+
+          component = component[1]
+        }
+      }
+
+      if (!component?.filePath || !component?.pascalName) {
+        return
+      }
+      const code = await fsp.readFile(component.filePath, 'utf-8')
+      components[component.pascalName] = {
+        code,
+        filePath: component.filePath,
+        pascalName: component.pascalName
+      }
+    }
+    const getStringifiedComponents = () => JSON.stringify(components, null, 2)
+
+    const getVirtualModuleContent = () =>
+      `export default ${getStringifiedComponents()}`
+
+    async function updateOutput(content?: string) {
+      const path = outputPath + '.mjs'
+      if (!existsSync(dirname(path))) {
+        await fsp.mkdir(dirname(path), { recursive: true })
+      }
+      if (existsSync(path)) {
+        await fsp.unlink(path)
+      }
+      await fsp.writeFile(path, content || getVirtualModuleContent(), 'utf-8')
+    }
+
+    async function fetchComponents() {
+      await Promise.all(Object.keys(components).map(fetchComponent))
+    }
+
+    nuxt.hook('components:extend', async (_components) => {
+      components = _components
+        .filter(v => v.shortPath.includes('components/content/examples/'))
+        .reduce((acc, component) => {
+          acc[component.pascalName] = component
+          return acc
+        }, {} as Record<string, any>)
+      await stubOutput()
+    })
+
+    addTemplate({
+      filename: 'component-example.mjs',
+      getContents: () => 'export default {}',
+      write: true
+    })
+
+    nuxt.hook('vite:extend', (vite: any) => {
+      vite.config.plugins = vite.config.plugins || []
+      vite.config.plugins.push({
+        name: 'component-example',
+        enforce: 'post',
+        async buildStart() {
+          if (_configResolved?.build.ssr) {
+            return
+          }
+          await fetchComponents()
+          await updateOutput()
+        },
+        configResolved(config: any) {
+          _configResolved = config
+        },
+        async handleHotUpdate({ file }: { file: any }) {
+          if (
+            Object.entries(components).some(
+              ([, comp]: any) => comp.filePath === file
+            )
+          ) {
+            await fetchComponent(file)
+            await updateOutput()
+          }
+        }
+      })
+    })
+
+    nuxt.hook('nitro:config', (nitroConfig) => {
+      nitroConfig.virtual = nitroConfig.virtual || {}
+      nitroConfig.virtual['#component-example/nitro'] = () =>
+        readFileSync(
+          join(nuxt.options.buildDir, '/component-example.mjs'),
+          'utf-8'
+        )
+    })
+
+    addServerHandler({
+      method: 'get',
+      route: '/api/component-example/:component?',
+      handler: resolver.resolve('../server/api/component-example.get')
+    })
+  }
+})