WIP - Nuxt 3

[zackkrida]

@WordPress/openverse-frontend and @sarayourfriend I'm creating this draft pull request as a place to discuss efforts to test and deploy https://nuxt-preview.openverse.org/.

I was able to successfully build and push Nuxt 3 from this branch with the following changes:

This diff:

diff --git a/frontend/justfile b/frontend/justfile
index 5a54dc43c..488a95d62 100644
--- a/frontend/justfile
+++ b/frontend/justfile
@@ -35,6 +35,7 @@ export FRONTEND_PNPM_VERSION := `grep 'packageManager' ../package.json | awk -F'
 # Build the frontend Docker image
 build-img tag="openverse-frontend:local" target="app":
     docker build \
+      --load \
       --target {{ target }} \
       --build-context 'repo_root=..' \
       --build-arg FRONTEND_NODE_VERSION=$(just node-version) \
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index e1782c3c2..6e6f15ac0 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -43,7 +43,7 @@ const openverseLocales = [
     name: "English",
     nativeName: "English",
   },
-  ...(locales ?? []),
+  // ...(locales ?? []),
 ].filter((l) => Boolean(l.iso)) as LocaleObject[]
 
 const isProdNotPlaywright = isProd && !(process.env.PW === "true")
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 453f30fc0..40752e85b 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -4,7 +4,7 @@
     main: "Go to {link} or search for something similar from the field below.",
   },
   hero: {
-    subtitle: "Explore more than 700 million creative works",
+    subtitle: "Testing Nuxt 3",
     description: "An extensive library of free stock photos, images, and audio, available for free use.",
     search: {
       placeholder: "Search for content",

And manually switching the nginx image to use the latest tag in the "staging-nuxt-preview" task definition (and template, so future deploys should work).

Edit: the patch was updated to make it pass the Playwright tests: locales are added if the

Deployment

Maintainers only

1. Authenticate with ghcr.io

$ export CR_PAT=YOUR_TOKEN
$ echo $CR_PAT | docker login ghcr.io -u USERNAME --password-stdin
> Login Succeeded

2. Run the just script

just frontend/push-to-nuxt-preview USERNAME

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/4257

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

[github-actions]

Playwright failure test results: https://github.com/WordPress/openverse/actions/runs/9305162669

It looks like some of the Playwright tests failed. You can download the trace output and image diffs for the failed tests under the "Artifacts" section in the above page.

You can read the docs on how to use this artifact.

If the test is flaky, follow the flaky test triage procedure.