nuxt-content · bdrtsky · Apr 6, 2023 · Apr 6, 2023 · Apr 7, 2023 · Apr 7, 2023
diff --git a/.starters/default/app.config.ts b/.starters/default/app.config.ts
@@ -15,19 +15,20 @@ export default defineAppConfig({
       edit: true
     },
     aside: {
-      level: 0,
+      level: 1,
       collapsed: false,
-      exclude: []
+      exclude: [],
+      navigation: true
     },
     main: {
       padded: true,
-      fluid: true
     },
     header: {
+      title: '',
       logo: true,
       showLinkIcon: true,
       exclude: [],
-      fluid: true
+      navigation: false
     },
     footer: {
       iconLinks: [

diff --git a/.starters/default/content/0.index.md b/.starters/default/content/0.index.md
@@ -1,99 +1,190 @@
 ---
 title: Home
 navigation: false
-layout: page
-main:
-  fluid: false
+layout: basic
 ---
 
-:ellipsis{right=0px width=75% blur=150px}
+<!-- :hero-visuals -->
 
-::block-hero
+::glow
 ---
-cta:
-  - Get started
-  - /introduction/getting-started
-secondary:
-  - Open on GitHub →
-  - https://github.com/nuxt-themes/docus
+top: calc(0px - var(--docus-app-header-height))
+height: calc(var(--hero-height) + var(--docus-app-header-height) + 20rem) 
+maskGradient: 
+  light: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
+  dark: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 85%)
+gradient:
+  light:
+    initial: radial-gradient(circle at 10% 50%, {color.secondary.500} 4%, {color.primary.200} 25%, {color.primary.500} 65%)
+    xl: radial-gradient(circle at 10% 50%, {color.secondary.200} 15%, {color.primary.500} 60%, {color.primary.400} 55%, {color.primary.400} 75%, {color.secondary.500} 90%)
+  dark:
+    initial: radial-gradient(circle at 10% 50%, {color.secondary.500}, {color.primary.500} 45%, {color.primary.200} 82%)
+    xl: radial-gradient(circle at 10% 50%, {color.secondary.700} 15%, {color.primary.500} 60%, {color.primary.600} 55%, {color.primary.600} 75%, {color.secondary.500} 90%)
+noise: true
+backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
 ---
+::
 
-#title
-The best place to start your documentation.
-
-#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)
-  ::
+::container-section
+  ::hero
 
-#support
-  ::terminal
-  ---
-  content:
-  - npx nuxi@latest init -t themes/docus
-  - cd docs
-  - npm install
-  - npm run dev
-  ---
+  #announce
+    ::announce{href=https://docus.dev/v2}
+    Docus v2 is out 🎉
+    ::
+
+  #title
+    The best place to start your documentation.
+
+  #description
+    Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [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)
+    ::
+
+  #actions
+    ::button-link{href=/introduction/getting-started size=medium}
+    Get started
+    ::
+    ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank}
+    Open on GitHub →
+    ::
+
+  #support
+    ::terminal
+    ---
+    content:
+    - npx nuxi@latest init -t themes/docus
+    - cd docs
+    - npm install
+    - npm run dev
+    ---
+    :: 
   ::
 ::
 
-::card-grid
-#title
-What's included
+::container-section{margin="{space.24} 0" padding="{space.24} 0"}
 
 #root
-:ellipsis{left=0px width=40rem top=10rem blur=140px}
+  ::glow
+  ---
+  height: 100%
+  maskGradient: 
+    light: 
+      initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 74%)
+      lg: radial-gradient(at 43% 53%, red, rgba(255, 0, 0, 0) 85%)
+    dark: 
+      initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 84%)
+      lg: radial-gradient(at 43% 53%, rgba(0,0,0, 1), rgba(255, 0, 0, 0) 85%)
+  gradient:
+    light:
+      initial: radial-gradient(circle at 40% 50%, {color.primary.400}, {color.primary.400} 52%)
+      lg: conic-gradient({color.secondary.200} 0%, {color.secondary.200} 12%, {color.secondary.300} 22%, {color.secondary.500} 30%, {color.primary.300} 44%)
+    dark:
+      initial: radial-gradient(circle at 40% 50%, {color.primary.600}, {color.primary.700} 52%)
+      lg: radial-gradient(circle at 44% 72%, {color.primary.600} 0%, {color.primary.700} 12%, {color.primary.800} 22%)
+  noise: true
+  backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
+  afterBlendMode: 
+    light: color
+    dark: multiply
+  ---
+  ::
 
 #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.
-  ::
+  :section-header{title="What's included" subtitle="Features"}
+
+  ::card-grid{cols=6}
 
-  ::card{icon=IconNuxtStudio}
-  #title
-  Nuxt Studio ready
-  #description
-  Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
-  ::
+  #default
+    ::card{icon=logos:nuxt-icon lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 2
+    row: 1
+    ---
+    #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=logos:vue}
-  #title
-  Vue Components
-  #description
-  Use built-in components (or your own!) inside your content.
-  ::
+    ::card{icon=IconNuxtStudio lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 2
+    row: 
+      initial: 1
+      sm: 2
+    ---
+    #title
+    Nuxt Studio ready
+    #description
+    Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
+    ::
 
-  ::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=logos:vue lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 2
+    row: 1
+    ---
+    #title
+    Vue Components
+    #description
+    Use built-in components (or your own!) inside your content.
+    ::
 
-  ::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=simple-icons:markdown lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 2
+    ---
+    #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:puzzle-piece}
-  #title
-  Extensible.
-  #description
-  Customize the whole design, or add components using slots - you can make Docus your own.
+    ::card{icon=noto:rocket lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 3
+    ---
+    #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=material-symbols:token-outline lights noise}
+    ---
+    col: 
+      initial: 6
+      sm: 2
+    ---
+
+    #title
+    Design Tokens
+    #description
+    Make Docus your own! Use [Design Tokens](https://pinceau.dev/configuration/design-tokens) to build your own Design System.
+    ::
   ::
-::
+::
diff --git a/...content/1.introduction/3.writing-pages.md → ...ntent/1.introduction/3.writing-content.md b/...content/1.introduction/3.writing-pages.md → ...ntent/1.introduction/3.writing-content.md
@@ -1,4 +1,4 @@
-# Writing Pages
+# Writing Content
 
 Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
 

diff --git a/.starters/default/content/1.introduction/_dir.yml b/.starters/default/content/1.introduction/_dir.yml
@@ -1,2 +1,2 @@
-icon: ph:star-duotone
+icon: 🚀
 navigation.redirect: /introduction/getting-started
diff --git a/.starters/default/content/1.introduction/design-system.md b/.starters/default/content/1.introduction/design-system.md
@@ -0,0 +1 @@
+# Design System
diff --git a/.starters/default/content/1.introduction/typography.md b/.starters/default/content/1.introduction/typography.md
@@ -0,0 +1,31 @@
+# Typography
+
+For typography, Docus uses [Nuxt Typography](https://github.com/nuxt-themes/typography).
+
+[Nuxt Typography] is a theme to get a beautiful and customisable typography with a set of prose components for Nuxt Content
+
+It consist of two parts: `typography` tokens and `prose` components.
+
+Nuxt Typography expose a set of `prose` components that work seamlessly with [Nuxt Content](https://content.nuxtjs.org/). Those components include:
+
+- `ProseA`
+- `ProseBlockquote`
+- `ProseCode`
+- `ProseCodeInline`
+- `ProseH1` - `ProseH6`
+- `ProseHr`
+- `ProseImg`
+- `ProseUl`
+- `ProseOl`
+- `ProseLi`
+- `ProseP`
+- `ProseStrong`
+- `ProseEm`
+- `ProseTable`
+- `ProseTbody`
+- `ProseTd`
+- `ProseTh`
+- `ProseThead`
+- `ProseTr`
+
+Feel free to overwrite or customize the default typography tokens and prose components as you wish.
diff --git a/.starters/default/content/2.api/2.composables.md b/.starters/default/content/2.api/2.composables.md
@@ -33,7 +33,7 @@ const { tree } = useDocus()
 </script>
 
 <template>
-  <DocsAsideTree :links="tree" />
+  <DocsNavigation :links="tree" />
 </template>
 ```
 

diff --git a/...content/1.introduction/4.configuration.md → .../default/content/2.api/4.configuration.md b/...content/1.introduction/4.configuration.md → .../default/content/2.api/4.configuration.md
@@ -99,10 +99,8 @@ export default defineAppConfig({
 | `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                                                                                  |
@@ -124,7 +122,6 @@ export default defineAppConfig({
 | `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                                                          |