docs: improve docs site

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',
+  title: siteConfig.name,
-  description: 'A VitePress Site',
+  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',

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>

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>

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">

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">
+        <div class=" flex items-center justify-end space-x-4 ">
-          <Button
+          <!-- <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>
 

apps/www/src/content/index.md

@@ -1,5 +1,6 @@
 ---
 home: true
+title: Shadcn for Vue
 ---
 
 <script setup>

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>

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>

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 />

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>

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>
+    </a>
-    <Link
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Customers
-    </Link>
+    </a>
-    <Link
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Products
-    </Link>
+    </a>
-    <Link
+    <a
       href="/examples/dashboard"
       class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
       Settings
-    </Link>
+    </a>
   </nav>
 </template>

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">

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>

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>

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>

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>

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">