doc: stable progress

Author: harlan-zw

.gitignore

@@ -15,3 +15,5 @@ sw.*
 .netlify
 
 .content
+
+.data

docs/app/app.config.ts

@@ -8,6 +8,35 @@ export default defineAppConfig({
     radius: 0.25,
   },
   ui: {
+    icons: {
+      caution: 'carbon-warning-alt',
+      copy: 'carbon-copy',
+      dark: 'carbon-moon',
+      document: 'carbon-document',
+      external: 'carbon-launch',
+      hash: 'carbon-hash',
+      light: 'carbon-sun',
+      menu: 'carbon-menu',
+      next: 'carbon-arrow-right',
+      note: 'carbon-information',
+      prev: 'carbon-arrow-left',
+      system: 'carbon-computer',
+      tip: 'carbon-lightbulb',
+      warning: 'carbon-warning',
+      chevronDoubleLeft: 'carbon-chevron-double-left',
+      chevronDoubleRight: 'carbon-chevron-double-right',
+      chevronDown: 'carbon-chevron-down',
+      chevronLeft: 'carbon-chevron-left',
+      chevronRight: 'carbon-chevron-right',
+      arrowLeft: 'carbon-arrow-left',
+      arrowRight: 'carbon-arrow-right',
+      check: 'carbon-checkmark',
+      close: 'carbon-close',
+      ellipsis: 'carbon-overflow-menu-horizontal',
+      loading: 'carbon-loading',
+      minus: 'carbon-subtract',
+      search: 'carbon-search',
+    },
     colors: {
       primary: 'green',
       gray: 'slate',

docs/app/app.vue

@@ -1,92 +1,17 @@
 <script setup lang="ts">
-import { titleCase } from 'scule'
 import { fetchStats } from '~/composables/stats'
 import { modules } from '../../src/const'
-import { menu } from './composables/nav'
-
-function mapPath(data, node = 0) {
-  return data.map((item) => {
-    if (item.children?.length && !item.page) {
-      item.title = titleCase(item.title)
-      item.children = mapPath(item.children, node + 1)
-    }
-    return {
-      ...item,
-      _path: item.path,
-    }
-  })
-}
-
-async function mapPath2(data, node = 0) {
-  return await Promise.all(
-    data
-      .map((item) => {
-        if (item.children?.length && !item.page) {
-          item.title = titleCase(item.title)
-          item.children = mapPath(item.children, node + 1)
-        }
-        return {
-          ...item,
-          _path: item.path,
-        }
-      })
-      .map(async (m) => {
-        if (m.path.endsWith('/api')) {
-          m.icon = 'i-logos-nuxt-icon'
-          m.title = 'Nuxt API'
-        }
-        else if (m.path.endsWith('/nitro-api')) {
-          m.icon = 'i-unjs-nitro'
-          m.title = 'Nitro API'
-        }
-        else if (m.path.endsWith('/releases')) {
-          m.icon = 'i-noto-sparkles'
-          m.title = 'Releases'
-        }
-        else if (m.path.endsWith('/guides')) {
-          m.icon = 'i-ph-book-duotone'
-          m.title = 'Guides'
-        }
-        if (m.children?.length) {
-          m.children = m.children.map((c) => {
-            if (c.children?.length === 1) {
-              c = c.children[0]
-            }
-            return c
-          })
-          for (const k in m.children) {
-            if (m.children[k].title.endsWith('()')) {
-              m.children[k].mdc = true
-              m.children[k].title = await markdownParser(`\`${m.children[k].title}\`{lang="ts"}`)
-            }
-          }
-        }
-        return m
-      })
-  )
-}
 
 const { data: stats } = await useAsyncData('stats', () => fetchStats())
 
-const route = useRoute()
 const appConfig = useAppConfig()
-const colorMode = useColorMode()
 
 provide('stats', stats)
 provide('modules', modules)
 
 useSeoMeta({
   ogTitle: 'Nuxt SEO · All the boring SEO work for Nuxt done.',
-  // twitterTitle: 'Nuxt SEO - All the boring SEO work for Nuxt done.',
-})
-
-const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
-const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
-
-useHead({
-  style: [
-    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-  ],
+  twitterTitle: 'Nuxt SEO - All the boring SEO work for Nuxt done.',
 })
 </script>
 
@@ -100,80 +25,7 @@ useHead({
 
     <ClientOnly />
 
-    <footer class="relative z-10 antialiased font-sans dark:bg-[#131822] bg-neutral-50 text-sm text-gray-700 dark:text-gray-200 mt-20">
-      <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-blue-900/30 pointer-events-none absolute w-full top-[1px] transition-all text-primary flex-shrink-0 opacity-100 duration-[400ms] opacity-30 z-20"><mask id="path-1-inside-1_414_5526" fill="white"><path d="M0 0H1440V181H0V0Z" /></mask><path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" /><path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" /><defs><linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient><linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity="0" /><stop offset="0.395" stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient></defs></svg>
-      <div class="border-t border-gray-200 dark:border-gray-800">
-        <UContainer>
-          <div class="py-10 grid xl:grid-cols-3 lg:gap-20 gap-10">
-            <div v-for="(category, cKey) in menu.filter(c => c.children?.length)" :key="cKey">
-              <h3 class="font-bold mb-5 flex items-center gap-1">
-                <UIcon dynamic :name="category.icon" class="w-5 h-5" />
-                {{ category.label }}
-              </h3>
-              <nav>
-                <ul class="grid grid-cols-2 gap-6">
-                  <li v-for="(link, key) in category.children" :key="key">
-                    <ULink :to="link.to" class="flex items-center gap-1 hover:underline transition">
-                      <UIcon v-if="link.icon" dynamic :name="link.icon" class="w-4 h-4" :class="cKey === 0 ? 'text-blue-500 dark:text-blue-300' : ''" />
-                      {{ link.label }}
-                    </ULink>
-                  </li>
-                </ul>
-              </nav>
-            </div>
-          </div>
-          <div class="flex items-center gap-10 mb-6">
-            <NuxtLink to="/" title="Home" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white font-title">
-              <Logo />
-            </NuxtLink>
-            <div class="w-sm bg-gray-50 dark:bg-gray-800 flex rounded-xl shadow p-5">
-              <div>
-                <div class="mb-2">
-                  Hey <UIcon name="i-noto-waving-hand" /> My name is <a href="https://harlanzw.com" target="_blank" class="underline">Harlan</a> and I'm the author and maintainer of Nuxt SEO.
-                </div>
-                <div>
-                  I'd love to have your <a href="https://github.com/sponsors/harlan-zw" class="underline">support</a>!
-                </div>
-              </div>
-              <div class="gap-3">
-                <img alt="Harlan Wilton" loading="lazy" src="https://avatars.githubusercontent.com/u/5326365?v=4" class="mx-auto rounded-full w-10 h-10 mb-3">
-                <div class="flex justify-center items-center opacity-70">
-                  <UButton
-                    title="Twitter"
-                    aria-label="Twitter"
-                    to="https://twitter.com/harlan_zw"
-                    target="_blank"
-                    color="gray"
-                    variant="ghost"
-                    class="hidden lg:inline-flex transition"
-                    icon="i-simple-icons-x"
-                  />
-
-                  <UButton
-                    title="GitHub"
-                    aria-label="GitHub"
-                    to="https://github.com/harlan-zw/nuxt-seo"
-                    target="_blank"
-                    color="gray"
-                    variant="ghost"
-                    class="hidden lg:inline-flex transition"
-                    icon="i-simple-icons-github"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </UContainer>
-      </div>
-      <div class="border-t border-gray-200 dark:border-gray-800">
-        <UContainer>
-          <div class="py-10">
-            Copyright © 2023-{{ new Date().getFullYear() }} Harlan Wilton - <a href="https://github.com/harlan-zw/nuxt-seo/blob/main/LICENSE">MIT License</a>
-          </div>
-        </UContainer>
-      </div>
-    </footer>
-    <NuxtLoadingIndicator />
+    <Footer />
   </UApp>
 </template>
 
@@ -182,8 +34,8 @@ useHead({
 @import "@nuxt/ui-pro";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
-  --font-family-mono: 'Fira Code', monospace;
+  --font-family-sans: 'Hubot Sans', sans-serif;
+  --font-family-mono: 'Hubot Sans', monospace;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;
@@ -201,4 +53,20 @@ useHead({
 :root {
   --container-width: 90rem;
 }
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+#root, #__nuxt {
+  isolation: isolate;
+}
 </style>

docs/app/assets/icons/request-indexing.svg

@@ -1,7 +1,7 @@
 <template>
   <UBanner :actions="[{ label: 'Read the announcement post', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
     <template #title>
-    <UIcon name="i-noto-party-popper" class="mr-2" />
+      <UIcon name="i-noto-party-popper" class="mr-2" />
       <span class="font-semibold">Nuxt SEO v2 stable is here!</span>
     </template>
   </UBanner>

docs/app/assets/icons/unhead.svg

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const module = useModule()
+const searchTerm = ref('')
+const _nav = await useDocsNav()
+const nav = computed(() => {
+  const { top = [], bottom = [] } = _nav.value?.nav.value || {}
+  return {
+    top,
+    bottom,
+  }
+})
+const files = computed(() => _nav.value?.files.value || [])
+</script>
+
+<template>
+  <div>
+    <div class="isolate -ml-2.5 sticky pt-8 rounded bg-white dark:bg-gray-900 top-0 z-1">
+      <ModuleCard :key="module.slug" :module="module" :version="false" class="mb-2" />
+    </div>
+    <div class="flex items-center gap-1 mb-3">
+      <USelectMenu :search-input="false" size="sm" :model-value="module.version" :items="module.versions?.map(v => ({ label: v, disabled: v !== module.version }))" class="w-full" />
+
+      <UTooltip
+        text="Search"
+        :kbds="['meta', 'K']"
+      >
+        <UContentSearchButton class=" opacity-70 hover:opacity-100" />
+      </UTooltip>
+
+      <UButton
+        title="GitHub"
+        aria-label="GitHub"
+        :to="`https://github.com/${module.repo}`"
+        target="_blank"
+        color="neutral"
+        variant="ghost"
+        class="transition opacity-70 hover:opacity-100"
+        icon="i-carbon-logo-github"
+      />
+      <UButton
+        title="NPM"
+        aria-label="NPM"
+        :to="`https://npmjs.com/package/${module.npm}`"
+        target="_blank"
+        color="neutral"
+        variant="ghost"
+        class="transition opacity-70 hover:opacity-100"
+        icon="i-carbon-logo-npm"
+      />
+    </div>
+    <nav aria-title="Documentation Navigation">
+      <ContentNavigation as="div" class="mb-5" default-open :collapsible="false" :navigation="nav.top" highlight :ui="{ listWithChildren: 'sm:ml-0 my-10' }">
+        <template #link-leading="{ link, active }">
+          <div v-if="link.icon" class="rounded-md p-1 inline-flex ring-inset ring-1 bg-gray-100/50 dark:bg-gray-800/50 ring-gray-300 dark:ring-gray-700 group-hover:bg-primary group-hover:ring-primary group-hover:text-background" :class="active ? 'dark:bg-teal-700' : ''">
+            <UIcon :name="link.icon" class="w-4 h-4 text-primary-400 dark:text-sky-200" />
+          </div>
+        </template>
+      </ContentNavigation>
+      <div class="bg-gray-800 h-[1px] my-5 mr-5" />
+      <ContentNavigation as="div" default-open :collapsible="false" :navigation="nav.bottom" highlight :ui="{ listWithChildren: 'sm:ml-0 my-10' }">
+        <template #link="{ link }">
+          <div v-if="!link.mdc" class="flex items-center gap-2">
+            <UIcon v-if="link.icon" :name="link.icon" class="w-4 h-4 text-primary-400 dark:text-sky-200" />
+            <div :class="link.children?.length ? 'text-sm font-bold' : ''">
+              {{ link.title }}
+            </div>
+          </div>
+          <div v-else>
+            <MDC :value="link.title" unwrap="p" />
+          </div>
+        </template>
+      </ContentNavigation>
+    </nav>
+    <ClientOnly>
+      <LazyUContentSearch
+        v-model:search-term="searchTerm"
+        :files="files"
+        :navigation="[{ title: 'Getting Started', _path: `/docs/${module.slug}/getting-started`, path: `/docs/${module.slug}/getting-started`, children: nav.top }, ...nav.bottom]"
+        :fuse="{ resultLimit: 42 }"
+      />
+    </ClientOnly>
+  </div>
+</template>