Skip to content

Commit 462410a

Browse files
Tahulatinux
Tahul
and
atinux
authored
feat(docs): upgrade to latest Docus (#580)
* feat(docs): upgrade to latest Docus * fix: use iconLinks Co-authored-by: Sébastien Chopin <[email protected]>
1 parent 5ba48c7 commit 462410a

19 files changed

+2781
-3378
lines changed

‎docs/app.config.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export default defineAppConfig({
2+
docus: {
3+
title: 'Nuxt Tailwind',
4+
layout: 'default',
5+
url: 'https://tailwindcss.nuxtjs.org/',
6+
description: 'Add Tailwind CSS to your Nuxt application in seconds.',
7+
socials: {
8+
twitter: 'nuxt_js',
9+
github: 'nuxt-modules/tailwindcss'
10+
},
11+
image: '/cover.jpg',
12+
header: {
13+
// title: false,
14+
logo: true
15+
},
16+
footer: {
17+
iconLinks: [
18+
{
19+
label: 'Nuxt',
20+
href: 'https://nuxt.com',
21+
icon: 'IconNuxt'
22+
},
23+
{
24+
label: 'Vue Telescope',
25+
href: 'https://vuetelescope.com',
26+
icon: 'IconVueTelescope'
27+
}
28+
]
29+
}
30+
}
31+
})

‎docs/content/0.index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Introduction
33
description: Add Tailwind CSS to your Nuxt application in seconds.
44
navigation: false
5-
layout: fluid
5+
layout: page
66
---
77

88
::block-hero

‎docs/content/1.getting-started/1.setup.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: Setup
3-
description: Using Tailwind CSS in your Nuxt project is only one command away ✨
1+
# Setup
2+
3+
Using Tailwind CSS in your Nuxt project is only one command away ✨
4+
45
---
56

67
## Installation

‎docs/content/1.getting-started/2.options.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: Options
3-
description: Configure Nuxt Tailwind easily with the `tailwindcss` property.
1+
# Options
2+
3+
Configure Nuxt Tailwind easily with the `tailwindcss` property.
4+
45
---
56

67
```ts [nuxt.config]

‎docs/content/2.tailwind/1.config.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: Config
3-
description: This module comes with a default Tailwind configuration file to provide the best possible user experience.
1+
# Config
2+
3+
This module comes with a default Tailwind configuration file to provide the best possible user experience.
4+
45
---
56

67
## Default configuration

‎docs/content/2.tailwind/2.viewer.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: Viewer
3-
description: Visualize your Tailwind configuration with the viewer.
1+
# Viewer
2+
3+
Visualize your Tailwind configuration with the viewer.
4+
45
---
56

67
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 ✨).

‎docs/content/2.tailwind/3.editor-support.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: Editor Support
3-
description: Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
1+
# Editor Support
2+
3+
Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
4+
45
---
56

67
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.

‎docs/content/3.examples/1.basic.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
---
2-
title: Basic Usage
3-
description: Live example of basic usage of Nuxt Tailwind on CodeSandbox.
42
toc: false
53
---
64

5+
# Basic Usage
6+
7+
Live example of basic usage of Nuxt Tailwind on CodeSandbox.
8+
9+
---
10+
711
Minimal example of a Nuxt project with Tailwind CSS module.
812

913
:sandbox{src="https://codesandbox.io/embed/nuxt3-tailwindcss-twowfx"}

‎docs/content/3.examples/2.dark-mode.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
---
2-
title: Dark Mode
3-
description: Live example of dark mode with Nuxt Tailwind on CodeSandbox.
42
toc: false
53
---
64

5+
# Dark Mode
6+
7+
Live example of dark mode with Nuxt Tailwind on CodeSandbox.
8+
9+
---
10+
711
<!-- TODO: Replace with tailwind's native dark mode support. -->
812

913
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.

‎docs/content/3.examples/3.tailwindui.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
---
2-
title: Tailwind UI
3-
description: Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
42
toc: false
53
---
64

5+
# Tailwind UI
6+
7+
Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
8+
9+
---
10+
11+
712
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.
813

914
:sandbox{src="https://codesandbox.io/embed/nuxt-tailwindui-xy1jk" class="h-[600px]"}

‎docs/content/3.examples/4.postcss-plugin.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
---
2-
title: PostCSS Plugins
3-
description: Live example of Nuxt Tailwind with postcss-color-gray plugin.
42
toc: false
53
---
64

5+
# PostCSS Plugins
6+
7+
Live example of Nuxt Tailwind with postcss-color-gray plugin.
8+
9+
---
10+
711
<!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
812
<!-- TODO: update the link to relevant Nuxt 3 documentation -->
913

‎docs/content/3.examples/5.daisyui.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
---
2-
title: DaisyUI
3-
description: Live example of Nuxt Tailwind with daisyUI and color mode.
42
toc: false
53
---
64

5+
# DaisyUI
6+
7+
Live example of Nuxt Tailwind with daisyUI and color mode.
8+
9+
---
10+
711
Example with [daisyUI](https://daisyui.com/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/).
812

913
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

‎docs/content/3.examples/6.content.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
---
2-
title: '@nuxt/content'
3-
description: 'Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!'
1+
# `@nuxt/content`
2+
3+
Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!
4+
45
---
56

67
The module supports [@nuxt/content](https://content.nuxtjs.org), meaning you can use Tailwind classes inside your content files with MDC syntax!

‎docs/content/4.community/_changelog.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
---
22
layout: docs
33
toc: false
4-
title: Changelog
5-
description: Discover the latest updates.
64
---
75

8-
::releases
6+
# Changelog
7+
8+
Discover the latest updates.
9+
10+
---
11+
12+
::alert{type="warning"}
13+
This page is work in progress.
14+
15+
[Visit this page](https://github.com/nuxt-modules/i18n/releases).
916
::
17+

‎docs/content/_theme.yml

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/nuxt.config.ts

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
import { defineNuxtConfig } from 'nuxt'
2-
import colors from 'tailwindcss/colors.js'
3-
41
export default defineNuxtConfig({
5-
extends: ['./node_modules/@docus/docs-theme'],
6-
github: {
7-
owner: 'nuxt-community',
8-
repo: 'tailwindcss-module',
9-
branch: 'main'
10-
},
11-
theme: {},
12-
modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
2+
extends: ['@nuxt-themes/docus'],
3+
modules: ['nuxt-plausible'],
134
plausible: {
145
domain: 'tailwindcss.nuxtjs.org'
15-
},
16-
tailwindcss: {
17-
config: {
18-
theme: {
19-
extend: {
20-
colors: {
21-
primary: colors.sky
22-
}
23-
}
24-
}
25-
}
266
}
277
})

‎docs/package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@
1212
"license": "MIT",
1313
"homepage": "https://tailwindcss.nuxtjs.org",
1414
"devDependencies": {
15-
"@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
16-
"@docus/github": "npm:@docus/github-edge@latest",
17-
"nuxt": "^3.0.0-rc.5",
18-
"vue-plausible": "^1.3.1"
15+
"@nuxt-themes/docus": "^1.1.3",
16+
"nuxt": "^3.0.0",
17+
"nuxt-plausible": "latest"
1918
}
2019
}

‎docs/tokens.config.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { defineTheme } from 'pinceau'
2+
3+
export default defineTheme({
4+
color: {
5+
primary: {
6+
50: '#f0f9ff',
7+
100: '#e0f2fe',
8+
200: '#bae6fd',
9+
300: '#7dd3fc',
10+
400: '#38bdf8',
11+
500: '#0ea5e9',
12+
600: '#0284c7',
13+
700: '#0369a1',
14+
800: '#075985',
15+
900: '#0c4a6e'
16+
}
17+
}
18+
})

0 commit comments

Comments
 (0)