chore: update deps

.github/workflows/build-deploy.yml

@@ -16,41 +16,69 @@ jobs:
         id: environment
         run: |
           if [ "${{ github.ref }}" = "refs/heads/main" ]; then
-            echo "environment=production" >> "$GITHUB_OUTPUT"
-          elif [ "${{ github.ref }}" = "refs/heads/development" ]; then
-            echo "environment=development" >> "$GITHUB_OUTPUT"
+            ENVIRONMENT="production"
+            APP_NAME_SUFFIX=""
+          elif [ "${{ github.ref }}" = "refs/heads/develop" ]; then
+            ENVIRONMENT="development"
+            APP_NAME_SUFFIX="-development"
+          elif [ "${{github.event_name}}" = "pull_request"]; then
+            ENVIRONMENT="pr/${{ github.event.pull_request.number }}"
+            APP_NAME_SUFFIX="-pr-${{ github.event.pull_request.number }}"
           else
-            echo "environment=review/${{ github.ref_name }}" >> "$GITHUB_OUTPUT"
+            exit 1
           fi
+
+          echo "ENVIRONMENT=$ENVIRONMENT" >> $GITHUB_OUTPUT
+          echo "APP_NAME_SUFFIX=$APP_NAME_SUFFIX" >> $GITHUB_OUTPUT
     outputs:
-      environment: ${{ steps.environment.outputs.environment }}
+      environment: "${{ steps.environment.outputs.ENVIRONMENT }}"
+      app_name_suffix: "${{ steps.environment.outputs.APP_NAME_SUFFIX }}"
       registry: ghcr.io
-      image: ${{ github.repository }}/${{ github.ref_name }}
+      image: ${{ github.repository }}
 
-  build:
+  vars:
     needs: [env]
     runs-on: ubuntu-latest
+    environment:
+      name: ${{ needs.env.outputs.environment }}
+    steps:
+      - name: Generate public URL
+        id: public_url
+        run: |
+          if [[ -z "${{ vars.PUBLIC_URL }}" ]]; then
+            PUBLIC_URL=https://${{ needs.env.outputs.app_name_suffix }}.${{ vars.KUBE_INGRESS_BASE_DOMAIN }}
+          else
+            PUBLIC_URL="${{ vars.PUBLIC_URL }}"
+          fi
+
+          echo "PUBLIC_URL=$PUBLIC_URL" >> $GITHUB_OUTPUT
+    outputs:
+      public_url: ${{ steps.public_url.outputs.PUBLIC_URL }}
+
+  build:
+    needs: [env, vars]
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Log in to the Container registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ${{ needs.env.outputs.registry }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: ${{ needs.env.outputs.registry }}/${{ needs.env.outputs.image }}
           tags: |
@@ -62,30 +90,29 @@ jobs:
           #   type=raw,value=latest
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
-            NUXT_PUBLIC_APP_BASE_URL="${{ vars.NUXT_PUBLIC_APP_BASE_URL }}"
-            NUXT_PUBLIC_REDMINE_ID="${{ vars.NUXT_PUBLIC_REDMINE_ID }}"
+            NUXT_PUBLIC_APP_BASE_URL="${{ needs.vars.outputs.public_url }}"
             NUXT_PUBLIC_MATOMO_BASE_URL="${{ vars.NUXT_PUBLIC_MATOMO_BASE_URL }}"
             NUXT_PUBLIC_MATOMO_ID="${{ vars.NUXT_PUBLIC_MATOMO_ID }}"
+            NUXT_PUBLIC_REDMINE_ID="${{ vars.SERVICE_ID }}"
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
   deploy:
-    needs: [env, build]
+    needs: [env, vars, build]
     uses: acdh-oeaw/gl-autodevops-minimal-port/.github/workflows/deploy-cluster-2.yml@main
     secrets: inherit
     with:
+      environment: ${{ needs.env.outputs.environment }}
       DOCKER_TAG: ${{ needs.env.outputs.registry }}/${{ needs.env.outputs.image }}
-      APP_NAME: "frontend"
+      APP_NAME: "frontend${{ needs.env.outputs.app_name_suffix }}"
       APP_ROOT: "/"
-      SERVICE_ID: "${{ vars.NUXT_PUBLIC_REDMINE_ID }}"
-      PUBLIC_URL: "${{ vars.NUXT_PUBLIC_APP_BASE_URL }}"
-      POSTGRES_ENABLED: false
-      environment: ${{ needs.env.outputs.environment }}
+      SERVICE_ID: "${{ vars.SERVICE_ID }}"
+      PUBLIC_URL: "${{ needs.vars.outputs.public_url }}"
       default_port: "3000"

.github/workflows/validate.yml

@@ -21,17 +21,15 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
 
     steps:
-      - name: Checkout respository
-        uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-      # necessary because `actions/setup-node` does not yet support `corepack`.
-      # @see https://github.com/actions/setup-node/issues/531
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
+      - name: Enable corepack
+        run: corepack enable
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
@@ -42,6 +40,22 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Commit message
+        if: github.event_name == 'push'
+        run: |
+          pnpm exec commitlint \
+            --from ${{ github.event.before }} \
+            --to ${{ github.event.after }} \
+            --verbose
+
+      - name: Commit messages
+        if: github.event_name == 'pull_request'
+        run: |
+          pnpm exec commitlint \
+            --from ${{ github.event.pull_request.base.sha }} \
+            --to ${{ github.event.pull_request.head.sha }} \
+            --verbose
+
       - name: Format
         run: pnpm run format:check
 
@@ -54,14 +68,34 @@ jobs:
       - name: Test
         run: pnpm run test
 
+      - name: Get playwright version
+        run: |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache playwright browsers
+        uses: actions/cache@v3
+        id: cache-playwright-browsers
+        with:
+          path: "~/.cache/ms-playwright"
+          key: ${{ matrix.os }}-playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      # TODO: might need https://github.com/microsoft/playwright/issues/7249#issuecomment-1597663397
       - name: Install playwright browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
         run: pnpm exec playwright install --with-deps
 
+      - name: Cache Next.js build output
+        uses: actions/cache@v3
+        with:
+          path: ${{ github.workspace }}/.next/cache
+          key: ${{ matrix.os }}-nextjs-${{ hashFiles('pnpm-lock.yaml') }}
+
       - name: Build app
         run: pnpm run build
         env:
           NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
-          NUXT_PUBLIC_REDMINE_ID: "${{ vars.NUXT_PUBLIC_REDMINE_ID }}"
+          NUXT_PUBLIC_REDMINE_ID: "${{ vars.SERVICE_ID }}"
 
       - name: Run e2e tests
         run: pnpm run test:e2e

.npmrc

@@ -3,4 +3,4 @@ engine-strict=true
 # @see https://github.com/nuxt/nuxt/issues/14146
 shamefully-hoist=true
 shell-emulator=true
-use-node-version=18.17.1
+use-node-version=20.8.0

.vscode/extensions.json

@@ -9,6 +9,7 @@
 		"ms-playwright.playwright",
 		"stylelint.vscode-stylelint",
 		"vue.volar",
-		"vue.vscode-typescript-vue-plugin"
+		"vue.vscode-typescript-vue-plugin",
+		"zixuanchen.vitest-explorer"
 	]
 }

Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker/dockerfile:1
 
 # build
-FROM node:18-slim AS build
+FROM node:20-slim AS build
 
 RUN corepack enable
 
@@ -17,9 +17,9 @@ RUN pnpm fetch
 COPY --chown=node:node ./ ./
 
 ARG NUXT_PUBLIC_APP_BASE_URL
-ARG NUXT_PUBLIC_REDMINE_ID
 ARG NUXT_PUBLIC_MATOMO_BASE_URL
 ARG NUXT_PUBLIC_MATOMO_ID
+ARG NUXT_PUBLIC_REDMINE_ID
 
 RUN pnpm install --frozen-lockfile --offline
 
@@ -28,7 +28,7 @@ ENV NODE_ENV=production
 RUN pnpm run build
 
 # serve
-FROM node:18-slim AS serve
+FROM node:20-slim AS serve
 
 RUN mkdir /app && chown -R node:node /app
 WORKDIR /app

app.vue

@@ -1,5 +1,6 @@
 <template>
 	<NuxtLayout>
 		<NuxtPage />
+		<NuxtLoadingIndicator />
 	</NuxtLayout>
 </template>

components/app-footer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type NavLinkProps } from "@/components/nav-link.vue";
+import type { NavLinkProps } from "@/components/nav-link.vue";
 
 const t = useTranslations();
 

components/app-header.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type NavLinkProps } from "@/components/nav-link.vue";
+import type { NavLinkProps } from "@/components/nav-link.vue";
 
 const t = useTranslations();
 

components/color-scheme-switcher.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// import { MoonIcon, SunIcon } from "lucide-vue-next";
+import { MoonIcon, SunIcon } from "lucide-vue-next";
 
 const t = useTranslations();
 

components/nav-link.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type NuxtLinkProps } from "#app";
+import type { NuxtLinkProps } from "#app";
 
 export interface NavLinkProps
 	extends Omit<NuxtLinkProps, "href" | "to">,
@@ -11,7 +11,7 @@ const localePath = useLocalePath();
 </script>
 
 <template>
-	<NuxtLink :href="localePath(props.href as any /** Type mismatch. */)">
+	<NuxtLink :href="localePath(props.href)">
 		<slot />
 	</NuxtLink>
 </template>

components/route-announcer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type RouteLocationNormalized } from "vue-router";
+import type { RouteLocationNormalized } from "vue-router";
 
 const router = useRouter();
 

composables/use-locale.ts

@@ -1,4 +1,4 @@
-import { type Locale, type Schema } from "@/config/i18n.config";
+import type { Locale, Schema } from "@/config/i18n.config";
 
 export function useLocale() {
 	const { locale } = useI18n<Schema, Locale>();

composables/use-translations.ts

@@ -1,4 +1,4 @@
-import { type Locale, type Schema } from "@/config/i18n.config";
+import type { Locale, Schema } from "@/config/i18n.config";
 
 export function useTranslations() {
 	const { t } = useI18n<Schema, Locale>();

config/i18n.config.ts

@@ -1,6 +1,7 @@
-import { type LocaleObject } from "vue-i18n-routing";
+import type { LocaleObject } from "vue-i18n-routing";
 
-import type messages from "@/messages/en.json";
+import type de from "@/messages/de.json";
+import type en from "@/messages/en.json";
 
 export const locales = {
 	de: { code: "de", iso: "de-AT", file: "de.json" },
@@ -11,8 +12,17 @@ export type Locale = keyof typeof locales;
 
 export const defaultLocale: Locale = "en";
 
-export type Messages = typeof messages;
+export type Messages = typeof en;
 
 export interface Schema {
 	message: Messages;
 }
+
+export function isValidLocale(value: string): value is Locale {
+	return value in locales;
+}
+
+export interface Translations extends Record<Locale, Messages> {
+	de: typeof de;
+	en: typeof en;
+}

config/imprint.config.ts

@@ -1,17 +1,11 @@
 import { createUrl, createUrlSearchParams } from "@acdh-oeaw/lib";
 
-import { type Locale } from "@/config/i18n.config";
-
-const baseUrl = "https://shared.acdh.oeaw.ac.at";
-const pathname = "/acdh-common-assets/api/imprint.php";
+import type { Locale } from "@/config/i18n.config";
 
 export function createImprintUrl(locale: Locale, redmineId: string): URL {
 	return createUrl({
-		baseUrl,
-		pathname,
-		searchParams: createUrlSearchParams({
-			outputLang: locale,
-			serviceID: redmineId,
-		}),
+		baseUrl: "https://imprint.acdh.oeaw.ac.at",
+		pathname: `/${redmineId}`,
+		searchParams: createUrlSearchParams({ locale }),
 	});
 }

e2e/pages/imprint.test.ts

@@ -1,28 +1,28 @@
-import AxeBuilder from "@axe-core/playwright";
+import { AxeBuilder } from "@axe-core/playwright";
 import { expect, test } from "@playwright/test";
 
 test.describe("imprint page", () => {
 	test("should have document title", async ({ page }) => {
-		await page.goto("/imprint");
+		await page.goto("/en/imprint");
 		await expect(page).toHaveTitle("Imprint | ACDH-CH App");
 
 		await page.goto("/de/imprint");
 		await expect(page).toHaveTitle("Impressum | ACDH-CH App");
 	});
 
 	test("should have imprint text", async ({ page }) => {
-		await page.goto("/imprint");
+		await page.goto("/en/imprint");
 		await expect(page.getByRole("main")).toContainText("Legal disclosure");
 
 		await page.goto("/de/imprint");
 		await expect(page.getByRole("main")).toContainText("Offenlegung");
 	});
 
 	test("should not have any automatically detectable accessibility issues", async ({ page }) => {
-		await page.goto("/");
+		await page.goto("/en/imprint");
 		expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
 
-		await page.goto("/de");
+		await page.goto("/de/imprint");
 		expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
 	});
 });