docs: improve docs site

2023-09-06 18:18:11 +08:00 · 2023-09-06 18:18:11 +08:00 · 7200c53a8a
commit 7200c53a8a
parent 6dff115347
17 changed files with 95 additions and 31 deletions
--- 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',
--- a/apps/www/.vitepress/theme/components/EditLink.vue
+++ 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>
--- 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>
--- 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">
--- 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>

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