From 7200c53a8af015f06f867d72a8a64d46f1be0276 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 6 Sep 2023 18:18:11 +0800
Subject: [PATCH] docs: improve docs site

---
 apps/www/.vitepress/config.mts                | 36 +++++++++++++++++--
 .../.vitepress/theme/components/EditLink.vue  | 27 ++++++++++++++
 .../theme/components/LandingPage.vue          |  2 +-
 .../.vitepress/theme/layout/DocsLayout.vue    |  6 +++-
 .../.vitepress/theme/layout/MainLayout.vue    | 19 +++++-----
 apps/www/src/content/index.md                 |  1 +
 .../src/examples/authentication/Example.vue   |  2 +-
 apps/www/src/examples/cards/Example.vue       |  2 +-
 .../examples/cards/components/GitHubCard.vue  |  1 -
 apps/www/src/examples/dashboard/Example.vue   |  2 +-
 .../examples/dashboard/components/MainNav.vue | 16 ++++-----
 .../examples/dashboard/components/UserNav.vue |  2 +-
 apps/www/src/examples/music/Example.vue       |  2 +-
 .../src/examples/music/components/Menu.vue    |  2 +-
 apps/www/src/examples/playground/Example.vue  |  2 +-
 apps/www/src/examples/tasks/Example.vue       |  2 +-
 .../src/examples/tasks/components/UserNav.vue |  2 +-
 17 files changed, 95 insertions(+), 31 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/EditLink.vue

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index eea8be18..d949813d 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -1,12 +1,44 @@
 import path from 'node:path'
 import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
+import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'shadcn-vue',
-  description: 'A VitePress Site',
+  title: siteConfig.name,
+  titleTemplate: ':title - shadcn/vue',
+  description: siteConfig.description,
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+    ['meta', { name: 'theme-color', content: '#41b883' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+    ['meta', { name: 'og:locale', content: 'en' }],
+    ['meta', { name: 'og:site_name', content: siteConfig.name }],
+    ['meta', { name: 'og:image', content: siteConfig.ogImage }],
+    ['meta', { name: 'twitter:image', content: siteConfig.ogImage }],
+
+  ],
+
+  sitemap: {
+    hostname: 'https://www.shadcn-vue.com',
+    transformItems(items) {
+      return items.filter(item => !item.url.includes('migration'))
+    },
+  },
+
+  appearance: false,
+  lastUpdated: true,
+  themeConfig: {
+    search: {
+      provider: 'local',
+    },
+    editLink: {
+      pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
+      text: 'Edit this page on GitHub',
+    },
+  },
+
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
     theme: 'css-variables',
diff --git a/apps/www/.vitepress/theme/components/EditLink.vue b/apps/www/.vitepress/theme/components/EditLink.vue
new file mode 100644
index 00000000..7ff8faeb
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/EditLink.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import Pencil2Icon from '~icons/radix-icons/pencil-2'
+import { Button } from '@/lib/registry/default/ui/button'
+
+const { theme, page } = useData()
+
+const link = computed(() => {
+  const { text = 'Edit this page', pattern = '' } = theme.value.editLink || {}
+  let url: string
+  if (typeof pattern === 'function')
+    url = pattern(page.value)
+
+  else
+    url = pattern.replace(/:path/g, page.value.filePath)
+
+  return { url, text }
+})
+</script>
+
+<template>
+  <Button as="a" :href="link.url" target="_blank" :variant="'ghost'" class="underline mt-8">
+    <Pencil2Icon class="mr-2" />
+    {{ link.text }}
+  </Button>
+</template>
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index d35022c7..403179bc 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -59,7 +59,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
       width="1280"
       height="866" class="block" :image="{
         dark: '/examples/dashboard-dark.png',
-        light: 'examples/dashboard-light.png',
+        light: '/examples/dashboard-light.png',
       }"
     />
   </section>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 39232e19..989f856a 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -2,13 +2,15 @@
 import { useData, useRoute } from 'vitepress'
 import { docsConfig } from '../config/docs'
 import TableOfContentVue from '../components/TableOfContent.vue'
+import EditLink from '../components/EditLink.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { Badge } from '@/lib/registry/default/ui/badge'
 import RadixIconsCode from '~icons/radix-icons/code'
 import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
-const { frontmatter } = useData()
+const { frontmatter, ...a } = useData()
+console.log(a)
 </script>
 
 <template>
@@ -90,6 +92,8 @@ const { frontmatter } = useData()
           <div class="vp-doc">
             <slot />
           </div>
+
+          <EditLink />
         </div>
 
         <div class="hidden text-sm xl:block">
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index b62326e9..193fb41f 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -4,13 +4,14 @@ import { Content, useData, useRoute } from 'vitepress'
 import { docsConfig } from '../config/docs'
 import Logo from '../components/Logo.vue'
 import MobileNav from '../components/MobileNav.vue'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Kbd } from '@/lib/registry/default/ui/kbd'
+
+// import { Button } from '@/lib/registry/default/ui/button'
+// import { Kbd } from '@/lib/registry/default/ui/kbd'
+// import LucideSearch from '~icons/lucide/search'
 import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
 import TablerBrandX from '~icons/tabler/brand-x'
 import RadixIconsMoon from '~icons/radix-icons/moon'
 import RadixIconsSun from '~icons/radix-icons/sun'
-import LucideSearch from '~icons/lucide/search'
 
 const { frontmatter } = useData()
 
@@ -37,8 +38,10 @@ const links = [
   <div class="flex min-h-screen flex-col bg-background">
     <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
-        class="container flex h-14 items-center"
+        class="container flex justify-between h-14 items-center"
       >
+        <MobileNav />
+
         <div class="mr-4 hidden md:flex">
           <Logo />
 
@@ -60,8 +63,8 @@ const links = [
           </nav>
         </div>
 
-        <div class="md:flex flex-1 items-center justify-end space-x-4 hidden">
-          <Button
+        <div class=" flex items-center justify-end space-x-4 ">
+          <!-- <Button
             variant="outline"
             class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
           >
@@ -73,7 +76,7 @@ const links = [
               <Kbd>⌘</Kbd>
               <Kbd>K</Kbd>
             </div>
-          </Button>
+          </Button> -->
 
           <div
             v-for="link in links"
@@ -96,8 +99,6 @@ const links = [
             />
           </button>
         </div>
-
-        <MobileNav />
       </div>
     </header>
 
diff --git a/apps/www/src/content/index.md b/apps/www/src/content/index.md
index ac0c17f6..f93fa67d 100644
--- a/apps/www/src/content/index.md
+++ b/apps/www/src/content/index.md
@@ -1,5 +1,6 @@
 ---
 home: true
+title: Shadcn for Vue
 ---
 
 <script setup>
diff --git a/apps/www/src/examples/authentication/Example.vue b/apps/www/src/examples/authentication/Example.vue
index d4cf3e4a..54f7bca8 100644
--- a/apps/www/src/examples/authentication/Example.vue
+++ b/apps/www/src/examples/authentication/Example.vue
@@ -11,7 +11,7 @@ import { buttonVariants } from '@/lib/registry/default/ui/button'
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/authentication-dark.png',
-        light: 'examples/authentication-light.png',
+        light: '/examples/authentication-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/cards/Example.vue b/apps/www/src/examples/cards/Example.vue
index 54ed766a..d14b266c 100644
--- a/apps/www/src/examples/cards/Example.vue
+++ b/apps/www/src/examples/cards/Example.vue
@@ -18,7 +18,7 @@ import TeamMembers from './components/TeamMembers.vue'
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/cards-dark.png',
-        light: 'examples/cards-light.png',
+        light: '/examples/cards-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
index 6d15123b..05fe5177 100644
--- a/apps/www/src/examples/cards/components/GitHubCard.vue
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -50,7 +50,6 @@ import { Separator } from '@/lib/registry/default/ui/separator'
             align="end"
             :align-offset="-5"
             class="w-[200px]"
-            force-mount
           >
             <DropdownMenuLabel>Suggested Lists</DropdownMenuLabel>
             <DropdownMenuSeparator />
diff --git a/apps/www/src/examples/dashboard/Example.vue b/apps/www/src/examples/dashboard/Example.vue
index b77adcf4..4fcecc3c 100644
--- a/apps/www/src/examples/dashboard/Example.vue
+++ b/apps/www/src/examples/dashboard/Example.vue
@@ -30,7 +30,7 @@ import {
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/dashboard-dark.png',
-        light: 'examples/dashboard-light.png',
+        light: '/examples/dashboard-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/dashboard/components/MainNav.vue b/apps/www/src/examples/dashboard/components/MainNav.vue
index 0f2e8726..ba3a23e7 100644
--- a/apps/www/src/examples/dashboard/components/MainNav.vue
+++ b/apps/www/src/examples/dashboard/components/MainNav.vue
@@ -6,29 +6,29 @@ import { cn } from '@/lib/utils'
   <nav
     :class="cn('flex items-center space-x-4 lg:space-x-6', $attrs.class ?? '')"
   >
-    <Link
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium transition-colors hover:text-primary"
     >
       Overview
-    </Link>
-    <Link
+    </a>
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Customers
-    </Link>
-    <Link
+    </a>
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Products
-    </Link>
-    <Link
+    </a>
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Settings
-    </Link>
+    </a>
   </nav>
 </template>
diff --git a/apps/www/src/examples/dashboard/components/UserNav.vue b/apps/www/src/examples/dashboard/components/UserNav.vue
index 1ad7b4b1..fd10a3e8 100644
--- a/apps/www/src/examples/dashboard/components/UserNav.vue
+++ b/apps/www/src/examples/dashboard/components/UserNav.vue
@@ -27,7 +27,7 @@ import {
         </Avatar>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent class="w-56" align="end" force-mount>
+    <DropdownMenuContent class="w-56" align="end">
       <DropdownMenuLabel class="font-normal flex">
         <div class="flex flex-col space-y-1">
           <p class="text-sm font-medium leading-none">
diff --git a/apps/www/src/examples/music/Example.vue b/apps/www/src/examples/music/Example.vue
index 79cdad75..7d8234b4 100644
--- a/apps/www/src/examples/music/Example.vue
+++ b/apps/www/src/examples/music/Example.vue
@@ -25,7 +25,7 @@ import PlusCircledIcon from '~icons/radix-icons/plus-circled'
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/music-dark.png',
-        light: 'examples/music-light.png',
+        light: '/examples/music-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/music/components/Menu.vue b/apps/www/src/examples/music/components/Menu.vue
index f06d1e26..e0e82a53 100644
--- a/apps/www/src/examples/music/components/Menu.vue
+++ b/apps/www/src/examples/music/components/Menu.vue
@@ -200,7 +200,7 @@ import {
       <MenubarTrigger class="hidden md:block">
         Account
       </MenubarTrigger>
-      <MenubarContent force-mount>
+      <MenubarContent>
         <MenubarLabel inset>
           Switch Account
         </MenubarLabel>
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
index 03e4d87e..02992fcb 100644
--- a/apps/www/src/examples/playground/Example.vue
+++ b/apps/www/src/examples/playground/Example.vue
@@ -34,7 +34,7 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/playground-dark.png',
-        light: 'examples/playground-light.png',
+        light: '/examples/playground-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/tasks/Example.vue b/apps/www/src/examples/tasks/Example.vue
index 945efbc9..cad8518a 100644
--- a/apps/www/src/examples/tasks/Example.vue
+++ b/apps/www/src/examples/tasks/Example.vue
@@ -12,7 +12,7 @@ import { columns } from './components/columns'
       width="1280"
       height="1214" class="block" :image="{
         dark: '/examples/tasks-dark.png',
-        light: 'examples/tasks-light.png',
+        light: '/examples/tasks-light.png',
       }"
     />
   </div>
diff --git a/apps/www/src/examples/tasks/components/UserNav.vue b/apps/www/src/examples/tasks/components/UserNav.vue
index 4b0f6a09..b5427b4d 100644
--- a/apps/www/src/examples/tasks/components/UserNav.vue
+++ b/apps/www/src/examples/tasks/components/UserNav.vue
@@ -27,7 +27,7 @@ import {
         </Avatar>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent class="w-56" align="end" force-mount>
+    <DropdownMenuContent class="w-56" align="end">
       <DropdownMenuLabel class="font-normal flex">
         <div class="flex flex-col space-y-1">
           <p class="text-sm font-medium leading-none">