feat: update docs

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'
         }
       ]
     }

docs/components/HeaderNavigation.vue

@@ -3,5 +3,9 @@
     <ButtonLink v-show="$route.path === '/'" href="/get-started/installation" size="small" bold>
       Get started
     </ButtonLink>
+
+    <ButtonLink v-show="$route.path.includes('templates')" href="/get-started/installation" size="small" bold>
+      Back to Docs
+    </ButtonLink>
   </div>
 </template>

docs/content/1.get-started/1.installation.md

@@ -1,34 +1,38 @@
 # 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.
+
+It 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, and Linux are supported.
 
 ## Quick start
 
-### GitHub Template
+### Clone locally
 
-Start your documentation in a new GitHub repository by using our [GitHub template](https://github.com/nuxtlabs/docus-starter):
+You can download the starter locally using [degit](https://github.com/Rich-Harris/degit).
 
-::button-link{size="medium" blank href="https://github.com/nuxtlabs/docus-starter/generate"}
-Create a repo with the Docus starter
-::
+This allows you to add documentation to your existing repository.
 
-### Download locally
-
-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 +41,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 +71,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
+---
+::

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": "<API_KEY>",
-  "indexName": "<INDEX_NAME>",
-  "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 `<langAttribute>` 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) |