undocs 0.2.13 → 0.2.14

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,6 +7,8 @@ const appConfig = useAppConfig()
 
 const { metaSymbol } = useShortcuts()
 
+const route = useRoute()
+
 const navLinks = computed(() => {
   // console.log(mapContentNavigation(navigation.value))
   // console.log(JSON.parse(JSON.stringify(navigation.value, null, 2)))
@@ -18,6 +20,7 @@ const navLinks = computed(() => {
       return {
         label: toLabel(nav._path.substring(1)),
         to: nav._path,
+        active: route.path.startsWith(nav._path),
       }
     })
     .filter(Boolean)
@@ -40,7 +43,7 @@ const navLinks = computed(() => {
     </template>
 
     <template #right>
-      <UHeaderLinks :links="navLinks" class="mr-4" v-if="navLinks.length > 1" />
+      <UHeaderLinks :links="navLinks" class="hidden sm:flex mr-4" v-if="navLinks.length > 1" />
 
       <UTooltip class="lg:hidden" text="Search" :shortcuts="[metaSymbol, 'K']">
         <UContentSearchButton :label="null" />
@@ -52,7 +55,7 @@ const navLinks = computed(() => {
     </template>
 
     <template #panel>
-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <NavigationTree />
     </template>
   </UHeader>
 </template>

package/app/components/NavigationTree.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+
+const navigationLinks = computed(() => {
+  return mapContentNavigation(navigation.value).map((item) => {
+    if (item.children?.length === 1) {
+      return {
+        ...item,
+        ...item.children[0],
+        children: undefined,
+      }
+    }
+    return item
+  })
+})
+</script>
+
+<template>
+  <UNavigationTree :links="navigationLinks" default-open :multiple="false" />
+</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>

package/app/layouts/docs.vue

@@ -1,15 +1,11 @@
-<script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
-
-const navigation = inject<Ref<NavItem[]>>('navigation')
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <UContainer>
     <UPage>
       <template #left>
         <UAside>
-          <UNavigationTree :links="mapContentNavigation(navigation)" />
+          <NavigationTree />
         </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,12 @@ 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 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

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.14",
   "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 })
-      }
-    })
-  },
-})