docs: styling tweaks and edit button fix (#3174)

docs/app.config.ts

@@ -64,7 +64,7 @@ export default defineAppConfig({
   toc: {
     title: 'Table of Contents',
     bottom: {
-      edit: 'https://github.com/nuxt-modules/i18n/docs/edit/main/content'
+      edit: 'https://github.com/nuxt-modules/i18n/edit/main/docs/content'
     }
   }
 })

docs/app.vue

@@ -16,12 +16,35 @@ useSeoMeta({
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 provide('navigation', navigation)
 
+const router = useRouter()
+
+const isV7Docs = computed(() => router.currentRoute.value.path.includes('/docs/v7'))
+const isV9Docs = computed(() => router.currentRoute.value.path.includes('/docs/v9'))
+
 // Search
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false
 })
 
+const v7DocsRE = /^\/docs\/v7/
+const v9DocsRE = /^\/docs\/v9/
+
+const navigationV7 = computed(() => navigation.value?.[0].children.filter(x => v7DocsRE.test(String(x._path))))
+const navigationV9 = computed(() => navigation.value?.[0].children.filter(x => v9DocsRE.test(String(x._path))))
+const navigationV8 = computed(() =>
+  navigation.value?.[0].children.filter(x => {
+    const to = String(x._path)
+    return !v9DocsRE.test(to) && !v7DocsRE.test(to)
+  })
+)
+
+const currentVersionNavigation = computed(() => {
+  if (isV7Docs.value) return navigationV7.value
+  if (isV9Docs.value) return navigationV9.value
+  return navigationV8.value
+})
+
 // Header
 const route = useRoute()
 const links: PageLink[] = [
@@ -50,9 +73,15 @@ const links: PageLink[] = [
     <TheFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
+      <LazyUContentSearch :files="files" :navigation="currentVersionNavigation" :links="links" />
     </ClientOnly>
 
     <UNotifications />
   </div>
 </template>
+
+<style>
+body {
+  font-family: 'Inter var experimental', 'Inter var', 'Inter', sans-serif;
+}
+</style>

docs/components/VersionSelect.vue

@@ -1,32 +1,42 @@
 <script setup lang="ts">
-const versions = [
-  {
-    id: '8',
-    label: 'v8',
-    to: '/docs/getting-started',
-    tag: 'latest'
-  },
-  {
-    id: '9',
-    label: 'v9',
-    to: '/docs/v9',
-    tag: 'alpha'
-  },
-  {
-    id: '7',
-    label: 'v7',
-    to: '/docs/v7'
-  }
-]
+const versions = computed(() => {
+  const items = [
+    {
+      id: '8',
+      label: 'v8',
+      to: '/docs/getting-started',
+      tag: 'latest',
+      click: () => {}
+    },
+    {
+      id: '9',
+      label: 'v9',
+      to: '/docs/v9',
+      tag: 'rc',
+      click: () => {}
+    },
+    {
+      id: '7',
+      label: 'v7',
+      to: '/docs/v7',
+      click: () => {}
+    }
+  ]
+
+  return items.map(x => {
+    x.click = () => changeVersion(x)
+    return x
+  })
+})
 
 const router = useRouter()
 const selectedVersion = computed(() => {
   const path = router.currentRoute.value.path
 
-  if (path.includes('/v9')) return versions[1]
-  if (path.includes('/v7')) return versions[2]
+  if (path.includes('/v9')) return versions.value[1]
+  if (path.includes('/v7')) return versions.value[2]
 
-  return versions[0]
+  return versions.value[0]
 })
 
 function changeVersion(newVersion) {
@@ -44,6 +54,7 @@ watch(selectedVersion, val => {
       :model-value="selectedVersion"
       :options="versions"
       :ui="{ base: '!cursor-pointer' }"
+      :popper="{ placement: 'bottom-start' }"
       :uiMenu="{ option: { base: '!cursor-pointer', container: 'w-full' } }"
       color="gray"
     >
@@ -52,11 +63,11 @@ watch(selectedVersion, val => {
         <UBadge v-if="selectedVersion.tag" variant="subtle" :label="selectedVersion.tag" size="xs" />
       </template>
 
-      <template #option="{ option: version }">
-        <div class="absolute inset-0" @click="() => changeVersion(version)"></div>
+      <template #option="{ option }">
+        <div class="absolute inset-0" @click="option.click"></div>
         <div class="w-full">
-          {{ version.label }}
-          <UBadge v-if="version.tag" variant="subtle" :label="version.tag" />
+          {{ option.label }}
+          <UBadge v-if="option.tag" variant="subtle" :label="option.tag" />
         </div>
       </template>
     </USelectMenu>

docs/content/docs/5.v9/1.getting-started/_dir.yml

@@ -1,2 +1 @@
 title: Getting Started
-icon: 'i-heroicons-rocket-launch'

docs/content/docs/5.v9/2.guide/_dir.yml

@@ -1,2 +1 @@
 title: Guide
-icon: 'i-heroicons-book-open'

docs/content/docs/5.v9/4.api/_dir.yml

@@ -1,2 +1 @@
 title: API
-icon: 'i-heroicons-code-bracket'

docs/content/docs/5.v9/_dir.yml

@@ -1,2 +1 @@
-title: v9 Docs
-icon: 'i-heroicons-backward'
+title: V9 Docs

docs/content/index.yml

@@ -11,10 +11,11 @@ hero:
       trailingIcon: 'i-heroicons-arrow-right-20-solid'
       to: '/docs/getting-started'
       size: lg
-    - label: Open in GitHub
+    - label: Star on GitHub
       icon: i-simple-icons-github
       size: lg
-      color: white
+      variant: ghost
+      color: gray
       to: https://github.com/nuxt-modules/i18n
       target: _blank
   code: |

docs/layouts/docs.vue

@@ -28,8 +28,8 @@ watch(
 const v7DocsRE = /^\/docs\/v7/
 const v9DocsRE = /^\/docs\/v9/
 
-const navigationV7 = computed(() => allNavigationTree.value.filter(x => v7DocsRE.test(String(x.to))))
-const navigationV9 = computed(() => allNavigationTree.value.filter(x => v9DocsRE.test(String(x.to))))
+const navigationV7 = computed(() => allNavigationTree.value.filter(x => v7DocsRE.test(String(x.to)))[0].children!)
+const navigationV9 = computed(() => allNavigationTree.value.filter(x => v9DocsRE.test(String(x.to)))[0].children!)
 const navigationV8 = computed(() =>
   allNavigationTree.value.filter(x => {
     const to = String(x.to)
@@ -51,7 +51,7 @@ const currentVersionNavigation = computed(() => {
         <UAside>
           <VersionSelect />
           <UDivider type="dashed" class="mb-6" />
-          <UNavigationTree :links="currentVersionNavigation" default-open :multiple="false" />
+          <UNavigationTree :links="currentVersionNavigation" :multiple="true" />
         </UAside>
       </template>
 

docs/nuxt.config.ts

@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
-  modules: ['@nuxt/content', '@nuxt/ui', '@nuxtjs/fontaine', '@nuxtjs/google-fonts', 'nuxt-og-image'],
+  modules: ['@nuxt/content', '@nuxt/ui', '@nuxtjs/fontaine', '@nuxtjs/google-fonts', 'nuxt-og-image', '@nuxt/fonts'],
   routeRules: {
     // v7
     '/docs/v7/callbacks': { prerender: true, ssr: false },

docs/package.json

@@ -15,6 +15,7 @@
     "@iconify-json/heroicons": "^1.1.19",
     "@iconify-json/simple-icons": "^1.1.89",
     "@nuxt/content": "^2.13.2",
+    "@nuxt/fonts": "^0.10.0",
     "@nuxt/image": "^1.8.0",
     "@nuxt/ui-pro": "^1.4.3",
     "@nuxtjs/fontaine": "^0.4.3",

docs/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 
 // Page Metadata (SEO & OG)
@@ -8,11 +9,21 @@ setPageMeta({
   description: page.value.description,
   headline: page.value.hero.headline.label
 })
+const source = ref('npx nuxi module add i18n')
+const { copy, copied } = useClipboard({ source })
 </script>
 
 <template>
   <div>
-    <ULandingHero v-if="page.hero" v-bind="page.hero">
+    <ULandingHero
+      v-if="page.hero"
+      v-bind="page.hero"
+      :ui="{
+        container: 'overflow-hidden py-10 flex flex-row items-center  gap-1',
+        links: 'flex items-center gap-2',
+        description: 'text-gray-500 dark:text-gray-400 text-xl max-w-2xl leading-normal mb-10'
+      }"
+    >
       <template #headline>
         <UBadge v-if="page.hero.headline" variant="subtle" size="lg" class="relative rounded-full font-semibold">
           <NuxtLink :to="page.hero.headline.to" target="_blank" class="focus:outline-none" tabindex="-1">
@@ -29,19 +40,46 @@ setPageMeta({
         </UBadge>
       </template>
 
+      <template #description>
+        {{ page.hero.description }}
+      </template>
+
       <template #title>
         <p>
-          <span class="text-primary md:hidden">i18n</span>
-          <span class="text-primary hidden md:block">Internationalization</span>
+          <span class="text-white md:hidden">i18n</span>
+          <span class="text-white hidden md:block">Internationalization</span>
           for
-          <span class="text-primary">Nuxt</span> Apps
+          <span class="text-primary">Nuxt Applications</span>
         </p>
       </template>
 
-      <MDC :value="page.hero.code" tag="pre" class="prose prose-primary dark:prose-invert mx-auto min-w-80" />
+      <UInput
+        aria-label="Copy code to get started"
+        :model-value="source"
+        name="get-started"
+        class="mx-auto"
+        disabled
+        autocomplete="off"
+        size="lg"
+        :ui="{ base: 'w-[300px] disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+      >
+        <template #leading>
+          <UIcon name="i-ph-terminal" />
+        </template>
+        <template #trailing>
+          <UButton
+            aria-label="Copy Code"
+            :color="copied ? 'green' : 'gray'"
+            variant="ghost"
+            :padded="false"
+            :icon="copied ? 'i-ph-check' : 'i-ph-copy'"
+            @click="copy(source)"
+          />
+        </template>
+      </UInput>
     </ULandingHero>
 
-    <ULandingSection :title="page.features.title" :links="page.features.links">
+    <ULandingSection :title="page.features.title">
       <UPageGrid>
         <ULandingCard v-for="(item, index) of page.features.items" :key="index" v-bind="item" />
       </UPageGrid>

docs/tailwind.config.ts

@@ -5,7 +5,7 @@ export default <Partial<Config>>{
   theme: {
     extend: {
       fontFamily: {
-        sans: ['DM Sans', 'DM Sans fallback', ...defaultTheme.fontFamily.sans]
+        sans: ['Inter var experimental', 'Inter var', 'Inter']
       },
       colors: {
         green: {