docs: various improvements (#1667)

Author: atinux

docs/app/app.config.ts

@@ -11,4 +11,7 @@ export default defineAppConfig({
   llms: {
     domain: 'https://docs.npmx.dev',
   },
+  github: {
+    rootDir: 'docs',
+  },
 })

docs/app/assets/css/main.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@theme {
+  --font-sans: 'Geist', sans-serif;
+}

docs/app/components/AppHeaderCTA.vue

@@ -0,0 +1,11 @@
+<template>
+  <UButton
+    to="https://npmx.dev"
+    external
+    color="neutral"
+    variant="subtle"
+    size="xs"
+    trailingIcon="i-lucide-arrow-up-right"
+    label="npmx.dev"
+  />
+</template>

docs/app/components/AppHeaderLogo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex items-center">
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      class="w-8 h-8"
+    >
+      <title>npmx docs</title>
+      <rect fill="currentColor" x="110" y="310" width="60" height="60" />
+      <text
+        fill="var(--ui-primary)"
+        x="320"
+        y="370"
+        font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+        font-size="420"
+        font-weight="500"
+        text-anchor="middle"
+        style="user-select: none"
+      >
+        <tspan>/</tspan>
+      </text>
+    </svg>
+    <span class="text-base font-medium">npmx <span class="text-primary">docs</span></span>
+  </div>
+</template>

docs/nuxt.config.ts

@@ -1,6 +1,10 @@
 export default defineNuxtConfig({
   extends: ['docus'],
+  css: ['~/assets/css/main.css'],
   llms: {
     domain: 'https://docs.npmx.dev',
   },
+  site: {
+    name: 'npmx docs',
+  },
 })

docs/package.json

@@ -19,9 +19,11 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
+    "@nuxt/ui": "4.5.0",
     "@nuxtjs/mdc": "0.20.1",
     "better-sqlite3": "12.6.2",
     "docus": "5.6.1",
-    "nuxt": "4.3.1"
+    "nuxt": "4.3.1",
+    "tailwindcss": "4.2.1"
   }
 }

knip.ts

@@ -60,8 +60,15 @@ const config: KnipConfig = {
       project: ['src/**/*.ts!', '!src/mock-*.ts'],
     },
     'docs': {
-      entry: ['app/**/*.{ts,vue}'],
-      ignoreDependencies: ['docus', 'better-sqlite3', '@nuxtjs/mdc', 'nuxt!'],
+      entry: ['app/**/*.{ts,vue,css}'],
+      ignoreDependencies: [
+        'docus',
+        'better-sqlite3',
+        '@nuxtjs/mdc',
+        'nuxt!',
+        '@nuxt/ui',
+        'tailwindcss',
+      ],
     },
   },
 }