From de367c1b34a3e9ce9116cde402367fe39880a11b Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Sep 2023 14:46:21 +0800
Subject: [PATCH] feat: landnig page, fix styling

---
 .../theme/components/LandingPage.vue          |  90 ++++++-----
 .../.vitepress/theme/layout/DocsLayout.vue    | 144 +++++++++---------
 .../.vitepress/theme/layout/MainLayout.vue    |  16 +-
 .../examples/dashboard/components/UserNav.vue |   2 +-
 4 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index 4b3e80f9..4dc23fe9 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -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>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 6470fe22..85891b91 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -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>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index ee9ca831..41b3def4 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -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"
diff --git a/apps/www/src/examples/dashboard/components/UserNav.vue b/apps/www/src/examples/dashboard/components/UserNav.vue
index d7df3485..1ad7b4b1 100644
--- a/apps/www/src/examples/dashboard/components/UserNav.vue
+++ b/apps/www/src/examples/dashboard/components/UserNav.vue
@@ -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