feat: update to docus v2

app.config.ts

@@ -31,17 +31,13 @@ export default defineAppConfig({
       owner: 'aneoconsulting',
       edit: true
     },
-    main: {
-      fluid: true
-    },
     header: {
       logo: true,
       showLinkIcon: true,
       exclude: [],
-      fluid: true
+      navigation: true
     },
     footer: {
-      fluid: true,
       credits: {
         text: '',
         href: 'https://www.aneo.eu',

content/0.index.md

@@ -1,49 +1,106 @@
 ---
 title: ArmoniK Docs Theme
 navigation: false
-main.fluid: false
-layout: page
+layout: basic
 ---
 
-::block-hero
+::glow
 ---
-cta:
-  - Get Started
-  - /guide
-secondary:
-  - Open on GitHub →
-  - https://github.com/aneoconsulting/armonik-docs-theme
-snippet: npm install @aneoconsultingfr/armonik-docs-theme
+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
-ArmoniK Docs Theme
-
-#description
-A beautiful, responsive, and customizable documentation theme for ArmoniK.
 ::
 
-::card-grid
-#title
-What's included
-
-#default
-  ::card{icon="noto:rocket"}
+::container-section
+  ::hero
   #title
-  Ready to use.
+    ArmoniK Docs Theme
+
   #description
-  Pre-configured and ready to go. Just add your content and go.
+    A beautiful, responsive, and customizable documentation theme for ArmoniK.
+
+  #actions
+    ::button-link{href="/guide" size="medium"}
+    Get Started
+    ::
+    ::button-link{href="https://github.com/aneoconsulting/armonik-docs-theme" size="medium" color=gray ghost blank rel="noopener"}
+    Open on GitHub →
+    ::
+
+  #support
+    ::terminal
+    ---
+    content:
+    - npm install -D @aneoconsultingfr/armonik-docs-theme
+    ---
+    ::
   ::
-  ::card{icon="noto:mobile-phone"}
-  #title
-  Responsive.
-  #description
-  ArmoniK Docs Theme looks great on any device, from desktop to mobile.
+::
+
+::container-section{margin="{space.24} 0" padding="{space.24} 0"}
+#root
+  ::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
+  ---
   ::
-  ::card{icon="noto:artist-palette"}
-  #title
-  Customizable.
-  #description
-  Easily change colors or components to match your needs.
+#default
+  :section-header{title="What's included" subtitle="Features"}
+
+  ::card-grid{cols=3}
+  #default
+    ::card{icon="noto:rocket"}
+    #title
+    Ready to use.
+    #description
+    Pre-configured and ready to go. Just add your content and go.
+    ::
+    ::card{icon="noto:mobile-phone"}
+    #title
+    Responsive.
+    #description
+    ArmoniK Docs Theme looks great on any device, from desktop to mobile.
+    ::
+    ::card{icon="noto:artist-palette"}
+    #title
+    Customizable.
+    #description
+    Easily change colors or components to match your needs.
+    ::
   ::
 ::

content/1.guide/7.deployment.md

@@ -20,12 +20,9 @@ You can easily deploy your documentation to GitHub Pages with the following step
 - Push to main to trigger the workflow.
 ::
 
-::alert{type="info"}
 The base URL is the path where the navigation start. For example: `/armonik-docs-theme/` or `/`.
-<br />
-<br />
+
 The site URL is the URL of your site. For example: `https://aneoconsulting.github.io/armonik-docs-theme/`.
-::
 
 ### Workflow file
 

package.json

@@ -35,7 +35,7 @@
     "tokens.config.ts"
   ],
   "dependencies": {
-    "@nuxt-themes/docus": "^1.12.3",
+    "@nuxt-themes/docus": "^2.0.0-beta.8",
     "@nuxt/devtools": "^0.6.2",
     "@parcel/watcher": "^2.1.0",
     "mermaid": "^10.2.3",