chore: revamp sitte

apps/www/.vitepress/theme/components/Announcement.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { announcementConfig } from '../config/site'
 </script>
 
 <template>
   <a
     :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">{{ announcementConfig.title }}</span>
-    <span class="hidden sm:inline">
+    <span class="sm:hidden underline-offset-4 group-hover:underline">{{ announcementConfig.title }}</span>
+    <span class="hidden sm:inline underline-offset-4 group-hover:underline">
       {{ announcementConfig.title }}
     </span>
     <ArrowRightIcon class="ml-1 h-4 w-4" />

apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue

@@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
   >
     <SheetTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >
-        <RadixIconsGear class="w-5 h-5" />
+        <RadixIconsGear class="w-4 h-4" />
       </Button>
     </SheetTrigger>
     <SheetContent>

apps/www/.vitepress/theme/components/ExamplesNav.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 import { cn } from '@/lib/utils'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
 
@@ -62,25 +61,16 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
           :key="example.href"
           :href="example.href"
           :class="cn(
-            'flex items-center px-4',
-            path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
-              ? 'font-bold text-primary'
-              : 'font-medium text-muted-foreground',
+            'flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary',
+            path?.startsWith(example.href)
+              ? 'bg-muted font-medium text-primary'
+              : 'text-muted-foreground',
           )"
         >
           {{ example.name }}
         </a>
       </div>
       <ScrollBar orientation="horizontal" class="invisible" />
     </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>
 </template>

apps/www/.vitepress/theme/components/Kbd.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<KbdProps>(), {
 
 const kbdClass = computed(() => {
   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: {
         size: {

apps/www/.vitepress/theme/components/LandingExample.vue

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

apps/www/.vitepress/theme/components/LandingPage.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import MailExample from '@/examples/mail/Example.vue'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
+import Button from '@/lib/registry/new-york/ui/button/Button.vue'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
@@ -11,51 +8,52 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import LandingExample from './LandingExample.vue'
 </script>
 
 <template>
-  <PageHeader class="page-header pb-8">
-    <Announcement />
-    <PageHeaderHeading>Build your component library.</PageHeaderHeading>
-    <PageHeaderDescription>
-      Beautifully designed components that you can copy and paste into your
-      apps. Accessible. Customizable. Open Source.
-    </PageHeaderDescription>
+  <div class="relative">
+    <PageHeader>
+      <Announcement />
+      <PageHeaderHeading>Build your component library</PageHeaderHeading>
+      <PageHeaderDescription>
+        Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
+      </PageHeaderDescription>
 
-    <PageAction>
-      <a
-        href="/docs/introduction"
-        :class="cn(buttonVariants(), 'rounded-[6px]')"
-      >
-        Get Started
-      </a>
-      <a
-        href="https://github.com/unovue/shadcn-vue"
-        target="_blank"
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'rounded-[6px]',
-        )"
-      >
-        <GitHubIcon class="mr-2 h-4 w-4" />
-        GitHub
-      </a>
-    </PageAction>
-  </PageHeader>
-  <ExamplesNav />
-  <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
-    <VPImage
-      alt="Mail"
-      width="1280"
-      height="866" class="block" :image="{
-        dark: '/examples/mail-dark.png',
-        light: '/examples/mail-light.png',
-      }"
-    />
-  </section>
-  <section class="hidden md:block">
-    <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-      <MailExample />
+      <PageAction>
+        <Button as-child size="sm">
+          <a href="/docs/introduction">
+            Get Started
+          </a>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
+          <a
+            href="https://github.com/unovue/shadcn-vue"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </Button>
+      </PageAction>
+    </PageHeader>
+
+    <div class="container py-6">
+      <ExamplesNav class="[&>a:first-child]:text-primary" />
+
+      <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
+        <VPImage
+          alt="Mail"
+          width="1280"
+          height="866" class="block" :image="{
+            dark: '/examples/mail-dark.png',
+            light: '/examples/mail-light.png',
+          }"
+        />
+      </section>
+      <section class="hidden md:block">
+        <LandingExample />
+      </section>
     </div>
-  </section>
+  </div>
 </template>

apps/www/.vitepress/theme/components/Logo.vue

@@ -16,7 +16,7 @@
     </svg>
 
     <span class="font-bold">
-      shadcn-vue
+      shadcn/vue
     </span>
   </a>
 </template>

apps/www/.vitepress/theme/components/PageAction.vue

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :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 ?? '',
     )"
   >

apps/www/.vitepress/theme/components/PageHeader.vue

@@ -7,10 +7,12 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :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 ?? '',
     )"
   >
-    <slot />
+    <div class="container">
+      <slot />
+    </div>
   </section>
 </template>

apps/www/.vitepress/theme/components/PageHeaderDescription.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import WrapBalancer from 'vue-wrap-balancer'
 </script>
 
 <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 />
-  </WrapBalancer>
+  </p>
 </template>

apps/www/.vitepress/theme/components/PageHeaderHeading.vue

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :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 ?? '',
     )"
   >

apps/www/.vitepress/theme/components/TableOfContent.vue

@@ -2,7 +2,6 @@
 import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
 import CarbonAds from '../components/CarbonAds.vue'
@@ -61,16 +60,16 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="hidden xl:block">
-    <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
-      <div class="space-y-2">
+  <div class="hidden text-sm xl:block">
+    <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
+      <div class="no-scrollbar h-full overflow-auto pb-10">
         <p class="font-medium">
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
         <CarbonAds v-if="showCarbonAds" />
       </div>
-    </ScrollArea>
+    </div>
   </div>
 
   <div class="block xl:hidden mb-6">

apps/www/.vitepress/theme/components/ThemePopover.vue

@@ -33,7 +33,7 @@ watch(radius, (radius) => {
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >

apps/www/.vitepress/theme/config/docs.ts

@@ -30,22 +30,13 @@ export const docsConfig: DocsConfig = {
       title: 'Components',
       href: '/docs/components/accordion',
     },
-    {
-      title: 'Themes',
-      href: '/themes',
-    },
-    {
-      title: 'Examples',
-      href: '/examples/mail',
-    },
     {
       title: 'Blocks',
       href: '/blocks',
     },
     {
-      title: 'GitHub',
-      href: 'https://github.com/unovue/shadcn-vue',
-      external: true,
+      title: 'Themes',
+      href: '/themes',
     },
   ],
   sidebarNav: [