docs: update content, styling
This commit is contained in:
zernonia
parent
f3f84b8e4e
commit
6927943477
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user