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

docs: update landing page

Browse Source
This commit is contained in:
zernonia 2024-02-07 22:21:48 +08:00
parent 25f4a7292a
commit aef277bbfe
7 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import PageHeader from '../components/PageHeader.vue' import PageHeader from '../components/PageHeader.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue' import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue' import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import PageAction from '../components/PageAction.vue'
import ExamplesNav from '../components/ExamplesNav.vue' import ExamplesNav from '../components/ExamplesNav.vue'
import { announcementConfig } from '../config/site' import { announcementConfig } from '../config/site'
import GitHubIcon from '~icons/radix-icons/github-logo' import GitHubIcon from '~icons/radix-icons/github-logo'
@ -31,7 +32,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
apps. Accessible. Customizable. Open Source. apps. Accessible. Customizable. Open Source.
</PageHeaderDescription> </PageHeaderDescription>
<section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10"> <PageAction>
<a <a
href="/docs/introduction" href="/docs/introduction"
:class="cn(buttonVariants(), 'rounded-[6px]')" :class="cn(buttonVariants(), 'rounded-[6px]')"
@ -49,7 +50,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
<GitHubIcon class="mr-2 h-4 w-4" /> <GitHubIcon class="mr-2 h-4 w-4" />
GitHub GitHub
</a> </a>
</section> </PageAction>
</PageHeader> </PageHeader>
<ExamplesNav /> <ExamplesNav />
<section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden"> <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">

14
apps/www/.vitepress/theme/components/PageAction.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
</script>
<template>
<section
:class="cn(
'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
$attrs.class ?? '',
)"
>
<slot />
</section>
</template>

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

@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
<template> <template>
<section <section
:class="cn( :class="cn(
'flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12', 'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
$attrs.class ?? '', $attrs.class ?? '',
)" )"
> >

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

@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
</script> </script>
<template> <template>
<WrapBalancer :class="cn('max-w-[750px] text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false"> <WrapBalancer :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
<slot /> <slot />
</WrapBalancer> </WrapBalancer>
</template> </template>

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

@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
<template> <template>
<h1 <h1
:class="cn( :class="cn(
'text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]', 'text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]',
$attrs.class ?? '', $attrs.class ?? '',
)" )"
> >

4
apps/www/.vitepress/theme/config/site.ts
View File

@ -15,6 +15,6 @@ export const siteConfig = {
export const announcementConfig = { export const announcementConfig = {
icon: '✨', icon: '✨',
title: 'VSCode extension', title: 'New components!',
link: '/docs/installation.html#vscode-extension', link: '/docs/components/carousel.html',
} }

5
apps/www/.vitepress/theme/layout/ExamplesLayout.vue
View File

@ -2,6 +2,7 @@
import PageHeader from '../components/PageHeader.vue' import PageHeader from '../components/PageHeader.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue' import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue' import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import PageAction from '../components/PageAction.vue'
import ExamplesNav from '../components/ExamplesNav.vue' import ExamplesNav from '../components/ExamplesNav.vue'
import { announcementConfig } from '../config/site' import { announcementConfig } from '../config/site'
import ArrowRightIcon from '~icons/radix-icons/arrow-right' import ArrowRightIcon from '~icons/radix-icons/arrow-right'
@ -36,7 +37,7 @@ import { cn } from '@/lib/utils'
components. Use this as a guide to build your own. components. Use this as a guide to build your own.
</PageHeaderDescription> </PageHeaderDescription>
<section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10"> <PageAction>
<a <a
href="/docs/introduction" href="/docs/introduction"
:class="cn(buttonVariants(), 'rounded-[6px]')" :class="cn(buttonVariants(), 'rounded-[6px]')"
@ -52,7 +53,7 @@ import { cn } from '@/lib/utils'
> >
Components Components
</a> </a>
</section> </PageAction>
</PageHeader> </PageHeader>
<section> <section>
<ExamplesNav /> <ExamplesNav />