feat(tailwindcss): support tailwindcss classes in content (with hmr)

docs/README.md

@@ -2,7 +2,7 @@
 
 # Documentation
 
-This documentation uses [Docus](https://github.com/nuxtlabs/docus).
+This documentation uses [Docus](https://github.com/nuxt-themes/docus).
 
 ## 💻 Development
 

docs/content/4.api/3.configuration.md

@@ -304,11 +304,21 @@ Toggles the document-driven mode.
 
 ### `documentDriven` options
 
-| Option            |    Type    | Description                                                    |
-| ----------------- | :--------: | :------------------------------------------------------------- |
-| `page`            | `Boolean`  | Enables the page binding, making it globally accessible.       |
-| `navigation`      | `Boolean`  | Enables the navigation binding, making it globally accessible. |
-| `surround`        | `Boolean`  | Enables the surround binding, making it globally accessible.   |
-| `globals`         |  `Object \| Boolean`  | A list of globals to be made available globally.               |
-| `layoutFallbacks` | `string[]` | A list of `globals` key to use to find a layout fallback.      |
-| `injectPage`      | `boolean`  | Inject `[...slug].vue` pre-configured page                     |
+| Option            |        Type         | Description                                                    |
+| ----------------- | :-----------------: | :------------------------------------------------------------- |
+| `page`            |      `Boolean`      | Enables the page binding, making it globally accessible.       |
+| `navigation`      |      `Boolean`      | Enables the navigation binding, making it globally accessible. |
+| `surround`        |      `Boolean`      | Enables the surround binding, making it globally accessible.   |
+| `globals`         | `Object \| Boolean` | A list of globals to be made available globally.               |
+| `layoutFallbacks` |     `string[]`      | A list of `globals` key to use to find a layout fallback.      |
+| `injectPage`      |      `boolean`      | Inject `[...slug].vue` pre-configured page                     |
+
+## `integrations`
+
+@nuxt/content is built to be used with other [Nuxt modules](https://modules.nuxtjs.org/)!
+
+### `integrations` options
+
+| Option        |   Type    | Description                                                    |
+| ------------- | :-------: | :------------------------------------------------------------- |
+| `tailwindcss` | `Boolean` | Enables the usage of Tailwind classes inside any content file. |

docs/content/7.changelog.md

@@ -1,5 +1,4 @@
 ---
-layout: docs
 aside: false
 toc: false
 icon: heroicons-outline:newspaper

docs/layouts/blogpost.vue

@@ -12,7 +12,7 @@ const { page } = useDocus()
     <ArticleHero :page="page" />
 
     <div class="px-4 sm:px-6 mx-auto max-w-full lg:max-w-7xl h-full pb-6">
-      <NuxtPage />
+      <slot />
     </div>
 
     <Footer />

docs/nuxt.config.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'pathe'
 import { defineNuxtConfig } from 'nuxt'
 import consola from 'consola'
-import colors from 'tailwindcss/colors.js'
 
 const alias = {}
 
@@ -11,6 +10,17 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 export default defineNuxtConfig({
+  app: {
+    head: {
+      script: [
+        {
+          defer: true,
+          'data-domain': 'content.nuxtjs.org',
+          src: 'https://plausible.io/js/script.js'
+        }
+      ]
+    }
+  },
   content: {
     sources: [
       {
@@ -50,10 +60,10 @@ export default defineNuxtConfig({
       ]
     }
   },
-  modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
+  modules: ['@nuxthq/admin', '@nuxtlabs/github-module'],
   alias,
   extends: [
-    (process.env.DOCUS_THEME_PATH || './node_modules/@docus/docs-theme')
+    (process.env.DOCUS_THEME_PATH || '@nuxt-themes/docus')
   ],
   github: {
     owner: 'nuxt',
@@ -68,20 +78,6 @@ export default defineNuxtConfig({
       'process.env.FORCE_TERM': {}
     }
   },
-  plausible: {
-    domain: 'content.nuxtjs.org'
-  },
-  tailwindcss: {
-    config: {
-      theme: {
-        extend: {
-          colors: {
-            primary: colors.emerald
-          }
-        }
-      }
-    }
-  },
   colorMode: {
     preference: 'dark'
   },

docs/package.json

@@ -9,8 +9,8 @@
     "generate": "nuxi generate"
   },
   "devDependencies": {
-    "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
-    "@docus/github": "npm:@docus/github-edge@latest",
+    "@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
+    "@nuxtlabs/github-module": "npm:@nuxtlabs/github-module-edge@latest",
     "monaco-editor-core": "^0.33.0",
     "nuxt": "npm:nuxt3@latest",
     "vue-plausible": "^1.3.1"

docs/theme.config.ts

@@ -0,0 +1,55 @@
+import { defineTheme } from '@nuxt-themes/kit'
+
+export default defineTheme({
+  title: 'Nuxt Content',
+  description: 'Write pages in markdown, use Vue components and enjoy the power of Nuxt with a blazing fast developer experience.',
+  layout: 'docs',
+  url: 'https://content.nuxtjs.org',
+  debug: false,
+  socials: {
+    twitter: '@nuxt_js',
+    github: 'nuxt/content'
+  },
+  github: {
+    root: 'docs/content',
+    edit: true,
+    releases: true
+  },
+  cover: {
+    src: '/cover.jpg',
+    alt: 'Content made easy for Vue developers'
+  },
+  aside: {
+    level: 1,
+    filter: [
+      '/v1',
+      '/content-v1',
+      '/fr',
+      '/ja',
+      '/ru'
+    ]
+  },
+  header: {
+    title: false,
+    logo: true
+  },
+  footer: {
+    credits: {
+      icon: 'IconDocus',
+      text: 'Powered by Docus',
+      href: 'https://docus.com'
+    },
+    icons: [
+      {
+        label: 'NuxtJS',
+        href: 'https://nuxtjs.org',
+        component: 'IconNuxt'
+      },
+      {
+        label: 'Vue Telescope',
+        href: 'https://vuetelescope.com',
+        component: 'IconVueTelescope'
+      }
+    ]
+  }
+})

docs/tokens.config.ts

@@ -0,0 +1,18 @@
+import { defineThemeTokens } from '@nuxt-themes/kit'
+
+export default defineThemeTokens({
+  colors: {
+    primary: {
+      50: { value: '#ecfdf5' },
+      100: { value: '#d1fae5' },
+      200: { value: '#a7f3d0' },
+      300: { value: '#6ee7b7' },
+      400: { value: '#34d399' },
+      500: { value: '#10b981' },
+      600: { value: '#059669' },
+      700: { value: '#047857' },
+      800: { value: '#065f46' },
+      900: { value: '#064e3b' }
+    }
+  }
+})