diff options
Diffstat (limited to 'docs/.docs/content/2.api')
| -rw-r--r-- | docs/.docs/content/2.api/1.components.md | 693 | ||||
| -rw-r--r-- | docs/.docs/content/2.api/2.composables.md | 88 | ||||
| -rw-r--r-- | docs/.docs/content/2.api/3.layouts.md | 43 | ||||
| -rw-r--r-- | docs/.docs/content/2.api/_dir.yml | 2 |
4 files changed, 0 insertions, 826 deletions
diff --git a/docs/.docs/content/2.api/1.components.md b/docs/.docs/content/2.api/1.components.md deleted file mode 100644 index d22340f..0000000 --- a/docs/.docs/content/2.api/1.components.md +++ /dev/null @@ -1,693 +0,0 @@ -# Components - -Discover every component you can use in your content. - - -## `<Alert />` - -::code-group - - ::code-block{label="Preview" preview} - ::alert{type="info" style="margin-top: 0;"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger" style="margin-bottom: 0;"} - Check out a **danger** alert with `code` and a [link](/). - :: - :: - - ```md [Code] - ::alert{type="info"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger"} - Check out a **danger** alert with `code` and a [link](/). - :: - ``` - -:: - -<!-- -::props{of="Alert"} -:: ---> - -::source-link ---- -source: "components/content/Alert.vue" ---- -:: - ---- - -## `<Badge />` - -`<Badge />` support same types as `<Alert />`. - -::code-group - - ::code-block{label="Preview" preview} - ::div{style="display:flex; gap: 1rem;"} - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - :: - :: - - ```md [Code] - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - ``` - -:: - -<!-- -::props{of="Badge"} -:: ---> - -::source-link ---- -source: "components/content/Badge.vue" ---- -:: - ---- - -## `<BlockHero />` - -::code-group - - ::code-block{label="Preview"} - ::block-hero - --- - cta: - - Get started - - /get-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - :: - - ```md [Code] - ::block-hero - --- - cta: - - Get started - - /get-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - ``` - -:: - -<!-- -::props{of="BlockHero"} -:: ---> - -::source-link ---- -source: "components/content/BlockHero.vue" ---- -:: - ---- - -## `<ButtonLink />` -::code-group - - ::code-block{label="Preview" preview} - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - :: - - ```md [Code] - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - ``` - -:: - -<!-- -::props{of="Alert"} -:: ---> - -::source-link ---- -source: "components/content/ButtonLink.vue" ---- -:: - ---- - -## `<Callout />` - -`<Callout />` support same types as `<Alert />`. - -::code-group - - ::code-block{label="Preview"} - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - :: - - ```md [Code] - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - ``` - -:: - -<!-- -::props{of="Callout"} -:: ---> - -::source-link ---- -source: "components/content/Callout.vue" ---- -:: - ---- - -## `<Card />` - -::code-group - - ::code-block{label="Preview"} - ::card - --- - icon: logos:nuxt-icon - --- - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - :: - - ```md [Code] - ::card{icon="logos:nuxt-icon"} - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - ``` - -:: - -<!-- -::props{of="Card"} -:: ---> - -::source-link ---- -source: "components/content/Card.vue" ---- -:: - ---- - -## `<CardGrid />` - -::code-group - - ::code-block{label="Preview"} - ::card-grid - #title - What's included? - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - :: - - ```md [Code] - ::card-grid - #title - What's included - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - ``` - -:: - -<!-- -::props{of="CardGrid"} -:: ---> - -::source-link ---- -source: "components/content/CardGrid.vue" ---- -:: - ---- - -## `<CodeGroup />` - -This component uses `slots` to create a tab panel of your code examples or preview. - -::code-group - - ::code-block{label="Preview" preview} - ::code-group - ```bash [Yarn] - yarn add docus - ``` - - ```bash [NPM] - npm install docus - ``` - :: - :: - - ```md [Code] - ::code-group - ```bash [Yarn] - yarn add docus - ``` - ```bash [NPM] - npm install docus - ``` - :: - ``` - -:: - -::source-link ---- -source: "components/content/CodeGroup.vue" ---- -:: - ---- - -## `<CodeBlock />` - -To be used inside a `<CodeGroup />` component to display a preview of some rendered code. - -::code-group - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: - -```md [Code] -/* Added as a child of `<CodeGroup />` */ - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: -``` - -:: - -<!-- -::props{of="CodeBlock"} -:: ---> - -::source-link ---- -source: "components/content/CodeBlock.vue" ---- -:: - ---- - -## `<CopyButton />` - - -::code-group - -::code-block{label="Preview" preview} - :copy-button{content="hey!"} -:: - -```md [Code] -:copy-button{content="hey!"} -``` - -:: - -<!-- -::props{of="CodeBlock"} -:: ---> - -::source-link ---- -source: "components/content/CopyButton.vue" ---- -:: - ---- - -## `<Icon />` - -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} - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - :: - - ```md [Code] - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - ``` - -:: - -<!-- -::props{of="Icon"} -:: ---> - -::source-link ---- -source: "components/content/Icon.vue" ---- -:: - ---- - -## `<List />` - -::code-group - - ::code-block{label="Preview" preview} - ::list{type="primary"} - - **Important** - - Always - :: - - ::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 [Code] - ::list{type="primary"} - - **Important** - - Always - :: - - ::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 - :: - ``` - -:: - -<!-- -::props{of="List"} -:: ---> - -::source-link ---- -source: "components/content/List.vue" ---- -:: - -<!-- ---- - -## `<Props />` - -The props component lets you display the available props from any other component in your project. - -It is powered by [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-component-meta). - -::code-group - - ::code-block{label="Preview" preview} - ::props{of="Icon"} - :: - :: - - ```md [Code] - ::props{of="Icon"} - :: - ``` - -:: - -::props{of="Props"} -:: - -::source-link ---- -source: "components/content/Props.vue" ---- -:: - ---- ---> -## `<Sandbox />` - -Embed CodeSandbox/StackBlitz easily in your documentation with great performances. - -Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. - -::code-group - - ::code-block{label="Preview" preview} - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - :: - - ```md [Code] - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - ``` - -:: - -<!-- -::props{of="Sandbox"} -:: ---> - -::source-link ---- -source: "components/content/Sandbox.vue" ---- -:: - ---- - -## `<Terminal />` - -::code-group - - ::code-block{label="Preview" preview} - :terminal{content="nuxi build"} - :: - - ```md [Code] - :terminal{content="nuxi build"} - ``` - -:: - -<!-- -::props{of="Terminal"} -:: ---> - -::source-link ---- -source: "components/content/Terminal.vue" ---- -:: - ---- - -## `<VideoPlayer />` - -::code-group - - ::code-block{label="Preview" preview} - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - :: - - ```md [Code] - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - ``` - -:: - -<!-- -::props{of="VideoPlayer"} -:: ---> - -::source-link ---- -source: "components/content/VideoPlayer.vue" ---- -:: diff --git a/docs/.docs/content/2.api/2.composables.md b/docs/.docs/content/2.api/2.composables.md deleted file mode 100644 index 4c0bea2..0000000 --- a/docs/.docs/content/2.api/2.composables.md +++ /dev/null @@ -1,88 +0,0 @@ -# Composables - -Discover the Docus composables to use in your custom Vue components and pages. - -## `useDocus()` - -`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts` - -- `config` refers to the merged config of the current page. - -`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file. - -The configs in `app.config` file will be used as defaults. - -```vue -<script setup> -const { config } = useDocus() -</script> - -<template> - <div> - <h1>{{ config.title }}</h1> - <p>{{ config.description }}</p> - </div> -</template> -``` - -- `tree` refers to the current navigation tree that is displayed in the `aside` component. - -```vue -<script setup> -const { tree } = useDocus() -</script> - -<template> - <DocsAsideTree :links="tree" /> -</template> -``` - -::source-link ---- -source: "composables/useDocus.ts" ---- -:: - -## `useMenu()` - -`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally. - -```ts -const { - // Is menu visible - visible, - // Close menu function - close, - // Open menu function - open, - // Toggle menu function - toggle -} = useMenu() -``` - -::source-link ---- -source: "composables/useMenu.ts" ---- -:: - -## `useScrollspy()` - -`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings. - -```ts -const { - // Headings on the page - visibleHeadings, - // Active headings (for the current page) - activeHeadings, - // Update headings (an array of DOM nodes) - updateHeadings -} = useScrollspy() -``` - -::source-link ---- -source: "composables/useScrollspy.ts" ---- -:: diff --git a/docs/.docs/content/2.api/3.layouts.md b/docs/.docs/content/2.api/3.layouts.md deleted file mode 100644 index 25dc458..0000000 --- a/docs/.docs/content/2.api/3.layouts.md +++ /dev/null @@ -1,43 +0,0 @@ -# Layouts -Docus provides multiple built-in layouts for displaying your Markdown pages. - -## `default` - -The default layout for every page created in the project. This layout renders multiple section alongside the content: - -- Aside navigation menu (togglable with `aside: false/true`) -- Page bottom section (togglable with `bottom: false/true`) -- Table of content (togglable with `toc: false/true`) - -```md [index.md] ---- -aside: true -bottom: true -toc: false ---- - -Your awesome content -``` - -Current page is live sample of default layout. - -## `page` - -`page` layout is content focused layout. This layout does not render aside menu of table of contents. - - -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. - -```md [index.md] ---- -title: Home -layout: page -fluid: true ---- -``` - -Check [Home page](/) as live sample of page layout diff --git a/docs/.docs/content/2.api/_dir.yml b/docs/.docs/content/2.api/_dir.yml deleted file mode 100644 index b340141..0000000 --- a/docs/.docs/content/2.api/_dir.yml +++ /dev/null @@ -1,2 +0,0 @@ -title: 'API' -icon: heroicons-outline:bookmark-alt |