Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve docs site

Browse Source
This commit is contained in:
zernonia 2023-09-06 18:18:11 +08:00
parent 6dff115347
commit 7200c53a8a
17 changed files with 95 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/www/.vitepress/config.mts
View File

@ -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',

27
apps/www/.vitepress/theme/components/EditLink.vue Normal file
View File

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

2
apps/www/.vitepress/theme/components/LandingPage.vue
View File

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

6
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

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

19
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

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

1
apps/www/src/content/index.md
View File

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

2
apps/www/src/examples/authentication/Example.vue
View File

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

2
apps/www/src/examples/cards/Example.vue
View File

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

1
apps/www/src/examples/cards/components/GitHubCard.vue
View File

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

2
apps/www/src/examples/dashboard/Example.vue
View File

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

16
apps/www/src/examples/dashboard/components/MainNav.vue
View File

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

2
apps/www/src/examples/dashboard/components/UserNav.vue
View File

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

2
apps/www/src/examples/music/Example.vue
View File

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

2
apps/www/src/examples/music/components/Menu.vue
View File

@ -200,7 +200,7 @@ import {
<MenubarTrigger class="hidden md:block">
Account
</MenubarTrigger>
<MenubarContent force-mount>
<MenubarContent>
<MenubarLabel inset>
Switch Account
</MenubarLabel>

2
apps/www/src/examples/playground/Example.vue
View File

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

2
apps/www/src/examples/tasks/Example.vue
View File

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

2
apps/www/src/examples/tasks/components/UserNav.vue
View File

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