refactor: adopt nuxt v4 folder structure, remove unused deps

.dockerignore

@@ -38,7 +38,7 @@ dist
 /test-results/
 
 # generated api client
-lib/api.ts
+app/lib/api.ts
 
 # generated iiif manifests
 assets/manifests/

.github/workflows/build-deploy.yml

@@ -10,7 +10,8 @@ on:
 
 jobs:
   env:
-    runs-on: ubuntu-latest
+    name: Generate environment variables
+    runs-on: ubuntu-22.04
     steps:
       - name: Derive environment from git ref
         id: environment
@@ -37,8 +38,9 @@ jobs:
       image: ${{ github.repository }}
 
   vars:
+    name: Generate public url
     needs: [env]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     environment:
       name: ${{ needs.env.outputs.environment }}
     steps:
@@ -56,11 +58,14 @@ jobs:
       public_url: ${{ steps.public_url.outputs.PUBLIC_URL }}
 
   build:
+    name: Build and push docker image
     needs: [env, vars]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       contents: read
       packages: write
+    environment:
+      name: "${{ needs.env.outputs.environment }}"
 
     steps:
       - name: Checkout repository
@@ -109,6 +114,7 @@ jobs:
           cache-to: type=gha,mode=max
 
   deploy:
+    name: Deploy docker image
     needs: [env, vars, build]
     uses: acdh-oeaw/gl-autodevops-minimal-port/.github/workflows/deploy.yml@main
     secrets: inherit

.github/workflows/validate.yml

@@ -22,7 +22,7 @@ jobs:
       fail-fast: true
       matrix:
         node-version: [22.x]
-        os: [ubuntu-latest]
+        os: [ubuntu-22.04]
 
     steps:
       - name: Checkout repository
@@ -79,15 +79,15 @@ jobs:
       - name: Build app
         run: pnpm run build
         env:
-          NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
           NUXT_PUBLIC_API_BASE_URL: "${{ vars.NUXT_PUBLIC_API_BASE_URL }}"
+          NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
           NUXT_PUBLIC_REDMINE_ID: "${{ vars.SERVICE_ID }}"
 
       - name: Run e2e tests
         run: pnpm run test:e2e
         env:
-          NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
           NUXT_PUBLIC_API_BASE_URL: "${{ vars.NUXT_PUBLIC_API_BASE_URL }}"
+          NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
 
       - uses: actions/upload-artifact@v4
         if: always()

.gitignore

@@ -36,7 +36,7 @@ dist
 /test-results/
 
 # generated api client
-lib/api.ts
+app/lib/api.ts
 
 # generated iiif manifests
 assets/manifests/

.vscode/app.code-snippets

@@ -8,11 +8,11 @@
 			"\tprerender: true,",
 			"});",
 			"",
-			"definePageMeta({",
+			"const t = useTranslations();",
+			"",
+			"usePageMetadata({",
 			"\ttitle: \"${1:Name}Page.meta.title\",",
 			"});",
-			"",
-			"const t = useTranslations();",
 			"</script>",
 			"",
 			"<template>",

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
 	"css.validate": false,
+	"debug.toolBarLocation": "docked",
 	"editor.codeActionsOnSave": {
 		"source.fixAll": "explicit"
 	},
@@ -13,9 +14,6 @@
 	"editor.rulers": [100],
 	"editor.stickyScroll.enabled": true,
 	"eslint.enable": true,
-	"eslint.options": {
-		"ignorePath": ".gitignore"
-	},
 	"eslint.validate": ["javascript", "typescript", "vue"],
 	"files.associations": {
 		"*.css": "tailwindcss"
@@ -44,7 +42,10 @@
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"workbench.editor.labelFormat": "medium",
 	"workbench.tree.enableStickyScroll": true,
-	"[markdown][mdc]": {
+	"[markdown]": {
+		"editor.wordWrap": "on"
+	},
+	"[mdc]": {
 		"editor.wordWrap": "on"
 	}
 }

components/imprint.vue → app/components/imprint.vue

@@ -5,7 +5,7 @@ const env = useRuntimeConfig();
 
 const locale = useLocale();
 
-const redmineId = env.public.NUXT_PUBLIC_REDMINE_ID;
+const redmineId = env.public.redmineId;
 
 const imprint = await useFetch(String(createImprintUrl(locale.value, redmineId)), {
 	responseType: "text",

config/i18n.config.ts → app/config/i18n.config.ts

@@ -1,6 +1,6 @@
 import type { LocaleObject } from "vue-i18n-routing";
 
-import type de from "@/messages/de.json";
+import type de from "~/i18n/messages/de.json";
 
 export const locales = ["de"] as const;
 

layouts/default.vue → app/layouts/default.vue

@@ -47,7 +47,7 @@ useHead({
 				property: "og:image",
 				content: String(
 					createUrl({
-						baseUrl: env.public.NUXT_PUBLIC_APP_BASE_URL,
+						baseUrl: env.public.appBaseUrl,
 						pathname: "/opengraph-image.png",
 					}),
 				),
@@ -58,10 +58,10 @@ useHead({
 			...(i18nHead.value.meta ?? []),
 		];
 
-		if (isNonEmptyString(env.public.NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION)) {
+		if (isNonEmptyString(env.public.googleSiteVerification)) {
 			meta.push({
 				name: "google-site-verification",
-				content: env.public.NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
+				content: env.public.googleSiteVerification,
 			});
 		}
 
@@ -79,16 +79,10 @@ useHead({
 			{ type: "application/ld+json", innerHTML: JSON.stringify(jsonLd, safeJsonLdReplacer) },
 		];
 
-		if (
-			isNonEmptyString(env.public.NUXT_PUBLIC_MATOMO_BASE_URL) &&
-			isNonEmptyString(env.public.NUXT_PUBLIC_MATOMO_ID)
-		) {
+		if (isNonEmptyString(env.public.matomoBaseUrl) && isNonEmptyString(env.public.matomoId)) {
 			scripts.push({
 				type: "",
-				innerHTML: createAnalyticsScript(
-					env.public.NUXT_PUBLIC_MATOMO_BASE_URL,
-					env.public.NUXT_PUBLIC_MATOMO_ID,
-				),
+				innerHTML: createAnalyticsScript(env.public.matomoBaseUrl, env.public.matomoId),
 			});
 		}
 

pages/index.vue → app/pages/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useQuery } from "@tanstack/vue-query";
-import network from "assets/networkSnippet.json";
+
+import network from "~/assets/networkSnippet.json";
 
 const localePath = useLocalePath();
 defineRouteRules({

plugins/api.ts → app/plugins/api.ts

@@ -3,11 +3,12 @@ import { createApiClient } from "../lib/api";
 export default defineNuxtPlugin({
 	name: "api",
 	setup() {
-		const config = useRuntimeConfig();
-		const apiSpecUrl = config.public.NUXT_PUBLIC_API_BASE_URL;
-		const client = createApiClient(apiSpecUrl, {
+		const env = useRuntimeConfig();
+
+		const client = createApiClient(env.public.apiBaseUrl, {
 			axiosConfig: { paramsSerializer: { indexes: null } },
 		});
+
 		return {
 			provide: {
 				api: client,

e2e/lib/fixtures/i18n.ts

@@ -8,7 +8,7 @@ export type I18n = _I18n<{ [K in Locale]: Messages }, {}, {}, Locale, false>["gl
 
 export async function createI18n(_page: Page, locale = defaultLocale): Promise<I18n> {
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const _messages = await import(`@/messages/${locale}.json`, { with: { type: "json" } });
+	const _messages = await import(`~/i18n/messages/${locale}.json`, { with: { type: "json" } });
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 	const messages = _messages.default as Messages;
 

e2e/tsconfig.json

@@ -4,7 +4,7 @@
 	"compilerOptions": {
 		"baseUrl": "..",
 		"paths": {
-			"@/*": ["./*"],
+			"@/*": ["./app/*"],
 			"~/*": ["./*"]
 		}
 	}

nuxt.config.ts

@@ -1,12 +1,13 @@
 import { fileURLToPath } from "node:url";
 
-import { defaultLocale, localesMap } from "./config/i18n.config";
+import { defaultLocale, localesMap } from "./app/config/i18n.config";
 
 const baseUrl = process.env.NUXT_PUBLIC_APP_BASE_URL!;
 
 export default defineNuxtConfig({
 	alias: {
-		"@": fileURLToPath(new URL("./", import.meta.url)),
+		"@": fileURLToPath(new URL("./app/", import.meta.url)),
+		"~": fileURLToPath(new URL("./", import.meta.url)),
 	},
 	app: {
 		layoutTransition: false,
@@ -16,11 +17,10 @@ export default defineNuxtConfig({
 		classSuffix: "",
 		dataValue: "ui-color-scheme",
 	},
-	components: [{ path: "@/components", extensions: [".vue"], pathPrefix: false }],
+	components: [{ extensions: [".vue"], path: "@/components", pathPrefix: false }],
 	content: {
 		defaultLocale,
 		locales: Object.keys(localesMap),
-		markdown: {},
 	},
 	css: [
 		"@fontsource-variable/inter/standard.css",
@@ -29,7 +29,7 @@ export default defineNuxtConfig({
 		"@/styles/index.css",
 	],
 	devtools: {
-		enabled: process.env.NODE_ENV === "development",
+		enabled: true,
 	},
 	eslint: {
 		config: {
@@ -55,17 +55,20 @@ export default defineNuxtConfig({
 		/** @see https://github.com/nuxt/nuxt/issues/21821 */
 		inlineStyles: false,
 	},
+	future: {
+		compatibilityVersion: 4,
+	},
 	i18n: {
 		baseUrl,
 		defaultLocale,
 		detectBrowserLanguage: {
 			redirectOn: "root",
 		},
-		langDir: "./messages",
+		langDir: "../i18n/messages",
 		lazy: true,
 		locales: Object.values(localesMap),
 		strategy: "prefix",
-		vueI18n: "./i18n.config.ts",
+		vueI18n: "./i18n/i18n.config.ts",
 	},
 	imports: {
 		dirs: ["./config/"],
@@ -83,25 +86,23 @@ export default defineNuxtConfig({
 		compressPublicAssets: true,
 		prerender: {
 			routes: ["/manifest.webmanifest", "/robots.txt", "/sitemap.xml"],
-			failOnError: false,
 		},
 	},
-	plugins: ["@/plugins/query-client.ts", "@/plugins/api.ts"],
 	postcss: {
 		plugins: {
 			tailwindcss: {},
 		},
 	},
 	runtimeConfig: {
-		NODE_ENV: process.env.NODE_ENV,
 		public: {
-			NUXT_PUBLIC_API_BASE_URL: process.env.NUXT_PUBLIC_API_BASE_URL,
-			NUXT_PUBLIC_APP_BASE_URL: process.env.NUXT_PUBLIC_APP_BASE_URL,
-			NUXT_PUBLIC_BOTS: process.env.NUXT_PUBLIC_BOTS,
-			NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION: process.env.NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
-			NUXT_PUBLIC_MATOMO_BASE_URL: process.env.NUXT_PUBLIC_MATOMO_BASE_URL,
-			NUXT_PUBLIC_MATOMO_ID: process.env.NUXT_PUBLIC_MATOMO_ID,
-			NUXT_PUBLIC_REDMINE_ID: process.env.NUXT_PUBLIC_REDMINE_ID,
+			apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL,
+			appBaseUrl: process.env.NUXT_PUBLIC_APP_BASE_URL,
+			bots: process.env.NUXT_PUBLIC_BOTS,
+			googleSiteVerification: process.env.NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
+			iiifBaseUrl: process.env.NUXT_PUBLIC_IIIF_BASE_URL,
+			matomoBaseUrl: process.env.NUXT_PUBLIC_MATOMO_BASE_URL,
+			matomoId: process.env.NUXT_PUBLIC_MATOMO_ID,
+			redmineId: process.env.NUXT_PUBLIC_REDMINE_ID,
 		},
 	},
 	typescript: {
@@ -110,8 +111,9 @@ export default defineNuxtConfig({
 		// https://github.com/nuxt/nuxt/issues/14816#issuecomment-1484918081
 		tsConfig: {
 			compilerOptions: {
+				baseUrl: ".",
 				paths: {
-					"@/*": ["./*"],
+					"@/*": ["./app/*"],
 					"~/*": ["./*"],
 				},
 			},

package.json

@@ -9,7 +9,7 @@
 	},
 	"packageManager": "[email protected]",
 	"scripts": {
-		"analyze": "nuxt analyze",
+		"analyze": "dotenv -c -- nuxt analyze",
 		"build": "nuxt build --dotenv ./.env.local",
 		"dev": "nuxt dev --dotenv ./.env.local",
 		"format:check": "prettier . \"!./@(content|public)/**\" --cache --cache-location ./.prettiercache --check",
@@ -50,12 +50,11 @@
 		"@nuxt/image": "^1.8.1",
 		"@nuxtjs/color-mode": "^3.5.2",
 		"@nuxtjs/i18n": "^8.5.5",
+		"@nuxtjs/leaflet": "^1.2.3",
 		"@tanstack/vue-query": "^5.59.16",
-		"@types/d3-force": "^3.0.10",
 		"@vueuse/core": "^11.1.0",
 		"@vueuse/nuxt": "^11.1.0",
 		"@zodios/core": "^10.9.6",
-		"chroma-js": "^3.1.2",
 		"citation-js": "^0.7.16",
 		"d3": "^7.9.0",
 		"d3-force": "^3.0.0",
@@ -64,7 +63,7 @@
 		"force-graph": "^1.45.0",
 		"lodash": "^4.17.21",
 		"lucide-vue-next": "^0.453.0",
-		"maplibre-gl": "^4.7.1",
+		"nuxt": "^3.13.2",
 		"openapi-zod-client": "^1.18.2",
 		"pino-http": "^10.3.0",
 		"satori": "^0.11.2",
@@ -87,11 +86,10 @@
 		"@acdh-oeaw/tsconfig": "^1.2.0",
 		"@nuxt/devtools": "^1.6.0",
 		"@nuxt/eslint": "^0.6.0",
-		"@nuxtjs/leaflet": "^1.2.3",
 		"@playwright/test": "^1.48.1",
 		"@tailwindcss/typography": "^0.5.15",
-		"@types/chroma-js": "^2.4.4",
 		"@types/d3": "^7.4.3",
+		"@types/d3-force": "^3.0.10",
 		"@types/lodash": "^4.17.12",
 		"@types/node": "^22.7.9",
 		"axe-core": "^4.10.2",
@@ -106,7 +104,6 @@
 		"is-ci": "^3.0.1",
 		"lint-staged": "^15.2.10",
 		"npm-run-all2": "^7.0.1",
-		"nuxt": "^3.13.2",
 		"openapi3-ts": "^4.4.0",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",