diff --git a/docs/components/AsideBottom.vue b/docs/components/AsideBottom.vue
index e7f603581..7356d8de6 100644
--- a/docs/components/AsideBottom.vue
+++ b/docs/components/AsideBottom.vue
@@ -41,9 +41,9 @@ export default defineComponent({
icon: 'IconWindi'
},
{
- title: 'Nuxt Content',
- url: 'https://content.nuxtjs.org',
- icon: 'IconNuxtContent'
+ title: 'CodeSandbox',
+ url: 'https://codesandbox.io/embed/docus-starter-1xsm7?hidenavigation=1&theme=dark',
+ icon: 'IconCodeSandbox'
}
]
}
diff --git a/docs/components/HeaderNavigation.vue b/docs/components/HeaderNavigation.vue
index 98121040d..861026b93 100644
--- a/docs/components/HeaderNavigation.vue
+++ b/docs/components/HeaderNavigation.vue
@@ -3,5 +3,9 @@
Get started
+
+
+ Back to Docs
+
diff --git a/docs/content/1.get-started/1.installation.md b/docs/content/1.get-started/1.installation.md
index e8ac76f0a..a5a0443f6 100644
--- a/docs/content/1.get-started/1.installation.md
+++ b/docs/content/1.get-started/1.installation.md
@@ -1,34 +1,36 @@
# Installation
-> Setting up beautiful documentation with Docus is one command away 🤙
+> Setting up a beautiful website with Docus is one command away. 🤙
-Docus is a pre-configured [Nuxt](https://nuxtjs.org) application, with [Windi CSS](https://windicss.org) and [Nuxt Content](https://content.nuxtjs.org).
+Docus is an opinionated [Nuxt](https://nuxtjs.org) application that allows you to generate **content-based websites** with ease.
## System Requirements
-- Node.js [12](https://nodejs.org/en/) or later
-- MacOS, Windows, and Linux are supported
+- Node.js [14](https://nodejs.org/en/) or above.
+- MacOS, Windows or Linux.
## Quick start
-### GitHub Template
-
-Start your documentation in a new GitHub repository by using our [GitHub template](https://github.com/nuxtlabs/docus-starter):
+### Clone locally
-::button-link{size="medium" blank href="https://github.com/nuxtlabs/docus-starter/generate"}
-Create a repo with the Docus starter
-::
+You can download the starter locally using [degit](https://github.com/Rich-Harris/degit).
-### Download locally
+This allows you to add documentation to your existing repository.
-You can download the starter locally using [degit](https://github.com/Rich-Harris/degit). This allows you to add documentation to your existing repository.
-
-```
+```bash
npx degit nuxtlabs/docus-starter#main docs
```
This command will create a new folder named `docs/` and download the Docus starter inside.
+### GitHub Template
+
+Start your documentation in a new GitHub repository by using our [GitHub template](https://github.com/nuxtlabs/docus-starter):
+
+::button-link{size="medium" blank href="https://github.com/nuxtlabs/docus-starter/generate"}
+Create a repo with the Docus starter
+::
+
### Vercel Template
Vercel lets you set up the starter on your favorite Git provider (GitHub, GitLab or Bitbucket) - and deploy for free.
@@ -37,39 +39,25 @@ Vercel lets you set up the starter on your favorite Git provider (GitHub, GitLab
Create and deploy using Vercel
::
-**See it in action**:
-
-::video-player{loop playsinline controls}
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
- type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.mp4
- type: video/mp4
-- src: https//res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.ogv
- type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1612886404/docus/docus-vercel_wwaryz.jpg
----
-::
-
## Directory Structure
-The directory structure of a minimal Docus project is the following:
+The directory structure of a minimal **Docus** project is the following:
```bash
| content/
---| index.md
----| settings.json
| static/
---| icon.png
---| preview.png
-| nuxt.config.js
+| nuxt.config.{ts|js}
+| docus.config.{ts|js}
| package.json
```
-- Configure Docus with [content/settings.json](/get-started/configuration)
-- Write your documentation within [content/{locale}](/usage/content)
- - Use our [included components](/usage/components)
-- Manage your images and assets in [static/](/usage/assets)
+- Configure Docus with [docus.config.js](/get-started/configuration).
+- Write your documentation within [content/](/writing/my-first-page).
+- Use our [included components](/theme/components) or yours.
+- Manage your images and assets in [static/](/features/assets).
## Start docus
@@ -81,4 +69,18 @@ yarn dev
The development server will listen on [http://localhost:4000](http://localhost:4000)
-Checkout the [Deployment](/more/deployment) section when you are ready to publish your documentation.
+Checkout the [Deployment](/feature/deployment) section when you are ready to publish your documentation.
+
+## Demo
+
+::video-player{loop playsinline controls}
+sources:
+- src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
+ type: video/webm
+- src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.mp4
+ type: video/mp4
+- src: https//res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.ogv
+ type: video/ogg
+poster: https://res.cloudinary.com/nuxt/video/upload/v1612886404/docus/docus-vercel_wwaryz.jpg
+---
+::
diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
index e8828f7da..d91b9ef75 100644
--- a/docs/content/1.get-started/2.configuration.md
+++ b/docs/content/1.get-started/2.configuration.md
@@ -1,121 +1,81 @@
# Configuration
-> Tailor Docus for your own identity easily :rainbow:
+> Tailor Docus for your own identity easily. 🌈
## Website
-You can create a `content/settings.json` file to configure the website.
+You need to create a `docus.config.js` file to configure the website.
-```json [content/settings.json]
-{
- "title": "Docus",
- "url": "https://docus.dev",
- // Optional
- "layout": "docs",
- "logo": "logo.svg",
- "twitter": "@nuxt_js",
- "github": "nuxtlabs/docus"
-}
-```
-
-### Properties
-
-| Key | Type | Description |
-|---------|------|-------------|
-| `title` | `String` | Documentation title |
-| `description` | `String` | Brief summary about documentation, added for search engine optimization and social sharing |
-| `url` | `String` | Url of your deployed documentation. |
-| `layout` | `String` | The layout of your documentation (defaults to `docs`). Can be changed to `readme` to have a one-page doc. |
-| `logo` | `String` `Object` | Logo of the project, can be an `Object` to set a logo per [color mode](https://github.com/nuxt-community/color-mode-module). To display the logo, see `header.logo` section. |
-| `header.logo` | `Boolean` | Defaults to `false`, set to `true` to display the logo in header. |
-| `header.title` | `Boolean` | Defaults to `true`, set to `false` to hide the title and only display the logo in header. |
-| `twitter` | `String` | Twitter username to link in the header. Example: `@nuxt_js`. |
-| `github` | `Object` or `String` | Can be a `String` to act as `github.repo` if no other config is needed. |
-| `github.repo` | `String` | GitHub repository for the project. This will enable displaying the last version, the releases page, the link at the top and the `Edit this page on GitHub link` on each page. Example: `nuxt/content`. |
-| `github.url` | `String` | For GitHub Enterprise, in addition to `github.repo`, you have to assign an url. Example: `https://hostname`. Defaults to `https://github.com`. |
-| `github.apiUrl` | `String` | For GitHub Enterprise, in addition to `github.repo`, you have to assign an api url. Example: `https://hostname/api/v3/repos`. Defaults to `https://api.github.com/repos`. |
-| `github.branch` | `String` | The default branch for the GitHub repository of your project, used in the `Edit this page on GitHub link` on each page (defaults to `main` if it cannot be detected). |
-| `github.dir` | `String` | The default dir of your project, used in the `Edit this page on GitHub link` on each page (defaults to `''`). Change it if docus is not at the root of your repository. |
-| `github.releases` | `Boolean` | Defaults to true, set to false to disable the releases page. |
-| `algolia` | `Object` | This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`. See example below. |
-| `credits` | `Boolean` | Defaults to `true`, set to `false` to hide `Made with Docus` credits |
-
-### Algolia Search
-
-This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`:
+::code-group
-```json [content/settings.json]
-"algolia": {
- "apiKey": "",
- "indexName": "",
- "langAttribute": "language"
+```javascript [Default config]
+export default {
+ title: "Docus",
+ url: "https://docus.dev",
+ description: 'Write in markdown, use Vue components, style with Windi CSS and enjoy the power of Nuxt.',
+ template: 'docs',
+ contentDir: 'content'
}
```
-If you use `i18n`, make sure the `` is the same as the html lang selector in the config (defaults to `language`).
-
-Take a look at the [@nuxt/content](https://github.com/algolia/docsearch-configs/blob/master/configs/nuxtjs_content.json) docsearch config for an example.
-
-## Theme
-
-Create `content/theme.json` file to configure the theme.
-
-```json [content/theme.json]
-{
- "colors": {
- "primary": "#06B6D4",
- "code": {
- "string": "#679c0d"
+```javascript [Full config]
+export default {
+ title: "Docus",
+ url: "https://docus.dev",
+ description: 'Write in markdown, use Vue components, style with Windi CSS and enjoy the power of Nuxt.',
+ template: 'docs',
+ contentDir: 'content',
+ layout: {
+ header: true,
+ footer: true,
+ aside: false,
+ asideClass: '',
+ fluid: false
+ },
+ github: {
+ repo: 'nuxtlabs/docus',
+ branch: 'main',
+ dir: 'docs',
+ releases: true,
+ url: 'https://github.com',
+ apiUrl: 'https://api.github.com/repos'
+ },
+ theme: {
+ header: {
+ title: false,
+ logo: {
+ dark: '/img/logo-dark.svg',
+ light: '/img/logo-light.svg'
+ }
+ },
+ colors: {
+ primary: '#00DC82'
}
}
}
```
-The theme design is based on a `primary` color to make it easy to override, you can specify it using `colors.primary` in your `content/theme.json`, the color palette (50 to 900) is generated using [theme-colors](https://github.com/nuxt-contrib/theme-colors).
-
+::
### Properties
| Key | Type | Description |
|---------|------|-------------|
-| `colors` | `Object` | An object containing all colors for the theme. |
-| `colors.primary` | `String` | The primary color of the theme, the value should be hexadecimal or rgb (`145,22,74`). Default value is `#3073F1`. |
-| `colors.code` | `Object` | The object containing the colors of Prism theme. You know the list of all available colors names, look at [Prism theme vars documentaion](https://github.com/antfu/prism-theme-vars#configuration)|
-
-## Nuxt
-
-`docus` exports a function to setup the `nuxt.config.js` and allows you to add/override the [Nuxt config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build).
-
-You can checkout the [default nuxt.config.js](https://github.com/nuxt/docus/blob/main/src/app/nuxt.config.js) from Docus. We use [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to merge the default configuration with the one provided.
-
-Example with custom configuration:
-
-```ts [nuxt.config.js]
-import { withDocus } from 'docus'
-
-export default withDocus({
- buildModules: [
- 'vue-plausible'
- ]
- plausible: {
- domain: 'docus.dev'
- }
-})
-```
-
-## Windi CSS
-
-You can override the [default Windi config](https://github.com/nuxt/docus/blob/main/src/theme/windi.config.js) by creating your own `windi.config.js`.
-
-```js [windi.config.js]
-module.exports = {
- theme: {
- extend: {
- // ...
- }
- }
-}
-```
-
-
-As with the [Nuxt config](#nuxt), we use [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to merge configurations.
+| `title` | `String` | Website title. |
+| `description` | `String` | Brief summary about your website, added for SEO and OpenGraph. |
+| `url` | `String` | Target URL of your website. |
+| `contentDir` | `String` | The path of your website content directory. |
+| `theme` | `Object` | Your theme configuration, see [here](/theme/settings) for default theme. |
+| **Layout** | | |
+| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader by default. |
+| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter by default. |
+| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid by default. |
+| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside by default. |
+| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation by default. |
+| :icon-git-hub{class="inline w-4 -mt-0.5"} **GitHub Module** | | |
+| `github.repo` | `String` | Your project repository. |
+| `github.branch` | `String` | The branch to link. |
+| `github.dir` | `String` | The directory in which Docus lives in that repository. |
+| `github.releases` | `Boolean` | If set to true, Docus will fetch Github releases. |
+| `github.url` | `String` | The root URL of GitHub. (set by default) |
+| `github.apiUrl` | `String` | The API URL of GitHub. (set by default) |
diff --git a/docs/content/2.usage/1.content.md b/docs/content/2.usage/1.content.md
deleted file mode 100644
index 767e81805..000000000
--- a/docs/content/2.usage/1.content.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-navigation:
- title: Content
----
-
-# Writing content for the docs
-
-Once you've set up your documentation, you may immediately start writing markdown inside the `content/` directory.
-
-```md [content/index.md]
----
-category: 'Getting started'
----
-
-# Introduction
-
-> Empower your Nuxt application with this awesome module.
-
-Introducing my awesome Nuxt module!
-```
-
-::alert
-type: info
----
-Checkout Nuxt Content documentation on [writing markdown content](https://content.nuxtjs.org/writing#markdown).
-::
-
-## Front-matter
-
-Every markdown file should define properties in its front-matter in order to work properly.
-
-| Key | Type | Description |
-|---------|--------| -----|
-| `title` | `String` | Title of the page (will also be injected in metas) |
-| `description` | `String` | Description of the page, will be added below the title and injected into the metas |
-| `navigation` | `false \| Object` | If set to `false`, the page will not display in Docus navigation menus and Next/Prev links |
-| `navigation.title` | `String` | If set, overrides the title that will be displayed in navigation menus |
-| `navigation.nested`| `Boolean`| If set to `false`, the nested pages will not display in Docus navigation menus |
-| `navigation.slot` | `String` | Mark the page to show in specific menu |
-| `navigation.exclusive` | `Boolean` | If set to `true`, other pages will not show in the left menu when user visiting the page or its nested pages. |
-| `version` | `Float` | Alert users that the page is new with a badge. Once the page is seen, the version is stored in localStorage and the badge won't be shown again until the version is incremented |
-| `fullscreen` | `Boolean` | Expands the page content and hides the table of contents |
-| `badge` | `String` | Adds a badge next to the page title |
-| `position` | `Number` | Position of the page within the category. By default we use the filename prefix `POSITION.`, example: `1.first-page.md` |
-| `draft` | `Boolean` | Mark the page as draft (and only display it in development mode). By default we use the filename suffix `.draft`, example: `3.my-draft-page.draft.md` |
-| `head` | `Object` | Add the HTML Head tags for the current page. The structure of head property is same as [Nuxt head method](https://nuxtjs.org/docs/2.x/components-glossary/pages-head/) but in YAML syntax. To know the list of options you can give to head, take a look at [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties) |
-| `toc` | `false \| object` | If set to `false`, it will disable the table of contents generation. |
-| `toc.title` | `String` | If set, overrides the title of table of contents section. |
-| `toc.depth` | `Number` | Determine the depth of generated TOC. Default value is `2`, which mean only detect `h2` and `h3` tags. |
-
-The **title** and **description** are automatically filed from the Markdown content:
-
-```md
-# Title of the page
-
-> Description of the page
-```
-
-You can overwrite them using the front-matter:
-
-```md
----
-title: Overwritten title
-description: Overwritten description
----
-
-# Title of the page
-
-> Description of the page
-```
-
-## Locales
-
-The first level of directories in the `content/` folder are the locales used with [nuxt-i18n](https://github.com/nuxt-community/i18n-module) as defined in your `nuxt.config.js`.
-
-If no `en` directory is specified, all the files inside `content/` will be considered as English:
-
-```bash
-content/
- 1.index.md
- 2.about.md
- setting.json
-```
-
-You can override the locales in your `nuxt.config.js`:
-
-```ts [nuxt.config.js]
-import { withDocus } from 'docus'
-
-export default withDocus({
- i18n: {
- locales: () => [{
- code: 'en',
- iso: 'en-US',
- file: 'en-US.js',
- name: 'English'
- }, {
- code: 'fr',
- iso: 'fr-FR',
- file: 'fr-FR.js',
- name: 'Français'
- }]
- }
-})
-```
-
-Then you'll need to use this directory structure:
-
-```bash
-content/
- en/
- 1.index.md
- 2.about.md
- fr/
- 1.index.md
- 2.about.md
- setting.json
-```
-
-::alert{type="info"}
-As explained in the [Nuxt config](/get-started/configuration#nuxt) section, we use `defu.arrayFn` to merge your config. You can override the `i18n.locales` array by using a function, or you can pass an array to concat with the default one (which only includes the `en` locale).
-::
-
-## Routing
-
-Each markdown page in the `content/` directory will become a page and will be listed in the left navigation.
-
-> You can also put your markdown files in subdirectories to generate sub-routes.
-
-**Example**
-
-::code-group
-
-``` [Directory structure]
-content/
- examples/
- basic-usage.md
- setup.md
-```
-
-``` [Generated routes]
-/examples/basic-usage
-/setup
-```
-
-::
-
-> You can take a look at our [docs content folder](https://github.com/nuxt/content/tree/dev/docs/content/en) to see an example
diff --git a/docs/content/2.usage/3.assets.md b/docs/content/2.usage/3.assets.md
deleted file mode 100644
index d295e0f4f..000000000
--- a/docs/content/2.usage/3.assets.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-navigation:
- title: Assets
----
-
-# Assets
-
-## Favicon and PWA Icon
-
-You can add a `static/icon.png` image to enable [nuxt-pwa](https://pwa.nuxtjs.org) and generate a favicon automatically.
-
-::alert
-`icon.png` should be a square of at least 512x512px.
-::
-
-## Social preview
-
-You can add a `static/preview.png` image to have a social preview image in your metas.
-
-::alert
-`preview.png` should be at least 640×320px (1280×640px for the best results).
-::
-
-## Images with dark mode
-
-Docus supports light and dark mode 🌗.
-
-In order to display an image for a specific mode, you can use `dark-img` and `light-img` classes.
-
-::code-group
-::code-block{label="Preview" active preview}
- :img{src="/logo-light.svg" class="light-img" alt="Logo light" style="margin:0;" width="219" height="40"}
- :img{src="/logo-dark.svg" class="dark-img" alt="Logo dark" style="margin:0;" width="219" height="40"}
-
Switch between light and dark mode:
-::
-
-```md [Code]
-:img{src="/logo-light.svg" class="light-img" alt="Logo light"}
-:img{src="/logo-dark.svg" class="dark-img" alt="Logo dark"}
-```
-::
-
-## High performance images
-
-Docus uses [@nuxt/image](https://images.nuxtjs.org) to resize and optimize images to improve page performance.
-
-In order to allow `@nuxt/image` to optimize _remote_ images you will need to add the remote host into the domains list in your `nuxt.config.js`.
-
-::code-group
-
-```js [nuxt.config]
-export default {
- image: {
- domains: ['https://image.nuxtjs.org']
- }
-}
-```
-
-```md [Code]
-
-```
-
-::code-block{label="Preview" preview}
- :nuxt-picture{src="https://image.nuxtjs.org/preview.png" width="1280" height="640"}
-::
-::
diff --git a/docs/content/2.usage/4.template.md b/docs/content/2.usage/4.template.md
deleted file mode 100644
index 5009b7edb..000000000
--- a/docs/content/2.usage/4.template.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Template
-
-> Customize your docs with slots or overwrite the templates components 🧩
-
-## Template Parts
-
-Docus template is designed to be simple and flexible. The template consists of four main components that create the structure of the template. ``, ``, `` and ``.
-
-Please take a look at the [components/templates/](https://github.com/nuxtlabs/docus/tree/main/src/components/templates) directory to jump right into the code.
-
-### ``
-
-This component declares the main structure of the page. ``, `` and `` are wrapped together inside this component.
-
-### ``
-
-The fixed component including logo, search box and utility actions.
-
-### ``
-
-The main menu of your documentation. It shows a list of all available contents of the site.
-
-### ``
-
-A wrapper component that contains everything about the page, including page content, table of contents and so on.
-
-### ``
-
-Display table of contents of the document. This component does not show on [fullscreen document](/usage/content#front-matter). This component shows inside the page on the right side of document content.
-
-### ``
-
-Display information about the document, including the last modified date and a link to edit the document. This component shows inside the page and under the document content.
-
-### ``
-
-Display links to the next and previous pages. This component shows inside the `` and under the ``.
-
-### ``
-
-The search box component that integrates with [Algolia Doc search](https://docsearch.algolia.com/). This component shows inside the ``.
-
-## Customize Template
-
-With the power of the [Nuxt Components](https://github.com/nuxt/components#overwriting-components), every part of the template is fully customizable. Overwriting a component is simple as creating a new component.
-
-To make a custom Header for your documentation, create a component in `components/Header.vue`:
-
-```vue [components/Header.vue]
-
-
-
-
- LOGO
-
-
-
- Custom Header content
-
-
-
-```
-
-## Slots
-
-Docus supports customizable slots in the template, which can be used to show custom information. Just create a component inside your `components` directory with the same name as the slot.
-
-For example to overwrite the `` slot, create `components/AsideTop.vue`:
-
-```vue [components/AsideTop.vue]
-
-
- Customized Content
-
-
-```
-
-Here is the complete list of available slots:
-
-- ``
-- ``
-- ``
-- ``
-- ``
-- ``
-- ``
-
-## Social Images
-
-Docus automatically generates a social preview image for every document. It uses the `social-image-preview` page to generate the images.
-
-If you want to customize social images for your documentation, create `social-image-preview.vue` inside `pages` directory and design your image.
diff --git a/docs/content/2.usage/_5.admin.md b/docs/content/2.usage/_5.admin.md
deleted file mode 100644
index 767002a1c..000000000
--- a/docs/content/2.usage/_5.admin.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Admin
-
-::alert{type="info"}
-Admin is currently under development. Informations below are related to developer experience for the Admin UI.
-::
-
-Admin application is a **Vue 3** app built aside from the current app.
-
-This app exposes an **HTTP API** allowing to perform **read/write** operations on the current project files and directories.
-
-The Docs app is rendered via an `iframe`, content updates are so reflected using **Docus core** and **WebSockets**.
-
-## Start the UI
-
-The admin UI can be launched without the Docs repository, using a command.
-
-```bash
-yarn dev:admin
-```
diff --git a/docs/content/2.writing/1.my-first-page.md b/docs/content/2.writing/1.my-first-page.md
new file mode 100644
index 000000000..33b7f8884
--- /dev/null
+++ b/docs/content/2.writing/1.my-first-page.md
@@ -0,0 +1,74 @@
+---
+navigation:
+ title: My first page
+---
+
+# Writing my first page
+
+> The fastest path to writing your content. 🏎
+
+Let's walk through the creation of a simple introduction page.
+
+## Create the file
+
+With Docus, a page is a Markdown file inside content directory.
+
+``` [Directory structure]
+content/
+ 1.index.md
+```
+
+## Write Front-matter
+
+Specifying [Front-matter](/writing/front-matter) data lets you configure your page data.
+
+```markdown [index.md]
+---
+navigation: false // We want to hide this page from navigation
+layout: // Hide aside on large screens, preserve it for mobile
+ asideClass: 'block lg:hidden'
+ aside: true
+ footer: false
+---
+```
+
+## Use your components
+
+Using our custom syntax, you can easily add and configure components into your pages.
+
+```markdown [index.md]
+... Front-matter 👆
+
+::block-hero
+cta:
+ - Get started
+ - /get-started/installation
+secondary:
+ - Open on GitHub →
+ - https://github.com/nuxtlabs/docus
+snippet: npx degit nuxtlabs/docus-starter#main docs
+---
+
+---title
+The next big thing
+
+---description
+The favorite package of your favorite package.
+::
+```
+
+## Add Markdown content
+
+Using our custom Prose system, you can use Markdown and customize its rendering with ease.
+
+```markdown [index.md]
+... Block Hero component 👆
+
+Don't forget to follow us on [**Twitter**](https://twitter.com/nuxtlabs).
+
+[Go back](/writing/my-first-page).
+```
+
+## Checkout your work!
+
+Visit the [example page](/writing/example-page).
diff --git a/docs/content/2.writing/2.syntax.md b/docs/content/2.writing/2.syntax.md
new file mode 100644
index 000000000..92c96fd6f
--- /dev/null
+++ b/docs/content/2.writing/2.syntax.md
@@ -0,0 +1,295 @@
+# Syntax
+
+> Docus syntax makes you love your components even more. 🤝
+
+Docus writing experience is based on a specific syntax built upon Vue components.
+
+It enables you to write **inline** and **block** components straight from your Markdown files.
+
+It allows you to write Markdown documents interacting deeply with any component from your `components` directory.
+
+Docus default theme also comes with a lot of [pre-defined components](/theme/components).
+
+## Component Blocks
+
+Component blocks is the first usage of this new syntax.
+
+There is a few things to know about it:
+
+- To create a component block you have to use **`::`** blocks.
+
+::code-group
+
+ ```md [Code]
+ ::alert
+ The alert component.
+ ::
+ ```
+
+ ::code-block{label="Preview" preview}
+ ::alert
+ The alert component.
+ ::
+ ::
+::
+
+- The component name has to be in **snake-case**.
+
+```markdown
+::code-block
+::
+```
+
+- This syntax supports **Props**.
+
+::code-group
+ ```md [Code]
+ // Inline method
+ ::alert{type="warning"}
+ The **alert** component.
+ ::
+
+
+ // YAML Method
+ ::card
+ icon: IconNuxt
+ description: Harness the full power of Nuxt and the Nuxt ecosystem.
+ iconClass: 'text-hex-00DC82'
+ title: Nuxt Architecture.
+ ---
+ ::
+ ```
+
+ ```vue [Components]
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+ ```
+
+ ::code-block{label="Preview" preview}
+ ::alert{type="warning"}
+ The **alert** component.
+ ::
+
+ ::card
+ icon: IconNuxt
+ description: Harness the full power of Nuxt and the Nuxt ecosystem.
+ iconClass: 'text-hex-00DC82'
+ title: Nuxt Architecture.
+ ---
+ ::
+ ::
+::
+
+- This syntax supports **Markdown rendering**.
+
+::code-group
+
+ ```md [Code]
+ ::alert
+ The **alert** component.
+ ::
+ ```
+
+ ```vue [Component]
+
+ ```
+
+ ::code-block{label="Preview" preview}
+ ::card
+ icon: IconNuxt
+ title: A complex card.
+ ---
+
+ Default slot
+
+ ---description
+ ::alert
+ Description slot
+ ::
+ ::
+ ::
+::
+
+- You can **indent** the content of these blocks.
+
+::code-group
+
+ ```md [Code]
+ ::card
+ icon: IconNuxt
+ title: A complex card.
+ ---
+
+ Default slot
+
+ ---description
+ ::alert
+ Description slot
+ ::
+ ::
+ ```
+
+ ::code-block{label="Preview" preview}
+ ::card
+ icon: IconNuxt
+ title: A complex card.
+ ---
+
+ Default slot
+
+ ---description
+ ::alert
+ Description slot
+ ::
+ ::
+ ::
+::
+
+- You can add more `::::` when nesting components as a visual reminder.
+
+::code-group
+
+ ```md [Code]
+ ::card
+ icon: IconNuxt
+ title: A complex card.
+ ---
+
+ Default slot
+
+ ---description
+ :::alert
+ Description slot
+ :::
+ ::
+ ```
+
+ ::code-block{label="Preview" preview}
+ ::card
+ icon: IconNuxt
+ title: A complex card.
+ ---
+
+ Default slot
+
+ ---description
+ :::alert
+ Description slot
+ :::
+ ::
+ ::
+::
+
+## Inline Components
+
+Inline components are used to put components in the middle of any Markdown block.
+
+- They only need one **`:`** in front of the component name.
+
+```markdown
+:icon-nuxt
+```
+
+- They do not support **Slots**, but only **Props**.
+
+::code-group
+
+ ```md [Code]
+ Hello Nuxt Icon :icon-nuxt{class="inline w-6"} 👋
+ ```
+
+ ::code-block{label="Preview" preview}
+ Hello Nuxt Icon :icon-nuxt{class="inline w-6"} 👋
+ ::
+::
diff --git a/docs/content/2.writing/3.front-matter.md b/docs/content/2.writing/3.front-matter.md
new file mode 100644
index 000000000..9f98f786a
--- /dev/null
+++ b/docs/content/2.writing/3.front-matter.md
@@ -0,0 +1,89 @@
+# Front-matter
+
+> Easily configure the rendering of your Markdown pages. 📝
+
+Front-matter is used to transmit data to your components and templates, from any page or directory.
+
+## Native parameters
+
+Docus core and default theme includes a lot of native parameters that you can already use to configure your pages.
+
+| Key | Type | Description |
+|---------|--------| -----|
+| `title` | `String` | Title of the page (will also be injected in metas) |
+| `description` | `String` | Description of the page, will be added below the title and injected into the metas |
+| `version` | `Float` | Alert users that the page is new with a badge. Once the page is seen, the version is stored in localStorage and the badge won't be shown again until the version is incremented |
+| `badge` | `String` | Adds a badge next to the page title |
+| `position` | `Number` | Position of the page within the category. By default we use the filename prefix `POSITION.`, example: `1.first-page.md` |
+| `draft` | `Boolean` | Mark the page as draft (and only display it in development mode). By default we use the filename suffix `.draft`, example: `3.my-draft-page.draft.md` |
+| `head` | `Object` | Add the HTML Head tags for the current page. The structure of head property is same as [Nuxt head method](https://nuxtjs.org/docs/2.x/components-glossary/pages-head/) but in YAML syntax. To know the list of options you can give to head, take a look at [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties) |
+| **Navigation** | | |
+| `navigation` | `false \| Object` | If set to `false`, the page will not display in Docus navigation menus and Next/Prev links |
+| `navigation.title` | `String` | If set, overrides the title that will be displayed in navigation menus |
+| `navigation.nested`| `Boolean`| If set to `false`, the nested pages will not display in Docus navigation menus |
+| `navigation.exclusive` | `Boolean` | If set to `true`, other pages will not show in the left menu when user visiting the page or its nested pages. |
+| `navigation.collapse` | `Boolean` | If set to `true` in an `index.md`, the category will be collapsed by default in aside navigation. |
+| `navigation.redirect` | `String` | If set in an `index.md`, the page will redirect to the specified path when loaded, can be useful for empty categories pages. |
+| **Table of Contents** | | |
+| `toc` | `false \| Object` | If set to `false`, it will disable the table of contents generation. |
+| `toc.title` | `String` | If set, overrides the title of table of contents section. |
+| `toc.depth` | `Number` | Determine the depth of generated TOC. Default value is `2`, which mean only detect `h2` and `h3` tags. |
+| **Layout** | | |
+| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader. |
+| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter. |
+| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid. |
+| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside. |
+| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation. |
+
+## Shortcuts
+
+The **title** and **description** are automatically filled in from the Markdown content:
+
+```md
+# Title of the page
+
+> Description of the page
+```
+
+You can overwrite them using the Front-matter:
+
+```md
+---
+title: Overwritten title
+description: Overwritten description
+---
+
+# Title of the page
+
+> Description of the page
+```
+
+## Inheritance
+
+`navigation` and `layout` keys are inherited to direct directory and childrens.
+
+You can set defaults for a whole directory tree by editing its `index.md` Front-matter.
+
+``` [Directory structure]
+content/
+ 1.examples/
+ index.md
+ 1.first-example.md
+ 2.second-example.md
+ 3.third-example.md
+```
+
+```markdown [index.md]
+---
+layout:
+ aside: false
+ footer: false
+navigation:
+ title: Example
+ exclusive: true
+---
+```
+
+In that example, all childrens of `1.examples/` will have `aside` and `footer` set to false by default.
+
+This way, you can create complex website structures effortlessly.
diff --git a/docs/content/2.writing/4.prose.md b/docs/content/2.writing/4.prose.md
new file mode 100644
index 000000000..e334cfa73
--- /dev/null
+++ b/docs/content/2.writing/4.prose.md
@@ -0,0 +1,325 @@
+# Prose
+
+> Customizing your Markdown rendering has never been easier. 🧙♂️
+
+Docus Markdown rendering preserves the HTML structure of your file.
+
+We are using a per-tag component system that allows you to customize your Markdown rendering per HTML tag.
+
+## Components
+
+Here is a list of all the Prose components currently implemented.
+
+
+### `ProseA`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseA.vue)
+
+::code-group
+
+ ```markdown [Code]
+ [Link](/writing/prose)
+ ````
+
+ ::code-block{label="Preview"}
+ [Link](/writing/prose)
+ ::
+
+::
+
+### `ProseBlockquote`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue)
+
+::code-group
+
+ ```markdown [Code]
+ > Block quote
+ ````
+
+ ::code-block{label="Preview"}
+ > Block quote
+ ::
+
+::
+
+### `ProseCode`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseCode.vue)
+
+::code-group
+
+ ```markdown [Code]
+ ```javascript
+ export default () => {
+ console.log('Code block')
+ }
+ ```
+ ```
+
+ ::code-block{label="Preview"}
+
+ ```javascript
+ export default () => {
+ console.log('Code block')
+ }
+ ```
+
+ ::
+
+::
+
+### `ProseCodeInline`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue)
+
+`code inline`.
+
+::code-group
+
+ ```markdown [Code]
+ `code inline`.
+ ```
+
+ ::code-block{label="Preview"}
+ `code inline`.
+ ::
+
+::
+
+### `ProseH1`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseH1.vue)
+
+::code-group
+
+ ```markdown [Code]
+ # H1 Heading
+ ```
+
+ ::code-block{label="Preview"}
+ # H1 Heading
+ ::
+
+::
+
+### `ProseH2`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseH2.vue)
+
+::code-group
+
+ ```markdown [Code]
+ ## H2 Heading
+ ```
+
+ ::code-block{label="Preview"}
+ ## H2 Heading
+ ::
+
+::
+
+### `ProseH3`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseH3.vue)
+
+::code-group
+
+ ```markdown [Code]
+ ### H3 Heading
+ ```
+
+ ::code-block{label="Preview"}
+ ### H3 Heading
+ ::
+
+::
+
+### `ProseHr`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseHr.vue)
+
+::code-group
+
+ ```markdown [Code]
+ Divider under.
+
+ ---
+
+ Divider above.
+ ```
+
+ ::code-block{label="Preview"}
+ Divider under.
+
+ ---
+
+ Divider above.
+ ::
+
+::
+
+### `ProseImg`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseImg.vue)
+
+::code-group
+
+ ```markdown [Code]
+ 
+ ```
+
+ ::code-block{label="Preview"}
+ 
+ ::
+
+::
+
+### `ProseUl`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseUl.vue)
+
+::code-group
+
+ ```markdown [Code]
+ - Just
+ - An
+ - Unordered
+ - List
+ ```
+
+ ::code-block{label="Preview"}
+ - Just
+ - An
+ - Unordered
+ - List
+ ::
+
+::
+
+### `ProseLi`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseLi.vue)
+
+::code-group
+
+ ```markdown [Code]
+ - List element
+ ```
+
+ ::code-block{label="Preview"}
+ - List element
+ ::
+
+::
+
+### `ProseOl`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseOl.vue)
+
+::code-group
+
+ ```markdown [Code]
+ 1. Foo
+ 2. Bar
+ 3. Baz
+ ```
+
+ ::code-block{label="Preview"}
+ 1. Foo
+ 2. Bar
+ 3. Baz
+ ::
+
+::
+
+### `ProseParagraph`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseParagraph.vue)
+
+::code-group
+
+ ```markdown [Code]
+ Just a paragraph.
+ ```
+
+ ::code-block{label="Preview"}
+ Just a paragraph.
+ ::
+::
+
+### `ProseStrong`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseStrong.vue)
+
+::code-group
+
+ ```markdown [Code]
+ **Just a strong paragraph.**
+ ```
+
+ ::code-block{label="Preview"}
+ **Just a strong paragraph.**
+ ::
+::
+
+### `ProseTable`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTable.vue)
+
+::code-group
+
+ ```markdown [Code]
+ | Key | Type | Description |
+ |---------|--------| -----|
+ | 1 | Wonderful | Table |
+ | 2 | Wonderful | Data |
+ | 3 | Wonderful | Website |
+ ```
+
+ ::code-block{label="Preview"}
+ | Key | Type | Description |
+ |---------|--------| -----|
+ | 1 | Wonderful | Table |
+ | 2 | Wonderful | Data |
+ | 3 | Wonderful | Website |
+ ::
+
+### `ProseTbody`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTbody.vue)
+
+Included in **ProseTable** example.
+
+### `ProseTd`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTd.vue)
+
+Included in **ProseTable** example.
+
+### `ProseTh`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTh.vue)
+
+Included in **ProseTable** example.
+
+### `ProseThead`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseThead.vue)
+
+Included in **ProseTable** example.
+
+### `ProseTr`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTr.vue)
+
+Included in **ProseTable** example.
+
+## Customizing
+
+If you want to customize a Prose component, here are the recommended steps:
+
+- Checkout the original component sources.
+- Use the exact same props.
+- Name it the same from your `components/` directory or subdirectories.
+- Make it yours. 🚀
diff --git a/docs/content/2.writing/example-page.md b/docs/content/2.writing/example-page.md
new file mode 100644
index 000000000..5e1b6af7a
--- /dev/null
+++ b/docs/content/2.writing/example-page.md
@@ -0,0 +1,28 @@
+---
+navigation: false
+layout:
+ asideClass: 'block lg:hidden'
+ aside: true
+ footer: false
+---
+
+::block-hero
+cta:
+ - Get started
+ - /get-started/installation
+secondary:
+ - Open on GitHub →
+ - https://github.com/nuxtlabs/docus
+snippet: npx degit nuxtlabs/docus-starter#main docs
+---
+
+---title
+The next big thing
+
+---description
+The favorite package of your favorite package.
+::
+
+Don't forget to follow us on [Twitter](https://twitter.com/nuxtlabs).
+
+[Go back](/writing/my-first-page).
diff --git a/docs/content/3.features/1.routing.md b/docs/content/3.features/1.routing.md
new file mode 100644
index 000000000..a185f63a3
--- /dev/null
+++ b/docs/content/3.features/1.routing.md
@@ -0,0 +1,59 @@
+# Filesystem routing
+
+> A good looking website from any directory. 🔮
+
+Each markdown page in the `contentDir` directory will become a page and will be listed in the left navigation.
+
+You can also put your markdown files in nested directories to generate nested routes.
+
+**Example**
+
+::code-group
+
+``` [Directory structure]
+content/
+ examples/
+ basic-usage.md
+ setup.md
+```
+
+``` [Generated routes]
+/examples/basic-usage
+/setup
+```
+
+::
+
+## Ordering
+
+You can easily build the navigation order from any directory using number prefixes.
+
+```
+content/
+ 1.examples/
+ index.md
+ 1.vercel.md
+ 2.netlify.md
+ 3.heroku.md
+ 2.frameworks/
+ 1.vue.md
+ 2.nuxt.md
+```
+
+## Filtering
+
+If you are working on a draft that you do not want to be displayed from the navigation, just prefix it with "_".
+
+It will ignore this file and it will not be accessible unless you're in **development** or **admin** mode.
+
+You can still use the content from these files using [`InjectContent`](/theme/components#inject-content) component.
+
+```
+content/
+ 1.examples/
+ _hidden.md // Hidden file
+ _2.frameworks/ // Hidden directory
+ hidden.md
+```
+
+> You can take a look at our [docs content folder](https://github.com/nuxt/content/tree/dev/docs/content/en) to see an example
diff --git a/docs/content/3.features/2.localization.md b/docs/content/3.features/2.localization.md
new file mode 100644
index 000000000..439aff674
--- /dev/null
+++ b/docs/content/3.features/2.localization.md
@@ -0,0 +1,53 @@
+# Localization
+
+> Enable i18n just by creating a directory. 🗺
+
+The first level of directories in the `content/` folder are the locales used with [nuxt-i18n](https://github.com/nuxt-community/i18n-module) as defined in your `nuxt.config.js`.
+
+If no `en` directory is specified, all the files inside `content/` will be considered as **English**:
+
+```bash
+content/
+ 1.index.md
+ 2.about.md
+ setting.json
+```
+
+You can override the locales in your `nuxt.config.js`:
+
+```ts [nuxt.config.js]
+import { withDocus } from 'docus'
+
+export default withDocus({
+ i18n: {
+ locales: () => [{
+ code: 'en',
+ iso: 'en-US',
+ file: 'en-US.js',
+ name: 'English'
+ }, {
+ code: 'fr',
+ iso: 'fr-FR',
+ file: 'fr-FR.js',
+ name: 'Français'
+ }]
+ }
+})
+```
+
+Then you'll need to use this directory structure:
+
+```bash
+content/
+ en/
+ 1.index.md
+ 2.about.md
+ fr/
+ 1.index.md
+ 2.about.md
+ setting.json
+```
+
+::alert{type="info"}
+As explained in the [Nuxt config](/get-started/configuration#nuxt) section, we use `defu.arrayFn` to merge your config. You can override the `i18n.locales` array by using a function, or you can pass an array to concat with the default one (which only includes the `en` locale).
+::
diff --git a/docs/content/3.features/3.assets.md b/docs/content/3.features/3.assets.md
new file mode 100644
index 000000000..a1dc898b0
--- /dev/null
+++ b/docs/content/3.features/3.assets.md
@@ -0,0 +1,99 @@
+# Assets
+
+> Easily import and optimize your assets with pre-defined modules. 🙈
+
+## Favicon and PWA Icon
+
+You can add a `static/icon.png` image to enable [nuxt-pwa](https://pwa.nuxtjs.org) and generate a favicon automatically.
+
+::alert
+`icon.png` should be a square of at least 512x512px.
+::
+
+## Social preview
+
+You can add a `static/preview.png` image to have a social preview image in your metas.
+
+::alert
+`preview.png` should be at least 640×320px (1280×640px for the best results).
+::
+
+## Images with dark mode
+
+In order to display an image for a specific color mode, you can use two classes:
+
+- `dark-img`
+- `light-img`
+
+::code-group
+ ::code-block{label="Preview" active preview}
+ :img{src="/logo-light.svg" class="light-img" alt="Logo light" style="margin:0;" width="219" height="40"}
+ :img{src="/logo-dark.svg" class="dark-img" alt="Logo dark" style="margin:0;" width="219" height="40"}
+
Switch between light and dark mode:
+ ::
+
+ ```md [Code]
+ :img{src="/logo-light.svg" class="light-img" alt="Logo light"}
+ :img{src="/logo-dark.svg" class="dark-img" alt="Logo dark"}
+ ```
+::
+
+## High performance images
+
+Docus uses [@nuxt/image](https://images.nuxtjs.org) to resize and optimize images to improve page performance.
+
+In order to allow `@nuxt/image` to optimize _remote_ images you will need to add the remote host into the domains list in your `nuxt.config.js`.
+
+::code-group
+
+ ```js [nuxt.config]
+ export default {
+ image: {
+ domains: ['https://image.nuxtjs.org']
+ }
+ }
+ ```
+
+ ```md [Code]
+
+ ```
+
+ ::code-block{label="Preview" preview}
+ :nuxt-picture{src="https://image.nuxtjs.org/social.png" width="1280" height="640"}
+ ::
+::
+
+## Video player components
+
+Docus includes a **Video Player** component.
+
+::code-group
+
+ ```markdown [Markdown]
+ ::video-player{loop playsinline controls}
+ sources:
+ - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
+ type: video/webm
+ - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.mp4
+ type: video/mp4
+ - src: https//res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.ogv
+ type: video/ogg
+ poster: https://res.cloudinary.com/nuxt/video/upload/v1612886404/docus/docus-vercel_wwaryz.jpg
+ ---
+ ::
+ ```
+
+ ::code-block{label="Preview"}
+ ::video-player{loop playsinline controls}
+ sources:
+ - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
+ type: video/webm
+ - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.mp4
+ type: video/mp4
+ - src: https//res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.ogv
+ type: video/ogg
+ poster: https://res.cloudinary.com/nuxt/video/upload/v1612886404/docus/docus-vercel_wwaryz.jpg
+ ---
+ ::
+ ::
+::
diff --git a/docs/content/3.features/4.social-image.md b/docs/content/3.features/4.social-image.md
new file mode 100644
index 000000000..7756a3828
--- /dev/null
+++ b/docs/content/3.features/4.social-image.md
@@ -0,0 +1,9 @@
+# Social Images
+
+> Docus automatically generates a social preview image for every document. 🤳
+
+It uses the `social-image-preview` page to generate the images.
+
+If you want to customize social images for your documentation, create `social-image-preview.vue` inside `pages` directory and design your image.
+
+Here is the [current social image preview](/social-image-preview).
diff --git a/docs/content/3.more/3.deployment.md b/docs/content/3.features/5.deployment.md
similarity index 64%
rename from docs/content/3.more/3.deployment.md
rename to docs/content/3.features/5.deployment.md
index db9eb122d..4a865451d 100644
--- a/docs/content/3.more/3.deployment.md
+++ b/docs/content/3.features/5.deployment.md
@@ -1,6 +1,6 @@
# Deployment
-> Deploy your documentation with Docus to any static hosting 🪶
+> Deploy your documentation with Docus to any static hosting. 🪶
To generate the documentation for production, run the following command:
@@ -22,13 +22,19 @@ A `dist/` directory will be generated, ready to be deployed on any static hostin
## Cloudflare
-[Cloudflare Pages](https://pages.cloudflare.com) is a JAMstack platform for collaborating on and deploying websites. With an effortless Git integration, it will deploy your Docus site within minutes.
+[Cloudflare Pages](https://pages.cloudflare.com) is a JAMstack platform for collaborating on and deploying websites.
+
+With an effortless Git integration, it will deploy your Docus site within minutes.
Visit the Cloudflare Pages section in your account dashboard and import your project.
Deploy with Cloudflare Pages
-After selecting your git repository, choose `Nuxt` for **"Framework preset"**. Cloudflare will automatically select the correct settings for your Docus project. Once your project has been imported, all subsequent pushes to the main branch will trigger a deployment.
+After selecting your git repository, choose `Nuxt` for **"Framework preset"**.
+
+Cloudflare will automatically select the correct settings for your Docus project.
+
+Once your project has been imported, all subsequent pushes to the main branch will trigger a deployment.
## DigitalOcean
@@ -38,7 +44,9 @@ Start by clicking on the below link.
Deploy with DigitalOcean Apps
-Once you logged in, you should connect your project repository with DigitalOcean. Connect your project and select your main branch, DigitalOcean will build and deploy this branch.
+Once you logged in, you should connect your project repository with DigitalOcean.
+
+Connect your project and select your main branch, DigitalOcean will build and deploy this branch.
In the next step, you should:
@@ -48,10 +56,11 @@ In the next step, you should:
Finally, choose a name for your website and wait for the deployment to complete.
-
## GitHub
-The best way to deploy Docus on GitHub Pages is using [GitHub Actions](https://github.com/features/actions). GitHub Actions will build, generate and publish your documentation on GitHub Pages.
+The best way to deploy Docus on GitHub Pages is using [GitHub Actions](https://github.com/features/actions).
+
+GitHub Actions will build, generate and publish your documentation on GitHub Pages.
If you have a workflow you need to append a new step to your existing workflow.
@@ -63,9 +72,13 @@ If you have a workflow you need to append a new step to your existing workflow.
folder: ./dist
```
-**Note**: You must insert this step after `generate`. This step uses the [Deploy to GitHub Pages Action](https://github.com/marketplace/actions/deploy-to-github-pages) to push the generated files from the `dist` folder to your default GitHub Pages branch `gh-pages`.
+**Note**: You must insert this step after `generate`.
-If you don't have a workflow you will need to create a new one. Create a new file called `gh-pages.yml` in `.github/workflows` directory and paste the following content into the file.
+This step uses the [Deploy to GitHub Pages Action](https://github.com/marketplace/actions/deploy-to-github-pages) to push the generated files from the `dist` folder to your default GitHub Pages branch `gh-pages`.
+
+If you don't have a workflow you will need to create a new one.
+
+Create a new file called `gh-pages.yml` in `.github/workflows` directory and paste the following content into the file.
```yaml [.github/workflows/gh-pages.yml]
name: gh-pages
@@ -101,13 +114,21 @@ jobs:
folder: ./dist
```
-Save the file and push it to the repository. Check out the Actions tab in your GitHub repository and you'll see the running job. Once the job has finished, your site should be live.
+Save the file and push it to the repository.
+
+Check out the Actions tab in your GitHub repository and you'll see the running job.
+
+Once the job has finished, your site should be live.
## GitLab
-To deploy Docus to GitLab Pages to can use [`GitLab CI`](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/). GitLab uses specific [artifact](https://docs.gitlab.com/ee/ci/pipelines/job_artifacts.html) to detect the public content of your projects and deploy it as static pages.
+To deploy Docus to GitLab Pages you can use [`GitLab CI`](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/).
+
+GitLab uses specific [artifacts](https://docs.gitlab.com/ee/ci/pipelines/job_artifacts.html) to detect the public content of your projects and deploy it as static pages.
-Create `.gitlab-ci.yml` in the root directory of your project and paste the following content into the file. If you already have `gitlab-ci.yml`, edit the file and add `pages` section into it.
+Create `.gitlab-ci.yml` in the root directory of your project and paste the following content into the file.
+
+If you already have a `gitlab-ci.yml`, edit the file and add `pages` section into it.
```yaml [.gitlab-ci.yml]
image: node:14
@@ -123,22 +144,29 @@ pages:
- public
```
-Save the file and push it to the repository. Check out running pipeline in `CI / CD` > `Pipelines` section. When it succeeds, go to `Settings` > `Pages` to view the URL where your site is now available.
+Save the file and push it to the repository.
+
+Check out running pipeline in `CI / CD` > `Pipelines` section.
+When it succeeds, go to `Settings` > `Pages` to view the URL where your site is now available.
## Netlify
-[Netlify](https://www.netlify.com) has Git-based Deployment that will continuously deploy every time you push to main (or whatever branch you choose).
-Just click on the below button and import your project into Netlify. Netlify will detect that you are using Docus and will enable the correct settings for your deployment.
+[Netlify](https://www.netlify.com) has Git-based Deployment that will continuously deploy every time you push to main (or whatever branch you choose).
+
+Just click on the below button and import your project into Netlify.
+
+Netlify will detect that you are using Docus and will enable the correct settings for your deployment.
Deploy with Netlify
After your project has been imported, all subsequent pushes to main branch will generates a deployment.
-
## Surge
-[Surge](https://surge.sh) is a static web publishing platform. It provides powerful CLI utils to deploy static websites.
+[Surge](https://surge.sh) is a static web publishing platform.
+
+It provides powerful CLI utils to deploy static websites.
1. Install `surge` package globally:
@@ -151,9 +179,10 @@ After your project has been imported, all subsequent pushes to main branch will
```bash [NPM]
npm install --global surge
```
+
::
-2. Generate the documentation. Generating Docus project will create `dist` directory that contains all contents of your documentation.
+2. Generating Docus project will create `dist` deployable directory.
::code-group
@@ -173,16 +202,22 @@ After your project has been imported, all subsequent pushes to main branch will
surge dist/
```
-Surge automatically uploads static contents. When it succeeds, you can view the URL where your site is now available.
+Surge automatically uploads static contents.
+
+When it succeeds, you can view the URL where your site is now available.
+
You may also want to [use a custom domain](https://surge.sh/help/adding-a-custom-domain) for your documentation.
## Vercel
Deploying Docus on [Vercel](https://vercel.com) is really easy.
-Vercel will detect that you are using Docus (aka Nuxt) and will enable the correct settings for your deployment.
+Vercel will detect that you are using Docus (aka Nuxt) and will enable the correct settings for your deployment.
+
Just click on the below button to start.
Deploy with Vercel
-After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).
+After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview).
+
+All changes made to the [Production Branch](https://vercel.com/docs/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).
diff --git a/docs/content/3.more/5.extend.md b/docs/content/3.features/6.extend.md
similarity index 76%
rename from docs/content/3.more/5.extend.md
rename to docs/content/3.features/6.extend.md
index b7cc40e7b..9461bd020 100644
--- a/docs/content/3.more/5.extend.md
+++ b/docs/content/3.features/6.extend.md
@@ -1,21 +1,18 @@
----
-navigation:
- title: Extend
----
-
# Extend
-> Extend Docus with the power of Nuxt modules
+> Extend Docus with the power of Nuxt modules. 🚀
Docus is based on Nuxt, so you can benefit from the existing ecosystem of [Nuxt Modules](https://modules.nuxtjs.org/).
## Analytics
-There are multiple [analytics modules](https://modules.nuxtjs.org/?orderBy=desc#Analytics) that you can use with your documentation. Just choose the one that you prefer.
+There are multiple [analytics modules](https://modules.nuxtjs.org/?orderBy=desc#Analytics) that you can use with your documentation.
+
+Just choose the one that you prefer.
### Plausible
-If you want to use Plausible, you can do so with the `vue-plausible` plugin.
+If you want to use Plausible, you can do so with the `vue-plausible` plugin.
1. Register on [Plausible](https://plausible.io) and add your website info.
@@ -49,10 +46,11 @@ type: success
That's it! Deploy your project and enjoy Plausible.
::
+### Custom Integration
-### Custom integration
+If you didn't find the integration you were looking for or if you don't want to use an existing module, you can always can set things up manually.
-If you didn't find the integration you were looking for or if you don't want to use an existing module, you can always can set things up manually. Let's say you want to integrate Plausible Analytics manually.
+Let's say you want to integrate Plausible Analytics manually.
After you complete registration, Plausible gives you an install snippet, a script tag that looks like this:
@@ -60,7 +58,9 @@ After you complete registration, Plausible gives you an install snippet, a scrip
```
-All you need to do is add this script inside the `` of your website. This can be done using [the head property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-head/).
+All you need to do is add this script inside the `` of your website.
+
+This can be done using [the head property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-head/).
So just edit `nuxt.config.js` and add the script:
diff --git a/docs/content/3.more/4.migration.md b/docs/content/3.features/7.migration.md
similarity index 64%
rename from docs/content/3.more/4.migration.md
rename to docs/content/3.features/7.migration.md
index aba759429..84ed5944a 100644
--- a/docs/content/3.more/4.migration.md
+++ b/docs/content/3.features/7.migration.md
@@ -5,30 +5,30 @@ navigation:
# Migrate from @nuxt/content-theme-docs
-> Migrate from @nuxt/content-theme-docs to Docus
+> Migrate from @nuxt/content-theme-docs to Docus. 🔋
By migrating to Docus, you will have a fresh new design for your documentation :sparkles: