feat: landnig page, fix styling
This commit is contained in:
zernonia
parent
9e977917eb
commit
de367c1b34
|
|
@ -12,46 +12,45 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container relative">
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
href="/docs/changelog"
|
||||
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" />
|
||||
<span class="sm:hidden">Style, a new CLI and more.</span>
|
||||
<span class="hidden sm:inline">
|
||||
Introducing Style, a new CLI and more.
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
Beautifully designed components that you can copy and paste into your
|
||||
apps. Accessible. Customizable. Open Source.
|
||||
</PageHeaderDescription>
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
href="/docs/changelog"
|
||||
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" />
|
||||
<span class="sm:hidden">Style, a new CLI and more.</span>
|
||||
<span class="hidden sm:inline">
|
||||
Introducing Style, a new CLI and more.
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
Beautifully designed components that you can copy and paste into your
|
||||
apps. Accessible. Customizable. Open Source.
|
||||
</PageHeaderDescription>
|
||||
|
||||
<section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
|
||||
<a
|
||||
href="/docs"
|
||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
<a
|
||||
href="/components"
|
||||
:class="cn(
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'rounded-[6px]',
|
||||
)"
|
||||
>
|
||||
Components
|
||||
</a>
|
||||
</section>
|
||||
</PageHeader>
|
||||
<ExamplesNav />
|
||||
<section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
|
||||
<!-- <Image
|
||||
<section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
|
||||
<a
|
||||
href="/docs"
|
||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
<a
|
||||
href="/components"
|
||||
:class="cn(
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'rounded-[6px]',
|
||||
)"
|
||||
>
|
||||
Components
|
||||
</a>
|
||||
</section>
|
||||
</PageHeader>
|
||||
<ExamplesNav />
|
||||
<section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
|
||||
<!-- <Image
|
||||
src="/examples/dashboard-light.png"
|
||||
width={1280}
|
||||
height={866}
|
||||
|
|
@ -65,11 +64,10 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
|
|||
alt="Dashboard"
|
||||
className="hidden dark:block"
|
||||
/> -->
|
||||
</section>
|
||||
<section class="hidden md:block">
|
||||
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
|
||||
<DashboardExample />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hidden md:block">
|
||||
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
|
||||
<DashboardExample />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,86 +12,88 @@ const { frontmatter } = useData()
|
|||
</script>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
|
||||
<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`,
|
||||
}"
|
||||
<div class="border-b">
|
||||
<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">
|
||||
<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">
|
||||
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
|
||||
<h4
|
||||
class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
|
||||
>
|
||||
{{ doc.title }}
|
||||
{{ docsGroup.title }}
|
||||
</h4>
|
||||
|
||||
<Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
|
||||
{{ doc.label }}
|
||||
</Badge>
|
||||
</a>
|
||||
<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 }}
|
||||
|
||||
<Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
|
||||
{{ doc.label }}
|
||||
</Badge>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
|
||||
<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="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
|
||||
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
Docs
|
||||
<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="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
|
||||
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
Docs
|
||||
</div>
|
||||
<ChevronRightIcon class="h-4 w-4" />
|
||||
<div class="font-medium text-foreground">
|
||||
{{ frontmatter.title }}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRightIcon class="h-4 w-4" />
|
||||
<div class="font-medium text-foreground">
|
||||
{{ frontmatter.title }}
|
||||
|
||||
<div class="space-y-2">
|
||||
<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 class="space-y-2">
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ const links = [
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container flex-1 bg-background">
|
||||
<div class="flex-1 bg-background">
|
||||
<component :is="'docs'" v-if="$route.path.includes('docs')">
|
||||
<Content />
|
||||
</component>
|
||||
|
|
@ -115,16 +115,16 @@ const links = [
|
|||
<component :is="frontmatter.layout" v-else-if="frontmatter.layout">
|
||||
<slot />
|
||||
</component>
|
||||
<main v-else>
|
||||
<main v-else class="container">
|
||||
<Content />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="bg-background z-40 border-t border-border text-foreground">
|
||||
<div class="container h-20 flex items-center justify-between p-4 mx-auto">
|
||||
<div class="flex justify-center items-center">
|
||||
<footer class="py-6 md:px-8 md:py-0">
|
||||
<div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
|
||||
<div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
|
||||
<span class="text-sm">
|
||||
Built and designed by {{ " " }}
|
||||
Built and designed by
|
||||
<a
|
||||
href="https://twitter.com/shadcn"
|
||||
target="_blank"
|
||||
|
|
@ -135,7 +135,7 @@ const links = [
|
|||
</span>
|
||||
<span class="text-sm ml-0.5"> . </span>
|
||||
<span class="text-sm ml-2">
|
||||
Ported to Vue by {{ " " }}
|
||||
Ported to Vue by
|
||||
<a
|
||||
href="https://twitter.com"
|
||||
target="_blank"
|
||||
|
|
@ -146,7 +146,7 @@ const links = [
|
|||
</span>
|
||||
<span class="text-sm ml-0.5"> . </span>
|
||||
<span class="text-sm ml-2">
|
||||
The code source is available on {{ " " }}
|
||||
The code source is available on
|
||||
<a
|
||||
href="https://github.com/radix-vue/shadcn-vue"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import {
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<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">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
shadcn
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user