diff --git a/.starters/default/app.config.ts b/.starters/default/app.config.ts index 642fe1277..885c3da9d 100644 --- a/.starters/default/app.config.ts +++ b/.starters/default/app.config.ts @@ -15,19 +15,20 @@ export default defineAppConfig({ edit: true }, aside: { - level: 0, + level: 1, collapsed: false, - exclude: [] + exclude: [], + navigation: true }, main: { padded: true, - fluid: true }, header: { + title: '', logo: true, showLinkIcon: true, exclude: [], - fluid: true + navigation: false }, footer: { iconLinks: [ diff --git a/.starters/default/content/0.index.md b/.starters/default/content/0.index.md index d909fd85e..b288577d4 100644 --- a/.starters/default/content/0.index.md +++ b/.starters/default/content/0.index.md @@ -1,99 +1,190 @@ --- title: Home navigation: false -layout: page -main: - fluid: false +layout: basic --- -:ellipsis{right=0px width=75% blur=150px} + -::block-hero +::glow --- -cta: - - Get started - - /introduction/getting-started -secondary: - - Open on GitHub → - - https://github.com/nuxt-themes/docus +top: calc(0px - var(--docus-app-header-height)) +height: calc(var(--hero-height) + var(--docus-app-header-height) + 20rem) +maskGradient: + light: + initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%) + xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%) + dark: + initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%) + xl: radial-gradient(at 70% 45%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 85%) +gradient: + light: + initial: radial-gradient(circle at 10% 50%, {color.secondary.500} 4%, {color.primary.200} 25%, {color.primary.500} 65%) + xl: radial-gradient(circle at 10% 50%, {color.secondary.200} 15%, {color.primary.500} 60%, {color.primary.400} 55%, {color.primary.400} 75%, {color.secondary.500} 90%) + dark: + initial: radial-gradient(circle at 10% 50%, {color.secondary.500}, {color.primary.500} 45%, {color.primary.200} 82%) + xl: radial-gradient(circle at 10% 50%, {color.secondary.700} 15%, {color.primary.500} 60%, {color.primary.600} 55%, {color.primary.600} 75%, {color.secondary.500} 90%) +noise: true +backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor}) --- +:: -#title -The best place to start your documentation. - -#description -Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com). - -#extra - ::list - - **+50 Components** ready to build rich pages - - **Docs** and **Page** layouts - - Start from a `README`, scale to a framework documentation - - Navigation and Table of Contents generation - - Fully configurable design system - - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) - - Used on [Content Documentation](https://content.nuxtjs.org) - :: +::container-section + ::hero -#support - ::terminal - --- - content: - - npx nuxi@latest init -t themes/docus - - cd docs - - npm install - - npm run dev - --- + #announce + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + + #title + The best place to start your documentation. + + #description + Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [Nuxt](https://nuxt.com). + + #extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + + #actions + ::button-link{href=/introduction/getting-started size=medium} + Get started + :: + ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank} + Open on GitHub → + :: + + #support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: :: :: -::card-grid -#title -What's included +::container-section{margin="{space.24} 0" padding="{space.24} 0"} #root -:ellipsis{left=0px width=40rem top=10rem blur=140px} + ::glow + --- + height: 100% + maskGradient: + light: + initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 74%) + lg: radial-gradient(at 43% 53%, red, rgba(255, 0, 0, 0) 85%) + dark: + initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 84%) + lg: radial-gradient(at 43% 53%, rgba(0,0,0, 1), rgba(255, 0, 0, 0) 85%) + gradient: + light: + initial: radial-gradient(circle at 40% 50%, {color.primary.400}, {color.primary.400} 52%) + lg: conic-gradient({color.secondary.200} 0%, {color.secondary.200} 12%, {color.secondary.300} 22%, {color.secondary.500} 30%, {color.primary.300} 44%) + dark: + initial: radial-gradient(circle at 40% 50%, {color.primary.600}, {color.primary.700} 52%) + lg: radial-gradient(circle at 44% 72%, {color.primary.600} 0%, {color.primary.700} 12%, {color.primary.800} 22%) + noise: true + backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor}) + afterBlendMode: + light: color + dark: multiply + --- + :: #default - ::card{icon=logos:nuxt-icon} - #title - Nuxt Architecture - #description - Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. - :: + :section-header{title="What's included" subtitle="Features"} + + ::card-grid{cols=6} - ::card{icon=IconNuxtStudio} - #title - Nuxt Studio ready - #description - Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). - :: + #default + ::card{icon=logos:nuxt-icon lights noise} + --- + col: + initial: 6 + sm: 2 + row: 1 + --- + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: - ::card{icon=logos:vue} - #title - Vue Components - #description - Use built-in components (or your own!) inside your content. - :: + ::card{icon=IconNuxtStudio lights noise} + --- + col: + initial: 6 + sm: 2 + row: + initial: 1 + sm: 2 + --- + #title + Nuxt Studio ready + #description + Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). + :: - ::card{icon=simple-icons:markdown} - #title - Write Markdown - #description - Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). - :: + ::card{icon=logos:vue lights noise} + --- + col: + initial: 6 + sm: 2 + row: 1 + --- + #title + Vue Components + #description + Use built-in components (or your own!) inside your content. + :: - ::card{icon=noto:rocket} - #title - Deploy anywhere - #description - Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com). - :: + ::card{icon=simple-icons:markdown lights noise} + --- + col: + initial: 6 + sm: 2 + --- + #title + Write Markdown + #description + Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). + :: - ::card{icon=noto:puzzle-piece} - #title - Extensible. - #description - Customize the whole design, or add components using slots - you can make Docus your own. + ::card{icon=noto:rocket lights noise} + --- + col: + initial: 6 + sm: 3 + --- + #title + Deploy anywhere + #description + Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com). + :: + + ::card{icon=material-symbols:token-outline lights noise} + --- + col: + initial: 6 + sm: 2 + --- + + #title + Design Tokens + #description + Make Docus your own! Use [Design Tokens](https://pinceau.dev/configuration/design-tokens) to build your own Design System. + :: :: -:: +:: \ No newline at end of file diff --git a/.starters/default/content/1.introduction/3.writing-pages.md b/.starters/default/content/1.introduction/3.writing-content.md similarity index 99% rename from .starters/default/content/1.introduction/3.writing-pages.md rename to .starters/default/content/1.introduction/3.writing-content.md index a32132406..4351fca8c 100644 --- a/.starters/default/content/1.introduction/3.writing-pages.md +++ b/.starters/default/content/1.introduction/3.writing-content.md @@ -1,4 +1,4 @@ -# Writing Pages +# Writing Content Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. diff --git a/.starters/default/content/1.introduction/_dir.yml b/.starters/default/content/1.introduction/_dir.yml index ff0894dab..dce34b2e2 100644 --- a/.starters/default/content/1.introduction/_dir.yml +++ b/.starters/default/content/1.introduction/_dir.yml @@ -1,2 +1,2 @@ -icon: ph:star-duotone +icon: 🚀 navigation.redirect: /introduction/getting-started diff --git a/.starters/default/content/1.introduction/design-system.md b/.starters/default/content/1.introduction/design-system.md new file mode 100644 index 000000000..6a359a79c --- /dev/null +++ b/.starters/default/content/1.introduction/design-system.md @@ -0,0 +1 @@ +# Design System \ No newline at end of file diff --git a/.starters/default/content/1.introduction/typography.md b/.starters/default/content/1.introduction/typography.md new file mode 100644 index 000000000..de5ef2965 --- /dev/null +++ b/.starters/default/content/1.introduction/typography.md @@ -0,0 +1,31 @@ +# Typography + +For typography, Docus uses [Nuxt Typography](https://github.com/nuxt-themes/typography). + +[Nuxt Typography] is a theme to get a beautiful and customisable typography with a set of prose components for Nuxt Content + +It consist of two parts: `typography` tokens and `prose` components. + +Nuxt Typography expose a set of `prose` components that work seamlessly with [Nuxt Content](https://content.nuxtjs.org/). Those components include: + +- `ProseA` +- `ProseBlockquote` +- `ProseCode` +- `ProseCodeInline` +- `ProseH1` - `ProseH6` +- `ProseHr` +- `ProseImg` +- `ProseUl` +- `ProseOl` +- `ProseLi` +- `ProseP` +- `ProseStrong` +- `ProseEm` +- `ProseTable` +- `ProseTbody` +- `ProseTd` +- `ProseTh` +- `ProseThead` +- `ProseTr` + +Feel free to overwrite or customize the default typography tokens and prose components as you wish. \ No newline at end of file diff --git a/.starters/default/content/2.api/2.composables.md b/.starters/default/content/2.api/2.composables.md index 4c0bea24f..60269a097 100644 --- a/.starters/default/content/2.api/2.composables.md +++ b/.starters/default/content/2.api/2.composables.md @@ -33,7 +33,7 @@ const { tree } = useDocus() ``` diff --git a/.starters/default/content/1.introduction/4.configuration.md b/.starters/default/content/2.api/4.configuration.md similarity index 95% rename from .starters/default/content/1.introduction/4.configuration.md rename to .starters/default/content/2.api/4.configuration.md index cd99ce10c..de1119189 100644 --- a/.starters/default/content/1.introduction/4.configuration.md +++ b/.starters/default/content/2.api/4.configuration.md @@ -99,10 +99,8 @@ export default defineAppConfig({ | `header.title` | `string` | | If set to a string, will be used in the header | | `header.showLinkIcon` | `boolean` | | If set to `true` links icons will show in the header | | `header.exclude` | `string[]` | | An array of path to exclude out from the header navigation | -| `header.fluid` | `boolean` | `true` | Make header `Container` fluid | | **Main** | | | | | `main` | `object` | | Main configuration | -| `main.fluid` | `boolean` | `true` | Make main content `Container` fluid | | `main.padded` | `boolean` | `true` | Make main content `Container` padded | | **Aside** | | | | | `aside` | `object` | | Aside configuration | @@ -124,7 +122,6 @@ export default defineAppConfig({ | `footer.iconLinks[0].href` | `string` | | A link to use for the icon | | `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) | | `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | -| `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid | | **GitHub** | | | | | `github` | `object` | `false` | GitHub integration configuration | | `github.dir` | `string` | | Directory containing the files to be edited | diff --git a/.starters/default/content/2.api/1.components.md b/.starters/default/content/2.api/_1.components.md similarity index 88% rename from .starters/default/content/2.api/1.components.md rename to .starters/default/content/2.api/_1.components.md index 74b17d879..d536fb8cd 100644 --- a/.starters/default/content/2.api/1.components.md +++ b/.starters/default/content/2.api/_1.components.md @@ -7,7 +7,7 @@ Discover every component you can use in your content. ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::alert{type="info" style="margin-top: 0;"} Check out an **info** alert with `code` and a [link](/). :: @@ -25,7 +25,7 @@ Discover every component you can use in your content. :: :: - ```md [Code] + ```md [MDC] ::alert{type="info"} Check out an **info** alert with `code` and a [link](/). :: @@ -64,7 +64,7 @@ source: "components/content/Alert.vue" ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::div{style="display:flex; gap: 1rem;"} :badge[v1.2] @@ -76,7 +76,7 @@ source: "components/content/Alert.vue" :: :: - ```md [Code] + ```md [MDC] :badge[v1.2] :badge[Deprecated]{type="warning"} @@ -105,7 +105,7 @@ source: "components/content/Badge.vue" ::code-group - ::code-block{label="Preview"} + ::code-preview{label="Preview"} ::block-hero --- cta: @@ -124,7 +124,7 @@ source: "components/content/Badge.vue" :: :: - ```md [Code] + ```md [MDC] ::block-hero --- cta: @@ -161,11 +161,11 @@ source: "components/content/BlockHero.vue" ## `` ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} :: - ```md [Code] + ```md [MDC] :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} ``` @@ -190,7 +190,7 @@ source: "components/content/ButtonLink.vue" ::code-group - ::code-block{label="Preview"} + ::code-preview{label="Preview"} ::callout #summary This is a callout! Click me to open. @@ -208,7 +208,7 @@ source: "components/content/ButtonLink.vue" :: :: - ```md [Code] + ```md [MDC] ::callout #summary This is a callout! Click me to open. @@ -245,7 +245,7 @@ source: "components/content/Callout.vue" ::code-group - ::code-block{label="Preview"} + ::code-preview{label="Preview"} ::card --- icon: logos:nuxt-icon @@ -258,7 +258,7 @@ source: "components/content/Callout.vue" :: :: - ```md [Code] + ```md [MDC] ::card{icon="logos:nuxt-icon"} #title Nuxt Architecture. @@ -287,14 +287,11 @@ source: "components/content/Card.vue" ::code-group - ::code-block{label="Preview"} + ::code-preview{label="Preview"} ::card-grid #title What's included? - #root - :ellipsis - #default ::card #title @@ -317,14 +314,11 @@ source: "components/content/Card.vue" :: :: - ```md [Code] + ```md [MDC] ::card-grid #title What's included - #root - :ellipsis - #default ::card #title @@ -368,7 +362,7 @@ This component uses `slots` to create a tab panel of your code examples or previ ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::code-group ```bash [Yarn] yarn add docus @@ -380,7 +374,7 @@ This component uses `slots` to create a tab panel of your code examples or previ :: :: - ```md [Code] + ```md [MDC] ::code-group ```bash [Yarn] yarn add docus @@ -407,16 +401,16 @@ To be used inside a `` component to display a preview of some rende ::code-group -::code-block{label="Preview" preview} +::code-preview{label="Preview" preview} ::badge Hello World! :: :: -```md [Code] +```md [MDC] /* Added as a child of `` */ -::code-block{label="Preview" preview} +::code-preview{label="Preview" preview} ::badge Hello World! :: @@ -438,47 +432,19 @@ source: "components/content/CodeBlock.vue" --- -## `` - - -::code-group - -::code-block{label="Preview" preview} - :copy-button{content="hey!"} -:: - -```md [Code] -:copy-button{content="hey!"} -``` - -:: - - - -::source-link ---- -source: "components/content/CopyButton.vue" ---- -:: - ---- - ## `` Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org). ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} :icon{name="logos:nuxt-icon"} :icon{name="logos:vue"} :icon{name="logos:nuxt-icon"} :: - ```md [Code] + ```md [MDC] :icon{name="logos:nuxt-icon"} :icon{name="logos:vue"} :icon{name="logos:nuxt-icon"} @@ -503,7 +469,7 @@ source: "components/content/Icon.vue" ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::list{type="primary"} - **Important** - Always @@ -531,7 +497,7 @@ source: "components/content/Icon.vue" :: - ```md [Code] + ```md [MDC] ::list{type="primary"} - **Important** - Always @@ -582,12 +548,12 @@ It is powered by [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-componen ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::props{of="Icon"} :: :: - ```md [Code] + ```md [MDC] ::props{of="Icon"} :: ``` @@ -613,11 +579,11 @@ Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/AP ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} :: - ```md [Code] + ```md [MDC] :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} ``` @@ -640,11 +606,11 @@ source: "components/content/Sandbox.vue" ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} :terminal{content="nuxi build"} :: - ```md [Code] + ```md [MDC] :terminal{content="nuxi build"} ``` @@ -667,13 +633,13 @@ source: "components/content/Terminal.vue" ::code-group - ::code-block{label="Preview" preview} + ::code-preview{label="Preview" preview} ::div :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} :: :: - ```md [Code] + ```md [MDC] ::div :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} :: diff --git a/.starters/default/content/2.api/3.layouts.md b/.starters/default/content/2.api/_3.layouts.md similarity index 90% rename from .starters/default/content/2.api/3.layouts.md rename to .starters/default/content/2.api/_3.layouts.md index 25dc45833..0916096cf 100644 --- a/.starters/default/content/2.api/3.layouts.md +++ b/.starters/default/content/2.api/_3.layouts.md @@ -28,7 +28,6 @@ Current page is live sample of default layout. This layout accept some configuration from content front-matter. -- `fluid`: By setting `fluid: true` in content front-matter the content will be rendered in full width. - `constrainedClass`: Using this option you can modify layout container look. Like constraining layout width of changing the background. - `padded`: Setting `padded: true` in front-matter will add horizontal padding in the layout. @@ -36,7 +35,6 @@ This layout accept some configuration from content front-matter. --- title: Home layout: page -fluid: true --- ``` diff --git a/.starters/default/content/2.api/_dir.yml b/.starters/default/content/2.api/_dir.yml index b340141be..1b4256fdc 100644 --- a/.starters/default/content/2.api/_dir.yml +++ b/.starters/default/content/2.api/_dir.yml @@ -1,2 +1,2 @@ title: 'API' -icon: heroicons-outline:bookmark-alt +icon: solar:code-2-bold-duotone diff --git a/.starters/default/content/3.components/1.elements/0.alert.md b/.starters/default/content/3.components/1.elements/0.alert.md new file mode 100644 index 000000000..b5cc06466 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/0.alert.md @@ -0,0 +1,157 @@ +# Alert + +The `Alert` component is a customizable component that allows to grab user attention and communicate an important message (like network event, app state errors or notifications, user account messages etc). + +It does not require user input. If such interaction is needed, then `AlertDialog` (WIP) must be used instead. + +`Alert` could be closable. It emits `close` event when user clicks on the close button. It is up to the you to decide what to do with it. + +::callout{type="info" icon} +Note that this component is not suppose to be used inside markdown files. If you want just to display a warning or note regarding your docs to the user, consider to use [`Callout`](/globals/callout) instead. +:: + +## Types + +`Alert` has such contextual types: `success`, `info`, `warning`, and `danger`. It also has additional `neutral`, `primary` and `secondary` types. + +::code-group + ::code-preview{label="Preview" column} + ::alert{type="primary" closable icon} + This is closable **primary** alert with custom `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="secondary" closable icon} + This is closable **secondary** alert with custom `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="neutral" closable icon} + This is closable **neutral** alert with emoji as an `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="info" closable icon} + This is closable **info** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="success" closable icon} + This is closable **success** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="warning" closable icon} + This is closable **warning** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="danger" closable icon} + This is closable **danger** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + :: + + ```md [MDC] + ::alert{type="info" closable icon} + This is closable **info** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="success" closable icon} + This is closable **success** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="warning" closable icon} + This is closable **warning** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="danger" closable icon} + This is closable **danger** alert with `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="neutral" closable icon} + This is closable **neutral** alert with emoji as an `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="primary" closable icon} + This is closable **primary** alert with custom `icon`, `code`, a [link](/) and [`code` link](/). + :: + ``` +:: + +## Icon + +`Alert` could have an icon, which is displayed on the left side of the alert. By default, it is the pre-selected icon that corresponds to the `type` prop, but it could be overridden using `icon` prop. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. + +::code-group + ::code-preview{label="Preview" column} + ::alert{type="success" closable} + This is closable **neutral** alert without `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="neutral" closable icon="🚀"} + This is closable **neutral** alert with emoji as an `icon`, `code`, a [link](/) and [`code` link](/). + :: + ::alert{type="primary" closable icon="simple-icons:nuxtdotjs"} + This is closable **primary** alert with custom `icon`, `code`, a [link](/) and [`code` link](/). + :: + :: + ```md [MDC] + ::alert{type="success" closable} + This is closable **neutral** alert without `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="neutral" closable icon="🚀"} + This is closable **neutral** alert with emoji as an `icon`, `code`, a [link](/) and [`code` link](/). + :: + + ::alert{type="primary" closable icon="simple-icons:nuxtdotjs"} + This is closable **primary** alert with custom `icon`, `code`, a [link](/) and [`code` link](/). + :: + ``` +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `type` | `String` | `neutral` | Contextual type of `Alert`. Possible values are: `success`, `info`, `warning`, `danger`, `primary`, `secondary` and `neutral` | +| `closable` | `Boolean` | `false` | Whether `Alert` is closable or not | +| `icon` | `String`, `Boolean` | `false` | Icon to be displayed on the left side of the alert. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. | + +## Slots + +| **Slot** | **Description** | +|--|--| +| `default` | Default slot renders inside `Alert` | + +## Events + +| **Event** | **Description** | +|--|--| +| `close` | Emitted when user clicks on the close button | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + alert: { + width: '100%', + paddingX: '{space.4}', + paddingY: '{space.4}', + borderRadius: '{elements.radii.base}', + borderWidth: '1px', + borderStyle: 'solid', + boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)', + icon: { + width: '{space.6}', + height: '{space.6}', + marginInlineEnd: '{space.3}' + }, + closeButton: { + padding: '{space.1}', + marginInlineStart: '{space.2}', + border: { + radius: '{elements.radii.base}', + }, + icon: { + width: '{space.4}', + height: '{space.4}' + }, + boxShadow: { + focus: '0 0 0 1px' + } + } + }, + } +}) +``` diff --git a/.starters/default/content/3.components/1.elements/1.announce.md b/.starters/default/content/3.components/1.elements/1.announce.md new file mode 100644 index 000000000..43722a149 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/1.announce.md @@ -0,0 +1,67 @@ +# Announce + +`Announce` is a component that can be used to display a message to the user. It renders as a pill-shaped link element. It is useful for displaying marketing message to the user that is not critical, but that you want to make sure they see (e.g. a new feature announcement). + +::code-group + ::code-preview{label="Preview" preview} + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + :: + + ```md [MDC] + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + ``` +:: + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `href` | `string` | `''` | The URL to link to. | +| `blank` | `Boolean` | `false` | The target attribute of a link. | + +## Slots + +| Name | Description | +| --- | --- | +| `default` | The content of the `Announce`. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + announce: { + padding: '{space.1}', + backgroundColor: { + initial: '{color.gray.100}', + dark: '{color.gray.800}' + }, + borderRadius: '{radii.full}', + borderWidth: '1px', + borderStyle: 'solid', + borderColor: '{elements.border.primary.static}', + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + fontWeight: '{fontWeight.medium}', + boxShadow: 'inset 0.5px 0.75px 0px hsla(0,0%,100%,.1), inset -0.5px 0px 0px hsla(0,0%,100%,.1)', + content: { + paddingX: '{space.3}', + }, + icon: { + padding: '{space.1} {space.2}', + borderRadius: '{radii.full}', + backgroundColor: { + initial: '{color.gray.200}', + dark: '{color.gray.700}' + } + } + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/1.badge.md b/.starters/default/content/3.components/1.elements/1.badge.md new file mode 100644 index 000000000..4d6117944 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/1.badge.md @@ -0,0 +1,72 @@ +# Badge + +Badge is a label that indicates version number, status or importance. It can be used to highlight a piece of information or draw attention to a particular item in a color-assisted manner. + +::code-group + ::code-preview{label="Preview"} + :badge[v1.2] + + :badge[Released]{type="secondary"} + + :badge[Deprecated]{type="warning"} + + :badge[Updates]{type="info"} + + ::badge{type="danger"} + Not found! + :: + + ::badge{type="success"} + Done + :: + :: + + ```md [MDC] + :badge[v1.2] + + :badge[Deprecated]{type="warning"} + + ::badge{type="danger"} + Not found! + :: + + ::badge{type="success"} + Done + :: + ``` +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `type` | `String` | `primary` | Type of the badge. Possible values: `success`, `warning`, `danger`, `info`, `primary`, `secondary`, `neutral` | + +## Slots + +| **Slot** | **Description** | +|--|--| +| `default` | Content of the badge | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + badge: { + paddingX: '{space.2}', + paddingY: '{space.1}', + fontSize: '{text.base.fontSize}', + fontWeight: '{fontWeight.normal}', + lineHeight: '{typography.lead.none}', + letterSpacing: '{letterSpacing.tight}', + borderRadius: '{elements.radii.base}', + borderWidth: '1px', + borderStyle: 'solid', + boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)', + }, + } +}) +``` diff --git a/.starters/default/content/3.components/1.elements/10.sandbox.md b/.starters/default/content/3.components/1.elements/10.sandbox.md new file mode 100644 index 000000000..8d44ea55a --- /dev/null +++ b/.starters/default/content/3.components/1.elements/10.sandbox.md @@ -0,0 +1,50 @@ +# Sandbox + +Component for easy embeding CodeSandbox/StackBlitz in your documentation with great performances. + +It's using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. + +You can either provide a `src` prop with the URL of the sandbox or a `repo` prop with the repository name (it will render both CodeSandbox and StackBlitz). + +::code-group + + ::code-preview{label="Preview" preview} + :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} + :: + + ```md [MDC] + :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} + ``` + +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `src` | `String` | `''` | The URL of the sandbox. | +| `repo` | `String` | `''` | The repository of the sandbox. | +| `branch` | `String` | `''` | The branch of the sandbox. | +| `dir` | `String` | `''` | The directory of the sandbox. | +| `file` | `String` | `app.vue` | The directory of the sandbox. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + sandbox: { + backgroundColor: '{elements.surface.primary.backgroundColor}', + height: '700px', + fontSize: '{text.3xl.fontSize}', + lineHeight: '{text.3xl.lineHeight}', + borderWidth: '1px', + borderStyle: 'solid', + borderColor: '{elements.border.secondary.static}', + borderRadius: '{radii.md}', + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/14.video-player.md b/.starters/default/content/3.components/1.elements/14.video-player.md new file mode 100644 index 000000000..9afc54357 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/14.video-player.md @@ -0,0 +1,44 @@ +# Video Player + +A component to playback the video content. It lazy loads native `video` or `iframe` depending on video source, and shows image preview when it's not loaded. + +::code-group + + ::code-preview{label="Preview"} + ::div + :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} + :: + :: + + ```md [MDC] + ::div + :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} + :: + ``` + +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `poster` | `String` | `''` | Preview image, that showed instead of lazy loaded `video` or `iframe` | +| `src` | `String` | `''` | A source of the video | +| `sources` | `Array` | `[]` | Multiple `src` used for `video` `source` tags | +| `autoplay` | `Boolean` | `false` | WIP: Automatic playback for video. Adds attribute in case of `video` tag or query parameter into YouTube URL. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + videoPlayer: { + marginY: '{space.8}', + backgroundColor: '{color.gray.900}', + borderRadius: '{radii.sm}', + }, + } +}) +``` diff --git a/.starters/default/content/3.components/1.elements/2.button-link.md b/.starters/default/content/3.components/1.elements/2.button-link.md new file mode 100644 index 000000000..0c0ed0b93 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/2.button-link.md @@ -0,0 +1,152 @@ +# Button Link + +A component to render a link as a button. This component is a wrapper around the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link) component. + +## Color + +You can use any color from your Pinceau design system tokens configuration file as a value of `color` prop. The convention used is a color palette named from `50` to `900`. + +::code-group + ::code-preview{label="Preview" column} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="secondary"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="gray"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="red"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="blue"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="green"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="yellow"} + :: + + ```md [MDC] + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="gray"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="red"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="blue"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="green"} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="yellow"} + ``` +:: + +## Ghost button + +It is possible to make a button transparent by using the `ghost` prop. Useful for secondary links. + +::code-group + ::code-preview{label="Preview" column} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="gray" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="red" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="blue" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="green" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="yellow" ghost} + :: + + ```md [MDC] + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="gray" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="red" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="blue" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="green" ghost} + + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank color="yellow" ghost} + ``` +:: + +## Sizes + +The button comes in 4 sizes: `small`, `medium`, `large` and `giant`. + +::code-group + ::code-preview{label="Preview" column} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="small"} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="large"} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="giant"} + :: + + ```md [MDC] + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="small"} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="large"} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank size="giant"} + ``` +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `href` | `String` | `''` | The URL to link to. The prop is `required` | +| `blank` | `Boolean` | `false` | Whether to open the link in a new tab | +| `icon` | `String` | `''` | The icon to display (only on left side currently). Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. | +| `color` | `String` | `primary` | The color of the button. The color should be a valid key from the Pinceau color tokens configuration. | +| `ghost` | `Boolean` | `false` | Whether to make the button transparent. | + +## Slots + +| **Slot** | **Description** | +|--|--| +| `default` | The content of the button. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + buttonLink: { + fontWeight: '{fontWeight.semibold}', + borderWidth: '0px', + borderStyle: 'solid', + borderColor: 'transparent', + borderRadius: '{radii.2xs}', + boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)', + width: 'fit-content', + icon: { + marginInlineEnd: '{space.2}', + }, + small: { + padding: `{space.1} {space.3}`, + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + }, + medium: { + padding: `{space.2} {space.4}`, + fontSize: '{text.base.fontSize}', + lineHeight: '{text.base.lineHeight}', + }, + large: { + padding: `{space.2} {space.4}`, + fontSize: '{text.lg.fontSize}', + lineHeight: '{text.lg.lineHeight}', + }, + giant: { + padding: `{space.3} {space.5}`, + fontSize: '{text.xl.fontSize}', + lineHeight: '{text.xl.lineHeight}', + }, + }, + } +}) +``` diff --git a/.starters/default/content/3.components/1.elements/3.callout.md b/.starters/default/content/3.components/1.elements/3.callout.md new file mode 100644 index 000000000..ff8a6e5a9 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/3.callout.md @@ -0,0 +1,246 @@ +# Callout + +Component used to grab user attention and communicate an important message, that does not require interaction from user. + +::code-group + ::code-preview{label="Preview" column} + ::callout{icon} + #title + Callout title + + #content + This is the content of the callout. + :: + + ::callout{icon} + This is the content of the callout. No title. + :: + :: + + ```md [MDC] + ::callout{icon} + #title + Callout title + + #content + This is the content of the callout. + :: + + ::callout{icon} + This is the content of the callout. No title. + :: + ``` +:: + +## Types + +`Callout` has such contextual types: `success`, `info`, `warning`, and `danger`. It also has additional `neutral`, `primary`, `secondary` types. + +::code-group + ::code-preview{label="Preview" column} + ::callout{type="primary" icon} + #title + Primary callout title + + #content + This is the content of the callout. + :: + + ::callout{type="secondary" icon} + #content + This is the content of the callout. + :: + + ::callout{type="neutral" icon} + #title + Neutral callout title + + #content + This is the content of the callout. + :: + + ::callout{type="info" icon} + #content + This is the content of the callout. + :: + + ::callout{type="success" icon} + #content + This is the content of the callout. + :: + + ::callout{type="warning" icon} + #content + This is the content of the callout. + :: + + ::callout{type="danger" icon} + #content + This is the content of the callout. + :: + :: + + ```md [MDC] + ::callout{type="primary" icon} + #title + Primary callout title + + #content + This is the content of the callout. + :: + + ::callout{type="secondary" icon} + #title + Secondary callout title + + #content + This is the content of the callout. + :: + + ::callout{type="neutral" icon} + #title + Neutral callout title + + #content + This is the content of the callout. + :: + + ::callout{type="info" icon} + #title + Callout title + + #content + This is the content of the callout. + :: + + ::callout{type="success" icon} + #title + Success callout title + + #content + This is the content of the callout. + :: + + ::callout{type="warning" icon} + #title + Warning callout title + + #content + This is the content of the callout. + :: + + ::callout{type="danger" icon} + #title + Danger callout title + + #content + This is the content of the callout. + :: + ``` +:: + +## Icon + +`Callout` could have an icon, which is displayed on the left side. By default, it is the pre-selected icon that corresponds to the `type` prop, but it could be overridden using `icon` prop. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. + +::code-group + ::code-preview{label="Preview" column} + ::callout{type="success"} + #title + Callout title + + #content + This is the content of the callout. No icon. + :: + + ::callout{type="info" icon="🤓"} + #title + Fun fact + + #content + This is the content of the callout. With emoji. + :: + + ::callout{type="danger" icon="ion:skull"} + #title + Danger callout title + + #content + This is the content of the callout with custom icon. + :: + :: + + ```md [MDC] + ::callout{type="success"} + #title + Callout title + + #content + This is the content of the callout. No icon. + :: + + ::callout{type="info" icon="🤓"} + #title + Fun fact + + #content + This is the content of the callout. With emoji. + :: + + ::callout{type="danger" icon="ion:skull"} + #title + Danger callout title + + #content + This is the content of the callout with custom icon. + :: + ``` +:: + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `type` | `String` | `neutral` | Contextual state of `Alert`. Affects colors. Possible values are: `success`, `info`, `warning`, `danger`, `primary`, `secondary`, and `neutral` | +| `icon` | `String`, `Boolean` | `false` | Icon to be displayed on the left side of the `Callout`. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. | + +## Slots + +| Name | Description | +| --- | --- | +| `default` | The content of the callout. Used as a fallback for `content` slot, when user don't need a `title` | +| `title` | The title of the callout. | +| `content` | The content of the callout. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + callout: { + width: '100%', + paddingX: '{space.4}', + paddingY: '{space.4}', + borderWidth: '1px', + borderStyle: 'solid', + borderRadius: '{elements.radii.base}', + boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)', + icon: { + width: '{space.6}', + height: '{space.7}', + marginInlineEnd: '{space.3}', + fontSize: '{text.xl.fontSize}', + lineHeight: '{text.xl.lineHeight}', + }, + title: { + fontSize: '{text.xl.fontSize}', + lineHeight: '{text.xl.lineHeight}', + fontWeight: '{fontWeight.medium}', + marginBottom: '{space.1}', + }, + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/4.code-collapse.md b/.starters/default/content/3.components/1.elements/4.code-collapse.md new file mode 100644 index 000000000..cb472b463 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/4.code-collapse.md @@ -0,0 +1,88 @@ +# Code Collapse + +CodeCollapse is a component that allows you to collapse code blocks in your documentation. It is useful when you want to show a code snippet but don't want to overwhelm the reader with too much code. + +To use it, you need to wrap your fenced code block with `CodeCollapse` component. + +::code-group + ::code-preview{label="Preview"} + ::code-collapse{height="100px"} + ```js + export default { + data() { + return { + message: 'Hello World!' + } + } + } + ``` + :: + :: + + ```md [MDC] + ::code-collapse{height="100px"} + ```js + export default { + data() { + return { + message: 'Hello World!' + } + } + } + ``` + :: + ``` +:: + +## Props + +| Props | Type | Default | Description | +| --------- | -------- | ----------- | --------------- | +| `height` | `String` | `220px` | Height of the collapsed code block. | +| `open` | `Boolean` | `false` | Whether the `CodeCollapse` is open or not. | + +## Slots + +| Slot | Description | +| -------- | --------------- | +| `default` | A slot where fenced code block will be rendered. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + codeCollapse: { + margin: '{prose.code.block.margin}', + borderRadius: '{elements.radii.base}', + borderWidth: '{prose.code.block.borderWidth}', + borderStyle: '{prose.code.block.borderStyle}', + borderColor: '{prose.code.block.borderColor}', + button: { + bottom: '{space.2}', + left: '50%', + transform: 'translateX(-50%)', + paddingY: '{space.1}', + paddingX: '{space.3}', + borderRadius: '{elements.radii.base}', + borderWidth: '1px', + borderStyle: 'solid', + borderColor: '{elements.border.secondary.static}', + backgroundColor: { + initial: '{color.gray.50}', + dark: '{color.black}' + }, + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + color: '{elements.text.secondary.color.static}', + }, + gradientBackdrop: { + height: '50px', + background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, {prose.code.block.backgroundColor} 100%)', + } + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/4.code-group.md b/.starters/default/content/3.components/1.elements/4.code-group.md new file mode 100644 index 000000000..e89f8f4de --- /dev/null +++ b/.starters/default/content/3.components/1.elements/4.code-group.md @@ -0,0 +1,106 @@ +# Code Group + +This component uses `slots` to create a tab panel of your code examples (in `CodePreview`) or preview (using markdown code snippet synthax). + +::code-group + ::code-preview{label="Preview" preview} + ::code-group + ```bash [Yarn] + yarn add docus + ``` + + ```bash [NPM] + npm install docus + ``` + :: + :: + + ```md [MDC] + ::code-group + ```bash [Yarn] + yarn add docus + ``` + ```bash [NPM] + npm install docus + ``` + :: + ``` +:: + +## Slots + +| **Slot** | **Description** | +| -------- | --------------- | +| `default` | Code blocks or markdown code snippets | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + codeGroup: { + margin: '0px', + borderWidth: '1px', + borderStyle: 'solid', + borderColor: '{elements.border.primary.static}', + borderRadius: '{elements.radii.base}', + tabs: { + flex: '1', + paddingY: '{space.2}', + paddingX: '{space.4}', + fontFamily: '{font.mono}', + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + letterSpacing: '{letterSpacing.tight}', + borderInlineStart: '1px solid {elements.border.primary.static}', + borderInlineEnd: '1px solid {elements.border.primary.static}', + textAlign: 'start', + firstOfType: { + border: 'none' + }, + lastOfType: { + border: 'none' + }, + icon: { + marginInlineEnd: '{space.2}', + size: '{space.4}', + }, + inactive: { + color: { + static: { + initial: '{color.gray.500}', + dark: '{color.gray.500}' + }, + hover: { + initial: '{color.gray.900}', + dark: '{color.gray.300}' + } + }, + backgroundColor: { + initial: '{color.gray.100}', + dark: '{color.black}' + }, + filter: { + static: 'grayscale(100%)', + hover: 'grayscale(0%)' + }, + borderBlockEnd: '1px solid {elements.border.primary.static}', + }, + active: { + color: { + initial: '{color.gray.900}', + dark: '{color.gray.300}' + }, + backgroundColor: { + initial: '{color.gray.50}', + dark: '{prose.code.block.backgroundColor}' + }, + borderBlockEnd: '1px solid transparent', + } + } + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/4.code-preview.md b/.starters/default/content/3.components/1.elements/4.code-preview.md new file mode 100644 index 000000000..1e13751ff --- /dev/null +++ b/.starters/default/content/3.components/1.elements/4.code-preview.md @@ -0,0 +1,50 @@ +# Code Preview + +To be used inside a `` component to display a preview of some rendered code. + +::code-group + ::code-preview{label="Preview"} + ::badge + Hello World! + :: + :: + + ```md [MDC] + /* Added as a child of `` */ + + ::code-preview{label="Preview"} + ::badge + Hello World! + :: + :: + ``` +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +| --------- | -------- | ----------- | --------------- | +| `label` | `String` | `undefined` | Label of the code preview tab. This prop is `required` | +| `active` | `Boolean` | `false` | TODO | +| `column` | `Boolean` | `false` | Flex layout direction | + +## Slots + +| **Slot** | **Description** | +| -------- | --------------- | +| `default` | A slot where you can add your code block. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + codePreview: { + gap: '{space.4}', + padding: '{space.4}', + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/4.disclosure.md b/.starters/default/content/3.components/1.elements/4.disclosure.md new file mode 100644 index 000000000..b3c8e6743 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/4.disclosure.md @@ -0,0 +1,320 @@ +# Disclosure + +Disclosure is a component that can be used to hide or show content. The disclosure will be hidden by default, but the user can click on the disclosure title to show the content. + +The disclosure title can be customized using the `summary` slot. The disclosure content can be customized using the `content` slot. The disclosure can be opened by default by adding the `open` attribute. + +Additionally you can control the `Disclosure` state, by passing `open` and listening `update:open` props (or use `v-model:open`). + +::code-group + ::code-preview{label="Preview" column} + ::disclosure{open icon} + #summary + Why Nuxt.js is awesome? + + #content + Nuxt.js is a fantastic framework for building web applications. Here are just a few reasons why: + + - **Fast Development:** Nuxt.js provides a lot of out-of-the-box functionality, so you can start building your app right away without worrying about setup and configuration. + - **Server-Side Rendering:** With Nuxt.js, you can easily create server-rendered apps that load faster and are more SEO-friendly. + - **Easy Routing:** Nuxt.js provides a simple and intuitive way to handle routing in your app, so you can create clean URLs and easily navigate between pages. + - **Vue.js Integration:** Nuxt.js is built on top of Vue.js, which is one of the most popular and powerful JavaScript frameworks out there. This means that you can take advantage of all the great features of Vue.js while also using Nuxt.js to simplify your workflow. + - **Community:** Nuxt.js has a large and supportive community, which means that you can find help and resources easily if you ever get stuck or need guidance. + + Overall, Nuxt.js is a great choice for anyone who wants to build web applications quickly and efficiently, without sacrificing performance or functionality. + + *Placeholder text generated by ChatGPT* + :: + + ::disclosure{icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + :: + + ```md [MDC] + ::disclosure{open icon} + #summary + Why Nuxt.js is awesome? + + #content + Nuxt.js is a fantastic framework for building web applications. Here are just a few reasons why: + + - **Fast Development:** Nuxt.js provides a lot of out-of-the-box functionality, so you can start building your app right away without worrying about setup and configuration. + - **Server-Side Rendering:** With Nuxt.js, you can easily create server-rendered apps that load faster and are more SEO-friendly. + - **Easy Routing:** Nuxt.js provides a simple and intuitive way to handle routing in your app, so you can create clean URLs and easily navigate between pages. + - **Vue.js Integration:** Nuxt.js is built on top of Vue.js, which is one of the most popular and powerful JavaScript frameworks out there. This means that you can take advantage of all the great features of Vue.js while also using Nuxt.js to simplify your workflow. + - **Community:** Nuxt.js has a large and supportive community, which means that you can find help and resources easily if you ever get stuck or need guidance. + + Overall, Nuxt.js is a great choice for anyone who wants to build web applications quickly and efficiently, without sacrificing performance or functionality. + + *Placeholder text generated by ChatGPT* + :: + + ::disclosure{icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + ``` +:: + +## Types + +`Disclosure` has such contextual types: `success`, `info`, `warning`, and `danger`. It also has additional `neutral`, `primary`, `secondary` types. + +::code-group + ::code-preview{label="Preview" column} + ::disclosure{icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="secondary" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="info" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="success" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="warning" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="danger" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="neutral" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + :: + + ```md [MDC] + ::disclosure{type="info" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="success" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="warning" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="danger" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="neutral" icon} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + ``` +:: + +## Icons + +`Disclosure` can have an icon on the left side of the title. You can use any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji. + +::code-group + ::code-preview{label="Preview" column} + ::disclosure{type="info"} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="success" icon="simple-icons:nuxtdotjs"} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="warning" icon="🔥"} + #summary + Should you realy use Nuxt.js? Should you realy use Nuxt.js? Should you realy use Nuxt.js? + + #content + Of course you should. Just a test to see how it looks with a long summary. + :: + :: + + ```md [MDC] + ::disclosure{type="info"} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="success" icon="simple-icons:nuxtdotjs"} + #summary + Should you use Nuxt.js? + + #content + Yes. + :: + + ::disclosure{type="warning" icon="🔥"} + #summary + Should you realy use Nuxt.js? Should you realy use Nuxt.js? Should you realy use Nuxt.js? + + #content + Of course you should. Just a test to see how it looks with a long summary. + :: + ``` +:: + + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `open` | `Boolean` | `false` | Whether the disclosure is open or not. | +| `type` | `String` | `primary` | Type of the disclosure. Possible values: `success`, `warning`, `danger`, `info`, `primary`, `secondary`, `neutral` | +| `icon` | `String`, `Boolean` | `false` | Icon to be displayed on the left side of the `Disclosure`. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. | + +## Slots + +| Name | Description | +| --- | --- | +| `summary` | The title of the disclosure. | +| `content` | The content of the disclosure. | + +## Events + +| Name | Description | +| --- | --- | +| `update:open` | Emitted when the disclosure is opened or closed. The payload is `Disclosure` state. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + disclosure: { + width: '100%', + borderWidth: '0px', + borderStyle: 'solid', + borderRadius: '{radii.none}', + summary: { + padding: '1rem', + borderRadius: '{elements.radii.base}', + outline: { + focus: '2px solid', + }, + icon: { + width: '{space.6}', + height: '{space.6}', + marginInlineEnd: '{space.3}', + }, + chevron: { + borderRadius: '{elements.radii.base}', + padding: '2px', + width: '{space.5}', + height: '{space.5}', + transition: 'transform 200ms ease-in-out', + transform: 'rotate(-90deg)', + } + }, + content: { + padding: '1rem', + firstChild: { + marginTop: '0px' + }, + lastChild: { + marginBottom: '0px' + }, + borderWidth: '1px', + borderStyle: 'solid', + borderColor: 'transparent', + verticalMargin: '{typography.verticalMargin.sm}', + borderBottomLeftRadius: '{elements.radii.base}', + borderBottomRightRadius: '{elements.radii.base}', + }, + opened: { + summary: { + borderBottomLeftRadius: '0px', + borderBottomRightRadius: '0px', + borderTopLeftRadius: '{elements.radii.base}', + borderTopRightRadius: '{elements.radii.base}', + transform: 'rotate(0deg)', + } + }, + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/4.drawer.md b/.starters/default/content/3.components/1.elements/4.drawer.md new file mode 100644 index 000000000..9335875c9 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/4.drawer.md @@ -0,0 +1,33 @@ +# Drawer + +The `Drawer` component is a panel that slides out from the edge of the screen. It can be useful to provide access to destinations in your app without leaving the current page. + +## Focus + +The `Drawer` component is a modal component. It traps focus within the `Drawer` while it is open. When the drawer is closed, focus is returned to the element that had focus before the `Drawer` was opened. + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `modelValue` | `boolean` | `false` | Whether the `Drawer` is opened or not. | + +## Slots + +| Name | Description | +| --- | --- | +| `default` | The content of the `Drawer`. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + drawer: { + maxWidth: '{size.xs}', + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/5.modal.md b/.starters/default/content/3.components/1.elements/5.modal.md new file mode 100644 index 000000000..93517086f --- /dev/null +++ b/.starters/default/content/3.components/1.elements/5.modal.md @@ -0,0 +1,45 @@ +# Modal + +A `Modal` is a component that appears on top of the main content of the page. It is used to display important information or to request user input, while blocking interaction with the rest of the page. + +## Focus + +By default `Modal` traps focus within it's content while it is open. When the `Modal` is closed, focus is returned to the element that had focus before the `Modal` was opened. + +::callout +Keep in mind, that `Modal` default slot content should have at least one tabbable node in it. This is required for the focus trap to work properly. +:: + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `modelValue` | `boolean` | `false` | Whether the `Modal` is opened or not. | +| `focusTrap` | `boolean` | `true` | Focus trap is enabled or not. | + +## Slots + +| Name | Description | +| --- | --- | +| `default` | The content of the `Modal`. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + modal: { + zIndex: '50', + scrim: { + backgroundColor: { + initial: '{color.gray.50}', + dark: '{color.gray.900}' + }, + backdropFilter: 'none' + }, + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/8.list.md b/.starters/default/content/3.components/1.elements/8.list.md new file mode 100644 index 000000000..01560bf39 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/8.list.md @@ -0,0 +1,134 @@ +# List + +Represents an unordered list of items grouped together, rendered as a bulleted list. + +Used to present a grouping of simple, related information or break up related content into easily digestable chunks. + +::code-group + ::code-preview{label="Preview" column} + ::list{type="primary"} + - **Important** + - Always + :: + + ::list{type="secondary"} + - Item #1 + - Item #2 + :: + + ::list{type="success"} + - Amazing + - Congrats + :: + + ::list{type="info"} + - Do you know? + - You can also do this + :: + + ::list{type="warning"} + - Be careful + - Use with precautions + :: + + ::list{type="danger"} + - Drinking too much + - Driving drunk + :: + :: + + ```md [MDC] + ::list{type="primary"} + - **Important** + - Always + :: + + ::list{type="secondary"} + - Item #1 + - Item #2 + :: + + ::list{type="success"} + - Amazing + - Congrats + :: + + ::list{type="info"} + - Do you know? + - You can also do this + :: + + ::list{type="warning"} + - Be careful + - Use with precautions + :: + + ::list{type="danger"} + - Drinking too much + - Driving drunk + :: + ``` +:: + +## Custom Icon + +You can use any icon from [Iconify](https://iconify.design/) or any emoji as a custom icon. + +::code-group + ::code-preview{label="Preview" column} + ::list{type="success" icon="fe:star"} + - Amazing + - Congrats + :: + + ::list{type="warning" icon="raphael:smile"} + - Be careful + - Use with precautions + :: + :: + + ```md [MDC] + ::list{type="success" icon="fe:star"} + - Amazing + - Congrats + :: + + ::list{type="warning" icon="raphael:smile"} + - Be careful + - Use with precautions + :: + ``` +:: + +## Props + +| **Props** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `type` | `String` | `primary` | Contextual type of `Alert`. Affects colors. Possible values are: `success`, `info`, `warning`, `danger`, `primary`, `secondary`, and `neutral` | +| `icon` | `String` | `null` | Icon to be displayed on the left side of the `List` item. Any component name prefixed with `Icon`, icon name from [Iconify](https://iconify.design/) or any emoji could be used. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + list: { + item: { + marginBottom: '{space.3}', + lastChild: { + marginBottom: '0px', + }, + icon: { + marginInlineEnd: '{space.3}', + padding: '{space.1}', + borderRadius: '{radii.full}', + width: '{space.4}', + height: '{space.4}', + }, + } + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/9.tooltip.md b/.starters/default/content/3.components/1.elements/9.tooltip.md new file mode 100644 index 000000000..802bcadd6 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/9.tooltip.md @@ -0,0 +1,92 @@ +# Tooltip + +A `Tooltip` is a text-based popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It usually appears after a short delay and disappears either when the `Escape` key is pressed or when the mouse pointer moves away from the element. + +While the tooltip is displayed, the focus remains on the triggering element. + +::callout{type="warning" icon} +Because the tooltip itself is not included in the tabbing order and does not receive focus, it is highly discouraged to use interactive elements such as links, inputs, or buttons in floating tip. +:: + +Usually `Tooltip` used as an improved alternative to native `title` attribute, which is not accessible. It's useful with interactive `Icon` components, but can be used with any other element, including inlined context inside Markdown text. + +For positioning floating content to the trigger element, `Tooltip` use [Floating UI](https://floating-ui.com/). + +::code-group + ::code-preview{label="Preview" column} + This is paragraph text with inline **tooltip**! + + ::tooltip{content="This will open Nuxt.js website"} + ::button-link{href="https://nuxt.com" color="green"} + Nuxt.js + :: + :: + :: + + ```md [MDC] + ``` +:: + +## Accessibility + +The element that serves as the tooltip container has `role="tooltip"`. The element that triggers the tooltip references the tooltip element with `aria-describedby`. It's fully accessible with keyboard and screen readers. + +## Props + +| **Prop** | **Type** | **Default** | **Description** | +| --- | --- | --- | --- | +| **content** | `String` | `undefined` | Tooltip content | +| **tabbable** | `Boolean` | `false` | Whether tooltip is tabbable or not | +| **maxWidth** | `String` | `240px` | Max width of the tooltip | +| **offset** | `Number` | `4` | Offset from the trigger element in pixels | +| **delay** | `Number` | `200` | Delay in milliseconds before showing the tooltip | +| **strategy** | `String` | `absolute` | Strategy to use for positioning the tooltip. Uses [@floating-ui/dom](https://floating-ui.com/docs/computePosition#strategy) strategy values | +| **placement** | `String` | `top` | Tooltip placement. Check [Floating UI API](https://floating-ui.com/docs/computePosition#placement) for list of possible values | + +## Slots + +| **Slot** | **Description** | +| --- | --- | +| `default` | Slot for `Tooltip` trigger | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + elements: { + tooltip: { + trigger: { + outline: { + focusVisible: '2px solid {color.primary.500}', + } + }, + content: { + backgroundColor: { + initial: '{color.gray.700}', + dark: '{color.gray.800}', + }, + color: '{color.gray.100}', + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + fontWeight: '{typography.fontWeight.normal}', + borderWidth: { + initial: '0px', + dark: '1px' + }, + borderStyle: { + initial: 'none', + dark: 'solid' + }, + borderColor: { + initial: 'transparent', + dark: '{color.gray.700}', + }, + borderRadius: '{elements.radii.base}', + padding: '{space.3} {space.4}', + } + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/1.elements/_dir.yml b/.starters/default/content/3.components/1.elements/_dir.yml new file mode 100644 index 000000000..047b03772 --- /dev/null +++ b/.starters/default/content/3.components/1.elements/_dir.yml @@ -0,0 +1 @@ +icon: basil:layout-outline \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/1.app-layout.md b/.starters/default/content/3.components/2.layout/1.app-layout.md new file mode 100644 index 000000000..f985beaa4 --- /dev/null +++ b/.starters/default/content/3.components/2.layout/1.app-layout.md @@ -0,0 +1,7 @@ +# App Layout + +A main layout component used in `app.vue`. It provides global app structure with `AppHeader`, `AppFooter`, `main` content area and a `AppLoadingBar`. + +::callout +This is not a MDC component. +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/2.basic-layout.md b/.starters/default/content/3.components/2.layout/2.basic-layout.md new file mode 100644 index 000000000..67961fbe2 --- /dev/null +++ b/.starters/default/content/3.components/2.layout/2.basic-layout.md @@ -0,0 +1,7 @@ +# Basic Layout + +The most basic, single-column layout component. Wraps native Nuxt `layouts` `basic.vue`. Used for index page. + +::callout +This is not a MDC component. +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/3.docs-layout.md b/.starters/default/content/3.components/2.layout/3.docs-layout.md new file mode 100644 index 000000000..8a6d2832a --- /dev/null +++ b/.starters/default/content/3.components/2.layout/3.docs-layout.md @@ -0,0 +1,32 @@ +# Docs Layout + +A layout used for Nuxt Content [Document-driven mode](https://content.nuxtjs.org/guide/writing/document-driven). + +It's a three-column layout component. Wraps native Nuxt `layouts` `default.vue`. Used for all `content` pages, if they don't have `layout` provided in front-matter. + +Consists of aside navigation, main content area and a right sidebar for Table of contents and some additional slots. + +::callout +This is not a MDC component. +:: + +## Design Tokens + + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + layout: { + docs: { + spacing: { + initial: '0px', + lg: '{space.6}', + xl: '{space.8}' + } + } + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/4.container.md b/.starters/default/content/3.components/2.layout/4.container.md new file mode 100644 index 000000000..18bb1696e --- /dev/null +++ b/.starters/default/content/3.components/2.layout/4.container.md @@ -0,0 +1,38 @@ +# Container + +`Container` component used for wrapping content in a centralized and manageable way. It centers content horizontally and provides a consistent maximum width and padding across all blocks of app layout. + +## Props + +| Prop | Type | Default | Description | +|--|--|--|--| +| `as` | `String` | `div` | HTML tag to be used for the container | +| `padded` | `Boolean` | `true` | If `true`, container will have horizontal padding | + +## Slots + +| Slot | Description | +| --- | --- | +| `default` | Content to be displayed in the `Container`. | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + layout: { + container: { + maxWidth: '80rem', + padding: { + initial: '{space.4}', + xs: '{space.4}', + sm: '{space.6}', + xl: '{space.8}' + } + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/_dir.yml b/.starters/default/content/3.components/2.layout/_dir.yml new file mode 100644 index 000000000..07920898c --- /dev/null +++ b/.starters/default/content/3.components/2.layout/_dir.yml @@ -0,0 +1 @@ +icon: ri:layout-6-fill \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/container-section.md b/.starters/default/content/3.components/2.layout/container-section.md new file mode 100644 index 000000000..e2a7df8cb --- /dev/null +++ b/.starters/default/content/3.components/2.layout/container-section.md @@ -0,0 +1,12 @@ +# Container Section + +A wrapper around `Container`, that helps to create consistent and semantic sections of page content streight from markdown. + +## Props + +| Prop | Type | Default | Description | +|--|--|--|--| +| `margin` | `[String, Object]` | `0` | Margin of the section | +| `padding` | `[String, Object]` | `0` | Padding of the section | +| `backgroundColor` | `[String, Object]` | `transparent` | Background color of the section | +| `backgroundImage` | `[String, Object]` | `none` | Background image of the section | \ No newline at end of file diff --git a/.starters/default/content/3.components/2.layout/grid.md b/.starters/default/content/3.components/2.layout/grid.md new file mode 100644 index 000000000..6326a86a7 --- /dev/null +++ b/.starters/default/content/3.components/2.layout/grid.md @@ -0,0 +1,3 @@ +# Grid + +🚧 \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/1.header.md b/.starters/default/content/3.components/3.app/1.header.md new file mode 100644 index 000000000..5ade2d60c --- /dev/null +++ b/.starters/default/content/3.components/3.app/1.header.md @@ -0,0 +1,74 @@ +# Header + +Defines the global header section of the page. + +It has several components, which renders depending on app configuration or context. Those components includes: `AppHeaderDrawer`, `AppHeaderLogo`, `AppNavigation`, `AppSearch`, `AppTextDirection`, `AppColorMode`, `AppSocialIcons`. + +`AppHeader` is used inside [`AppLayout`](/components/layout/app-layout) component. + +::callout +This is not a MDC component, but you can control it's visibility with configuration or front-matter (WIP 🚧). +:: + +## Configuration + +```ts [app.config.ts] +export default defineAppConfig({ + docus: { + header: { + title: '', + logo: false, + showLinkIcon: false, + exclude: [] + }, + } +}) +``` + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + header: { + height: '64px', + backdropFilter: '{elements.backdrop.filter}', + backgroundColor: '{elements.backdrop.background}', + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + borderBottomColor: '{elements.border.primary.static}', + title: { + fontSize: '{fontSize.2xl}', + fontWeight: '{fontWeight.bold}', + color: { + static: { + initial: '{color.gray.900}', + dark: '{color.gray.100}' + }, + hover: '{color.primary.500}' + } + }, + icon: { + size: '{space.4}' + }, + layout: { + gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', + gap: '{space.2}', + left: { + gridColumn: 'span 4 / span 4' + }, + center: { + gridColumn: 'span 4 / span 4' + }, + right: { + gridColumn: 'span 4 / span 4' + } + }, + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/2.header-drawer.md b/.starters/default/content/3.components/3.app/2.header-drawer.md new file mode 100644 index 000000000..1bd403211 --- /dev/null +++ b/.starters/default/content/3.components/3.app/2.header-drawer.md @@ -0,0 +1,68 @@ +# Header Drawer + +A wrapper around Elements `Drawer` component. + +It consist of a button with icon and a drawer component, which is a panel that slides out from the edge of the screen. + +The drawer component is hidden by default and can be toggled by clicking on the button. It contains social icons and a `DocsNavigation` component. + + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + header: { + drawer: { + button: { + color: { + static: { + initial: '{color.gray.500}', + dark: '{color.gray.400}' + }, + hover: { + initial: '{color.gray.700}', + dark: '{color.gray.200}' + } + }, + zIndex: '10', + padding: '{space.4}', + paddingInlineStart: '0px' + }, + menu: { + borderRightWidth: '1px', + borderRightStyle: 'solid', + borderRightColor: '{elements.border.primary.static}', + backgroundColor: { + initial: '{color.gray.50}', + dark: '{color.gray.900}' + }, + paddingX: { + initial: '{space.4}', + sm: '{space.6}' + }, + header: { + height: '{docus.app.header.height}', + alignItems: 'center', + justifyContent: 'space-between', + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + borderBottomColor: '{elements.border.primary.static}', + gap: '{space.2}', + icon: { + size: '{space.4}' + } + }, + links: { + paddingTop: '{space.6}' + } + } + } + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/3.header-logo.md b/.starters/default/content/3.components/3.app/3.header-logo.md new file mode 100644 index 000000000..47b272e59 --- /dev/null +++ b/.starters/default/content/3.components/3.app/3.header-logo.md @@ -0,0 +1,39 @@ +# Header Logo + +The component renders a logo image or title text, depending on the configuration. + +## Configuration + +```ts [app.config.ts] +export default defineAppConfig({ + docus: { + header: { + logo: { + light: '', + dark: '', + }, + }, + } +}) +``` + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + header: { + logo: { + height: { + initial: '{space.6}', + sm: '{space.7}' + } + }, + } + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/4.footer.md b/.starters/default/content/3.components/3.app/4.footer.md new file mode 100644 index 000000000..82c158e15 --- /dev/null +++ b/.starters/default/content/3.components/3.app/4.footer.md @@ -0,0 +1,118 @@ +# Footer + +Defines the global footer section of the page. + +It renders credits, social icons and navigation links, which are configured in `app.config.ts`. + +`AppFooter` is used inside [`AppLayout`](/components/layout/app-layout) component. + +::callout +This is not a MDC component, but you can control it's visibility with configuration or front-matter (WIP 🚧). +:: + +## Configuration + +```ts [app.config.ts] +export default defineAppConfig({ + docus: { + footer: { + credits: { + icon: 'IconDocus', + text: 'Powered by Docus', + href: 'https://docus.dev' + }, + textLinks: [], + iconLinks: [], + }, + } +}) +``` + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + footer: { + height: { + initial: '145px', + sm: '100px' + }, + padding: '{space.4} 0', + borderTopWidth: '1px', + borderTopStyle: 'solid', + borderTopColor: '{elements.border.primary.static}', + layout: { + gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', + justifyItems: { + initial: 'center', + sm: 'stretch' + }, + gap: '{space.2}', + left: { + gridColumn: { + initial: 'span 12 / span 12', + sm: 'span 3 / span 3' + }, + order: { + initial: '1', + sm: '0' + }, + paddingY: '{space.4}' + }, + center: { + gridColumn: { + initial: 'span 12 / span 12', + sm: 'span 6 / span 6' + }, + flexDirection: { + initial: 'column', + sm: 'row' + }, + alignItems: 'center', + justifyContent: { + initial: 'flex-start', + sm: 'center' + } + }, + right: { + gridColumn: { + initial: 'span 12 / span 12', + sm: 'span 3 / span 3' + }, + marginInlineEnd: { + initial: '0px', + sm: 'calc(0px - {space.4})' + } + } + }, + credits: { + fontSize: '{text.xs.fontSize}', + lineHeight: '{text.xs.lineHeight}', + fontWeight: '{fontWeight.medium}', + icon: { + size: '{space.4}', + marginInlineEnd: '{space.2}', + color: 'currentColor' + } + }, + icon: { + size: '{space.4}' + }, + textLink: { + padding: '{space.2}', + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + fontWeight: '{fontWeight.medium}' + }, + iconLink: { + padding: '{space.4}' + } + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/_dir.yml b/.starters/default/content/3.components/3.app/_dir.yml new file mode 100644 index 000000000..a96fb3421 --- /dev/null +++ b/.starters/default/content/3.components/3.app/_dir.yml @@ -0,0 +1 @@ +icon: pepicons-print:smartphone-home-button \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/_search.md b/.starters/default/content/3.components/3.app/_search.md new file mode 100644 index 000000000..b2327677c --- /dev/null +++ b/.starters/default/content/3.components/3.app/_search.md @@ -0,0 +1,5 @@ +# Search + +::callout +Is it working? +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/_text-direction.md b/.starters/default/content/3.components/3.app/_text-direction.md new file mode 100644 index 000000000..1f50dad2d --- /dev/null +++ b/.starters/default/content/3.components/3.app/_text-direction.md @@ -0,0 +1,9 @@ +# Text Direction + +Docus and Elements is build using logical properties and values, which means it's fully support right-to-left text direction. `TextDirection` component can toggle text direction between `ltr` and `rtl`. + +::callout{icon} +This component still WIP 🚧 + +It's not clear if it's useful to have for English-based documentation, it needs an option of setting default text direction with `app.config`, and also saving user choice feature. +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/color-mode.md b/.starters/default/content/3.components/3.app/color-mode.md new file mode 100644 index 000000000..08a2621d2 --- /dev/null +++ b/.starters/default/content/3.components/3.app/color-mode.md @@ -0,0 +1,23 @@ +# Color Mode + +A toggle between light and dark mode, using [`@nuxtjs/color-mode`](https://color-mode.nuxtjs.org/) under the hood. + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + colorMode: { + padding: '{space.4}', + color: { + static: '{elements.text.secondary.color.static}', + hover: '{elements.text.secondary.color.hover}' + } + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/loading-bar.md b/.starters/default/content/3.components/3.app/loading-bar.md new file mode 100644 index 000000000..fdae66247 --- /dev/null +++ b/.starters/default/content/3.components/3.app/loading-bar.md @@ -0,0 +1,22 @@ +# Loading Bar + +The loading bar is a component that is displayed at the top of the page when the user navigates between pages. + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + loadingBar: { + height: '3px', + gradientColorStop1: '{color.primary.600}', + gradientColorStop2: '{color.primary.500}', + gradientColorStop3: '{color.secondary.500}' + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/navigation.md b/.starters/default/content/3.components/3.app/navigation.md new file mode 100644 index 000000000..cee0af269 --- /dev/null +++ b/.starters/default/content/3.components/3.app/navigation.md @@ -0,0 +1,43 @@ +# Navigation + +Component for rendering main navigation. Could be a vertical or horizontal list of links, with or without icons. + +Navigation links list comes from Nuxt Content module [`useContent`](https://content.nuxtjs.org/api/composables/use-document-driven/) composable. + +## Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `vertical` | `Boolean` | `false` | List direction: vertical or horizontal | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + navigation: { + gap: '{space.2}', + vertical: { + marginBottom: '{space.4}', + gap: '{space.0}', + link: { + padding: '{space.2} 0' + } + }, + link: { + padding: '{space.1} {space.2}', + fontWeight: '{fontWeight.semibold}', + gap: '{space.2}', + fontSize: '{fontSize.sm}', + icon: { + size: '{space.4}' + } + } + }, + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.app/social-icons.md b/.starters/default/content/3.components/3.app/social-icons.md new file mode 100644 index 000000000..a789d744b --- /dev/null +++ b/.starters/default/content/3.components/3.app/social-icons.md @@ -0,0 +1,38 @@ +# Social Icons + +A list of social icons links. + +Currently supported social websites are: Twitter, Facebook, Instagram, Youtube, GitHub and Medium. + +## Configuration + +```ts [app.config.ts] +export default defineAppConfig({ + docus: { + socials: { + twitter: 'nuxtstudio', + github: 'nuxt-themes/docus' + }, + } +}) +``` + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + app: { + socialIcons: { + padding: '{space.4}', + color: { + static: '{elements.text.secondary.color.static}', + hover: '{elements.text.secondary.color.hover}' + } + } + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.landing/1.hero.md b/.starters/default/content/3.components/3.landing/1.hero.md new file mode 100644 index 000000000..c2f4df388 --- /dev/null +++ b/.starters/default/content/3.components/3.landing/1.hero.md @@ -0,0 +1,237 @@ +# Hero + +The `Hero` component is a versatile and visually appealing element designed for the landing page. It serves as the first screen that captures users' attention and introduces them to the key features and messaging of the product. The component incorporates a title, description, announce, call-to-action buttons, some extra content slot and a flexible area for visual content, such as images, videos, or animations (or `Terminal` in case of Docus website). + +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::hero{style="min-width: 1280px;"} + + #announce + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + + #title + The best place to start your documentation. + + #description + Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [Nuxt](https://nuxt.com). + + #extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + + #actions + ::button-link{href=/introduction/getting-started size=medium} + Get started + :: + ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank} + Open on GitHub → + :: + + #support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: + :: + :: + + ```md [MDC] + ::hero + + #announce + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + + #title + The best place to start your documentation. + + #description + Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [Nuxt](https://nuxt.com). + + #extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + + #actions + ::button-link{href=/introduction/getting-started size=medium} + Get started + :: + ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank} + Open on GitHub → + :: + + #support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: + :: + ``` +:: + +## Slots + +| **Name** | **Description** | +| --- | --- | +| `root` | A slot for any content, rendered at the root of the component | +| `announce` | A slot for providing updates or any kind of announce. rendered above the `title` | +| `title` | A slot for main `Hero` title | +| `description` | A slot for `Hero` description | +| `extra` | A slot for any kind of additional `Hero` content. Rendered under the `description` | +| `actions` | A slot for `Hero` actions, such as buttons, links or any other Call to Action. Rendered under the `extra` | +| `support` | A slot for `Hero` visual support content: image, video, animation, demo etc | + + +## Design Tokens + +::code-collapse{height="30rem"} +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + landing: { + hero: { + padding: { + initial: '{space.20} 0', + sm: '{space.24} 0', + lg: '{space.24} 0 {space.32} 0' + }, + layout: { + gap: { + initial: '{space.16}', + xl: '{space.4}' + }, + gridTemplateColumns: { + initial: 'none', + xl: 'repeat(12, minmax(0, 1fr))' + } + }, + content: { + gridColumn: { + initial: 'auto', + xl: 'span 7 / span 7' + }, + alignItems: { + initial: 'center', + xl: 'flex-start' + }, + announce: { + marginBottom: '{space.8}' + }, + title: { + fontSize: { + initial: '{text.4xl.fontSize}', + sm: '{text.5xl.fontSize}', + lg: '{text.6xl.fontSize}' + }, + lineHeight: { + initial: '{text.4xl.lineHeight}', + sm: '{text.5xl.lineHeight}', + lg: '{text.6xl.lineHeight}' + }, + color: '{elements.text.primary.color.static}', + fontWeight: '{fontWeight.semibold}', + letterSpacing: '{letterSpacing.tight}', + paddingX: { + initial: '{space.8}', + md: '{space.12}', + lg: '{space.14}', + xl: '{space.0}' + }, + textAlign: { + initial: 'center', + xl: 'start' + }, + marginBottom: '{space.8}', + gradientText: { + initial: 'linear-gradient(114deg, {color.gray.900} 10%, {color.gray.600} 54%, {color.gray.500})', + dark: 'linear-gradient(114deg, {color.gray.400} 10%, {color.gray.100} 54%, {color.gray.700})' + }, + mixBlendMode: 'normal' + }, + description: { + textAlign: { + initial: 'center', + xl: 'start' + }, + marginBottom: '{space.12}', + fontSize: { + initial: '{text.lg.fontSize}', + lg: '{text.xl.fontSize}' + }, + lineHeight: { + initial: '{text.lg.lineHeight}', + lg: '{text.xl.lineHeight}' + }, + color: '{elements.text.secondary.color.static}', + paddingX: { + initial: '{space.2}', + md: '{space.6}', + xl: '{space.0}' + }, + mixBlendMode: 'normal' + }, + extra: { + justifyContent: { + initial: 'center', + xl: 'flex-start' + }, + marginBottom: '{space.16}' + }, + actions: { + flexDirection: { + initial: 'column', + sm: 'row' + }, + gap: { + initial: '{space.2}', + sm: '{space.3}' + }, + justifyContent: { + initial: 'center', + xl: 'flex-start' + } + } + }, + support: { + gridColumn: { + initial: 'auto', + xl: 'span 5 / span 5' + } + } + }, + } + } +}) +``` +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/3.landing/2.terminal.md b/.starters/default/content/3.components/3.landing/2.terminal.md new file mode 100644 index 000000000..3096cd250 --- /dev/null +++ b/.starters/default/content/3.components/3.landing/2.terminal.md @@ -0,0 +1,85 @@ +# Terminal + +The `Terminal` component is used to display terminal commands. User could copy the commands by clicking inside window area. + +::code-group + ::code-preview{label="Preview"} + ::terminal + --- + content: + - npx nuxi init my-awesome-nuxt-app + - yarn install + --- + :: + :: + + ```md [MDC] + ::terminal + --- + content: + - npx nuxi init my-awesome-nuxt-app + - yarn install + --- + :: + ``` +:: + +## Props + +| **Prop** | **Type** | **Default** | **Description** | +|--|--|--|--| +| `content` | `[Array, String]` | `undefined` | One or multiple terminal commands. The prop is `required` | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + landing: { + terminal: { + maxWidth: '{space.128}', + height: '{space.64}', + borderWidth: '0px', + borderStyle: 'solid', + borderColor: '{elements.border.primary.static}', + borderRadius: '{radii.xs}', + backgroundColor: { + initial: 'rgba({temp.color.gray.200}, 0.7)', + dark: 'rgba({temp.color.gray.900}, 0.7)' + }, + boxShadow: 'inset 0px 0px 0px 1px rgba({temp.color.gray.600}, 0.3), {shadow.2xl}', + backdropFilter: 'blur(3px)', + header: { + borderBottomWidth: '0px', + borderBottomStyle: 'solid', + borderBottomColor: '{elements.border.primary.static}', + height: '{space.12}', + boxShadow: 'inset 0px -1px 0px 0px rgba({temp.color.gray.600}, 0.3)' + }, + window: { + fontFamily: '{font.mono}', + fontSize: '{text.sm.fontSize}', + mixBlendMode: { + initial: 'normal', + dark: 'difference' + }, + sign: { + color: { + initial: '{color.gray.500}', + dark: '{color.gray.700}' + } + } + }, + copied: { + color: { + initial: '{color.gray.900}', + dark: '{color.gray.100}' + } + } + } + } + } +}) +``` diff --git a/.starters/default/content/3.components/3.landing/3.card.md b/.starters/default/content/3.components/3.landing/3.card.md new file mode 100644 index 000000000..b7c7888c9 --- /dev/null +++ b/.starters/default/content/3.components/3.landing/3.card.md @@ -0,0 +1,150 @@ +# Card + +The `Card` component used to display content related to a single subject in a visually engaging and organized manner. + +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::card{icon=logos:nuxt-icon style="--docus-landing-card-wrapper-backgroundColor: var(--elements-surface-secondary-backgroundColor);"} + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: + :: + ```md [MDC] + ::card{icon=logos:nuxt-icon} + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: + ``` +:: + +## Visual effects + +You can add visual effects to your card by using the `lights` and `noise` props. + +::code-group + ::code-preview{label="Preview" column} + ::card{icon=logos:nuxt-icon noise lights style="--docus-landing-card-noise-opacity: 0.3;"} + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: + :: + ```md [MDC] + ::card{icon=logos:nuxt-icon noise lights style="--docus-landing-card-noise-opacity: 0.3;"} + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: + ``` +:: + +## Customization + +You are able to customize the `Card` by updating design tokens from `tokens.config` file. + +::code-group + ::code-preview{label="Preview" column} + ::card{icon=logos:nuxt-icon noise style="--docus-landing-card-backgroundImage: linear-gradient(58deg, #407cff, #5fe9e1); --docus-landing-card-padding: 2px; --docus-landing-card-wrapper-backgroundImage: linear-gradient(58deg, #2560db, #27bbb4); --docus-landing-card-noise-opacity: 0; --docus-landing-card-title-color: white; --docus-landing-card-description-color: white;"} + #title + Nuxt Studio ready + #description + Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). + :: + :: +:: + +## Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `icon` | `String` | `''` | Icon name from [Iconify](https://iconify.design) | +| `col` | `[String, Number, Object]` | `1` | Amount of columns `Card` takes inside `CardGrid` | +| `row` | `[String, Number, Object]` | `1` | Amount of rows `Card` takes inside `CardGrid` | +| `noise` | `Boolean` | `false` | Add noise filter effect | +| `lights` | `Boolean` | `false` | Add cursor lights effect | + +## Slots + +| Slot | Description | +|------|-------------| +| `default` | A slot for any arbitrary content | +| `title` | A slot for title content | +| `description` | A slot for description content | + +## Design Tokens + +::code-collapse{height="30rem"} +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + landing: { + card: { + padding: '{space.1}', + borderRadius: '{radii.sm}', + borderWidth: '0px', + borderStyle: 'solid', + borderColor: 'rgba({temp.color.gray.800}, 0.5)', + backgroundColor: 'transparent', + backgroundImage: 'none', + backdropFilter: '{elements.backdrop.filter}', + boxShadow: 'none', + minHeight: 'auto', + wrapper: { + borderRadius: '{radii.xs}', + backgroundColor: 'transparent', + backgroundImage: { + initial: 'linear-gradient(135deg, rgba({temp.color.gray.100}, 0.5), rgba({temp.color.gray.200}, .5))', + dark: 'linear-gradient(135deg, rgba({temp.color.gray.800}, 0.4), rgba({temp.color.gray.800}, .7))' + } + }, + noise: { + opacity: { + initial: '0.2', + dark: '0.2' + } + }, + content: { + padding: '{space.8}' + }, + icon: { + marginBottom: '{space.4}', + width: '{space.6}', + height: '{space.6}', + padding: '{space.3}', + borderRadius: '{radii.xs}', + backgroundColor: { + initial: 'rgba({temp.color.gray.300}, 0.2)', + dark: 'rgba({temp.color.gray.900}, 0.2)' + }, + boxShadow: 'inset -0.5px 0.5px 0px hsla(0,0%,100%,.1), inset 0.5px 0px 0px hsla(0,0%,100%,.1)' + }, + title: { + marginBottom: '{space.2}', + fontSize: '{text.2xl.fontSize}', + lineHeight: '{text.2xl.lineHeight}', + fontWeight: '{fontWeight.medium}', + letterSpacing: '{letterSpacing.tight}', + color: '{elements.text.primary.color.static}' + }, + description: { + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + fontWeight: '{fontWeight.medium}', + color: '{elements.text.secondary.color.static}' + } + }, + } + } +}) +``` +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/3.landing/4.card-grid.md b/.starters/default/content/3.components/3.landing/4.card-grid.md new file mode 100644 index 000000000..6cfa78af1 --- /dev/null +++ b/.starters/default/content/3.components/3.landing/4.card-grid.md @@ -0,0 +1,67 @@ +# Card Grid + +The `CardGrid` component is a layout component that allows you to display a grid of `Card`'s. + +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::card-grid{style="--docus-landing-card-wrapper-backgroundColor: var(--elements-surface-secondary-backgroundColor);"} + ::card + Card + :: + ::card{row=2} + Card + :: + ::card + Card + :: + ::card{row=2} + Card + :: + ::card{col=2} + Card + :: + ::card + Card + :: + :: + :: + ```md [MDC] + ::card-grid + ::card + Card + :: + ::card{row=2} + Card + :: + ::card + Card + :: + ::card{row=2} + Card + :: + ::card{col=2} + Card + :: + ::card + Card + :: + :: + ``` +:: + +## Props + +| Prop | Type | Default | Description | +|--|--|--|--| +| `cols` | `[String, Number, Object]` | `3` | Number of columns to display | +| `gap` | `[String, Object]` | `{ initial: '{space.4}', '2xl': '{space.6}' }` | Gap between cards | + +## Slots + +| Slot | Description | +| --- | --- | +| `root` | A slot for any content, rendered at the root of the component | +| `default` | `Card` components to be displayed in the grid. | + diff --git a/.starters/default/content/3.components/3.landing/5.section-header.md b/.starters/default/content/3.components/3.landing/5.section-header.md new file mode 100644 index 000000000..7acde0bbc --- /dev/null +++ b/.starters/default/content/3.components/3.landing/5.section-header.md @@ -0,0 +1,77 @@ +# Section Header + +Component for displaying a section header. Useful if your landing page has multiple sections. + +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::section-header{title="What's included" subtitle="Features" description="Docus is packed with features to help you build your next project."} + :: + :: + ```md [MDC] + ::section-header{title="What's included" subtitle="Features" description="Docus is packed with features to help you build your next project."} + :: + ``` +:: + +## Props + +| Prop | Type | Default | Description | +|--|--|--|--| +| `title` | `String` | `''` | Title of the section. Use `title` slot as alternative | +| `subtitle` | `String` | `''` | Subtitle of the section. Use `subtitle` slot as alternative | +| `subtitleColor` | `String` | `{color.primary.500}` | Subtitle color | +| `description` | `String` | `''` | Description of the section. Use `description` slot as alternative | + +## Slots + +| Slot | Description | +|--|--| +| `subtitle` | Subtitle of the section. Use `subtitle` prop as alternative | +| `title` | Title of the section. Use `title` prop as alternative | +| `description` | Description of the section. Use `description` prop as alternative | + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + landing: { + sectionHeader: { + alignItems: { + initial: 'center', + xl: 'flex-start' + }, + marginBottom: '{space.8}', + subtitle: { + fontSize: '{text.lg.fontSize}', + lineHeight: '{text.lg.lineHeight}', + fontWeight: '{fontWeight.normal}', + letterSpacing: '{letterSpacing.wide}', + marginBottom: '{space.2}' + }, + title: { + fontSize: { + initial: '{text.3xl.fontSize}', + sm: '{text.4xl.fontSize}' + }, + lineHeight: { + initial: '{text.3xl.lineHeight}', + sm: '{text.4xl.lineHeight}' + }, + marginBottom: '{space.2}', + fontWeight: '{fontWeight.semibold}', + letterSpacing: '{letterSpacing.tight}', + color: '{docus.body.color}' + }, + description: { + color: '{elements.text.secondary.color.static}' + } + } + } + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/3.landing/_dir.yml b/.starters/default/content/3.components/3.landing/_dir.yml new file mode 100644 index 000000000..ebcc50c53 --- /dev/null +++ b/.starters/default/content/3.components/3.landing/_dir.yml @@ -0,0 +1 @@ +icon: ph:cursor-click-duotone \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/1.navigation.md b/.starters/default/content/3.components/4.docs/1.navigation.md new file mode 100644 index 000000000..6aa1a83ef --- /dev/null +++ b/.starters/default/content/3.components/4.docs/1.navigation.md @@ -0,0 +1,9 @@ +# Navigation + +Component for rendering `Docs` tree navigation, from `content` folder structure. Could be nested and collapsible, depending on configuration. + +## Design Tokens + +::callout{icon=🚧} +Tokenization is WIP +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/2.toc.md b/.starters/default/content/3.components/4.docs/2.toc.md new file mode 100644 index 000000000..ce5a5748c --- /dev/null +++ b/.starters/default/content/3.components/4.docs/2.toc.md @@ -0,0 +1,9 @@ +# Table of Contents + +A component for `Docs` article Table of Contents. + +## Design Tokens + +::callout{icon=🚧} +Tokenization is WIP +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/3.toc-links.md b/.starters/default/content/3.components/4.docs/3.toc-links.md new file mode 100644 index 000000000..63c62a1d7 --- /dev/null +++ b/.starters/default/content/3.components/4.docs/3.toc-links.md @@ -0,0 +1,9 @@ +# Table of Contents Links + +Renders `DocsToc` links tree. + +## Design Tokens + +::callout{icon=🚧} +Tokenization is WIP +:: \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/_dir.yml b/.starters/default/content/3.components/4.docs/_dir.yml new file mode 100644 index 000000000..d915f70eb --- /dev/null +++ b/.starters/default/content/3.components/4.docs/_dir.yml @@ -0,0 +1 @@ +icon: solar:documents-bold-duotone \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/content-bottom.md b/.starters/default/content/3.components/4.docs/content-bottom.md new file mode 100644 index 000000000..40a12d79a --- /dev/null +++ b/.starters/default/content/3.components/4.docs/content-bottom.md @@ -0,0 +1,3 @@ +# Content Bottom + +Component for rendering content bottom section. \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/edit-on.md b/.starters/default/content/3.components/4.docs/edit-on.md new file mode 100644 index 000000000..2a840b54a --- /dev/null +++ b/.starters/default/content/3.components/4.docs/edit-on.md @@ -0,0 +1,3 @@ +# Edit On + +Component for rendering `EditOn` GitHub link. \ No newline at end of file diff --git a/.starters/default/content/3.components/4.docs/prev-next.md b/.starters/default/content/3.components/4.docs/prev-next.md new file mode 100644 index 000000000..6f97ed0dc --- /dev/null +++ b/.starters/default/content/3.components/4.docs/prev-next.md @@ -0,0 +1,64 @@ +# Prev Next + +Component for rendering `PrevNext` navigation links. + +## Design Tokens + +```ts [tokens.config.ts] +import { defineTheme } from 'pinceau' + +export default defineTheme({ + docus: { + docs: { + prevNext: { + gap: '{space.8}', + padding: '{space.6}', + backgroundColor: { + initial: '{color.gray.50}', + dark: '{color.gray.900}' + }, + borderRadius: '{radii.2xs}', + borderWidth: '1px', + borderStyle: 'solid', + borderColor: { + initial: '{color.gray.200}', + dark: '{color.gray.800}' + }, + boxShadow: { + static: { + initial: 'none', + dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.xs}' + }, + hover: { + initial: 'none', + dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.lg}' + } + }, + title: { + color: { + hover: '{color.primary.500}' + }, + fontWeight: '{fontWeight.medium}', + marginBottom: '{space.2}' + }, + directory: { + marginBottom: '{space.3}', + fontSize: '{text.xs.fontSize}', + lineHeight: '{text.xs.lineHeight}', + fontWeight: '{fontWeight.medium}', + color: '{color.gray.500}' + }, + icon: { + size: '{space.8}', + marginBottom: '{space.4}' + }, + description: { + fontSize: '{text.sm.fontSize}', + lineHeight: '{text.sm.lineHeight}', + color: '{color.gray.500}' + } + } + }, + } +}) +``` \ No newline at end of file diff --git a/.starters/default/content/3.components/_dir.yml b/.starters/default/content/3.components/_dir.yml new file mode 100644 index 000000000..0595e2773 --- /dev/null +++ b/.starters/default/content/3.components/_dir.yml @@ -0,0 +1,2 @@ +title: 'Components' +icon: uim:box diff --git a/.starters/default/package.json b/.starters/default/package.json index 5e0e291f3..5c071d9dd 100755 --- a/.starters/default/package.json +++ b/.starters/default/package.json @@ -10,12 +10,12 @@ "lint": "eslint ." }, "devDependencies": { - "@nuxt-themes/docus": "^1.12.0", - "@nuxt/devtools": "^0.4.6", + "@nuxt-themes/docus": "^2.0.0-beta.5", + "@nuxt/devtools": "^0.5.5", "@nuxt/eslint-config": "^0.1.1", "@nuxtjs/plausible": "^0.2.1", - "@types/node": "^20.1.5", - "eslint": "^8.40.0", - "nuxt": "^3.5.0" + "@types/node": "^20.2.5", + "eslint": "^8.42.0", + "nuxt": "^3.5.3" } } diff --git a/.starters/default/public/favicon.ico b/.starters/default/public/favicon.ico index dfe416355..e0f68f2e5 100644 Binary files a/.starters/default/public/favicon.ico and b/.starters/default/public/favicon.ico differ diff --git a/.starters/default/public/square-logo-dark.svg b/.starters/default/public/square-logo-dark.svg new file mode 100644 index 000000000..e8bebf26a --- /dev/null +++ b/.starters/default/public/square-logo-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/.starters/default/public/square-logo-light.svg b/.starters/default/public/square-logo-light.svg new file mode 100644 index 000000000..6e858441d --- /dev/null +++ b/.starters/default/public/square-logo-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/.starters/default/tokens.config.ts b/.starters/default/tokens.config.ts index b80da0a33..68e8f3c3e 100644 --- a/.starters/default/tokens.config.ts +++ b/.starters/default/tokens.config.ts @@ -1,4 +1,27 @@ import { defineTheme } from 'pinceau' export default defineTheme({ + docus: { + landing: { + hero: { + content: { + title: { + gradientText: { + initial: 'linear-gradient(114deg, {color.gray.100} 10%, {color.gray.300} 54%, {color.gray.600})', + dark: 'linear-gradient(114deg, {color.gray.200} 10%, {color.gray.400} 54%, {color.gray.700})' + }, + mixBlendMode: 'exclusion' + } + } + }, + card: { + wrapper: { + backgroundImage: { + initial: 'linear-gradient(180deg, rgba({temp.color.gray.100}, 0.3), rgba({temp.color.gray.100}, 0.6))', + dark: 'linear-gradient(180deg, rgba({temp.color.gray.800}, 0.3), rgba({temp.color.gray.900}, 0.6))', + } + } + } + } + } }) diff --git a/app.config.ts b/app.config.ts index b30b20027..8645aafb6 100644 --- a/app.config.ts +++ b/app.config.ts @@ -10,17 +10,19 @@ export default defineAppConfig({ layout: 'default', + rtl: false, + header: { title: '', logo: false, showLinkIcon: false, - fluid: false, exclude: [] }, aside: { level: 0, collapsed: false, + collapsible: true, exclude: [] }, @@ -32,7 +34,6 @@ export default defineAppConfig({ }, textLinks: [], iconLinks: [], - fluid: false }, github: { diff --git a/app.vue b/app.vue index e19315ee5..9e0952494 100644 --- a/app.vue +++ b/app.vue @@ -1,5 +1,18 @@ + + diff --git a/assets/css/main.css b/assets/css/main.css index 00b6a166e..2b82442f5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -37,7 +37,7 @@ } body { - overflow-y: scroll; + /* overflow-y: scroll; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: $dt('docus.body.backgroundColor'); diff --git a/components/app/ThemeSelect.vue b/components/app/AppColorMode.vue similarity index 52% rename from components/app/ThemeSelect.vue rename to components/app/AppColorMode.vue index bc85f1dd4..bb8677a99 100644 --- a/components/app/ThemeSelect.vue +++ b/components/app/AppColorMode.vue @@ -4,7 +4,6 @@ const onClick = () => { const values = ['system', 'light', 'dark'] const index = values.indexOf(colorMode.preference) const next = (index + 1) % values.length - colorMode.preference = values[next] } @@ -15,18 +14,9 @@ const onClick = () => { @click="onClick" > - - - + + + @@ -35,19 +25,11 @@ const onClick = () => { css({ button: { display: 'flex', - padding: '{space.4}', - - color: '{color.gray.500}', - '@dark': { - color: '{color.gray.400}' - }, - + padding: '{docus.app.colorMode.padding}', + color: '{docus.app.colorMode.color.static}', '&:hover': { - color: '{color.gray.700}', - '@dark': { - color: '{color.gray.200}', - } - }, + color: '{docus.app.colorMode.color.hover}' + } } }) diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue index 75b4b3a85..ca6878c04 100644 --- a/components/app/AppFooter.vue +++ b/components/app/AppFooter.vue @@ -1,5 +1,6 @@