undocs 0.2.13 → 0.2.15

package/app/.unjs/app.config.ts

@@ -7,8 +7,4 @@ export default defineAppConfig({
       x: 'unjsio',
     },
   },
-  ui: {
-    primary: 'amber',
-    gray: 'zinc',
-  },
 })

package/app/components/AppHeader.vue

@@ -7,20 +7,15 @@ const appConfig = useAppConfig()
 
 const { metaSymbol } = useShortcuts()
 
-const navLinks = computed(() => {
-  // console.log(mapContentNavigation(navigation.value))
-  // console.log(JSON.parse(JSON.stringify(navigation.value, null, 2)))
-  return navigation.value
-    .map((nav) => {
-      if (!nav.children?.find((c) => c._path === nav._path)) {
-        return
-      }
-      return {
-        label: toLabel(nav._path.substring(1)),
-        to: nav._path,
-      }
-    })
-    .filter(Boolean)
+const docsNav = useDocsNav()
+
+const headerLinks = computed(() => {
+  return docsNav.links.map((link) => {
+    return {
+      ...link,
+      children: link.children?.filter((child) => !child.children || child.children.some((c) => c.to === child.to)),
+    }
+  })
 })
 </script>
 
@@ -33,26 +28,30 @@ const navLinks = computed(() => {
           {{ appConfig.site.name }}
         </span>
       </NuxtLink>
-    </template>
 
-    <template #center>
-      <UContentSearchButton label="Search..." class="hidden lg:flex" />
+      <div class="ml-8 lg:flex hidden">
+        <UContentSearchButton label="Search..." />
+      </div>
     </template>
 
+    <!-- <template #center>
+      <UContentSearchButton label="Search..." class="lg:flex hidden" />
+    </template> -->
+
     <template #right>
-      <UHeaderLinks :links="navLinks" class="mr-4" v-if="navLinks.length > 1" />
+      <UHeaderLinks :links="headerLinks" class="hidden md:flex mr-4" v-if="docsNav.links.length > 1" />
 
       <UTooltip class="lg:hidden" text="Search" :shortcuts="[metaSymbol, 'K']">
         <UContentSearchButton :label="null" />
       </UTooltip>
 
-      <!-- <ColorPicker /> -->
+      <ColorPicker />
 
-      <SocialButtons :socials="['github']" />
+      <SocialButtons />
     </template>
 
     <template #panel>
-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <UNavigationTree :links="docsNav.links" default-open :multiple="false" />
     </template>
   </UHeader>
 </template>

package/app/components/global/ProseCodeIcon.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  filename: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const config = {
+  '.config': 'vscode-icons:file-type-config',
+  // '.plugin': 'vscode-icons:file-type-plugin',
+  'package.json': 'vscode-icons:file-type-node',
+  'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+  '.npmrc': 'vscode-icons:file-type-npm',
+  '.editorconfig': 'vscode-icons:file-type-editorconfig',
+  '.eslintrc': 'vscode-icons:file-type-eslint',
+  '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+  '.eslintignore': 'vscode-icons:file-type-eslint',
+  '.gitignore': 'vscode-icons:file-type-git',
+  'yarn.lock': 'vscode-icons:file-type-yarn',
+  '.env': 'vscode-icons:file-type-dotenv',
+  '.env.example': 'vscode-icons:file-type-dotenv',
+  '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+  '.nuxtrc': 'vscode-icons:file-type-nuxt',
+  '.nuxtignore': 'vscode-icons:file-type-nuxt',
+  'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+  'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+  'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+  'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+  ts: 'vscode-icons:file-type-typescript',
+  tsx: 'vscode-icons:file-type-typescript',
+  mjs: 'vscode-icons:file-type-js',
+  cjs: 'vscode-icons:file-type-js',
+  js: 'vscode-icons:file-type-js',
+  jsx: 'vscode-icons:file-type-js',
+  md: 'vscode-icons:file-type-markdown',
+  py: 'vscode-icons:file-type-python',
+  ico: 'vscode-icons:file-type-favicon',
+  npm: 'vscode-icons:file-type-npm',
+  pnpm: 'vscode-icons:file-type-pnpm',
+  npx: 'vscode-icons:file-type-npm',
+  yarn: 'vscode-icons:file-type-yarn',
+  bun: 'vscode-icons:file-type-bun',
+  yml: 'vscode-icons:file-type-yaml',
+  terminal: 'i-heroicons-command-line',
+}
+
+const { ui } = useUI('content.prose.code.icon', undefined, config, undefined, true)
+
+const icon = computed(() => {
+  if (props.icon) {
+    return props.icon
+  }
+
+  const fullName = (props.filename || '').split(' ')[0] || ''
+  const filename = fullName.split('/').pop() || ''
+
+  if (ui.value[filename]) {
+    return ui.value[filename]
+  }
+
+  if (filename.includes('.config') || /\w+rc/.test(filename)) {
+    return ui.value['.config']
+  }
+
+  // if (fullName.includes('plugin')) {
+  //   return ui.value['.plugin']
+  // }
+
+  const extName = filename.split('.').pop()
+  if (ui.value[extName]) {
+    return ui.value[extName]
+  }
+})
+</script>
+
+<template>
+  <UIcon v-if="icon" :name="icon.split(' ').pop()" dynamic />
+</template>

package/app/components/global/ReadMore.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <Callout icon="i-ph-bookmark-simple-duotone" :to="to">
+  <Callout icon="i-ph-bookmark-simple-duotone" :to="to || '#'">
     <MDCSlot unwrap="p"> Read more in <span class="font-bold" v-html="computedTitle" />. </MDCSlot>
   </Callout>
 </template>
@@ -16,7 +16,7 @@ import { splitByCase, upperFirst } from 'scule'
 const props = defineProps({
   to: {
     type: String,
-    required: true,
+    required: false,
   },
   title: {
     type: String,

package/app/layouts/docs.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
-
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const docsNav = useDocsNav()
 </script>
 
 <template>
   <UContainer>
     <UPage>
       <template #left>
-        <UAside>
-          <UNavigationTree :links="mapContentNavigation(navigation)" />
+        <UAside :links="docsNav.links">
+          <UDivider type="dashed" class="mb-6" v-if="docsNav.activeLinks?.length" />
+          <UNavigationTree :links="docsNav.activeLinks" />
         </UAside>
       </template>
       <slot />

package/app/modules/theme.ts

@@ -0,0 +1,49 @@
+import { defineNuxtModule } from 'nuxt/kit'
+import type { DocsConfig } from '../../schema/config'
+
+export default defineNuxtModule({
+  setup(_, nuxt) {
+    if (nuxt.options._prepare) {
+      return
+    }
+
+    const docsConfig = (nuxt.options as any).docs as DocsConfig
+
+    const uiConfig = {
+      primary: docsConfig.themeColor || 'amber',
+      gray: 'neutral',
+    }
+
+    // if (docsConfig.themeColor) {
+    //   const { getColors } = await import('theme-colors')
+    //   const colors = getColors(docsConfig.themeColor)
+    //   // UI
+    //   // uiConfig.primary = colors['500']
+    //   // Tailwind
+    //   nuxt.options.tailwindcss ||= {} as any
+    //   nuxt.options.tailwindcss.config ||= {}
+    //   nuxt.options.tailwindcss.config.theme ||= {}
+    //   nuxt.options.tailwindcss.config.theme.extend ||= {}
+    //   nuxt.options.tailwindcss.config.theme.extend.colors = {
+    //     ...colors,
+    //     ...nuxt.options.tailwindcss.config.theme.extend.colors,
+    //   }
+    // }
+
+    nuxt.hook('ready', () => {
+      nuxt.options.appConfig.ui = {
+        ...nuxt.options.appConfig.ui,
+        ...uiConfig,
+      }
+    })
+
+    nuxt.hook('tailwindcss:config', (tailwindConfig) => {
+      const themeColor = (tailwindConfig.theme?.extend?.colors as any)?.theme?.['500']
+      if (themeColor) {
+        nuxt.options.app.head = nuxt.options.app.head || {}
+        nuxt.options.app.head.meta = nuxt.options.app.head.meta || []
+        nuxt.options.app.head.meta.push({ name: 'theme-color', content: themeColor })
+      }
+    })
+  },
+})

package/app/nuxt.config.ts

@@ -56,10 +56,7 @@ export default defineNuxtConfig({
       '\\.(js|mjs|ts)$',
     ],
     highlight: {
-      theme: {
-        default: 'min-dark',
-        light: 'min-light',
-      },
+      langs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash'],
     },
   },
   routeRules: {

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

@@ -57,6 +57,10 @@ const tocLinks = computed(() =>
 const scrollToTop = () => {
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
+const isMobile = ref(false)
+onMounted(() => {
+  isMobile.value = 'ontouchstart' in document.documentElement
+})
 </script>
 
 <template>
@@ -64,11 +68,14 @@ const scrollToTop = () => {
     <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline">
     </UPageHeader>
 
-    <div class="mt-4 top-[calc(var(--header-height)_+_0.5rem)] z-10 flex justify-end lg:sticky">
+    <div
+      v-if="tocLinks.length > 1"
+      class="float-right mt-4 top-[calc(var(--header-height)_+_0.5rem)] z-10 flex justify-end sticky"
+    >
       <UDropdown
-        v-if="tocLinks.length > 2"
         :items="[[{ label: 'Return to top', click: scrollToTop }], tocLinks]"
         :popper="{ placement: 'bottom-end' }"
+        :mode="isMobile ? 'click' : 'hover'"
         v-model:open="tocOpen"
       >
         <UButton
@@ -81,6 +88,8 @@ const scrollToTop = () => {
     </div>
 
     <UPageBody prose>
+      <br v-if="tocLinks.length > 1" />
+
       <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="space-y-6">

package/app/pages/index.vue

@@ -38,7 +38,7 @@ function nornalizeHeroLinks(links: LandingConfig['heroLinks']) {
         link = { to: link }
       }
       return {
-        label: toLabel(key),
+        label: titleCase(key),
         order,
         target: link.to?.startsWith('https') ? '_blank' : undefined,
         ...link,

package/app/utils/nav.ts

@@ -0,0 +1,36 @@
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+export function useDocsNav() {
+  const navigation = inject<Ref<NavItem[]>>('navigation')
+
+  const route = useRoute()
+
+  const isActive = (path: string) => route.path.startsWith(path)
+
+  const links = computed(() => {
+    return mapContentNavigation(navigation.value).map((item) => {
+      if (item.children?.length === 1) {
+        return {
+          ...item,
+          ...item.children[0],
+          children: undefined,
+          active: isActive(item.to as string),
+        }
+      }
+      return {
+        ...item,
+        label: titleCase(item.to),
+        active: isActive(item.to as string),
+      }
+    })
+  })
+
+  const activeLinks = computed(() => {
+    return links.value.find((l) => route.path.startsWith(l.to as string))?.children || []
+  })
+
+  return reactive({
+    links,
+    activeLinks,
+  })
+}

package/app/utils/title.ts

@@ -0,0 +1,9 @@
+import { titleCase as _titleCase } from 'scule'
+
+export function titleCase(key: string) {
+  let label = _titleCase(key)
+  if (label === 'Api') {
+    label = 'API'
+  }
+  return label
+}

package/cli/setup.mjs

@@ -1,6 +1,5 @@
 import { fileURLToPath } from 'node:url'
 import { resolve } from 'node:path'
-import { getColors } from 'theme-colors'
 import { loadConfig, watchConfig } from 'c12'
 
 const appDir = fileURLToPath(new URL('../app', import.meta.url))
@@ -69,15 +68,6 @@ export async function setupDocs(docsDir, opts = {}) {
     routeRules: {
       ...Object.fromEntries(Object.entries(docsconfig.redirects || {}).map(([from, to]) => [from, { redirect: to }])),
     },
-    tailwindcss: {
-      config: {
-        theme: {
-          extend: {
-            colors: docsconfig.themeColor ? { theme: getColors(docsconfig.themeColor) } : undefined,
-          },
-        },
-      },
-    },
   }
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "undocs",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "repository": "unjs/undocs",
   "license": "MIT",
   "type": "module",
@@ -51,7 +51,6 @@
     "pkg-types": "^1.0.3",
     "scule": "^1.3.0",
     "tailwindcss": "^3.4.1",
-    "theme-colors": "^0.1.0",
     "unctx": "^2.3.1",
     "unstorage": "^1.10.1",
     "vue": "^3.4.19",

package/app/modules/tailwind.ts

@@ -1,18 +0,0 @@
-import { defineNuxtModule } from 'nuxt/kit'
-
-export default defineNuxtModule({
-  setup(_, nuxt) {
-    if (nuxt.options._prepare) {
-      return
-    }
-
-    nuxt.hook('tailwindcss:config', (tailwindConfig) => {
-      const themeColor = (tailwindConfig.theme?.extend?.colors as any)?.theme?.['500']
-      if (themeColor) {
-        nuxt.options.app.head = nuxt.options.app.head || {}
-        nuxt.options.app.head.meta = nuxt.options.app.head.meta || []
-        nuxt.options.app.head.meta.push({ name: 'theme-color', content: themeColor })
-      }
-    })
-  },
-})

package/app/utils/label.ts

@@ -1,9 +0,0 @@
-import { trainCase } from 'scule'
-
-export function toLabel(key: string) {
-  let label = trainCase(key).replaceAll('-', ' ')
-  if (label === 'Api') {
-    label = 'API'
-  }
-  return label
-}