docs: support ssg

docs/components/Header.vue

@@ -3,7 +3,7 @@
     <UContainer>
       <div class="flex items-center justify-between h-16">
         <div class="flex items-center gap-3">
-          <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+          <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
             <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
 
             NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
@@ -62,7 +62,7 @@
           <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
             <div class="flex items-center justify-between h-16">
               <div class="flex items-center gap-3">
-                <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+                <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
                   <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
                   NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
                 </NuxtLink>

docs/components/ThemeSelect.vue

@@ -1,48 +1,52 @@
 <template>
   <div class="flex items-center shadow-sm">
-    <USelectMenu
+    <ClientOnly>
-      v-model="primary"
+      <USelectMenu
-      name="primary"
+        v-model="primary"
-      class="w-full [&>div>button]:!rounded-r-none"
+        name="primary"
-      appearance="gray"
+        class="w-full [&>div>button]:!rounded-r-none"
-      :ui="{ width: 'w-[194px]' }"
+        appearance="gray"
-      :popper="{ placement: 'bottom-start' }"
+        :ui="{ width: 'w-[194px]' }"
-      :options="primaryOptions"
+        :popper="{ placement: 'bottom-start' }"
-    >
+        :options="primaryOptions"
-      <template #label>
+      >
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
+        <template #label>
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
 
-        {{ primary.text }}
+          {{ primary.text }}
-      </template>
+        </template>
 
-      <template #option="{ option }">
+        <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
+          {{ option.text }}
-      </template>
+        </template>
-    </USelectMenu>
+      </USelectMenu>
+    </ClientOnly>
 
-    <USelectMenu
+    <ClientOnly>
-      v-model="gray"
+      <USelectMenu
-      name="gray"
+        v-model="gray"
-      class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+        name="gray"
-      appearance="gray"
+        class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
-      :ui="{ width: 'w-[194px]' }"
+        appearance="gray"
-      :popper="{ placement: 'bottom-end' }"
+        :ui="{ width: 'w-[194px]' }"
-      :options="grayOptions"
+        :popper="{ placement: 'bottom-end' }"
-    >
+        :options="grayOptions"
-      <template #label>
+      >
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
+        <template #label>
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
 
-        {{ gray.text }}
+          {{ gray.text }}
-      </template>
+        </template>
 
-      <template #option="{ option }">
+        <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
+          {{ option.text }}
-      </template>
+        </template>
-    </USelectMenu>
+      </USelectMenu>
+    </ClientOnly>
   </div>
 </template>
 
@@ -84,4 +88,44 @@ const gray = computed({
     grayCookie.value = option.value
   }
 })
+
+// Hack for SSG
+const hexToRgb = (hex) => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (_, r, g, b) {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
+    : null
+}
+const root = computed(() => {
+    return `:root {
+${Object.entries(colors[primary.value.value] || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(colors[gray.value.value] || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+}`
+  })
+if (process.client) {
+  watch(root, () => {
+    console.log('update')
+    window.localStorage.setItem('nuxt-ui-root', root.value)
+  }, { immediate: true })
+}
+if (process.server) {
+  useHead({
+    script: [
+      {
+        innerHTML: `
+            if (localStorage.getItem('nuxt-ui-root')) {
+              document.querySelector('style#nuxt-ui-colors').innerHTML = localStorage.getItem('nuxt-ui-root')
+            }`.replace(/\s+/g, ' '),
+        type: 'text/javascript',
+        tagPriority: -1
+      }
+    ]
+  })
+}
 </script>

docs/nuxt.config.ts

@@ -30,14 +30,10 @@ export default defineNuxtConfig({
     strict: false,
     includeWorkspace: true
   },
-  // @ts-ignore
-  $production: {
-    routeRules: {
-      '/api/_content/**': { isr: true, static: true },
-      '/api/component-meta/**': { isr: true, static: true }
-    }
-  },
   routeRules: {
-    // '/getting-started': { swr: 100000 }
+    '/': { redirect: '/getting-started' },
+  },
+  generate: {
+    routes: ['/getting-started']
   }
 })

docs/pages/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup lang="ts">
-await navigateTo('/getting-started')
-</script>

package.json

@@ -21,7 +21,7 @@
     "build": "nuxt-module-build",
     "prepack": "yarn build",
     "dev": "nuxi dev docs",
-    "build:docs": "nuxi build docs",
+    "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "typecheck": "nuxi typecheck",
     "prepare": "nuxi prepare docs",

src/runtime/plugins/colors.ts

@@ -28,7 +28,8 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
   const headData: any = {
     style: [{
       innerHTML: () => root.value,
-      tagPriority: -2
+      tagPriority: -2,
+      id: 'nuxt-ui-colors'
     }]
   }