From 3adc965dd09490b7efa1cce9f09b0a3b30970277 Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Wed, 19 Apr 2023 17:30:39 +0800 Subject: ✨优化文档 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.docs/content/2.api/1.components.md | 693 ++++++++++++++++++++++++++++++ docs/.docs/content/2.api/2.composables.md | 88 ++++ docs/.docs/content/2.api/3.layouts.md | 43 ++ docs/.docs/content/2.api/_dir.yml | 2 + 4 files changed, 826 insertions(+) create mode 100644 docs/.docs/content/2.api/1.components.md create mode 100644 docs/.docs/content/2.api/2.composables.md create mode 100644 docs/.docs/content/2.api/3.layouts.md create mode 100644 docs/.docs/content/2.api/_dir.yml (limited to 'docs/.docs/content/2.api') diff --git a/docs/.docs/content/2.api/1.components.md b/docs/.docs/content/2.api/1.components.md new file mode 100644 index 0000000..d22340f --- /dev/null +++ b/docs/.docs/content/2.api/1.components.md @@ -0,0 +1,693 @@ +# Components + +Discover every component you can use in your content. + + +## `` + +::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](/). + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Alert.vue" +--- +:: + +--- + +## `` + +`` support same types as ``. + +::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! + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Badge.vue" +--- +:: + +--- + +## `` + +::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. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/BlockHero.vue" +--- +:: + +--- + +## `` +::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} + ``` + +:: + + + +::source-link +--- +source: "components/content/ButtonLink.vue" +--- +:: + +--- + +## `` + +`` support same types as ``. + +::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. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Callout.vue" +--- +:: + +--- + +## `` + +::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. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Card.vue" +--- +:: + +--- + +## `` + +::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. + :: + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/CardGrid.vue" +--- +:: + +--- + +## `` + +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" +--- +:: + +--- + +## `` + +To be used inside a `` 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 `` */ + +::code-block{label="Preview" preview} + ::badge + Hello World! + :: +:: +``` + +:: + + + +::source-link +--- +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} + :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"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Icon.vue" +--- +:: + +--- + +## `` + +::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 + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/List.vue" +--- +:: + + +## `` + +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"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Sandbox.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview" preview} + :terminal{content="nuxi build"} + :: + + ```md [Code] + :terminal{content="nuxi build"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Terminal.vue" +--- +:: + +--- + +## `` + +::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"} + :: + ``` + +:: + + + +::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 new file mode 100644 index 0000000..4c0bea2 --- /dev/null +++ b/docs/.docs/content/2.api/2.composables.md @@ -0,0 +1,88 @@ +# 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 + + + +``` + +- `tree` refers to the current navigation tree that is displayed in the `aside` component. + +```vue + + + +``` + +::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 new file mode 100644 index 0000000..25dc458 --- /dev/null +++ b/docs/.docs/content/2.api/3.layouts.md @@ -0,0 +1,43 @@ +# 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 new file mode 100644 index 0000000..b340141 --- /dev/null +++ b/docs/.docs/content/2.api/_dir.yml @@ -0,0 +1,2 @@ +title: 'API' +icon: heroicons-outline:bookmark-alt -- cgit v1.2.3-70-g09d2