From 69279434775b2e24484c30e8082dc14081e7285d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 20 Nov 2024 12:54:16 +0800
Subject: [PATCH] docs: update content, styling

---
 apps/www/.vitepress/theme/components/Logo.vue | 12 +---
 .../www/.vitepress/theme/components/Steps.vue |  2 +-
 .../theme/components/TableOfContent.vue       | 14 ++--
 .../theme/components/TableOfContentTree.vue   |  4 +-
 .../.vitepress/theme/layout/DocsLayout.vue    | 38 +++++-----
 apps/www/.vitepress/theme/style.css           | 10 ++-
 apps/www/.vitepress/theme/styles/vp-doc.css   |  9 ++-
 apps/www/src/content/docs/cli.md              | 71 +++++++++----------
 apps/www/src/content/docs/components-json.md  | 36 ++++++++++
 apps/www/src/content/docs/dark-mode.md        |  2 +-
 10 files changed, 117 insertions(+), 81 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/Logo.vue b/apps/www/.vitepress/theme/components/Logo.vue
index 9e668392..0f29aa65 100644
--- a/apps/www/.vitepress/theme/components/Logo.vue
+++ b/apps/www/.vitepress/theme/components/Logo.vue
@@ -3,17 +3,7 @@
 
 <template>
   <a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
-    <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_102_1338)">
-        <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M192 40L40 192" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_102_1338">
-          <rect width="256" height="256" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-6 w-6 text-[#41B883]"><rect width="256" height="256" fill="none" /><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" /><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" /></svg>
 
     <span class="font-bold">
       shadcn/vue
diff --git a/apps/www/.vitepress/theme/components/Steps.vue b/apps/www/.vitepress/theme/components/Steps.vue
index a1d6cd8e..03de4a09 100644
--- a/apps/www/.vitepress/theme/components/Steps.vue
+++ b/apps/www/.vitepress/theme/components/Steps.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+    class="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
   >
     <slot />
   </div>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index 9a795caa..ce277f6e 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -61,14 +61,12 @@ onContentUpdated(() => {
 
 <template>
   <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>
+    <div class="no-scrollbar h-full overflow-auto pb-10 space-y-2">
+      <p class="font-medium">
+        On This Page
+      </p>
+      <TableOfContentTree :tree="headers" :level="1" />
+      <CarbonAds v-if="showCarbonAds" />
     </div>
   </div>
 
diff --git a/apps/www/.vitepress/theme/components/TableOfContentTree.vue b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
index b0da4502..97e5b914 100644
--- a/apps/www/.vitepress/theme/components/TableOfContentTree.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
@@ -42,7 +42,9 @@ watch(() => route.path, () => {
                item.url === hash
                  ? 'font-medium text-foreground'
                  : 'text-muted-foreground')"
-        >{{ item.title }} </a>
+        >
+          {{ item.title }}
+        </a>
 
         <TableOfContentTree v-if="item.items?.length" :tree="item" :level="level + 1" />
       </li>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index b2b6f7b5..954af6d2 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -18,7 +18,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
   <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">
       <div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
-        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title">
           <div class="pb-4">
             <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
               {{ docsGroup.title }}
@@ -28,22 +28,24 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
               </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')"
+            <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+              <template
+                v-for="doc in docsGroup.items "
+                :key="doc.title"
               >
-                {{ 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>
+                  <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>
+              </template>
             </div>
           </div>
         </div>
@@ -60,14 +62,14 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
 
         <div class="space-y-2">
           <div class="flex items-center space-x-4">
-            <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+            <h1 class="scroll-m-20 text-3xl 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">
+          <p class="text-base text-muted-foreground">
             {{ frontmatter.description }}
           </p>
         </div>
@@ -94,7 +96,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
       </div>
 
       <div class="hidden text-sm xl:block">
-        <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+        <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
           <TableOfContent show-carbon-ads />
         </div>
       </div>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index e8da4d6c..770d7d6c 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -231,10 +231,18 @@ pre code .line {
 }
 
 .line-number {
-	@apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];
+	@apply !text-sm !inline-block text-muted-foreground leading-[--vp-code-line-height];
 }
 
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: 0.3s;
 }
+
+.steps:first-child > h3:first-child {
+  @apply mt-0;
+}
+
+.steps > h3 {
+  @apply mt-8 mb-4 text-base font-semibold !important;
+}
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 08601861..00813715 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -22,6 +22,10 @@
   outline: none;
 }
 
+.vp-doc h2:first-child {
+  @apply mt-0 pt-0;
+}
+
 .vp-doc h1:not(:where(.not-docs *)) {
   letter-spacing: -0.02em;
   line-height: 40px;
@@ -422,11 +426,12 @@
   left: 0;
   z-index: 3;
   border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 16px;
+  padding-top: 14px;
+  padding-left: 8px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
-  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-line-number-color);
   transition:
diff --git a/apps/www/src/content/docs/cli.md b/apps/www/src/content/docs/cli.md
index 51c3d81b..015cb5d8 100644
--- a/apps/www/src/content/docs/cli.md
+++ b/apps/www/src/content/docs/cli.md
@@ -7,7 +7,7 @@ description: Use the CLI to add components to your project.
 
 Use the `init` command to initialize configuration and dependencies for a new project.
 
-The `init` command installs dependencies, adds the `cn`, `useEmitsAsProps` utils, configures `tailwind.config.cjs`, and creates CSS variables for the project.
+The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
 
 ```bash
 npx shadcn-vue@latest init
@@ -15,28 +15,27 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
-Would you like to use TypeScript (recommended)? no / yes
-Which framework are you using? Vite / Nuxt / Laravel
-Which style would you like to use? › Default
-Which color would you like to use as base color? › Slate
-Where is your global CSS file? › › src/index.css
+```:line-numbers
+Which style would you like to use? › New York
+Which color would you like to use as base color? › Zinc
 Do you want to use CSS variables for colors? › no / yes
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for utils: › @/lib/utils
 ```
 
 ### Options
 
-```ansi
-Usage: shadcn-vue init [options]
+```txt
+Usage: shadcn-vue init [options] [components...]
 
 initialize your project and install dependencies
 
+Arguments:
+  components         the components to add or a url to the component.
+
 Options:
-  -y, --yes        skip confirmation prompt. (default: false)
-  -c, --cwd <cwd>  the working directory. (default: the current directory)
+  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
+  -f, --force       force overwrite of existing components.json. (default: false)
+  -y, --yes         skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>   the working directory. defaults to the current directory.
   -h, --help       display help for command
 ```
 
@@ -50,8 +49,9 @@ npx shadcn-vue@latest add [component]
 
 You will be presented with a list of components to choose from:
 
-```ansi
-Which components would you like to add? › Space to select. Return to submit.
+```txt
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
 
 ◯  accordion
 ◯  alert
@@ -60,45 +60,40 @@ Which components would you like to add? › Space to select. Return to submit.
 ◯  avatar
 ◯  badge
 ◯  button
+◯  calendar
 ◯  card
 ◯  checkbox
-◯  collapsible
 ```
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue add [options] [components...]
 
-add components to your project
+add a component to your project
 
 Arguments:
-  components         name of components
+  components         the components to add or a url to the component.
 
 Options:
-  --nodep            disable adding & installing dependencies (advanced) (default: false)
-  -y, --yes          Skip confirmation prompt. (default: false)
+  -y, --yes          skip confirmation prompt. (default: false)
   -o, --overwrite    overwrite existing files. (default: false)
-  -c, --cwd <cwd>    the working directory. (default: the current directory)
+  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -a, --all          add all available components. (default: false)
   -p, --path <path>  the path to add the component to.
   -h, --help         display help for command
 ```
 
-## update
+## Monorepo
 
-Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.
+In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
 
-We plan on improving this command in the future to improve the update experience.
-
-```ansi
-Usage: shadcn-vue update [options] [components...]
-
-update components in your project
-
-Arguments:
-  components       name of components
-
-Options:
-  -c, --cwd <cwd>  the working directory. (default: the current directory)
-  -h, --help       display help for command
+```bash
+npx shadcn-vue@latest init -c ./apps/www
+```
+
+or
+
+```bash
+npx shadcn-vue@latest add alert-dialog -c ./apps/www
 ```
diff --git a/apps/www/src/content/docs/components-json.md b/apps/www/src/content/docs/components-json.md
index 84473bda..b7d9f809 100644
--- a/apps/www/src/content/docs/components-json.md
+++ b/apps/www/src/content/docs/components-json.md
@@ -108,6 +108,18 @@ For more information, see the [theming docs](/docs/theming).
 
 **This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
 
+### tailwind.prefix
+
+The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "prefix": "tw-"
+  }
+}
+```
+
 ## aliases
 
 The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
@@ -160,3 +172,27 @@ The CLI will use the `aliases.ui` value to determine where to place your `ui` co
   }
 }
 ```
+
+### aliases.lib
+
+Import alias for `lib` functions such as `format-date` or `generate-id`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "lib": "@/lib"
+  }
+}
+```
+
+### aliases.hooks
+
+Import alias for `hooks` such as `use-media-query` or `use-toast`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "hooks": "@/hooks"
+  }
+}
+```
diff --git a/apps/www/src/content/docs/dark-mode.md b/apps/www/src/content/docs/dark-mode.md
index 41d2d34d..7d589cb6 100644
--- a/apps/www/src/content/docs/dark-mode.md
+++ b/apps/www/src/content/docs/dark-mode.md
@@ -11,7 +11,7 @@ description: Adding dark mode to your site.
   import AstroIcon from '~icons/simple-icons/astro'
 </script>
 
-<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
+<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 not-docs">
   <LinkedCard href="/docs/dark-mode/vite">
     <ViteIcon class="w-10 h-10" />
     <p class="mt-2 font-medium">Vite</p>