chore: merge main

.prettierignore

@@ -0,0 +1 @@
+*.md

docs/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-6">
+  <footer class="py-6 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
     <div class="max-w-8xl px-4 mx-auto sm:px-6">
       <div class="flex flex-col sm:flex-row justify-between items-center">
         <a
@@ -9,8 +9,8 @@
           class="
             flex
             items-end
-            text-gray-900
-            dark:text-gray-300
+            text-gray-700
+            dark:text-gray-400
             dark:hover:text-gray-100
             hover:text-gray-600
             mb-3

docs/components/AsideBottom.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h5 class="py-2 text-base font-semibold text-gray-900 transition duration-200 cursor-pointer dark:text-gray-100">
-      Resources
-    </h5>
+    <h5 class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100">Resources</h5>
     <ul>
       <li v-for="resource of resources" :key="resource.title">
         <a

docs/pages/2.usage/2.components.md → docs/content/2.usage/2.components.md

@@ -170,11 +170,11 @@ Cross-reference other files within your documentation (such as example code you
 
 ::code-group
   ::code-block{label="Preview" active preview}
-    ::inject-content{query="2.usage/_example"}
+    :inject-content{query="2.usage/_example"}
   ::
 
   ```md [Code]
-  ::inject-content{query="2.usage/_example"}
+  :inject-content{query="2.usage/_example"}
   ```
 ::
 

docs/pages/2.usage/3.assets.md → docs/content/2.usage/3.assets.md

@@ -28,16 +28,16 @@ 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" />
-<p class="flex items-center" style="margin-bottom:0;">Switch between light and dark mode:&nbsp;<color-switcher class="inline-flex ml-2"></color-switcher></p>
-::
-
-```md [Code]
-:img{src="/logo-light.svg" class="light-img" alt="Logo light"}
-:img{src="/logo-dark.svg" class="dark-img" alt="Logo dark"}
-```
+  ::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"}
+  <p class="flex items-center" style="margin-bottom:0;">Switch between light and dark mode:&nbsp;<color-switcher class="inline-flex ml-2"></color-switcher></p>
+  ::
+
+  ```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

docs/pages/3.more/3.deployment.md → docs/content/3.more/3.deployment.md

@@ -5,15 +5,13 @@
 To generate the documentation for production, run the following command:
 
 ::code-group
-
   ```bash [Yarn]
   yarn build
   ```
 
   ```bash [NPM]
   npm run build
   ```
-
 ::
 
 This command will run `nuxt generate` with [fast static deployments](https://nuxtjs.org/blog/nuxt-static-improvements#faster-static-deployments).

docs/content/index.md

@@ -0,0 +1,78 @@
+---
+template: landing
+title: 
+description: >-
+  Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+navigation: 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
+Documentation Generator based on Nuxt and Windi.
+---description
+Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+::
+
+::card-grid{title="What's included?"}
+  ::card
+  icon: IconNuxt
+  description: Harness the full power of Nuxt and the Nuxt ecosystem.
+  iconClass: 'text-hex-00DC82' 
+  title: Nuxt Architecture.
+  ::
+
+  ::card
+  icon: IconVue
+  title: Vue Components.
+  description: Use built-in components (or your own!) inside your content.
+  ::
+
+  ::card
+  icon: IconMarkdown
+  title: Write Markdown.
+  description: Enjoy the ease and simplicity of Markdown as you write your documentation.
+  ::
+
+  ::card
+  icon: IconWindi
+  title: Windi CSS.
+  description: Windi CSS is built in for great developer experience and rapid customization.
+  ::
+
+  ::card
+  icon: IconSSG
+  title: Static Generation.
+  description: Generate your documentation as a static website and host it anywhere.
+  ::
+
+  ::card
+  icon: IconLighthouse
+  title: Lighthouse Optimised.
+  description: Start with a blazing fast site with a perfect Lighthouse score.
+  ::
+
+  ::card
+  icon: IconZap
+  title: Smart Generation.
+  description: Automatically skip a full build if you've only changed Markdown files.
+  ::
+
+  ::card
+  icon: IconPuzzle
+  title: Extensible.
+  description: Customize the whole design, or add components using slots - you can make Docus your own.
+  ::
+
+  ::card
+  icon: IconGitHub
+  title: Open Source.
+  description: Docus is released under the MIT license and made with love by the NuxtLabs team.
+  ::
+::

docs/content/templates/pricing.md

@@ -0,0 +1,59 @@
+---
+template: marketing
+footer: false
+---
+
+::pricing-block
+plans:
+  monthly:
+    base: true
+    title: Month
+    label: Monthly
+  annual:
+    title: Year
+    label: Yearly
+    preSelected: true
+    divider: 12
+
+tiers:
+  free:
+    price: 
+      monthly: 0
+      annual: 0
+    title: Free
+    description: Our Free plan description
+    features:
+      - Feature One
+      - Feature Two
+  starter:
+    preSelected: true
+    price: 
+      monthly: 10
+      annual: 100
+    title: Starter
+    description: Our Starter plan pretty long multiline description
+    features:
+      - All Free Tier features
+      - Feature Three
+      - Feature Four
+  pro:
+    price: 
+      monthly: 100
+      annual: 1000
+    title: Pro
+    description: Our Pro plan description
+    features:
+      - All Starter Tier features
+      - Feature Five
+      - Feature Six
+
+meta: 
+  currency: $
+  featuresTitle: 'Included features:'
+  buttonText: Choose plan
+  preSelectedBadge: Popular
+  checkoutText: 'Total:'
+  checkoutButtonText: Checkout
+---
+::
+

src/core/module.ts

@@ -28,7 +28,7 @@ function isUrl(string) {
 
 export default <Module>async function docusModule() {
   // Wait for nuxt options to be normalized
-  const { nuxt, addServerMiddleware, addPlugin, addModule } = this
+  const { nuxt, addServerMiddleware, addPlugin, addModule, $docus } = this
   const { options } = nuxt
   const isSSG = options.dev === false && (options.target === 'static' || options._generate || options.mode === 'spa')
 
@@ -48,10 +48,6 @@ export default <Module>async function docusModule() {
   // Inject Docus theme as ~docus
   options.alias['~docus'] = resolve(__dirname, 'runtime')
 
-  // Inject content dir in private runtime config
-  const contentDir = options.dir.pages || 'pages'
-  options.publicRuntimeConfig.contentDir = contentDir
-
   // extend parser options
   const parserOptions: Partial<ParserOptions> = { markdown: {} }
   await nuxt.callHook('docus:parserOptions', parserOptions)
@@ -93,7 +89,7 @@ export default <Module>async function docusModule() {
   const { storage, lazyIndex } = initStorage({
     drivers: [
       {
-        base: resolve(options.srcDir, options.dir.pages),
+        base: resolve(options.srcDir, $docus.settings.contentDir),
         mountPoint: 'pages'
       },
       {
@@ -188,8 +184,12 @@ export default <Module>async function docusModule() {
       options.watch.push(pagesDirPath)
     }
   })
+
   nuxt.callHook('docus:storage:ready')
 
+  // Watch Docus while DOCUS_DEV is set
+  if (process.env.DOCUS_DEV) options.watch.push(resolve(__dirname, '../'))
+
   nuxt.hook('close', () => {
     destroyHooks()
     destroyDB()

src/core/parser/markdown/directive/remark-plugin.ts

@@ -40,14 +40,13 @@ export default function htmlDirectives({ directives }) {
     function visitor(node) {
       const directive = directives[node.name]
       const data = node.data || (node.data = {})
-      const hast = h(node.name, node.attributes)
 
       const nodeData = getNodeData(node)
 
-      data.hName = hast.tagName
+      data.hName = node.name
       data.hProperties = bindData(
         {
-          ...hast.properties,
+          ...node.attributes,
           ...nodeData
         },
         pageData

src/core/runtime/composables/style.ts

@@ -42,7 +42,7 @@ function useCssVariableStore(scopes = ['dark']) {
 
   const generateScope = (scope: string) => {
     const vars = Object.entries(getScope(scope)).map(generateVar).join(';')
-    return scope === 'default' ? `:root {${vars}}` : `html.${scope} {${vars}}`
+    return scope === 'default' ? `html:root {${vars}}` : `html.${scope} {${vars}}`
   }
 
   const generate = () => scopes.map(generateScope).join(' ')

src/core/storage.ts

@@ -19,11 +19,6 @@ export const docusDriver = defineDriver((options: DriverOptions) => {
     // unify key format
     key = key.replace(/\//g, ':')
 
-    // ignore vue files
-    if (key.endsWith('.vue')) {
-      return null
-    }
-
     const document = await parser.parse(key, content)
 
     if (document.extension === '.md') {