chore: revamp sitte
This commit is contained in:
zernonia
parent
5c4b16c76b
commit
f3f84b8e4e
|
|
@ -1,5 +1,4 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Separator } from '@/lib/registry/default/ui/separator'
|
|
||||||
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
|
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
|
||||||
import { announcementConfig } from '../config/site'
|
import { announcementConfig } from '../config/site'
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -7,11 +6,10 @@ import { announcementConfig } from '../config/site'
|
||||||
<template>
|
<template>
|
||||||
<a
|
<a
|
||||||
:href="announcementConfig.link"
|
:href="announcementConfig.link"
|
||||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
|
||||||
>
|
>
|
||||||
{{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
|
<span class="sm:hidden underline-offset-4 group-hover:underline">{{ announcementConfig.title }}</span>
|
||||||
<span class="sm:hidden">{{ announcementConfig.title }}</span>
|
<span class="hidden sm:inline underline-offset-4 group-hover:underline">
|
||||||
<span class="hidden sm:inline">
|
|
||||||
{{ announcementConfig.title }}
|
{{ announcementConfig.title }}
|
||||||
</span>
|
</span>
|
||||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||||
|
|
|
||||||
|
|
@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
|
||||||
>
|
>
|
||||||
<SheetTrigger as-child>
|
<SheetTrigger as-child>
|
||||||
<Button
|
<Button
|
||||||
class="w-9 h-9"
|
class="w-8 h-8"
|
||||||
:variant="'ghost'"
|
:variant="'ghost'"
|
||||||
:size="'icon'"
|
:size="'icon'"
|
||||||
>
|
>
|
||||||
<RadixIconsGear class="w-5 h-5" />
|
<RadixIconsGear class="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent>
|
<SheetContent>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
|
import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
|
|
||||||
import { useRoute } from 'vitepress'
|
import { useRoute } from 'vitepress'
|
||||||
import { computed, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
|
|
||||||
|
|
@ -62,10 +61,10 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
|
||||||
:key="example.href"
|
:key="example.href"
|
||||||
:href="example.href"
|
:href="example.href"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'flex items-center px-4',
|
'flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary',
|
||||||
path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
|
path?.startsWith(example.href)
|
||||||
? 'font-bold text-primary'
|
? 'bg-muted font-medium text-primary'
|
||||||
: 'font-medium text-muted-foreground',
|
: 'text-muted-foreground',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
{{ example.name }}
|
{{ example.name }}
|
||||||
|
|
@ -73,14 +72,5 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
|
||||||
</div>
|
</div>
|
||||||
<ScrollBar orientation="horizontal" class="invisible" />
|
<ScrollBar orientation="horizontal" class="invisible" />
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
|
|
||||||
<a
|
|
||||||
v-if="currentExample"
|
|
||||||
:href="currentExample?.code" target="_blank" rel="nofollow"
|
|
||||||
class="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
|
|
||||||
>
|
|
||||||
View code
|
|
||||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const props = withDefaults(defineProps<KbdProps>(), {
|
||||||
|
|
||||||
const kbdClass = computed(() => {
|
const kbdClass = computed(() => {
|
||||||
return cva(
|
return cva(
|
||||||
'inline-flex items-center pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium',
|
'inline-flex items-center pointer-events-none h-5 select-none gap-1 rounded border border-border bg-muted font-sans font-medium',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
|
|
|
||||||
74
apps/www/.vitepress/theme/components/LandingExample.vue
Normal file
74
apps/www/.vitepress/theme/components/LandingExample.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { DateRange } from 'reka-ui'
|
||||||
|
import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
|
||||||
|
import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
|
||||||
|
|
||||||
|
import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
|
||||||
|
|
||||||
|
import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
|
||||||
|
import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
|
||||||
|
import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
|
||||||
|
import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
|
||||||
|
import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
|
||||||
|
import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
|
||||||
|
|
||||||
|
import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
|
||||||
|
import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
|
||||||
|
import { Card } from '@/lib/registry/new-york/ui/card'
|
||||||
|
import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
|
||||||
|
import { getLocalTimeZone, today } from '@internationalized/date'
|
||||||
|
|
||||||
|
import { type Ref, ref } from 'vue'
|
||||||
|
|
||||||
|
const now = today(getLocalTimeZone())
|
||||||
|
|
||||||
|
const range = ref({
|
||||||
|
start: now,
|
||||||
|
end: now.add({ days: 8 }),
|
||||||
|
}) as Ref<DateRange>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="items-start justify-center gap-6 rounded-lg md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"
|
||||||
|
>
|
||||||
|
<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
|
||||||
|
<CardStats />
|
||||||
|
|
||||||
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<TeamMembers />
|
||||||
|
<CookieSettings />
|
||||||
|
<PaymentMethod />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<CardChat />
|
||||||
|
<CreateAccount />
|
||||||
|
<ReportAnIssue />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
|
||||||
|
<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
|
||||||
|
<Card class="max-w-[280px]">
|
||||||
|
<RangeCalendar v-model="range" />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
|
||||||
|
<ActivityGoal />
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
||||||
|
<Metric />
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
||||||
|
<DataTable />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
||||||
|
<ShareDocument />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import MailExample from '@/examples/mail/Example.vue'
|
import Button from '@/lib/registry/new-york/ui/button/Button.vue'
|
||||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
import GitHubIcon from '~icons/radix-icons/github-logo'
|
|
||||||
import Announcement from '../components/Announcement.vue'
|
import Announcement from '../components/Announcement.vue'
|
||||||
import ExamplesNav from '../components/ExamplesNav.vue'
|
import ExamplesNav from '../components/ExamplesNav.vue'
|
||||||
import PageAction from '../components/PageAction.vue'
|
import PageAction from '../components/PageAction.vue'
|
||||||
|
|
@ -11,51 +8,52 @@ import PageHeader from '../components/PageHeader.vue'
|
||||||
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
||||||
|
|
||||||
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
||||||
|
import LandingExample from './LandingExample.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PageHeader class="page-header pb-8">
|
<div class="relative">
|
||||||
<Announcement />
|
<PageHeader>
|
||||||
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
|
<Announcement />
|
||||||
<PageHeaderDescription>
|
<PageHeaderHeading>Build your component library</PageHeaderHeading>
|
||||||
Beautifully designed components that you can copy and paste into your
|
<PageHeaderDescription>
|
||||||
apps. Accessible. Customizable. Open Source.
|
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
|
||||||
</PageHeaderDescription>
|
</PageHeaderDescription>
|
||||||
|
|
||||||
<PageAction>
|
<PageAction>
|
||||||
<a
|
<Button as-child size="sm">
|
||||||
href="/docs/introduction"
|
<a href="/docs/introduction">
|
||||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
Get Started
|
||||||
>
|
</a>
|
||||||
Get Started
|
</Button>
|
||||||
</a>
|
<Button as-child size="sm" variant="ghost">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/unovue/shadcn-vue"
|
href="https://github.com/unovue/shadcn-vue"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:class="cn(
|
rel="noreferrer"
|
||||||
buttonVariants({ variant: 'outline' }),
|
>
|
||||||
'rounded-[6px]',
|
GitHub
|
||||||
)"
|
</a>
|
||||||
>
|
</Button>
|
||||||
<GitHubIcon class="mr-2 h-4 w-4" />
|
</PageAction>
|
||||||
GitHub
|
</PageHeader>
|
||||||
</a>
|
|
||||||
</PageAction>
|
<div class="container py-6">
|
||||||
</PageHeader>
|
<ExamplesNav class="[&>a:first-child]:text-primary" />
|
||||||
<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">
|
||||||
<VPImage
|
<VPImage
|
||||||
alt="Mail"
|
alt="Mail"
|
||||||
width="1280"
|
width="1280"
|
||||||
height="866" class="block" :image="{
|
height="866" class="block" :image="{
|
||||||
dark: '/examples/mail-dark.png',
|
dark: '/examples/mail-dark.png',
|
||||||
light: '/examples/mail-light.png',
|
light: '/examples/mail-light.png',
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section class="hidden md:block">
|
<section class="hidden md:block">
|
||||||
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
|
<LandingExample />
|
||||||
<MailExample />
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<span class="font-bold">
|
<span class="font-bold">
|
||||||
shadcn-vue
|
shadcn/vue
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
|
||||||
<template>
|
<template>
|
||||||
<section
|
<section
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
|
'flex w-full items-center justify-start gap-2 py-2',
|
||||||
$attrs.class ?? '',
|
$attrs.class ?? '',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,12 @@ import { cn } from '@/lib/utils'
|
||||||
<template>
|
<template>
|
||||||
<section
|
<section
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'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',
|
'flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12',
|
||||||
$attrs.class ?? '',
|
$attrs.class ?? '',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
<slot />
|
<div class="container">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import WrapBalancer from 'vue-wrap-balancer'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<WrapBalancer :class="cn('max-w-[750px] text-center text-lg font-light text-foreground', $attrs.class ?? '')" :prefer-native="false">
|
<p :class="cn('max-w-2xl text-lg font-light text-foreground', $attrs.class ?? '')">
|
||||||
<slot />
|
<slot />
|
||||||
</WrapBalancer>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
|
||||||
<template>
|
<template>
|
||||||
<h1
|
<h1
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
|
'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
|
||||||
$attrs.class ?? '',
|
$attrs.class ?? '',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
import type { TableOfContents, TableOfContentsItem } from '../types/docs'
|
import type { TableOfContents, TableOfContentsItem } from '../types/docs'
|
||||||
import { buttonVariants } from '@/lib/registry/default/ui/button'
|
import { buttonVariants } from '@/lib/registry/default/ui/button'
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
|
||||||
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
|
|
||||||
import { onContentUpdated } from 'vitepress'
|
import { onContentUpdated } from 'vitepress'
|
||||||
import { shallowRef } from 'vue'
|
import { shallowRef } from 'vue'
|
||||||
import CarbonAds from '../components/CarbonAds.vue'
|
import CarbonAds from '../components/CarbonAds.vue'
|
||||||
|
|
@ -61,16 +60,16 @@ onContentUpdated(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="hidden xl:block">
|
<div class="hidden text-sm xl:block">
|
||||||
<ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
|
<div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
|
||||||
<div class="space-y-2">
|
<div class="no-scrollbar h-full overflow-auto pb-10">
|
||||||
<p class="font-medium">
|
<p class="font-medium">
|
||||||
On This Page
|
On This Page
|
||||||
</p>
|
</p>
|
||||||
<TableOfContentTree :tree="headers" :level="1" />
|
<TableOfContentTree :tree="headers" :level="1" />
|
||||||
<CarbonAds v-if="showCarbonAds" />
|
<CarbonAds v-if="showCarbonAds" />
|
||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="block xl:hidden mb-6">
|
<div class="block xl:hidden mb-6">
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ watch(radius, (radius) => {
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger as-child>
|
<PopoverTrigger as-child>
|
||||||
<Button
|
<Button
|
||||||
class="w-9 h-9"
|
class="w-8 h-8"
|
||||||
:variant="'ghost'"
|
:variant="'ghost'"
|
||||||
:size="'icon'"
|
:size="'icon'"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -30,22 +30,13 @@ export const docsConfig: DocsConfig = {
|
||||||
title: 'Components',
|
title: 'Components',
|
||||||
href: '/docs/components/accordion',
|
href: '/docs/components/accordion',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Themes',
|
|
||||||
href: '/themes',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Examples',
|
|
||||||
href: '/examples/mail',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Blocks',
|
title: 'Blocks',
|
||||||
href: '/blocks',
|
href: '/blocks',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'GitHub',
|
title: 'Themes',
|
||||||
href: 'https://github.com/unovue/shadcn-vue',
|
href: '/themes',
|
||||||
external: true,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sidebarNav: [
|
sidebarNav: [
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCode from '~icons/radix-icons/code'
|
import RadixIconsCode from '~icons/radix-icons/code'
|
||||||
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
|
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
|
||||||
import { useData, useRoute } from 'vitepress'
|
import { useData, useRoute } from 'vitepress'
|
||||||
|
|
@ -15,99 +15,89 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<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">
|
||||||
<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 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
|
||||||
<aside
|
<div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
|
||||||
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"
|
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
|
||||||
>
|
<div class="pb-4">
|
||||||
<ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
|
<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
|
||||||
<div class="w-full">
|
{{ docsGroup.title }}
|
||||||
<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 }}
|
|
||||||
|
|
||||||
<span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
<span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
||||||
{{ docsGroup.label }}
|
{{ docsGroup.label }}
|
||||||
</span>
|
|
||||||
</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 }}
|
|
||||||
|
|
||||||
<span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
|
||||||
{{ doc.label }}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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="block xl:hidden">
|
|
||||||
<TableOfContent />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DocsBreadcrumb class="mb-4" />
|
|
||||||
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
|
|
||||||
{{ frontmatter.title }}
|
|
||||||
</h1>
|
|
||||||
<span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
|
||||||
{{ frontmatter.label }}
|
|
||||||
</span>
|
</span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="doc in docsGroup.items "
|
||||||
|
:key="doc.title"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
v-if="doc.href"
|
||||||
|
:disabled="doc.disabled"
|
||||||
|
:href="doc.href"
|
||||||
|
:class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
|
||||||
|
>
|
||||||
|
{{ doc.title }}
|
||||||
|
|
||||||
|
<span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
||||||
|
{{ doc.label }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<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.docs" :href="frontmatter.docs" 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">
|
|
||||||
<RadixIconsExternalLink class="mr-1" />
|
|
||||||
Docs
|
|
||||||
</a>
|
|
||||||
<a v-if="frontmatter.source" :href="sourceLink + 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>
|
|
||||||
|
|
||||||
<EditLink />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden text-sm xl:block">
|
|
||||||
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
|
|
||||||
<TableOfContent show-carbon-ads />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</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 max-w-3xl">
|
||||||
|
<div class="block xl:hidden">
|
||||||
|
<TableOfContent />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DocsBreadcrumb class="mb-4" />
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
|
||||||
|
{{ frontmatter.title }}
|
||||||
|
</h1>
|
||||||
|
<span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
||||||
|
{{ frontmatter.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-lg text-muted-foreground">
|
||||||
|
{{ frontmatter.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="frontmatter.docs || frontmatter.source || frontmatter.primitive" class="flex items-center space-x-2 pt-4">
|
||||||
|
<a v-if="frontmatter.docs" :href="frontmatter.docs" 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">
|
||||||
|
<RadixIconsExternalLink class="mr-1" />
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
<a v-if="frontmatter.source" :href="sourceLink + 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 py-8">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<EditLink />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden text-sm xl:block">
|
||||||
|
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
|
||||||
|
<TableOfContent show-carbon-ads />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
import Button from '@/lib/registry/new-york/ui/button/Button.vue'
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
import Announcement from '../components/Announcement.vue'
|
import Announcement from '../components/Announcement.vue'
|
||||||
import ExamplesNav from '../components/ExamplesNav.vue'
|
import ExamplesNav from '../components/ExamplesNav.vue'
|
||||||
import PageAction from '../components/PageAction.vue'
|
import PageAction from '../components/PageAction.vue'
|
||||||
|
|
@ -11,43 +10,39 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container relative">
|
<div class="relative">
|
||||||
<PageHeader class="page-header pb-8">
|
<PageHeader>
|
||||||
<Announcement />
|
<Announcement />
|
||||||
<PageHeaderHeading class="hidden md:block">
|
<PageHeaderHeading>Build your component library</PageHeaderHeading>
|
||||||
Check out some examples.
|
|
||||||
</PageHeaderHeading>
|
|
||||||
<PageHeaderHeading class="md:hidden">
|
|
||||||
Examples
|
|
||||||
</PageHeaderHeading>
|
|
||||||
<PageHeaderDescription>
|
<PageHeaderDescription>
|
||||||
Dashboard, cards, authentication. Some examples built using the
|
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
|
||||||
components. Use this as a guide to build your own.
|
|
||||||
</PageHeaderDescription>
|
</PageHeaderDescription>
|
||||||
|
|
||||||
<PageAction>
|
<PageAction>
|
||||||
<a
|
<Button as-child size="sm">
|
||||||
href="/docs/introduction"
|
<a href="/docs/introduction">
|
||||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
Get Started
|
||||||
>
|
</a>
|
||||||
Get Started
|
</Button>
|
||||||
</a>
|
<Button as-child size="sm" variant="ghost">
|
||||||
<a
|
<a
|
||||||
href="/docs/components/accordion"
|
href="https://github.com/unovue/shadcn-vue"
|
||||||
:class="cn(
|
target="_blank"
|
||||||
buttonVariants({ variant: 'outline' }),
|
rel="noreferrer"
|
||||||
'rounded-[6px]',
|
>
|
||||||
)"
|
GitHub
|
||||||
>
|
</a>
|
||||||
Components
|
</Button>
|
||||||
</a>
|
|
||||||
</PageAction>
|
</PageAction>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<section>
|
|
||||||
<ExamplesNav />
|
<div class="container py-6">
|
||||||
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
|
<section>
|
||||||
<slot />
|
<ExamplesNav class="[&>a:first-child]:text-primary" />
|
||||||
</div>
|
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
|
||||||
</section>
|
<slot />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,21 +7,22 @@ import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
|
||||||
import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
|
import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
|
||||||
import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
|
import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
import { useConfigStore } from '@/stores/config'
|
import { useConfigStore } from '@/stores/config'
|
||||||
import { useMagicKeys, useToggle } from '@vueuse/core'
|
import { useMagicKeys, useToggle } from '@vueuse/core'
|
||||||
import Circle from '~icons/radix-icons/circle'
|
|
||||||
|
|
||||||
|
import MoonIcon from '~icons/lucide/moon'
|
||||||
|
import SunIcon from '~icons/lucide/sun'
|
||||||
|
import Circle from '~icons/radix-icons/circle'
|
||||||
import File from '~icons/radix-icons/file'
|
import File from '~icons/radix-icons/file'
|
||||||
import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
|
import GithubLogoIcon from '~icons/radix-icons/github-logo'
|
||||||
import RadixIconsMoon from '~icons/radix-icons/moon'
|
|
||||||
import RadixIconsSun from '~icons/radix-icons/sun'
|
|
||||||
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
|
import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
|
||||||
import Kbd from '../components/Kbd.vue'
|
import Kbd from '../components/Kbd.vue'
|
||||||
import Logo from '../components/Logo.vue'
|
import Logo from '../components/Logo.vue'
|
||||||
import MobileNav from '../components/MobileNav.vue'
|
|
||||||
|
|
||||||
|
import MobileNav from '../components/MobileNav.vue'
|
||||||
import ThemePopover from '../components/ThemePopover.vue'
|
import ThemePopover from '../components/ThemePopover.vue'
|
||||||
import { docsConfig, type NavItem } from '../config/docs'
|
import { docsConfig, type NavItem } from '../config/docs'
|
||||||
|
|
||||||
|
|
@ -42,13 +43,8 @@ const links = [
|
||||||
{
|
{
|
||||||
name: 'GitHub',
|
name: 'GitHub',
|
||||||
href: 'https://github.com/unovue/shadcn-vue',
|
href: 'https://github.com/unovue/shadcn-vue',
|
||||||
icon: RadixIconsGithubLogo,
|
icon: GithubLogoIcon,
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// name: 'X',
|
|
||||||
// href: 'https://x.com',
|
|
||||||
// icon: TablerBrandX,
|
|
||||||
// },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const isOpen = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
@ -75,9 +71,7 @@ function handleSelectLink(item: NavItem) {
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => $route.path, (n) => {
|
watch(() => $route.path, (n) => {
|
||||||
// @ts-expect-error View Transition API not supported by all the browser yet
|
|
||||||
if (document.startViewTransition) {
|
if (document.startViewTransition) {
|
||||||
// @ts-expect-error View Transition API not supported by all the browser yet
|
|
||||||
document.startViewTransition(() => {
|
document.startViewTransition(() => {
|
||||||
console.log('soft navigating to: ', n)
|
console.log('soft navigating to: ', n)
|
||||||
})
|
})
|
||||||
|
|
@ -90,27 +84,19 @@ watch(() => $route.path, (n) => {
|
||||||
<div v-if="$route.data.frontmatter.layout === false">
|
<div v-if="$route.data.frontmatter.layout === false">
|
||||||
<Content :key="$route.path" />
|
<Content :key="$route.path" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
|
<div v-else vaul-drawer-wrapper class="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
|
||||||
<header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
|
<header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
|
||||||
<div
|
<div class="flex h-14 items-center px-4">
|
||||||
class="container flex h-14 max-w-screen-2xl items-center"
|
|
||||||
>
|
|
||||||
<div class="mr-4 md:mr-1 hidden md:flex">
|
<div class="mr-4 md:mr-1 hidden md:flex">
|
||||||
<Logo />
|
<Logo />
|
||||||
|
|
||||||
<nav
|
<nav class="flex items-center gap-4 text-sm xl:gap-6">
|
||||||
class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
|
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
v-for="route in docsConfig.mainNav"
|
v-for="route in docsConfig.mainNav"
|
||||||
:key="route.title"
|
:key="route.title"
|
||||||
:href="route.href"
|
:href="route.href"
|
||||||
:target="route.external ? '_target' : undefined"
|
:target="route.external ? '_target' : undefined"
|
||||||
class="transition-colors hover:text-foreground/80 text-foreground/60"
|
:class="cn('transition-colors hover:text-foreground/80', $route.path === `${route.href}.html` ? 'text-foreground' : 'text-foreground/80')"
|
||||||
:class="{
|
|
||||||
'font-semibold !text-foreground': $route.path === `${route.href}.html`,
|
|
||||||
'hidden lg:block': route?.href?.includes('github'),
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
{{ route.title }}
|
{{ route.title }}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -122,18 +108,18 @@ watch(() => $route.path, (n) => {
|
||||||
<div class="w-full flex-1 md:w-auto md:flex-none">
|
<div class="w-full flex-1 md:w-auto md:flex-none">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
|
class="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
|
||||||
@click="isOpen = true"
|
@click="isOpen = true"
|
||||||
>
|
>
|
||||||
<span class="hidden lg:inline-flex">Search documentation...</span>
|
<span class="hidden lg:inline-flex">Search documentation...</span>
|
||||||
<span class="inline-flex lg:hidden">Search...</span>
|
<span class="inline-flex lg:hidden">Search...</span>
|
||||||
<Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
<Kbd :size="'xs'" class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
||||||
<span class="text-xs">⌘</span>K
|
⌘ K
|
||||||
</Kbd>
|
</Kbd>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="flex items-center">
|
<nav class="flex items-center gap-0.5">
|
||||||
<ThemePopover />
|
<ThemePopover />
|
||||||
|
|
||||||
<CodeConfigCustomizer />
|
<CodeConfigCustomizer />
|
||||||
|
|
@ -142,28 +128,26 @@ watch(() => $route.path, (n) => {
|
||||||
v-for="link in links"
|
v-for="link in links"
|
||||||
:key="link.name"
|
:key="link.name"
|
||||||
as="a"
|
as="a"
|
||||||
class="w-9 h-9"
|
class="w-8 h-8"
|
||||||
:href="link.href" target="_blank"
|
:href="link.href" target="_blank"
|
||||||
:variant="'ghost'"
|
:variant="'ghost'"
|
||||||
:size="'icon'"
|
:size="'icon'"
|
||||||
>
|
>
|
||||||
<component :is="link.icon" class="w-5 h-5" />
|
<component :is="link.icon" class="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<ClientOnly>
|
<Button
|
||||||
<Button
|
class="w-8 h-8"
|
||||||
class="w-9 h-9"
|
aria-label="Toggle dark mode"
|
||||||
aria-label="Toggle dark mode"
|
:variant="'ghost'"
|
||||||
:variant="'ghost'"
|
:size="'icon'"
|
||||||
:size="'icon'"
|
@click="toggleDark()"
|
||||||
@click="toggleDark()"
|
>
|
||||||
>
|
<component
|
||||||
<component
|
:is="isDark ? SunIcon : MoonIcon"
|
||||||
:is="isDark ? RadixIconsSun : RadixIconsMoon"
|
class="w-4 h-4 text-foreground"
|
||||||
class="w-5 h-5 text-foreground"
|
/>
|
||||||
/>
|
</Button>
|
||||||
</Button>
|
|
||||||
</ClientOnly>
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,7 +168,7 @@ watch(() => $route.path, (n) => {
|
||||||
<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 class="container">
|
<main v-else class="flex-1">
|
||||||
<Transition name="fade" mode="out-in">
|
<Transition name="fade" mode="out-in">
|
||||||
<Content :key="$route.path" />
|
<Content :key="$route.path" />
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
@ -192,42 +176,38 @@ watch(() => $route.path, (n) => {
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="py-6 md:px-8 md:py-0">
|
<footer class="border-t border-border/40 py-6 dark:border-border 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="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">
|
<p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
|
||||||
<span class="inline-block">
|
<span>
|
||||||
Built and designed by
|
Built by
|
||||||
<a
|
<a
|
||||||
href="https://twitter.com/shadcn"
|
href="https://twitter.com/shadcn"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="underline underline-offset-4 font-bold decoration-foreground"
|
class="font-medium underline underline-offset-4"
|
||||||
>
|
>
|
||||||
shadcn
|
shadcn</a>.
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="ml-0.5"> . </span>
|
<span class="inline-block ml-1">
|
||||||
<span class="inline-block ml-2">
|
|
||||||
Ported to Vue by
|
Ported to Vue by
|
||||||
<a
|
<a
|
||||||
href="https://github.com/unovue"
|
href="https://twitter.com/unovue"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="underline underline-offset-4 font-bold decoration-foreground"
|
class="font-medium underline underline-offset-4"
|
||||||
>
|
>
|
||||||
Radix Vue
|
unovue
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>.
|
||||||
<span class="ml-0.5"> . </span>
|
<span class="inline-block ml-1">
|
||||||
<span class="inline-block ml-2">
|
|
||||||
The code source is available on
|
The code source is available on
|
||||||
<a
|
<a
|
||||||
href="https://github.com/unovue/shadcn-vue"
|
href="https://github.com/unovue/shadcn-vue"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="underline underline-offset-4 font-bold decoration-foreground"
|
class="font-medium underline underline-offset-4"
|
||||||
>
|
>
|
||||||
GitHub
|
GitHub</a>.
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
@ -281,7 +261,7 @@ watch(() => $route.path, (n) => {
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<RadixIconsSun class="mr-2 h-5 w-5" />
|
<SunIcon class="mr-2 h-5 w-5" />
|
||||||
<span>Light Theme</span>
|
<span>Light Theme</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
|
|
@ -294,7 +274,7 @@ watch(() => $route.path, (n) => {
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<RadixIconsMoon class="mr-2 h-5 w-5" />
|
<MoonIcon class="mr-2 h-5 w-5" />
|
||||||
<span>Dark Theme</span>
|
<span>Dark Theme</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,19 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Geist";
|
||||||
|
src: url("/fonts/Geist[wght].ttf");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "GeistMono";
|
||||||
|
src: url("/fonts/GeistMono[wght].ttf");
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
--font-geist-sans: "Geist";
|
||||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
--font-geist-mono: "GeistMono";
|
||||||
|
|
||||||
--background: 0 0% 100%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 240 10% 3.9%;
|
--foreground: 240 10% 3.9%;
|
||||||
|
|
@ -86,15 +95,40 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
@apply scroll-smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground overscroll-none;
|
||||||
|
/* font-feature-settings: "rlig" 1, "calt" 1; */
|
||||||
|
font-synthesis-weight: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
|
||||||
|
[data-wrapper] {
|
||||||
|
@apply min-[1800px]:border-t;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar styling. Thanks @pranathiperii. */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: hsl(var(--border));
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
* {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: hsl(var(--border)) transparent;
|
scrollbar-color: hsl(var(--border)) transparent;
|
||||||
}
|
}
|
||||||
html {
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
font-variation-settings: normal;
|
|
||||||
}
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground min-h-screen antialiased font-sans;
|
@apply bg-background text-foreground min-h-screen antialiased font-sans;
|
||||||
/* font-feature-settings: "rlig" 1, "calt" 1; */
|
/* font-feature-settings: "rlig" 1, "calt" 1; */
|
||||||
|
|
@ -119,16 +153,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Firefox */
|
|
||||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
|
|
||||||
html {
|
|
||||||
scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.dark {
|
|
||||||
scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.dark .shiki,
|
html.dark .shiki,
|
||||||
html.dark .shiki span {
|
html.dark .shiki span {
|
||||||
color: var(--shiki-dark);
|
color: var(--shiki-dark);
|
||||||
|
|
@ -147,21 +171,40 @@
|
||||||
|
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.step {
|
.step {
|
||||||
counter-increment: step;
|
counter-increment: step;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step:before {
|
.step:before {
|
||||||
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
|
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
|
||||||
@apply -ml-[50px] -mt-1;
|
@apply ml-[-50px] mt-[-4px];
|
||||||
content: counter(step);
|
content: counter(step);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chunk-container {
|
||||||
|
@apply shadow-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chunk-container::after {
|
||||||
|
content: "";
|
||||||
|
@apply absolute -inset-4 shadow-xl rounded-xl border;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* Hide scrollbar for IE, Edge and Firefox */
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.container {
|
.container {
|
||||||
@apply px-4;
|
@apply px-4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div[class^="language-"] {
|
div[class^="language-"] {
|
||||||
|
|
@ -184,7 +227,7 @@ pre code {
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code .line {
|
pre code .line {
|
||||||
@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
|
@apply px-4 min-h-4 w-full inline-block leading-[--vp-code-line-height];
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-number {
|
.line-number {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
--vp-code-bg: hsl(var(--muted));
|
--vp-code-bg: hsl(var(--muted));
|
||||||
--vp-c-divider: hsl(var(--muted));
|
--vp-c-divider: hsl(var(--muted));
|
||||||
--vp-code-block-color: #fff
|
--vp-code-block-color: #fff
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -328,18 +328,15 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* padding: 20px 0; */
|
|
||||||
background: transparent;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
@apply bg-zinc-950 dark:bg-zinc-900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc [class*='language-'] code {
|
.vp-doc [class*='language-'] code {
|
||||||
display: block;
|
display: block;
|
||||||
/* padding: 0 24px; */
|
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
line-height: var(--vp-code-line-height);
|
line-height: var(--vp-code-line-height);
|
||||||
/* font-size: var(--vp-code-font-size); */
|
|
||||||
color: var(--vp-code-block-color);
|
color: var(--vp-code-block-color);
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
@ -350,8 +347,8 @@
|
||||||
padding: 0 24px; */
|
padding: 0 24px; */
|
||||||
width: calc(100% + 2 * 24px);
|
width: calc(100% + 2 * 24px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
|
@apply bg-zinc-700/50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc [class*='language-'] code .highlighted.error {
|
.vp-doc [class*='language-'] code .highlighted.error {
|
||||||
background-color: var(--vp-code-line-error-color);
|
background-color: var(--vp-code-line-error-color);
|
||||||
|
|
@ -421,9 +418,9 @@
|
||||||
.vp-doc .line-numbers-wrapper {
|
.vp-doc .line-numbers-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
border-right: 1px solid var(--vp-code-block-divider-color);
|
border-right: 1px solid var(--vp-code-block-divider-color);
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|
@ -441,20 +438,20 @@
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 16px;
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
right: 12px;
|
right: 16px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
border: 1px solid var(--vp-code-copy-code-border-color);
|
border: 1px solid var(--vp-code-copy-code-border-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
width: 40px;
|
width: 30px;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
background-color: var(--vp-code-copy-code-bg);
|
background-color: var(--vp-code-copy-code-bg);
|
||||||
opacity: 0;
|
/* opacity: 0; */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-image: var(--vp-icon-copy);
|
background-image: var(--vp-icon-copy);
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
background-size: 20px;
|
background-size: 16px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
transition:
|
transition:
|
||||||
border-color 0.25s,
|
border-color 0.25s,
|
||||||
|
|
@ -518,14 +515,10 @@
|
||||||
transition:
|
transition:
|
||||||
color 0.4s,
|
color 0.4s,
|
||||||
opacity 0.4s;
|
opacity 0.4s;
|
||||||
|
|
||||||
@apply text-gray-600;
|
@apply text-gray-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc [class*='language-']:hover > button.copy + span.lang,
|
|
||||||
.vp-doc [class*='language-'] > button.copy:focus + span.lang {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component: Team
|
* Component: Team
|
||||||
|
|
@ -575,4 +568,4 @@
|
||||||
|
|
||||||
.line-numbers-mode pre code .line {
|
.line-numbers-mode pre code .line {
|
||||||
padding-left: 3rem !important;
|
padding-left: 3rem !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ import { ref } from 'vue'
|
||||||
|
|
||||||
const sofiaRole = ref('Owner')
|
const sofiaRole = ref('Owner')
|
||||||
const jacksonRole = ref('Member')
|
const jacksonRole = ref('Member')
|
||||||
|
const isabellaRole = ref('Member')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -152,6 +153,64 @@ const jacksonRole = ref('Member')
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex items-center justify-between space-x-4">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src="/avatars/03.png" />
|
||||||
|
<AvatarFallback>JL</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium leading-none">
|
||||||
|
Isabella Nguyen
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
i@example.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger as-child>
|
||||||
|
<Button variant="outline" class="ml-auto">
|
||||||
|
{{ isabellaRole }}
|
||||||
|
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent class="p-0" align="end">
|
||||||
|
<Command v-model="isabellaRole">
|
||||||
|
<CommandInput placeholder="Select new role..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No roles found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
<CommandItem value="Viewer" class="space-y-1 flex flex-col items-start px-4 py-2">
|
||||||
|
<p>Viewer</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Can view and comment.
|
||||||
|
</p>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="Developer" class="space-y-1 flex flex-col items-start px-4 py-2">
|
||||||
|
<p>Developer</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Can view, comment and edit.
|
||||||
|
</p>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="Billing" class="space-y-1 flex flex-col items-start px-4 py-2">
|
||||||
|
<p>Billing</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Can view, comment and manage billing.
|
||||||
|
</p>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="Owner" class="space-y-1 flex flex-col items-start px-4 py-2">
|
||||||
|
<p>Owner</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Admin-level access to all resources.
|
||||||
|
</p>
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -92,7 +92,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent class="w-[200px] p-0">
|
<PopoverContent class="w-[200px] p-0">
|
||||||
<Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
|
<Command>
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandInput placeholder="Search team..." />
|
<CommandInput placeholder="Search team..." />
|
||||||
<CommandEmpty>No team found.</CommandEmpty>
|
<CommandEmpty>No team found.</CommandEmpty>
|
||||||
|
|
|
||||||
|
|
@ -73,9 +73,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent class="w-[200px] p-0" align="start">
|
<PopoverContent class="w-[200px] p-0" align="start">
|
||||||
<Command
|
<Command>
|
||||||
:filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
|
|
||||||
>
|
|
||||||
<CommandInput :placeholder="title" />
|
<CommandInput :placeholder="title" />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>No results found.</CommandEmpty>
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
|
|
||||||
|
|
@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
|
||||||
message.
|
message.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<Command
|
<Command class="overflow-hidden rounded-t-none border-t">
|
||||||
class="overflow-hidden rounded-t-none border-t"
|
|
||||||
:filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
|
|
||||||
>
|
|
||||||
<CommandInput placeholder="Search user..." />
|
<CommandInput placeholder="Search user..." />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>No users found.</CommandEmpty>
|
<CommandEmpty>No users found.</CommandEmpty>
|
||||||
|
|
|
||||||
|
|
@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
|
||||||
message.
|
message.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<Command
|
<Command class="overflow-hidden rounded-t-none border-t">
|
||||||
class="overflow-hidden rounded-t-none border-t"
|
|
||||||
:filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
|
|
||||||
>
|
|
||||||
<CommandInput placeholder="Search user..." />
|
<CommandInput placeholder="Search user..." />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>No users found.</CommandEmpty>
|
<CommandEmpty>No users found.</CommandEmpty>
|
||||||
|
|
|
||||||
|
|
@ -60,14 +60,14 @@ const data = [
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader class="pb-2">
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<CardTitle class="text-lg">
|
<CardTitle class="text-sm font-normal">
|
||||||
Subscriptions
|
Subscriptions
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div class="text-2xl font-bold">
|
<div class="text-2xl font-bold">
|
||||||
+2,350
|
+2350
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-muted-foreground">
|
<p class="text-xs text-muted-foreground">
|
||||||
+54.8% from last month
|
+54.8% from last month
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,92 +0,0 @@
|
||||||
Geist Sans and Geist Mono Font
|
|
||||||
(C) 2023 Vercel, made in collaboration with basement.studio
|
|
||||||
|
|
||||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
||||||
This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
|
|
||||||
|
|
||||||
-----------------------------------------------------------
|
|
||||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
||||||
-----------------------------------------------------------
|
|
||||||
|
|
||||||
PREAMBLE
|
|
||||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
||||||
development of collaborative font projects, to support the font creation
|
|
||||||
efforts of academic and linguistic communities, and to provide a free and
|
|
||||||
open framework in which fonts may be shared and improved in partnership
|
|
||||||
with others.
|
|
||||||
|
|
||||||
The OFL allows the licensed fonts to be used, studied, modified and
|
|
||||||
redistributed freely as long as they are not sold by themselves. The
|
|
||||||
fonts, including any derivative works, can be bundled, embedded,
|
|
||||||
redistributed and/or sold with any software provided that any reserved
|
|
||||||
names are not used by derivative works. The fonts and derivatives,
|
|
||||||
however, cannot be released under any other type of license. The
|
|
||||||
requirement for fonts to remain under this license does not apply
|
|
||||||
to any document created using the fonts or their derivatives.
|
|
||||||
|
|
||||||
DEFINITIONS
|
|
||||||
"Font Software" refers to the set of files released by the Copyright
|
|
||||||
Holder(s) under this license and clearly marked as such. This may
|
|
||||||
include source files, build scripts and documentation.
|
|
||||||
|
|
||||||
"Reserved Font Name" refers to any names specified as such after the
|
|
||||||
copyright statement(s).
|
|
||||||
|
|
||||||
"Original Version" refers to the collection of Font Software components as
|
|
||||||
distributed by the Copyright Holder(s).
|
|
||||||
|
|
||||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
||||||
or substituting -- in part or in whole -- any of the components of the
|
|
||||||
Original Version, by changing formats or by porting the Font Software to a
|
|
||||||
new environment.
|
|
||||||
|
|
||||||
"Author" refers to any designer, engineer, programmer, technical
|
|
||||||
writer or other person who contributed to the Font Software.
|
|
||||||
|
|
||||||
PERMISSION AND CONDITIONS
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
||||||
redistribute, and sell modified and unmodified copies of the Font
|
|
||||||
Software, subject to the following conditions:
|
|
||||||
|
|
||||||
1) Neither the Font Software nor any of its individual components,
|
|
||||||
in Original or Modified Versions, may be sold by itself.
|
|
||||||
|
|
||||||
2) Original or Modified Versions of the Font Software may be bundled,
|
|
||||||
redistributed and/or sold with any software, provided that each copy
|
|
||||||
contains the above copyright notice and this license. These can be
|
|
||||||
included either as stand-alone text files, human-readable headers or
|
|
||||||
in the appropriate machine-readable metadata fields within text or
|
|
||||||
binary files as long as those fields can be easily viewed by the user.
|
|
||||||
|
|
||||||
3) No Modified Version of the Font Software may use the Reserved Font
|
|
||||||
Name(s) unless explicit written permission is granted by the corresponding
|
|
||||||
Copyright Holder. This restriction only applies to the primary font name as
|
|
||||||
presented to the users.
|
|
||||||
|
|
||||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
||||||
Software shall not be used to promote, endorse or advertise any
|
|
||||||
Modified Version, except to acknowledge the contribution(s) of the
|
|
||||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
||||||
permission.
|
|
||||||
|
|
||||||
5) The Font Software, modified or unmodified, in part or in whole,
|
|
||||||
must be distributed entirely under this license, and must not be
|
|
||||||
distributed under any other license. The requirement for fonts to
|
|
||||||
remain under this license does not apply to any document created
|
|
||||||
using the Font Software.
|
|
||||||
|
|
||||||
TERMINATION
|
|
||||||
This license becomes null and void if any of the above conditions are
|
|
||||||
not met.
|
|
||||||
|
|
||||||
DISCLAIMER
|
|
||||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
||||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
||||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
||||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
||||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
||||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
||||||
BIN
apps/www/src/public/fonts/GeistMono[wght].ttf
Normal file
BIN
apps/www/src/public/fonts/GeistMono[wght].ttf
Normal file
Binary file not shown.
BIN
apps/www/src/public/fonts/Geist[wght].ttf
Normal file
BIN
apps/www/src/public/fonts/Geist[wght].ttf
Normal file
Binary file not shown.
|
|
@ -1,22 +1,19 @@
|
||||||
import defaultTheme from 'tailwindcss/defaultTheme'
|
import { fontFamily } from 'tailwindcss/defaultTheme'
|
||||||
import tailwindcssAnimate from 'tailwindcss-animate'
|
import tailwindcssAnimate from 'tailwindcss-animate'
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
darkMode: 'class',
|
darkMode: ['class'],
|
||||||
content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
|
content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: '2rem',
|
padding: '2rem',
|
||||||
screens: {
|
screens: {
|
||||||
'2xl': '1400px',
|
'2xl': '1536px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
|
||||||
sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
|
|
||||||
},
|
|
||||||
colors: {
|
colors: {
|
||||||
border: 'hsl(var(--border))',
|
border: 'hsl(var(--border))',
|
||||||
input: 'hsl(var(--input))',
|
input: 'hsl(var(--input))',
|
||||||
|
|
@ -32,8 +29,8 @@ export default {
|
||||||
foreground: 'hsl(var(--secondary-foreground))',
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
},
|
},
|
||||||
destructive: {
|
destructive: {
|
||||||
DEFAULT: 'hsl(var(--destructive))',
|
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
|
||||||
foreground: 'hsl(var(--destructive-foreground))',
|
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
|
||||||
},
|
},
|
||||||
muted: {
|
muted: {
|
||||||
DEFAULT: 'hsl(var(--muted))',
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
|
|
@ -68,33 +65,28 @@ export default {
|
||||||
md: 'calc(var(--radius) - 2px)',
|
md: 'calc(var(--radius) - 2px)',
|
||||||
sm: 'calc(var(--radius) - 4px)',
|
sm: 'calc(var(--radius) - 4px)',
|
||||||
},
|
},
|
||||||
boxShadow: {
|
fontFamily: {
|
||||||
switch:
|
sans: ['var(--font-geist-sans)', ...fontFamily.sans],
|
||||||
'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px',
|
mono: ['var(--font-geist-mono)', ...fontFamily.mono],
|
||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
'accordion-down': {
|
'accordion-down': {
|
||||||
from: { height: 0 },
|
from: { height: '0' },
|
||||||
to: { height: 'var(--reka-accordion-content-height)' },
|
to: { height: 'var(--reka-accordion-content-height)' },
|
||||||
},
|
},
|
||||||
'accordion-up': {
|
'accordion-up': {
|
||||||
from: { height: 'var(--reka-accordion-content-height)' },
|
from: { height: 'var(--reka-accordion-content-height)' },
|
||||||
to: { height: 0 },
|
to: { height: '0' },
|
||||||
},
|
},
|
||||||
'collapsible-down': {
|
'caret-blink': {
|
||||||
from: { height: 0 },
|
'0%,70%,100%': { opacity: '1' },
|
||||||
to: { height: 'var(--reka-collapsible-content-height)' },
|
'20%,50%': { opacity: '0' },
|
||||||
},
|
|
||||||
'collapsible-up': {
|
|
||||||
from: { height: 'var(--reka-collapsible-content-height)' },
|
|
||||||
to: { height: 0 },
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
'accordion-down': 'accordion-down 0.2s ease-in-out',
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
'accordion-up': 'accordion-up 0.2s ease-in-out',
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||||
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
|
'caret-blink': 'caret-blink 1.25s ease-out infinite',
|
||||||
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user