diff --git a/CHANGELOG.md b/CHANGELOG.md index 55956d65..7ad1a228 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,22 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## v6.11.2 + +[compare changes](https://github.com/nuxt-modules/tailwindcss/compare/v6.11.1...v6.11.2) + +### 🩹 Fixes + +- **viewer:** Handle redirect and callback await, thank you danielroe :) ([734ef1c](https://github.com/nuxt-modules/tailwindcss/commit/734ef1c)) + +### 📖 Documentation + +- Fix paths for build ([5971b0a](https://github.com/nuxt-modules/tailwindcss/commit/5971b0a)) + +### ❤️ Contributors + +- Inesh Bose + ## v6.11.1 [compare changes](https://github.com/nuxt-modules/tailwindcss/compare/v6.11.0...v6.11.1) diff --git a/README.md b/README.md index aa0c052e..ca673f3b 100755 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ yarn add --dev @nuxtjs/tailwindcss npm install --save-dev @nuxtjs/tailwindcss ``` -*You can test latest additions on [Nightly Releases](https://tailwindcss.nuxtjs.org/getting-started/setup#nightly-releases)!* +*You can test latest additions on [Nightly Releases](https://tailwindcss.nuxtjs.org/getting-started/installation#nightly-releases)!* 2. Add `@nuxtjs/tailwindcss` to the `modules` section of `nuxt.config.{ts,js}` @@ -55,7 +55,7 @@ export default defineNuxtConfig({ That's it! You can now use Tailwind classes in your Nuxt app ✨ -[📖  Read more](https://tailwindcss.nuxtjs.org/getting-started/setup) +[📖  Read more](https://tailwindcss.nuxtjs.org/getting-started/) ## Contributing diff --git a/docs/content/2.tailwind/1.config.md b/docs/content/2.tailwind/1.config.md index 4e98850e..47e17f91 100644 --- a/docs/content/2.tailwind/1.config.md +++ b/docs/content/2.tailwind/1.config.md @@ -43,7 +43,7 @@ The `tailwind.config` file and `config` options are subject to the [merging stra If a `tailwind.config` file is present, it will be imported and used to overwrite the default configuration. All of the following file extensions will work by default: `.js`, `.cjs`, `.mjs`, and `.ts`. When not using the `.cjs` file extension, you need to use ESM syntax (see #549). -You can configure the path with the [configPath option](/getting-started/options#configpath). +You can configure the path with the [configPath option](/getting-started/configuration#configpath). ::callout{color="blue" icon="i-ph-info-duotone"} This config has the highest priority to overwrite the defaults and [tailwindcss.config](#config-option). diff --git a/docs/content/index.yml b/docs/content/index.yml index fd8dd2f9..0963604c 100644 --- a/docs/content/index.yml +++ b/docs/content/index.yml @@ -8,7 +8,7 @@ hero: links: - label: 'Get started' icon: 'i-heroicons-rocket-launch' - to: '/getting-started/setup' + to: '/getting-started/installation' size: lg - label: 'Star on GitHub' icon: 'i-simple-icons-github' @@ -32,7 +32,7 @@ features: items: - title: 'Zero Configuration' description: 'This module enables a quick and easy setup of Tailwind CSS in your Nuxt application.' - to: '/getting-started/setup' + to: '/getting-started/installation' - title: 'CSS Nesting' description: 'Supports CSS Nesting with postcss-nesting to use the latest CSS syntax.' to: 'https://drafts.csswg.org/css-nesting-1/' diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index eb5b74a2..b6ba262b 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -25,7 +25,7 @@ export default defineNuxtConfig({ } }, routeRules: { - '/getting-started': { redirect: '/getting-started/setup' }, + '/getting-started': { redirect: '/getting-started/installation' }, '/tailwind': { redirect: '/tailwind/config' }, '/examples': { redirect: '/examples/basic' }, '/api/search.json': { prerender: true } diff --git a/docs/public/_redirects b/docs/public/_redirects index 400f11e8..fab4de96 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -1,3 +1,3 @@ -/setup /getting-started/setup 302! -/options /getting-started/options 302! +/installation /getting-started/installation 302! +/configuration /getting-started/configuration 302! /releases /community/changelog 302! diff --git a/package.json b/package.json index d5bbb7fc..83e86d0f 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nuxtjs/tailwindcss", - "version": "6.11.1", + "version": "6.11.2", "description": "TailwindCSS module for Nuxt", "repository": "nuxt-modules/tailwindcss", "license": "MIT", diff --git a/src/viewer.ts b/src/viewer.ts index dc86cb90..4c35c84a 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -8,25 +8,41 @@ import type { TWConfig, ViewerConfig } from './types' export const setupViewer = async (twConfig: Partial, config: ViewerConfig, nuxt = useNuxt()) => { const route = joinURL(nuxt.options.app?.baseURL, config.endpoint) - // @ts-ignore - const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any - const routerPrefix = isNuxt3() ? route : undefined - - const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => twConfig, routerPrefix }).asMiddleware() - const viewerDevMiddleware = eventHandler((event) => { - const withoutSlash = withoutTrailingSlash(route) - if (event.node?.req.url === withoutSlash || event.req.url === withoutSlash) { - return sendRedirect(event, route, 301) - } - _viewerDevMiddleware(event.node?.req || event.req, event.node?.res || event.res) - }) + const [routeWithSlash, routeWithoutSlash] = [withTrailingSlash(route), withoutTrailingSlash(route)] - if (isNuxt3()) { addDevServerHandler({ route, handler: viewerDevMiddleware }) } - // @ts-ignore - if (isNuxt2()) { nuxt.options.serverMiddleware.push({ route, handler: (req, res) => viewerDevMiddleware(new H3Event(req, res)) }) } + // @ts-expect-error untyped package export + const viewerServer = (await import('tailwind-config-viewer/server/index.js').then(r => r.default || r))({ tailwindConfigProvider: () => twConfig }).asMiddleware() + const viewerDevMiddleware = eventHandler(event => viewerServer(event.node?.req || event.req, event.node?.res || event.res)) + + if (isNuxt3()) { + addDevServerHandler({ + handler: eventHandler(event => { + if (event.path === routeWithoutSlash) { + return sendRedirect(event, routeWithSlash, 301) + } + }) + }) + addDevServerHandler({ route, handler: viewerDevMiddleware }) + } + + if (isNuxt2()) { + // @ts-expect-error untyped nuxt2 property + nuxt.options.serverMiddleware.push( + // @ts-expect-error untyped handler parameters + (req, res, next) => { + if (req.url === routeWithoutSlash) { + return sendRedirect(new H3Event(req, res), routeWithSlash, 301) + } + + next() + }, + // @ts-expect-error untyped handler parameters + { route, handler: (req, res) => viewerDevMiddleware(new H3Event(req, res)) } + ) + } nuxt.hook('listen', (_, listener) => { - const viewerUrl = `${cleanDoubleSlashes(joinURL(withoutTrailingSlash(listener.url), config.endpoint))}` + const viewerUrl = cleanDoubleSlashes(joinURL(listener.url, config.endpoint)) logger.info(`Tailwind Viewer: ${underline(yellow(withTrailingSlash(viewerUrl)))}`) }) }