undocs 0.3.7 → 0.3.9

package/app/components/SocialButtons.vue

@@ -1,14 +1,6 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
 
-// const props = defineProps({
-//   socials: {
-//     type: Array,
-//     required: false,
-//     default: () => ['github', 'twitter', 'discord'],
-//   },
-// })
-
 const socialLinks = computed(() => {
   return (
     Object.entries({ github: appConfig.docs.github, ...appConfig.docs.socials })
@@ -22,7 +14,7 @@ const socialLinks = computed(() => {
           return {
             // Workaround: i-simple-icons-x i-simple-icons-github
             icon: `i-simple-icons-${key}`,
-            label: value,
+            label: titleCase(key),
             to: /^https?:\/\//.test(value) ? value : `https://${key}.com/${value}`,
           }
         }
@@ -33,15 +25,15 @@ const socialLinks = computed(() => {
 })
 </script>
 <template>
-  <UButton
-    v-for="link of socialLinks"
-    :key="link.label"
-    :aria-label="link.label"
-    :icon="link.icon"
-    :to="link.to"
-    target="_blank"
-    rel="noopener noreferrer"
-    color="neutral"
-    variant="ghost"
-  />
+  <UTooltip v-for="link of socialLinks" :key="link.label" :text="link.label">
+    <UButton
+      :aria-label="link.label"
+      :icon="link.icon"
+      :to="link.to"
+      target="_blank"
+      rel="noopener noreferrer"
+      color="neutral"
+      variant="ghost"
+    />
+  </UTooltip>
 </template>

package/app/content.config.ts

@@ -6,7 +6,7 @@ export default defineContentConfig({
       type: 'page',
       source: {
         cwd: globalThis.__DOCS_CWD__,
-        include: '**/*.md',
+        include: '**/*.{md,yml}',
         exclude: ['**/.**/**', '**/node_modules/**', '**/dist/**', '**/.docs/**'],
       },
     }),

package/app/layouts/docs.vue

@@ -9,13 +9,7 @@ const docsNav = useDocsNav()
         <UPageAside>
           <UPageAnchors :links="docsNav.links.filter((l) => l.title !== 'Blog')" />
           <USeparator v-if="docsNav.activeLinks?.length" type="dashed" class="py-6" />
-          <UContentNavigation
-            :navigation="docsNav.activeLinks"
-            default-open
-            trailing-icon="i-lucide-chevron-right"
-            :ui="{ linkTrailingIcon: 'group-data-[state=open]:rotate-90' }"
-            highlight
-          />
+          <UContentNavigation :navigation="docsNav.activeLinks" :collapsible="false" />
         </UPageAside>
       </template>
       <slot />

package/app/modules/content/hooks.ts

@@ -1,4 +1,4 @@
-import type { MarkdownRoot, MinimalNode, MinimalElement } from '@nuxt/content'
+import type { MarkdownRoot, MinimarkNode, MinimarkElement } from '@nuxt/content'
 import type { Nuxt } from 'nuxt/schema'
 import { CommonIcons } from './icons'
 import type { DocsConfig } from '../../../schema/config'
@@ -13,6 +13,9 @@ interface ParsedContentFile extends Record<string, unknown> {
   meta?: {
     icon?: string
   }
+  body?: {
+    icon?: string
+  }
 }
 
 export async function setupContentHooks(nuxt: Nuxt, docsConfig: DocsConfig) {
@@ -59,13 +62,14 @@ export async function setupContentHooks(nuxt: Nuxt, docsConfig: DocsConfig) {
   })
 
   nuxt.hooks.hook('content:file:afterParse', ({ content }) => {
+    // Infer icon for top level navigation
+    inferIcons(content)
+
     // Filter out non-markdown files
     if (content.extension !== 'md') {
       return
     }
 
-    resolveFileIcon(content)
-
     const body = content.body as MarkdownRoot
     removeFirstH1AndBlockquote(body, content)
     body.value = mergeCodeGroups(body.value)
@@ -84,7 +88,7 @@ export async function setupContentHooks(nuxt: Nuxt, docsConfig: DocsConfig) {
 
 // Handle GitHub flavoured markdown blockquotes
 // https://github.com/orgs/community/discussions/16925
-function transformGithubAlert(node: MinimalNode) {
+function transformGithubAlert(node: MinimarkNode) {
   if (
     node[0] === 'blockquote' &&
     Array.isArray(node[2]) &&
@@ -97,17 +101,17 @@ function transformGithubAlert(node: MinimalNode) {
     // @ts-expect-error read-only
     node[0] = node[2][2][2].slice(1).toLowerCase()
     // @ts-expect-error read-only
-    node[2] = ['p', {}, ...node[2].slice(3)] as MinimalElement
+    node[2] = ['p', {}, ...node[2].slice(3)] as MinimarkElement
   }
 }
 
 // --- transform steps list ---
 
-function transformStepsList(node: MinimalNode) {
+function transformStepsList(node: MinimarkNode) {
   // CONVERT OL->LI to Steps
   if (Array.isArray(node) && node[0] === 'ol' && node.length > 3 && Array.isArray(node[2]) && node[2][0] === 'li') {
-    const stepsChildren = node.slice(2).map((li: MinimalNode) => {
-      return ['h4', {}, ...li.slice(2)] as MinimalElement
+    const stepsChildren = node.slice(2).map((li: MinimarkNode) => {
+      return ['h4', {}, ...li.slice(2)] as MinimarkElement
     })
     node.splice(0, Infinity, 'steps', { level: '4' }, ...stepsChildren)
   }
@@ -143,17 +147,31 @@ function removeFirstH1AndBlockquote(body: MarkdownRoot, content: ParsedContentFi
 
 // --- resolve icon ---
 
-function resolveFileIcon(content: ParsedContentFile) {
-  if (content.navigation?.icon) {
-    return
-  }
-  content.navigation ||= {}
-  content.navigation.icon = content.meta.icon || _resolveIcon(content.path)
+function inferIcons(content: ParsedContentFile) {
+  const icon = content.meta?.icon || content.navigation?.icon || content.body?.icon || _resolveIcon(content.path)
+
+  content.body ??= {}
+  content.body.icon ??= icon
+
+  content.meta ??= {}
+  content.meta.icon ??= icon
+
+  content.navigation ??= {}
+  content.navigation.icon ??= icon
 }
 
 function _resolveIcon(path: string = '') {
   // Split the path into parts and reverse it
-  const paths = path.slice(1).split('/').reverse()
+  const paths = path
+    .slice(1)
+    .split('/')
+    .reverse()
+    .filter((p) => p && !p.startsWith('.'))
+
+  // Skip 2+ levels of directories
+  if (paths.length > 2) {
+    return
+  }
 
   // Search for icons in reverse order
   for (const p of paths) {
@@ -167,10 +185,10 @@ function _resolveIcon(path: string = '') {
 
 // --- Merge code groups ---
 
-function mergeCodeGroups(children: MinimalNode[] = []): MinimalNode[] {
-  const newChildren: MinimalNode[] = []
+function mergeCodeGroups(children: MinimarkNode[] = []): MinimarkNode[] {
+  const newChildren: MinimarkNode[] = []
 
-  let codeBlocks: MinimalNode[] = []
+  let codeBlocks: MinimarkNode[] = []
 
   for (let i = 0; i < children.length; i++) {
     if (_isNamedCodeBlock(children[i])) {
@@ -187,20 +205,20 @@ function mergeCodeGroups(children: MinimalNode[] = []): MinimalNode[] {
   return newChildren
 }
 
-function _isNamedCodeBlock(node: MinimalNode): boolean {
+function _isNamedCodeBlock(node: MinimarkNode): boolean {
   return node[0] === 'pre' && (node[1] as any)?.filename && node[2]?.[0] === 'code'
 }
 
 // --- transform automd jsdocs ---
 
-export function transformJSDocs(currChildIdx: number, children: MinimalNode[] = []) {
+export function transformJSDocs(currChildIdx: number, children: MinimarkNode[] = []) {
   if (!children?.length || !_isJSDocBlock(children[currChildIdx])) {
     return
   }
 
-  const fields: MinimalNode[] = []
+  const fields: MinimarkNode[] = []
 
-  const generateFields = (i: number): MinimalNode => {
+  const generateFields = (i: number): MinimarkNode => {
     const name = _parseJSDocName(children[i])
     const type = _parseJSDocType(children[i + 1])
 
@@ -212,7 +230,7 @@ export function transformJSDocs(currChildIdx: number, children: MinimalNode[] =
       type,
     }
 
-    const content: MinimalNode[] = []
+    const content: MinimarkNode[] = []
 
     i++
 
@@ -263,17 +281,17 @@ export function transformJSDocs(currChildIdx: number, children: MinimalNode[] =
   }
 }
 
-function _isJSDocBlock(children: MinimalNode): boolean {
+function _isJSDocBlock(children: MinimarkNode): boolean {
   return (
     children?.tag === 'h3' && children?.children?.[0]?.tag === 'code' && children?.children?.[0]?.type === 'element'
   )
 }
 
-function _parseJSDocName(node: MinimalNode): string {
+function _parseJSDocName(node: MinimarkNode): string {
   // Code block || id prop || empty string
   return node.children?.[0]?.children?.[0]?.value || node?.props?.id || ''
 }
-function _parseJSDocType(node: MinimalNode): string {
+function _parseJSDocType(node: MinimarkNode): string {
   const hasType = !!node?.children?.[0]?.children?.[0]?.children?.[0]?.value
   if (!hasType) {
     return ''
@@ -284,7 +302,7 @@ function _parseJSDocType(node: MinimalNode): string {
 
 // --- internal utils ---
 
-function _getTextContent(node: MinimalNode): string {
+function _getTextContent(node: MinimarkNode): string {
   if (!node) {
     return ''
   }

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { kebabCase } from 'scule'
-import { findPageHeadline } from '#ui-pro/utils/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
 definePageMeta({
   layout: 'docs',
@@ -27,6 +27,30 @@ const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround
   })
 })
 
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+// console.log(JSON.stringify(navigation?.value, null, 2))
+
+function makeBreadcrumb(items: ContentNavigationItem[], path: string, level = 0) {
+  const parent = [...items].find((i) => path.startsWith(i.path) && i.children?.length > 0)
+  if (!parent) {
+    return []
+  }
+  if (level === 0) {
+    return makeBreadcrumb(parent.children, path, level + 1)
+  }
+  return [
+    {
+      label: parent.title,
+      icon: parent.icon as string,
+      to: parent.page !== false ? parent.path : '',
+    },
+    ...makeBreadcrumb(parent.children, path, level + 1),
+  ]
+}
+
+const breadcrumb = computed(() => makeBreadcrumb(navigation?.value || [], page.value.path))
+
 usePageSEO({
   title: `${page.value?.title} - ${appConfig.site.name}`,
   ogTitle: page.value?.title,
@@ -36,12 +60,11 @@ usePageSEO({
 
 <template>
   <UPage v-if="page">
-    <UPageHeader
-      :title="page.title"
-      :description="page.description"
-      :links="page.links"
-      :headline="findPageHeadline(page)"
-    />
+    <UPageHeader :title="page.title" :description="page.description" :links="page.links">
+      <template #headline>
+        <UBreadcrumb :items="breadcrumb" />
+      </template>
+    </UPageHeader>
 
     <template #right>
       <UContentToc title="On this page" :links="page.body?.toc?.links || []" highlight />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "undocs",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "repository": "unjs/undocs",
   "license": "MIT",
   "type": "module",