Merge branch 'main' into feat/new-syntax

.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/content/index.md

@@ -0,0 +1,78 @@
+---
+template: landing
+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.
+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,60 @@
+---
+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/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') {

src/defaultTheme/components/atoms/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-md alert" :class="[type]">
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
     <div class="flex items-start">
       <div class="flex-grow alert-content">
         <Markdown unwrap="p" />
@@ -85,8 +85,11 @@ export default defineComponent({
   }
 
   >>> {
+    strong {
+      @apply font-semibold text-current;
+    }
     a {
-      @apply no-underline border-none font-semibold;
+      @apply underline border-none font-semibold text-current;
       code {
         @apply border border-transparent border-dashed;
       }
@@ -97,4 +100,12 @@ export default defineComponent({
 .alert >>> p {
   @apply m-0 !important;
 }
+
+.dark .alert {
+  >>> {
+    a {
+      @apply text-current;
+    }
+  }
+}
 </style>

src/defaultTheme/components/atoms/ButtonLink.vue

@@ -48,12 +48,12 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 a.button-link {
-  @apply inline-flex items-center flex-none px-3 py-2 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600 rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
+  @apply inline-flex items-center flex-none rounded-md px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
   &.medium {
-    @apply px-4 py-2.5 text-base leading-4 rounded;
+    @apply px-4 py-2 text-base leading-4;
   }
   &.large {
-    @apply px-6 py-3 text-lg leading-6 rounded;
+    @apply px-6 py-2.5 text-lg leading-6;
   }
 }
 </style>