docs: update content, styling

2024-11-20 12:54:16 +08:00 · 2024-11-20 12:54:16 +08:00 · 6927943477
commit 6927943477
parent f3f84b8e4e
10 changed files with 117 additions and 81 deletions
--- 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
--- 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>
--- 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>

--- 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>
--- 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>
--- 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;
+}
--- 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:
--- 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
 ```
--- 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"
+  }
+}
+```
--- 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>