doc: test deployment

docs/app.config.ts

@@ -1,25 +1,16 @@
 export default defineAppConfig({
-  docus: {
-    title: 'Unlighthouse',
-    name: 'Unlighthouse',
-    description: 'Like Google Lighthouse, but it scans every single page.',
-    url: 'https://unlighthouse.dev/',
-    image: 'https://unlighthouse.dev/og.png',
-    layout: 'default',
-    socials: {
-      twitter: '@harlan_zw',
-      github: 'harlan-zw/unlighthouse',
-    },
-    // github: {
-    //   root: 'content',
-    //   edit: true,
-    // },
-    aside: {
-      level: 1,
-    },
-    header: {
-      title: 'Unlighthouse',
-      logo: true,
+  ui: {
+    primary: 'violet',
+    gray: 'slate',
+    button: {
+      color: {
+        white: {
+          link: 'text-white dark:text-white hover:text-gray-300 dark:hover:text-gray-300 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 transition-all duration-200',
+        },
+        transparent: {
+          outline: 'ring-1 ring-inset ring-gray-700 text-white dark:text-white hover:bg-gray-900 disabled:bg-gray-300 dark:hover:bg-gray-900 dark:disabled:bg-gray-300 focus-visible:ring-2 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-400',
+        },
+      },
     },
   },
 })

docs/app.vue

@@ -1,11 +1,33 @@
-<script lang="ts" setup>
-const route = useRoute()
-useSeoKit()
+<script setup lang="ts">
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+provide('navigation', navigation)
 </script>
 
 <template>
-  <AppLayout>
-    <OgImageScreenshot v-if="route.path !== '/'" />
-    <NuxtPage />
-  </AppLayout>
+  <div>
+    <Header />
+
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+
+    <ClientOnly>
+      <DocsSearch />
+    </ClientOnly>
+
+    <footer class="text-sm border-t border-gray-100 dark:border-gray-800 mt-10 text-gray-700 dark:text-gray-200 flex justify-center items-center py-5">
+      <div class="mx-auto px-4 sm:px-6 lg:px-8 w-full max-w-7xl items-center flex justify-between">
+        <a href="https://www.netlify.com" class="ml-10" data-v-b929e136=""><img class="dark:hidden block" src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" data-v-b929e136=""><img class="dark:block hidden" src="https://www.netlify.com/v3/img/components/netlify-dark.svg" alt="Deploys by Netlify" data-v-b929e136=""></a>
+        <div class="flex items-center">
+          Created and maintained by
+          <UButton to="https://harlanzw.com" variant="ghost" :padded="false" class="ml-2">
+            <UAvatar src="https://avatars.githubusercontent.com/u/5326365?v=4" size="xs" class="w-5 h-5" /> Harlan Wilton
+          </UButton>
+        </div>
+      </div>
+    </footer>
+
+    <NuxtLoadingIndicator />
+  </div>
 </template>

docs/app/router.options.ts

@@ -1,5 +1,19 @@
 import type { RouterConfig } from '@nuxt/schema'
 
+function findHashPosition(hash): { el: any; behavior: ScrollBehavior; top: number } {
+  const el = document.querySelector(hash)
+  // vue-router does not incorporate scroll-margin-top on its own.
+  if (el) {
+    const top = Number.parseFloat(getComputedStyle(el).scrollMarginTop)
+
+    return {
+      el: hash,
+      behavior: 'smooth',
+      top,
+    }
+  }
+}
+
 // https://router.vuejs.org/api/#routeroptions
 export default <RouterConfig>{
   scrollBehavior(to, from, savedPosition) {
@@ -14,28 +28,22 @@ export default <RouterConfig>{
         })
       })
     }
+
     // Scroll to heading on click
     if (to.hash) {
-      setTimeout(() => {
-        const heading = document.querySelector(to.hash) as any
-
-        return window.scrollTo({
-          top: heading.offsetTop,
-          behavior: 'smooth',
-        })
-      })
-      return
-    }
-
-    // route change
-    if (from.path !== to.path) {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
+      return new Promise((resolve) => {
+        if (to.path === from.path) {
+          setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+        }
+        else {
+          nuxtApp.hooks.hookOnce('page:finish', () => {
+            setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+          })
+        }
       })
-      return
     }
 
+    // Scroll to top of window
     return { top: 0 }
   },
 }

docs/components/Gradient.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg viewBox="0 0 1440 348" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_527_134)">
+      <g filter="url(#filter0_f_527_134)">
+        <ellipse cx="720" cy="-87.5" rx="459" ry="196.5" fill="url(#paint0_radial_527_134)" />
+      </g>
+    </g>
+    <defs>
+      <filter id="filter0_f_527_134" x="-100" y="-645" width="1640" height="1115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="180.5" result="effect1_foregroundBlur_527_134" />
+      </filter>
+      <radialGradient id="paint0_radial_527_134" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(720 -87.5) rotate(90) scale(196.5 459)">
+        <stop stop-color="#000099" />
+        <stop offset="1" stop-color="#000099" stop-opacity="0" />
+      </radialGradient>
+      <clipPath id="clip0_527_134">
+        <rect width="1440" height="348" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

docs/components/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
+
+const isDialogOpen = ref(false)
+
+const links = [
+  { label: 'Documentation', to: '/getting-started' },
+  { label: 'Components', to: '/elements/avatar' },
+  { label: 'Examples', to: '/examples' },
+]
+</script>
+
+<template>
+  <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-200 dark:border-gray-800 bg-white/75 dark:bg-gray-900/75">
+    <UContainer>
+      <HeaderLinks v-model="isDialogOpen" :links="links" />
+    </UContainer>
+
+    <TransitionRoot :show="isDialogOpen" as="template">
+      <Dialog as="div" @close="isDialogOpen = false">
+        <DialogPanel class="fixed inset-0 z-50 overflow-y-auto bg-white dark:bg-gray-900 lg:hidden">
+          <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-200 dark:border-gray-800 bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
+            <HeaderLinks v-model="isDialogOpen" :links="links" />
+          </div>
+          <div class="px-4 sm:px-6 py-4 sm:py-6">
+            <DocsAsideLinks @click="isDialogOpen = false" />
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </TransitionRoot>
+  </header>
+</template>