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

feat: landnig page, fix styling

Browse Source
This commit is contained in:
zernonia 2023-09-05 14:46:21 +08:00
parent 9e977917eb
commit de367c1b34
4 changed files with 126 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,46 +12,45 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
</script> </script>
<template> <template>
<div class="container relative"> <PageHeader class="page-header pb-8">
<PageHeader class="page-header pb-8"> <a
<a href="/docs/changelog"
href="/docs/changelog" class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium" >
> 🎉 <Separator class="mx-2 h-4" orientation="vertical" />
🎉 <Separator class="mx-2 h-4" orientation="vertical" /> <span class="sm:hidden">Style, a new CLI and more.</span>
<span class="sm:hidden">Style, a new CLI and more.</span> <span class="hidden sm:inline">
<span class="hidden sm:inline"> Introducing Style, a new CLI and more.
Introducing Style, a new CLI and more. </span>
</span> <ArrowRightIcon class="ml-1 h-4 w-4" />
<ArrowRightIcon class="ml-1 h-4 w-4" /> </a>
</a> <PageHeaderHeading>Build your component library.</PageHeaderHeading>
<PageHeaderHeading>Build your component library.</PageHeaderHeading> <PageHeaderDescription>
<PageHeaderDescription> Beautifully designed components that you can copy and paste into your
Beautifully designed components that you can copy and paste into your 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"> <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
<a <a
href="/docs" href="/docs"
:class="cn(buttonVariants(), 'rounded-[6px]')" :class="cn(buttonVariants(), 'rounded-[6px]')"
> >
Get Started Get Started
</a> </a>
<a <a
href="/components" href="/components"
:class="cn( :class="cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'rounded-[6px]', 'rounded-[6px]',
)" )"
> >
Components Components
</a> </a>
</section> </section>
</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">
<!-- <Image <!-- <Image
src="/examples/dashboard-light.png" src="/examples/dashboard-light.png"
width={1280} width={1280}
height={866} height={866}
@ -65,11 +64,10 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
alt="Dashboard" alt="Dashboard"
className="hidden dark:block" className="hidden dark:block"
/> --> /> -->
</section> </section>
<section class="hidden md:block"> <section class="hidden md:block">
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow"> <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
<DashboardExample /> <DashboardExample />
</div> </div>
</section> </section>
</div>
</template> </template>

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

@ -12,86 +12,88 @@ const { frontmatter } = useData()
</script> </script>
<template> <template>
<div class="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"> <div class="border-b">
<aside <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto" <aside
> class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
<ScrollArea orientation="vertical" class="h-full py-6 pl-8 pr-6 lg:py-8" :type="'auto'"> >
<div class="w-full"> <ScrollArea orientation="vertical" class="h-full py-6 pl-8 pr-6 lg:py-8" :type="'auto'">
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4"> <div class="w-full">
<h4 <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
class="mb-1 rounded-md px-2 py-1 text-sm font-semibold" <h4
> class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
{{ docsGroup.title }}
</h4>
<div
v-for="doc in docsGroup.items "
:key="doc.title"
class="grid grid-flow-row auto-rows-max text-sm"
>
<a
v-if="doc.href"
:disabled="doc.disabled"
:href="doc.href"
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
:class="{
'!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
}"
> >
{{ doc.title }} {{ docsGroup.title }}
</h4>
<Badge v-if="doc.label" class="ml-2" :variant="'secondary'"> <div
{{ doc.label }} v-for="doc in docsGroup.items "
</Badge> :key="doc.title"
</a> class="grid grid-flow-row auto-rows-max text-sm"
>
<a
v-if="doc.href"
:disabled="doc.disabled"
:href="doc.href"
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
:class="{
'!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
}"
>
{{ doc.title }}
<Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
{{ doc.label }}
</Badge>
</a>
</div>
</div> </div>
</div> </div>
</div> </ScrollArea>
</ScrollArea> </aside>
</aside>
<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]"> <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
<div class="mx-auto w-full min-w-0"> <div class="mx-auto w-full min-w-0">
<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground"> <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div class="overflow-hidden text-ellipsis whitespace-nowrap"> <div class="overflow-hidden text-ellipsis whitespace-nowrap">
Docs Docs
</div>
<ChevronRightIcon class="h-4 w-4" />
<div class="font-medium text-foreground">
{{ frontmatter.title }}
</div>
</div> </div>
<ChevronRightIcon class="h-4 w-4" />
<div class="font-medium text-foreground"> <div class="space-y-2">
{{ frontmatter.title }} <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
{{ frontmatter.title }}
</h1>
<p class="text-lg text-muted-foreground">
{{ frontmatter.description }}
</p>
</div>
<div class="flex items-center space-x-2 pt-4">
<a v-if="frontmatter.source" :href="frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsCode class="mr-1" />
Component Source
</a>
<a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
Primitive API Reference
</a>
</div>
<div class="vp-doc">
<slot />
</div> </div>
</div> </div>
<div class="space-y-2"> <div class="hidden text-sm xl:block">
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight"> <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
{{ frontmatter.title }} <TableOfContentVue />
</h1> </div>
<p class="text-lg text-muted-foreground">
{{ frontmatter.description }}
</p>
</div> </div>
</main>
<div class="flex items-center space-x-2 pt-4"> </div>
<a v-if="frontmatter.source" :href="frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsCode class="mr-1" />
Component Source
</a>
<a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
Primitive API Reference
</a>
</div>
<div class="vp-doc">
<slot />
</div>
</div>
<div class="hidden text-sm xl:block">
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
<TableOfContentVue />
</div>
</div>
</main>
</div> </div>
</template> </template>

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

@ -105,7 +105,7 @@ const links = [
</div> </div>
</header> </header>
<div class="container flex-1 bg-background"> <div class="flex-1 bg-background">
<component :is="'docs'" v-if="$route.path.includes('docs')"> <component :is="'docs'" v-if="$route.path.includes('docs')">
<Content /> <Content />
</component> </component>
@ -115,16 +115,16 @@ const links = [
<component :is="frontmatter.layout" v-else-if="frontmatter.layout"> <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
<slot /> <slot />
</component> </component>
<main v-else> <main v-else class="container">
<Content /> <Content />
</main> </main>
</div> </div>
<footer class="bg-background z-40 border-t border-border text-foreground"> <footer class="py-6 md:px-8 md:py-0">
<div class="container h-20 flex items-center justify-between p-4 mx-auto"> <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
<div class="flex justify-center items-center"> <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
<span class="text-sm"> <span class="text-sm">
Built and designed by {{ " " }} Built and designed by
<a <a
href="https://twitter.com/shadcn" href="https://twitter.com/shadcn"
target="_blank" target="_blank"
@ -135,7 +135,7 @@ const links = [
</span> </span>
<span class="text-sm ml-0.5"> . </span> <span class="text-sm ml-0.5"> . </span>
<span class="text-sm ml-2"> <span class="text-sm ml-2">
Ported to Vue by {{ " " }} Ported to Vue by
<a <a
href="https://twitter.com" href="https://twitter.com"
target="_blank" target="_blank"
@ -146,7 +146,7 @@ const links = [
</span> </span>
<span class="text-sm ml-0.5"> . </span> <span class="text-sm ml-0.5"> . </span>
<span class="text-sm ml-2"> <span class="text-sm ml-2">
The code source is available on {{ " " }} The code source is available on
<a <a
href="https://github.com/radix-vue/shadcn-vue" href="https://github.com/radix-vue/shadcn-vue"
target="_blank" target="_blank"

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

@ -28,7 +28,7 @@ import {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent class="w-56" align="end" force-mount> <DropdownMenuContent class="w-56" align="end" force-mount>
<DropdownMenuLabel class="font-normal"> <DropdownMenuLabel class="font-normal flex">
<div class="flex flex-col space-y-1"> <div class="flex flex-col space-y-1">
<p class="text-sm font-medium leading-none"> <p class="text-sm font-medium leading-none">
shadcn shadcn