feat(docs): upgrade to latest Docus (#580)

* feat(docs): upgrade to latest Docus * fix: use iconLinks Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
nuxt-modules · Dec 7, 2022 · 462410a · 462410a
1 parent 5ba48c7
commit 462410a
Show file tree

Hide file tree

Showing 19 changed files with 2,781 additions and 3,378 deletions.
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -0,0 +1,31 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Nuxt Tailwind',
+    layout: 'default',
+    url: 'https://tailwindcss.nuxtjs.org/',
+    description: 'Add Tailwind CSS to your Nuxt application in seconds.',
+    socials: {
+      twitter: 'nuxt_js',
+      github: 'nuxt-modules/tailwindcss'
+    },
+    image: '/cover.jpg',
+    header: {
+      // title: false,
+      logo: true
+    },
+    footer: {
+      iconLinks: [
+        {
+          label: 'Nuxt',
+          href: 'https://nuxt.com',
+          icon: 'IconNuxt'
+        },
+        {
+          label: 'Vue Telescope',
+          href: 'https://vuetelescope.com',
+          icon: 'IconVueTelescope'
+        }
+      ]
+    }
+  }
+})
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
@@ -2,7 +2,7 @@
 title: Introduction
 description: Add Tailwind CSS to your Nuxt application in seconds.
 navigation: false
-layout: fluid
+layout: page
 ---
 
 ::block-hero

diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md
@@ -1,6 +1,7 @@
----
-title: Setup
-description: Using Tailwind CSS in your Nuxt project is only one command away ✨
+# Setup
+
+Using Tailwind CSS in your Nuxt project is only one command away ✨
+
 ---
 
 ## Installation

diff --git a/docs/content/1.getting-started/2.options.md b/docs/content/1.getting-started/2.options.md
@@ -1,6 +1,7 @@
----
-title: Options
-description: Configure Nuxt Tailwind easily with the `tailwindcss` property.
+# Options
+
+Configure Nuxt Tailwind easily with the `tailwindcss` property.
+
 ---
 
 ```ts [nuxt.config]

diff --git a/docs/content/2.tailwind/1.config.md b/docs/content/2.tailwind/1.config.md
@@ -1,6 +1,7 @@
----
-title: Config
-description: This module comes with a default Tailwind configuration file to provide the best possible user experience.
+# Config
+
+This module comes with a default Tailwind configuration file to provide the best possible user experience.
+
 ---
 
 ## Default configuration

diff --git a/docs/content/2.tailwind/2.viewer.md b/docs/content/2.tailwind/2.viewer.md
@@ -1,6 +1,7 @@
----
-title: Viewer
-description: Visualize your Tailwind configuration with the viewer.
+# Viewer
+
+Visualize your Tailwind configuration with the viewer.
+
 ---
 
 Nuxt Tailwind will expose a `/_tailwind/` route in development, so that you can quickly visualize your Tailwind configuration with easy copy-pasting (thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨).

diff --git a/docs/content/2.tailwind/3.editor-support.md b/docs/content/2.tailwind/3.editor-support.md
@@ -1,6 +1,7 @@
----
-title: Editor Support
-description: Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
+# Editor Support
+
+Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
+
 ---
 
 Tailwind provides an [extension for Visual Studio Code](https://github.com/tailwindlabs/tailwindcss-intellisense), which enables advanced features such as autocomplete, syntax highlighting, and linting.

diff --git a/docs/content/3.examples/1.basic.md b/docs/content/3.examples/1.basic.md
@@ -1,9 +1,13 @@
 ---
-title: Basic Usage
-description: Live example of basic usage of Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Basic Usage
+
+Live example of basic usage of Nuxt Tailwind on CodeSandbox.
+
+---
+
 Minimal example of a Nuxt project with Tailwind CSS module.
 
 :sandbox{src="https://codesandbox.io/embed/nuxt3-tailwindcss-twowfx"}
diff --git a/docs/content/3.examples/2.dark-mode.md b/docs/content/3.examples/2.dark-mode.md
@@ -1,9 +1,13 @@
 ---
-title: Dark Mode
-description: Live example of dark mode with Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Dark Mode
+
+Live example of dark mode with Nuxt Tailwind on CodeSandbox.
+
+---
+
 <!-- TODO: Replace with tailwind's native dark mode support. -->
 
 Example with the [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module) module.

diff --git a/docs/content/3.examples/3.tailwindui.md b/docs/content/3.examples/3.tailwindui.md
@@ -1,9 +1,14 @@
 ---
-title: Tailwind UI
-description: Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Tailwind UI
+
+Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
+
+---
+
+
 Example with [Tailwind UI](https://tailwindui.com) plugin with the [Inter](https://rsms.me/inter/) font loaded by [@nuxtjs/google-fonts](https://github.com/nuxt-community/google-fonts-module) module.
 
 :sandbox{src="https://codesandbox.io/embed/nuxt-tailwindui-xy1jk" class="h-[600px]"}
diff --git a/docs/content/3.examples/4.postcss-plugin.md b/docs/content/3.examples/4.postcss-plugin.md
@@ -1,9 +1,13 @@
 ---
-title: PostCSS Plugins
-description: Live example of Nuxt Tailwind with postcss-color-gray plugin.
 toc: false
 ---
 
+# PostCSS Plugins
+
+Live example of Nuxt Tailwind with postcss-color-gray plugin.
+
+---
+
 <!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
 <!-- TODO: update the link to relevant Nuxt 3 documentation -->
 

diff --git a/docs/content/3.examples/5.daisyui.md b/docs/content/3.examples/5.daisyui.md
@@ -1,9 +1,13 @@
 ---
-title: DaisyUI
-description: Live example of Nuxt Tailwind with daisyUI and color mode.
 toc: false
 ---
 
+# DaisyUI
+
+Live example of Nuxt Tailwind with daisyUI and color mode.
+
+---
+
 Example with [daisyUI](https://daisyui.com/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/).
 
 Note that the preview may not work, you can open the sandbox on https://stackblitz.com/edit/nuxt-color-mode-daisyui-snrnt9?file=app.vue

diff --git a/docs/content/3.examples/6.content.md b/docs/content/3.examples/6.content.md
@@ -1,6 +1,7 @@
----
-title: '@nuxt/content'
-description: 'Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!'
+# `@nuxt/content`
+
+Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!
+
 ---
 
 The module supports [@nuxt/content](https://content.nuxtjs.org), meaning you can use Tailwind classes inside your content files with MDC syntax!

diff --git a/docs/content/4.community/_changelog.md b/docs/content/4.community/_changelog.md
@@ -1,9 +1,17 @@
 ---
 layout: docs
 toc: false
-title: Changelog
-description: Discover the latest updates.
 ---
 
-::releases
+# Changelog
+
+Discover the latest updates.
+
+---
+
+::alert{type="warning"}
+This page is work in progress.
+
+[Visit this page](https://github.com/nuxt-modules/i18n/releases).
 ::
+
diff --git a/docs/content/_theme.yml b/docs/content/_theme.yml
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -1,27 +1,7 @@
-import { defineNuxtConfig } from 'nuxt'
-import colors from 'tailwindcss/colors.js'
-
 export default defineNuxtConfig({
-  extends: ['./node_modules/@docus/docs-theme'],
-  github: {
-    owner: 'nuxt-community',
-    repo: 'tailwindcss-module',
-    branch: 'main'
-  },
-  theme: {},
-  modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
+  extends: ['@nuxt-themes/docus'],
+  modules: ['nuxt-plausible'],
   plausible: {
     domain: 'tailwindcss.nuxtjs.org'
-  },
-  tailwindcss: {
-    config: {
-      theme: {
-        extend: {
-          colors: {
-            primary: colors.sky
-          }
-        }
-      }
-    }
   }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -12,9 +12,8 @@
   "license": "MIT",
   "homepage": "https://tailwindcss.nuxtjs.org",
   "devDependencies": {
-    "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
-    "@docus/github": "npm:@docus/github-edge@latest",
-    "nuxt": "^3.0.0-rc.5",
-    "vue-plausible": "^1.3.1"
+    "@nuxt-themes/docus": "^1.1.3",
+    "nuxt": "^3.0.0",
+    "nuxt-plausible": "latest"
   }
 }
diff --git a/docs/tokens.config.ts b/docs/tokens.config.ts
@@ -0,0 +1,18 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  color: {
+    primary: {
+      50: '#f0f9ff',
+      100: '#e0f2fe',
+      200: '#bae6fd',
+      300: '#7dd3fc',
+      400: '#38bdf8',
+      500: '#0ea5e9',
+      600: '#0284c7',
+      700: '#0369a1',
+      800: '#075985',
+      900: '#0c4a6e'
+    }
+  }
+})