@dargmuesli/nuxt-vio 3.7.1 → 4.0.0

package/README.md

@@ -1,73 +1,7 @@
-# Nuxt Layer Starter
+# Vio
 
-Create Nuxt extendable layer with this GitHub template.
+Vio is a [Nuxt layer](https://nuxt.com/docs/getting-started/layers) powering:
 
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-pnpm install
-```
-
-## Working on your theme
-
-Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
-
-The `.playground` directory should help you on trying your theme during development.
-
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your theme itself.
-
-## Distributing your theme
-
-Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
-
-To do so, you only have to check if `files` in `package.json` are valid, then run:
-
-```bash
-npm publish --access public
-```
-
-Once done, your users will only have to run:
-
-```bash
-npm install --save your-theme
-```
-
-Then add the dependency to their `extends` in `nuxt.config`:
-
-```ts
-defineNuxtConfig({
-  extends: 'your-theme'
-})
-```
-
-## Development Server
-
-Start the development server on http://localhost:3000
-
-```bash
-pnpm dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-pnpm build
-```
-
-Or statically generate it with:
-
-```bash
-pnpm generate
-```
-
-Locally preview production build:
-
-```bash
-pnpm preview
-```
-
-Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
+- https://jonas-thelemann.de
+- https://creal.jonas-thelemann.de
+- https://trapparty.jonas-thelemann.de

package/app.config.ts

@@ -1,9 +1,6 @@
-import { useServerSeoMeta } from '@unhead/vue'
-
 export default defineAppConfig({
   vio: {
     pages: undefined,
-    seoMeta: undefined,
     server: {
       middleware: {
         headers: {
@@ -83,7 +80,6 @@ declare module 'nuxt/schema' {
           }
         }
       }
-      seoMeta?: Parameters<typeof useServerSeoMeta>[0]
       server?: {
         middleware: {
           headers: {

package/components/vio/_/VioError.vue

@@ -1,12 +1,14 @@
 <template>
-  <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
   <div>
-    {{ description }}
+    <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
+    <div>
+      {{ description }}
+    </div>
+    <pre
+      v-if="stack && !runtimeConfig.public.vio.isInProduction"
+      v-html="stack"
+    />
   </div>
-  <pre
-    v-if="stack && !runtimeConfig.public.vio.isInProduction"
-    v-html="stack"
-  />
 </template>
 
 <script setup lang="ts">

package/composables/useAppLayout.ts

@@ -2,8 +2,7 @@ export const useAppLayout = () => {
   const appConfig = useAppConfig()
   const siteConfig = useSiteConfig()
 
-  // TODO: replace with `useServerHeadSafe`
-  useHeadSafe({
+  useServerHeadSafe({
     ...useLocaleHead({ addDirAttribute: true, addSeoAttributes: true }).value,
     bodyAttrs: {
       class:
@@ -11,22 +10,16 @@ export const useAppLayout = () => {
     },
   })
 
-  // TODO: convert to `useServerHeadSafe` (https://github.com/harlan-zw/nuxt-seo-kit/issues/98)
-  useSeoMeta({
+  useServerSeoMeta({
     titleTemplate: (title) =>
-      title && title !== siteConfig.name
-        ? `${title} ${siteConfig.titleSeparator} ${siteConfig.name}`
-        : siteConfig.name,
+      TITLE_TEMPLATE({
+        siteName: siteConfig.name,
+        title,
+      }),
   })
 
-  if (appConfig.vio.seoMeta) {
-    // TODO: replace with `useServerSeoMeta`
-    useSeoMeta(appConfig.vio.seoMeta)
-  }
-
   if (appConfig.vio.themeColor) {
-    // TODO: replace with `useServerSeoMeta`
-    useSeoMeta({
+    useServerSeoMeta({
       msapplicationTileColor: appConfig.vio.themeColor,
       themeColor: appConfig.vio.themeColor,
     })

package/composables/useFavicons.ts

@@ -1,11 +1,10 @@
 export const useFavicons = () => {
   const appConfig = useAppConfig()
 
-  // TODO: replace with `useServerHeadSafe`
-  useHeadSafe({
+  useServerHeadSafe({
     link: [
       {
-        href: `/assets/static/favicon/site.webmanifest?v=${CACHE_VERSION}`,
+        href: `/site.webmanifest?v=${CACHE_VERSION}`,
         rel: 'manifest',
       },
       {

package/composables/useHeadDefault.ts

@@ -1,22 +1,28 @@
 import { defu } from 'defu'
-import type { ComputedRef } from 'vue'
+import type { UseSeoMetaInput } from '@unhead/vue'
 
 export const useHeadDefault = ({
   extension,
   title,
 }: {
-  extension?: Parameters<typeof useServerSeoMeta>[0]
+  extension?: UseSeoMetaInput
   title: string | ComputedRef<string>
 }) => {
   const attrs = useAttrs()
+  const siteConfig = useSiteConfig()
 
-  const defaults: Parameters<typeof useServerSeoMeta>[0] = {
+  const defaults: UseSeoMetaInput = {
     description: attrs['site-description'] as string, // TODO: remove (https://github.com/harlan-zw/nuxt-site-config/pull/7)
     msapplicationConfig: `/assets/static/favicon/browserconfig.xml?v=${CACHE_VERSION}`,
     title,
     twitterDescription: attrs['site-description'] as string,
-    twitterTitle: title,
+    twitterTitle: ref(
+      TITLE_TEMPLATE({
+        siteName: siteConfig.name,
+        title: toValue(title),
+      }),
+    ), // TODO: remove `ref`
   }
 
-  useSeoMeta(defu(extension, defaults)) // TODO: replace with `useServerSeoMeta`
+  useServerSeoMeta(defu(extension, defaults))
 }

package/composables/usePolyfills.ts

@@ -5,8 +5,7 @@ export const usePolyfills = () => {
     '%2C',
   )}&flags=gated`
 
-  // TODO: replace with `useServerHead`
-  useHead({
+  useServerHead({
     link: [
       {
         rel: 'preload',

package/error.vue

@@ -21,8 +21,7 @@ const errorProp = toRef(() => props.error)
 // initialization
 useAppLayout()
 
-// TODO: replace with `useServerHeadSafe`
-useHeadSafe({
+useServerHeadSafe({
   title: `${errorProp.value.statusCode} - ${errorProp.value.message}`,
 })
 </script>

package/nuxt.config.ts

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url'
 import { defu } from 'defu'
 
 import {
-  BASE_URL,
+  SITE_URL,
   I18N_COOKIE_NAME,
   I18N_MODULE_CONFIG,
   SITE_NAME,
@@ -29,6 +29,9 @@ export default defineNuxtConfig(
             lang: 'en', // fallback data to prevent invalid html at generation
           },
           titleTemplate: '%s', // fully set in `composables/useAppLayout.ts`
+          templateParams: {
+            separator: '·',
+          },
         },
         pageTransition: {
           name: 'layout',
@@ -36,7 +39,7 @@ export default defineNuxtConfig(
       },
       devtools: {
         enabled:
-          process.env.NODE_ENV !== 'production' &&
+          process.env.NODE_ENV === 'development' &&
           !process.env.NUXT_PUBLIC_VIO_IS_TESTING,
         timeline: {
           enabled: true,
@@ -149,7 +152,6 @@ export default defineNuxtConfig(
         },
       },
       linkChecker: {
-        debug: process.env.NODE_ENV === 'development',
         failOnError: true,
       },
       seo: {
@@ -157,7 +159,6 @@ export default defineNuxtConfig(
       },
       site: {
         debug: process.env.NODE_ENV === 'development',
-        titleSeparator: '·',
       },
       sitemap: {
         exclude: I18N_MODULE_CONFIG.locales.map(
@@ -170,7 +171,7 @@ export default defineNuxtConfig(
       },
     },
     VIO_NUXT_BASE_CONFIG({
-      baseUrl: BASE_URL,
+      siteUrl: SITE_URL,
       defaultLocale: 'en',
       siteName: SITE_NAME,
       stagingHost: 'localhost:3000',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.7.1",
+  "version": "4.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.7.4",
+  "packageManager": "pnpm@8.7.5",
   "files": [
     "assets",
     "components",
@@ -25,13 +25,15 @@
     "error.vue",
     "i18n.config.ts",
     "nuxt.config.ts",
+    "playwright.config.ts",
     "tailwind.config.ts"
   ],
   "main": "nuxt.config.ts",
   "scripts": {
-    "build": "nuxt build .playground",
-    "dev": "nuxt dev .playground",
-    "generate": "nuxt generate .playground",
+    "build": "pnpm build:node",
+    "build:node": "nuxt build .playground",
+    "build:static": "SITE_URL=http://localhost:3002 nuxt generate .playground",
+    "generate": "pnpm build:static",
     "lint:fix": "pnpm lint:js --fix && pnpm lint:ts --fix && pnpm lint:style --fix",
     "lint:js": "eslint --cache --ext .js,.ts,.vue --ignore-path .gitignore .",
     "lint:staged": "lint-staged",
@@ -40,16 +42,21 @@
     "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
     "prepare": "nuxt prepare .playground",
     "preview": "nuxt preview .playground",
-    "start": "PORT=3001 node .playground/.output/server/index.mjs",
-    "test:e2e:dev": "cross-env NUXT_PUBLIC_VIO_IS_TESTING=1 pnpm test:e2e",
+    "start:dev": "nuxt dev .playground",
+    "start:node": "node .playground/.output/server/index.mjs",
+    "start:static": "serve .playground/.output/public",
     "test:e2e:docker:br": "pnpm test:e2e:docker:build && pnpm test:e2e:docker:run",
     "test:e2e:docker:build": "docker build -t test-e2e_base --build-arg UID=$(id -u) --build-arg GID=$(id -g) --target test-e2e_base ..",
-    "test:e2e:docker:dev:update": "pnpm test:e2e:docker:dev --update-snapshots",
-    "test:e2e:docker:dev": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:dev",
-    "test:e2e:docker:prod:update": "pnpm test:e2e:docker:prod --update-snapshots",
-    "test:e2e:docker:prod": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:prod",
     "test:e2e:docker:run": "docker run --rm -v \"$PWD/..:/srv/app\" -v \"$(pnpm store path):/srv/.pnpm-store\" test-e2e_base",
-    "test:e2e:prod": "cross-env NUXT_PUBLIC_VIO_IS_TESTING=1 NODE_ENV=production pnpm test:e2e",
+    "test:e2e:docker:server:dev:update": "pnpm test:e2e:docker:server:dev --update-snapshots",
+    "test:e2e:docker:server:dev": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:server:dev",
+    "test:e2e:docker:server:node:update": "pnpm test:e2e:docker:server:node --update-snapshots",
+    "test:e2e:docker:server:node": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:server:node",
+    "test:e2e:docker:server:static:update": "pnpm test:e2e:docker:server:static --update-snapshots",
+    "test:e2e:docker:server:static": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:server:static",
+    "test:e2e:server:dev": "cross-env PORT=3000 SITE_URL=http://localhost:3000 VIO_SERVER=dev pnpm test:e2e",
+    "test:e2e:server:node": "cross-env NODE_ENV=production NUXT_PUBLIC_I18N_BASE_URL=http://localhost:3001 NUXT_PUBLIC_SITE_URL=http://localhost:3001 PORT=3001 VIO_SERVER=node pnpm test:e2e",
+    "test:e2e:server:static": "cross-env NODE_ENV=production PORT=3002 SITE_URL=http://localhost:3002 VIO_SERVER=static pnpm test:e2e",
     "test:e2e": "playwright test"
   },
   "dependencies": {
@@ -76,12 +83,14 @@
     "@vuelidate/validators": "2.0.4",
     "clipboard": "2.0.11",
     "cookie": "0.5.0",
+    "cross-env": "7.0.3",
     "dayjs": "2.0.0-alpha.4",
     "is-https": "4.0.0",
     "jiti": "1.20.0",
     "jose": "4.14.6",
     "lodash-es": "4.17.21",
     "pinia": "2.1.6",
+    "serve": "14.2.1",
     "sweetalert2": "11.7.27",
     "vue-gtag": "2.0.1",
     "vue-tsc": "1.8.10"
@@ -89,7 +98,6 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
-    "cross-env": "7.0.3",
     "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-compat": "4.2.0",

package/playwright.config.ts

@@ -0,0 +1,96 @@
+import { defineConfig, devices } from '@playwright/test'
+import { SITE_URL } from './utils/constants'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+
+  outputDir: 'tests/e2e/results',
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['html', { outputFolder: 'tests/e2e/report' }]],
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 1 : 0,
+
+  testDir: './tests/e2e/specs',
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: SITE_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: `pnpm run start:${process.env.VIO_SERVER || 'dev'}`,
+    env: {
+      NUXT_PUBLIC_VIO_IS_TESTING: 'true',
+    },
+    timeout: process.env.NODE_ENV === 'production' ? 10000 : 100000,
+    url: process.env.SITE_URL || SITE_URL,
+    reuseExistingServer: !process.env.CI,
+  },
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+})

package/utils/constants.ts

@@ -2,15 +2,13 @@ import { helpers } from '@vuelidate/validators'
 
 export const SITE_NAME = 'Vio'
 
-export const BASE_URL =
-  (process.env.NUXT_PUBLIC_HOST ? 'https' : 'http') +
-  '://' +
-  (process.env.NUXT_PUBLIC_HOST ||
-    `${process.env.HOST || 'localhost'}:${
-      !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
-        ? '3000'
-        : '3001'
-    }`)
+export const SITE_URL =
+  process.env.SITE_URL ||
+  process.env.NUXT_PUBLIC_SITE_URL ||
+  (process.env.HOST ? 'https' : 'http') +
+    '://' +
+    (process.env.HOST ||
+      `${process.env.HOST || 'localhost'}:${process.env.PORT || '3000'}`)
 export const CACHE_VERSION = 'bOXMwoKlJr'
 export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
 export const COOKIE_SEPARATOR = '_'
@@ -45,15 +43,22 @@ export const REGEX_UUID =
   /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
 export const TIMEZONE_HEADER_KEY = `X-${SITE_NAME}-Timezone`
+export const TITLE_TEMPLATE = ({
+  siteName,
+  title,
+}: {
+  siteName: string
+  title?: string
+}) => (title && title !== siteName ? `${title} · ${siteName}` : siteName)
 export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300
 export const VERIFICATION_FORMAT_UUID = helpers.regex(REGEX_UUID)
 export const VIO_NUXT_BASE_CONFIG = ({
-  baseUrl,
+  siteUrl,
   defaultLocale,
   siteName,
   stagingHost,
 }: {
-  baseUrl?: string
+  siteUrl?: string
   defaultLocale?: string
   siteName: string
   stagingHost?: string
@@ -67,14 +72,14 @@ export const VIO_NUXT_BASE_CONFIG = ({
     runtimeConfig: {
       public: {
         i18n: {
-          ...(baseUrl ? { baseUrl } : {}),
+          ...(siteUrl ? { baseUrl: siteUrl } : {}),
         },
         vio: {
           ...(stagingHost
             ? {
                 stagingHost:
                   process.env.NODE_ENV !== 'production' &&
-                  !process.env.NUXT_PUBLIC_HOST
+                  !process.env.NUXT_PUBLIC_SITE_URL
                     ? stagingHost
                     : undefined,
               }
@@ -89,7 +94,7 @@ export const VIO_NUXT_BASE_CONFIG = ({
       ...I18N_MODULE_CONFIG, // `langDir`, `lazy` and `locales` must be configured to extend a layer having lazy-loaded translations (https://v8.i18n.nuxtjs.org/guide/layers#locales)
     },
     site: {
-      ...(baseUrl ? { url: baseUrl } : {}),
+      ...(siteUrl ? { url: siteUrl } : {}),
       ...(defaultLocale ? { defaultLocale } : {}),
       name: siteName,
     },