diff --git a/docs/app.config.ts b/docs/app.config.ts
index 1781f1a..7448c1b 100644
--- a/docs/app.config.ts
+++ b/docs/app.config.ts
@@ -1,38 +1,46 @@
export default defineAppConfig({
docus: {
- title: 'Docus',
- description: 'The best place to start your documentation.',
+ title: 'Remark MDC',
+ description: 'Remark plugin to parse MarkDown Components syntax.',
image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+
socials: {
twitter: 'nuxt_js',
- github: 'nuxt-themes/docus',
+ github: 'nuxtlabs/remark-mdc',
nuxt: {
label: 'Nuxt',
icon: 'simple-icons:nuxtdotjs',
href: 'https://nuxt.com'
}
},
+
github: {
- dir: '.starters/default/content',
+ dir: 'docs/content',
branch: 'main',
- repo: 'docus',
- owner: 'nuxt-themes',
+ repo: 'remark-mdc',
+ owner: 'nuxtlabs',
edit: true
},
+
aside: {
level: 0,
collapsed: false,
exclude: []
},
+
main: {
padded: true,
fluid: true
},
+
header: {
- logo: true,
+ logo: false,
showLinkIcon: true,
exclude: [],
- fluid: true
- }
+ fluid: true,
+ title: 'Remark MDC'
+ },
+
+ titleTemplate: '%s · Remark MDC'
}
-})
+})
\ No newline at end of file
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
index d909fd8..5d8783c 100644
--- a/docs/content/0.index.md
+++ b/docs/content/0.index.md
@@ -1,99 +1,248 @@
---
title: Home
-navigation: false
-layout: page
-main:
- fluid: false
---
-:ellipsis{right=0px width=75% blur=150px}
-::block-hero
+# Remark MDC
+
+Remark plugin to parse MarkDown Components syntax.
+
+## Setup
+
+
+Add `remark-mdc` dependency to your project:
+
+::code-group
+```bash [Yarn]
+yarn add --dev remark-mdc
+```
+```bash [NPM]
+npm install --save-dev remark-mdc
+```
+```bash [PNPM]
+pnpm i --save-dev remark-mdc
+```
+::
+
+Then, add `remark-mdc` to the `unified` streams:
+
+```ts
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkMDC from 'remark-mdc'
+
+function parse(md: string) {
+ const processor = unified()
+ processor.use(remarkParse)
+
+ // Use `remark-mdc` plugin to parse mdc syntax
+ processor.use(remarkMDC)
+
+ // ...
+
+ return processor.process({ value: content, data: frontmatter })
+}
+```
+
+That's it ✨
+
+## Syntax
+
+### `^-` Frontmatter
+
+Front-matter is a convention of Markdown-based CMS to provide meta-data to documents, like description or title. Remark MDc uses the YAML syntax with `key: value` pairs.
+
+To define frontmatter, start your document with `---\n---` section and put your desired data in yaml format within this section.
+
+```md
---
-cta:
- - Get started
- - /introduction/getting-started
-secondary:
- - Open on GitHub →
- - https://github.com/nuxt-themes/docus
+title: 'Title of the page'
+description: 'meta description of the page'
---
-#title
-The best place to start your documentation.
+
+```
+
+### `:` Inline Components
+Inline components are entiries that will stick inside parent paragraph. Like spans, emojis, icons, etc. Inline component can be defined by single `:` followed by component name.
+
+```md
+A simple :inline-component
+```
+
+You may want to pass some text into an inline-component, you can do it using `[TEXT]` syntax
+
+```md
+A simple :inline-component[John Doe]
+```
+
+If you want to use an inline component followed by specific characters like `-`, `_` or `:`, you can use a dummy props specifier after it.
+
+```md
+How to say :hello{}-world in markdown
+```
+
+
+In this example, `:hello{}` will search for the `` component, and `-world` will be plain text.
+
+::alert
+Note: If you put an inline component alone in a single line it will be transformed to a block component. This is suger syntax for block components.
+```md
+Paragraph a
+
+:block-component
+
+Pargraph b
+```
+::
+
+### `::` Block Components
+
+Block components are components that accept Markdown content or another component as a slot.
+
+Block components defined by `::` identifier.
+
+```md
+::card
+The content of the card
+::
+```
+
+Block component can be used without any content.
+
+```md
+::card
+::
+```
+
+Or with suger syntax. Note that in suger syntax it is important to put the component alone in a separate line
+
+```md
+A paragraph
+
+:card
+```
+
+### `#` Slots
+
+Block components can accept slots (like vue slots) with different names. The content of these slots can be anything from normal markdown paragraph to a nested block component.
+
+- The `default` slot renders the top-level content inside the block component.
+- Named slots use the `#` identifier to render the corresponding content.
+
+```md
+::hero
+Default slot text
#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)
- ::
-
-#support
- ::terminal
- ---
- content:
- - npx nuxi@latest init -t themes/docus
- - cd docs
- - npm install
- - npm run dev
- ---
- ::
+This will be rendered inside the `description` slot.
+```
+
+### `:::` Nesting
+
+MDC supports nested components inside slots by indenting them. In order to make nested components visually distinguishable, you can indend nested components and add more `:` when you define them.
+
+```md
+::hero
+ :::card
+ A nested card
+
+ ::::card
+ A super nested card
+ ::::
+ :::
::
+```
+
+### `[]` Span
+
+To create inline spans in your text you can use the `[]` identifier.
+
+```md
+Hello [World]
+```
+
+This syntax is usefull in combination of inline props to make text visually different from rest of paragraph. Checkout inline props section to read more about props.
+
+```md
+Hello [World]{.bg-blue-500}!
+```
+
+### `{}` Inline Props
-::card-grid
-#title
-What's included
-
-#root
-:ellipsis{left=0px width=40rem top=10rem blur=140px}
-
-#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.
- ::
-
- ::card{icon=IconNuxtStudio}
- #title
- Nuxt Studio ready
- #description
- Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
- ::
-
- ::card{icon=logos:vue}
- #title
- Vue Components
- #description
- Use built-in components (or your own!) inside your content.
- ::
-
- ::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=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=noto:puzzle-piece}
- #title
- Extensible.
- #description
- Customize the whole design, or add components using slots - you can make Docus your own.
- ::
+Using the inline props syntax you can pass props and attributes to your components. Also you MDC goes goes a step further and allows you to pass attributes to markdown native elements like images, links, bold texts and etc.
+
+In order to define properties for a component or a markdown element, You need to create props scope `{}` exactly after the component/element definition. Then you can define the properties inline this scope using a `key=value` syntax.
+
+```md
+Inline :component{key="value" key2=value2}
+
+::block-component{no-border title="My Component"}
::
+
+[Link](https://nuxt.com){class="nuxt"}
+
+{class=".nuxt-logo"}
+
+`code`{style="color: red"}
+
+_italic_{style="color: blue"}
+
+**bold**{style="color: blue"}
+```
+
+There is also couple of suger syntaxes for common use-cases:
+
+- `id` attribute: `_italic_{#the_italic_text}`
+- `class` attribute: `**bold**{.bold .text.with_attribute}`
+- No value (boolean props): `:component{no-border}`
+- Single string without any space: `**bold**{class=red}`
+
+If you want to pass arrays or objects as props to components you can pass them as JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string:
+
+```md
+::dropdown{:items='["Nuxt", "Vue", "React"]'}
+String Array
+::
+
+::dropdown{:items='[1,2,3.5]'}
+Number Array
+::
+
+::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'}
+Object
+::
+```
+
+### `---` Yaml Props
+
+The YAML method uses the `---` identifier to declare one prop per line, that can be useful for readability.
+
+```md
+::icon-card
+---
+icon: IconNuxt
+description: Harness the full power of Nuxt and the Nuxt ecosystem.
+title: Nuxt Architecture.
+---
+::
+```
+
+
+## Contributing
+
+You can contribute to this module online with CodeSandBox:
+
+[](https://codesandbox.io/s/github/nuxt-modules/color-mode/tree/master/?fontsize=14&hidenavigation=1&theme=dark)
+
+Or locally:
+
+1. Clone this repository
+2. Install dependencies using `pnpm install`
+3. Start development server using `pnpm dev`
+
+## License
+
+[MIT License](https://github.com/nuxt-modules/color-mode/blob/master/LICENSE)
+
+Copyright (c) Nuxt Team
diff --git a/docs/content/1.introduction/1.getting-started.md b/docs/content/1.introduction/1.getting-started.md
deleted file mode 100644
index 4c08c14..0000000
--- a/docs/content/1.introduction/1.getting-started.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# Getting Started
-
-From your Markdown files to a deployed website in few minutes.
-
-## Play online
-
-You can start playing with Docus in your browser using Stackblitz:
-
-:button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank}
-
-## Create a new project
-
-1. Start a fresh Docus project with:
-
-```bash [npx]
-npx nuxi@latest init docs -t themes/docus
-```
-
-2. Install the dependencies in the `docs` folder:
-
-::code-group
-
- ```bash [npm]
- npm install
- ```
-
- ```bash [yarn]
- yarn install
- ```
-
- ```bash [pnpm]
- pnpm install --shamefully-hoist
- ```
-
-::
-
-3. Run the `dev` command to start Docus in development mode:
-
-::code-group
-
-```bash [npm]
-npm run dev
-```
-
-```bash [yarn]
-yarn dev
-```
-
-```bash [pnpm]
-pnpm run dev
-```
-
-::
-
-::alert{type="success"}
-✨ Well done! A browser window should automatically open for
-::
diff --git a/docs/content/1.introduction/2.project-structure.md b/docs/content/1.introduction/2.project-structure.md
deleted file mode 100644
index 1446a52..0000000
--- a/docs/content/1.introduction/2.project-structure.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Project Structure
-
-Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
-
-## Directory Structure
-
-This is the minimal directory structure to get an up and running Docus website.
-
-```bash
-content/
- index.md
-app.config.ts
-nuxt.config.ts
-```
-
-The `content/` directory is where you [write Markdown pages](/introduction/writing-pages).
-
-The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design.
-
-
-The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration).
diff --git a/docs/content/1.introduction/3.writing-pages.md b/docs/content/1.introduction/3.writing-pages.md
deleted file mode 100644
index a321324..0000000
--- a/docs/content/1.introduction/3.writing-pages.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Writing Pages
-
-Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
-
-Each Markdown pages in the `content/` folder will be mapped to a route.
-
-| File | Generated route |
-| ------------------------ | :-------------------- |
-| `index.md` | `/` |
-| `about.md` | `/about` |
-| `blog/index.md` | `/blog` |
-| `blog/hello.md` | `/blog/hello` |
-| `1.guide/2.installation` | `/guide/installation` |
-
-## Frontmatter
-
-Docus supports multiple Front-matter attributes for pages.
-
-```md [index.md]
----
-title: "Get Started"
-description: "Let's learn how to use my amazing module."
----
-```
-
-| **Key** | **Type** | **Default** | **Description** |
-| ----------------------- | --------- | ----------- | ------------------------------------------------------------- |
-| `layout` | `string` | `default` | Use any layout name like you would in `definePageMeta()` |
-| `title` | `string` | | Defines the page title and H1 in docs pages |
-| `description` | `string` | | Defines the page description and excerpt in docs pages |
-| `redirect` | `string` | | A route path to redirect |
-| `image` | `object` | | OpenGraph cover image |
-| **Docs layout options** | | | |
-| `aside` | `boolean` | | Toggles the visibility of aside navigation |
-| `toc` | `boolean` | | Toggles the visibility of table of contents |
-| `header` | `boolean` | | Toggles the visibility of the page header |
-| `bottom` | `boolean` | | Toggles the visibility of page bottom section |
-| **Navigation options** | | | |
-| `navigation` | `boolean` | | Toggles the visibility of the page or directory in navigation |
-| `navigation.title` | `string` | | Changes the name of the page or directory in navigation |
-| `navigation.icon` | `string` | | Changes the icon of the page or directory in navigation |
diff --git a/docs/content/1.introduction/4.configuration.md b/docs/content/1.introduction/4.configuration.md
deleted file mode 100644
index d7d8e1a..0000000
--- a/docs/content/1.introduction/4.configuration.md
+++ /dev/null
@@ -1,149 +0,0 @@
-# Configuration
-
-Learn how to configure Docus.
-
-::code-group
-
-```ts [Minimal app.config.ts]
-export default defineAppConfig({
- docus: {
- title: 'Docus',
- description: 'My Docus Project',
- url: 'http://docus.dev'
- }
-})
-```
-
-```ts [Complete app.config.ts]
-export default defineAppConfig({
- docus: {
- title: 'Docus',
- description: 'My Docus Project',
- url: 'http://docus.dev',
- image: '/social-card-preview.png',
- socials: {
- twitter: '@nuxt_js',
- github: 'nuxt-themes/docus',
- },
- github: {
- root: 'content',
- edit: true,
- contributors: false
- },
- layout: 'default',
- aside: {
- level: 1,
- filter: [],
- },
- header: {
- title: false,
- logo: true,
- showLinkIcon: false
- },
- footer: {
- credits: {
- icon: 'IconDocus',
- text: 'Powered by Docus',
- href: 'https://docus.dev',
- },
- textLinks: [
- {
- text: 'Nuxt',
- href: 'https://nuxt.com',
- target: '_blank',
- rel: 'noopener'
- }
- ],
- iconLinks: [
- {
- label: 'NuxtJS',
- href: 'https://nuxtjs.org',
- component: 'IconNuxtLabs',
- },
- {
- label: 'Vue Telescope',
- href: 'https://vuetelescope.com',
- component: 'IconVueTelescope',
- },
- ],
- }
- }
-})
-```
-
-::
-
-| **Key** | **Type** | **Default** | **Description** |
-| ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
-| `title` | `string` | Docus | Website title |
-| `titleTemplate` | `string` | Docus | Website title template |
-| `description` | `string` | My Docus Project | Website description |
-| `url` | `string` | | Website URL |
-| `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) |
-| **Socials** | | | |
-| `socials` | `object` | `{}` | Social links |
-| `socials.github` | `string` | | The repository to use on GitHub links |
-| `socials.twitter` | `string` | | The account to use on Twitter links |
-| `socials.youtube` | `string` | | The channel to use on Youtube links |
-| `socials.instagram` | `string` | | The account to use on Instagram links |
-| `socials.facebook` | `string` | | The account to use on Facebook links |
-| `socials.medium` | `string` | | The account to use on Medium links |
-| `socials.[social]` | `object` | | Override social or display custom one |
-| `socials.[social].label` | `string` | | A label to use for the social |
-| `socials.[social].icon` | `string` | | A icon to use for the social |
-| `socials.[social].href` | `string` | | A link to use for the social |
-| `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
-| **Header** | | | |
-| `header` | `object` | | Header configuration |
-| `header.logo` | `boolean` | | Whether or not to use `Logo.vue` as the header logo |
-| `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 |
-| `aside.level` | `string` | 0 | Aside base level of nesting |
-| `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories |
-| `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation |
-| **Footer** | | | |
-| `footer` | `object` | | Footer configuration |
-| `footer.credits` | `object` | | An object defining the bottom left credits |
-| `footer.credits.icon` | `object` | | The icon to use for the credits |
-| `footer.credits.text` | `object` | | The text to use for the credits |
-| `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer |
-| `footer.textLinks[0].text` | `string` | | The text to display |
-| `footer.textLinks[0].href` | `string` | | A link to use for the text |
-| `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context |
-| `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
-| `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer |
-| `footer.iconLinks[0].label` | `string` | | A label to use for the icon |
-| `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 |
-| `github.branch` | `string` | | Branch to start editing |
-| `github.repo` | `string` | | Name of the GitHub repo to edit files |
-| `github.owner` | `string` | | Owner of the repo |
-| `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages |
-**Search** ||||
-| `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) |
-
-
-## Customizing the logo
-
-To update the logo in the header, create a component in `components/Logo.vue` with your own logo.
-
-In this example, the image is located at `/public/img`.
-
-```vue [components/Logo.vue]
-
- 
-
-```
diff --git a/docs/content/1.introduction/_dir.yml b/docs/content/1.introduction/_dir.yml
deleted file mode 100644
index ff0894d..0000000
--- a/docs/content/1.introduction/_dir.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-icon: ph:star-duotone
-navigation.redirect: /introduction/getting-started
diff --git a/docs/content/2.api/1.components.md b/docs/content/2.api/1.components.md
deleted file mode 100644
index 74b17d8..0000000
--- a/docs/content/2.api/1.components.md
+++ /dev/null
@@ -1,693 +0,0 @@
-# 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
- - /introduction/getting-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/content/2.api/2.composables.md b/docs/content/2.api/2.composables.md
deleted file mode 100644
index 4c0bea2..0000000
--- a/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
-
-
-
-
-
{{ config.title }}
-
{{ config.description }}
-