From 5c4ab26d25b7306520a8eb6cc47eaea0f5fc02e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sat, 20 May 2023 18:31:56 +0200
Subject: [PATCH] docs: support ssg

---
 docs/components/Header.vue      |   4 +-
 docs/components/ThemeSelect.vue | 116 ++++++++++++++++++++++----------
 docs/nuxt.config.ts             |  12 ++--
 docs/pages/index.vue            |   7 --
 package.json                    |   2 +-
 src/runtime/plugins/colors.ts   |   3 +-
 6 files changed, 89 insertions(+), 55 deletions(-)
 delete mode 100644 docs/pages/index.vue

diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index c804cedc..bae540e3 100644
--- a/docs/components/Header.vue
+++ b/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>
diff --git a/docs/components/ThemeSelect.vue b/docs/components/ThemeSelect.vue
index 9fb4e116..74c552b4 100644
--- a/docs/components/ThemeSelect.vue
+++ b/docs/components/ThemeSelect.vue
@@ -1,48 +1,52 @@
 <template>
   <div class="flex items-center shadow-sm">
-    <USelectMenu
-      v-model="primary"
-      name="primary"
-      class="w-full [&>div>button]:!rounded-r-none"
-      appearance="gray"
-      :ui="{ width: 'w-[194px]' }"
-      :popper="{ placement: 'bottom-start' }"
-      :options="primaryOptions"
-    >
-      <template #label>
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
+    <ClientOnly>
+      <USelectMenu
+        v-model="primary"
+        name="primary"
+        class="w-full [&>div>button]:!rounded-r-none"
+        appearance="gray"
+        :ui="{ width: 'w-[194px]' }"
+        :popper="{ placement: 'bottom-start' }"
+        :options="primaryOptions"
+      >
+        <template #label>
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
 
-        {{ primary.text }}
-      </template>
+          {{ primary.text }}
+        </template>
 
-      <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+        <template #option="{ option }">
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
-      </template>
-    </USelectMenu>
+          {{ option.text }}
+        </template>
+      </USelectMenu>
+    </ClientOnly>
 
-    <USelectMenu
-      v-model="gray"
-      name="gray"
-      class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
-      appearance="gray"
-      :ui="{ width: 'w-[194px]' }"
-      :popper="{ placement: 'bottom-end' }"
-      :options="grayOptions"
-    >
-      <template #label>
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
+    <ClientOnly>
+      <USelectMenu
+        v-model="gray"
+        name="gray"
+        class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+        appearance="gray"
+        :ui="{ width: 'w-[194px]' }"
+        :popper="{ placement: 'bottom-end' }"
+        :options="grayOptions"
+      >
+        <template #label>
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
 
-        {{ gray.text }}
-      </template>
+          {{ gray.text }}
+        </template>
 
-      <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+        <template #option="{ option }">
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
-      </template>
-    </USelectMenu>
+          {{ option.text }}
+        </template>
+      </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>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 9dbbf319..395b1737 100644
--- a/docs/nuxt.config.ts
+++ b/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']
   }
 })
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
deleted file mode 100644
index 96b4f208..00000000
--- a/docs/pages/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup lang="ts">
-await navigateTo('/getting-started')
-</script>
diff --git a/package.json b/package.json
index 681e2530..477c735e 100644
--- a/package.json
+++ b/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",
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index e2e18628..de18ca0f 100644
--- a/src/runtime/plugins/colors.ts
+++ b/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'
     }]
   }