feat: update ui components, data fetching, tooling, map (#11)

this pr:

- introduces vue-query for request deduplication and response caching
(see https://tanstack.com/query/latest/docs/framework/vue/overview)
- generates a new api client based on openapi spec document (see
https://openapi-ts.pages.dev/)
- replaces vuetify ui components with radix/shadcn (see
https://www.shadcn-vue.com/)
- replaces leaflet with maplibre-gl for the map view (see
https://maplibre.org/maplibre-gl-js/docs/)
- updates tooling
- adds team page

it does not (yet) change our ci/cd workflow.

TODOs before this can be merged:

- [x] entity details page needs layout
- [x] display popover when clicking a geojson feature on the map (with
links to entity details page)
- [ ] review config options exposed via cms
- [x] update github environment variables/secrets
- [x] ensure loading spinner on map page is visible in both light and
dark mode
- [ ] review readme
- [ ] decide if it is actually ok to fetch all map features in one go
(with `?limit=0`)
- [ ] mobile styles
- [ ] review where "brand" color (cms-configurable) should apply
- [ ] figure out intention for `type` relations on entity details page

FUTURE:

- [ ] needs tests for data and map pages
- [ ] we could create two additional branches (something like
`variant/single-locale` and `variant/light-mode-only`), which make it
easy for forks to remove i18n and/or dark-mode functionality
- [ ] data table: add column sorting (with tanstack/vue-table), improve
pagination styles, make mobile friendly
- [ ] create some component abstractions on top of maplibre-gl
- [ ] maybe come up with a way to use the api response for `/map` to
avoid fetching data for entity details pages. simply adding the
following
[here](https://github.com/acdh-oeaw/openatlas-discovery/blob/feat/update-all-the-things/composables/use-get-search-results.ts#L124)
will not work because `setQueryData` is synchronous, and will block the
main thread for ~2.5s for ~3000 geojson features:
  ```ts
  entity.features.forEach((feature) => {
    const params = { entityId: feature.properties._id };
    queryClient.setQueryData(["entity", params], entity);
  });
  ```
EDIT: no longer viable, since we now use the `show` search param to
select which fields to include in responses (and we limit to
`system_class=place` on the map view)

.devcontainer/devcontainer.json

@@ -0,0 +1,21 @@
+{
+	"name": "Nuxt",
+	"image": "ghcr.io/acdh-oeaw/devcontainer-frontend:20",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"bradlc.vscode-tailwindcss",
+				"dbaeumer.vscode-eslint",
+				"editorconfig.editorconfig",
+				"esbenp.prettier-vscode",
+				"lokalise.i18n-ally",
+				"mikestead.dotenv",
+				"ms-playwright.playwright",
+				"nuxt.mdc",
+				"stylelint.vscode-stylelint",
+				"vue.volar",
+				"vue.vscode-typescript-vue-plugin"
+			]
+		}
+	}
+}

.dockerignore

@@ -0,0 +1,65 @@
+## .gitignore ##
+
+# dependencies
+node_modules/
+.pnpm-store/
+
+# logs
+*.log
+
+# non-public environment variables
+.env.local
+.env.*.local
+
+# caches
+.eslintcache
+.stylelintcache
+*.tsbuildinfo
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+.idea/
+
+# nuxt.js
+dist
+.nuxt/
+.nitro/
+.output/
+
+# playwright
+/blob-report/
+/playwright/.cache/
+/playwright-report/
+/test-results/
+
+# generated api-client
+/lib/api-client/api.ts
+
+
+## .dockerignore ##
+
+# git
+.git/
+.gitattributes
+.gitignore
+
+# github
+.github/
+
+# vscode settings
+.vscode/
+
+# environment variables
+.env
+.env.*
+
+# tests
+playwright.config.ts
+/e2e/
+/test/
+
+# misc
+.editorconfig

.env.example → .env.local.example

@@ -7,18 +7,25 @@ NUXT_PUBLIC_DATABASE="enabled"
 # imprint service
 NUXT_PUBLIC_REDMINE_ID=
 # web crawlers
-BOTS="disabled"
+NUXT_PUBLIC_BOTS="disabled"
 
 # -------------------------------------------------------------------------------------------------
-# analytics
+# api
 # -------------------------------------------------------------------------------------------------
-NUXT_PUBLIC_MATOMO_BASE_URL="https://matomo.acdh.oeaw.ac.at"
-# NUXT_PUBLIC_MATOMO_ID=
+NUXT_PUBLIC_API_BASE_URL="https://demo-dev.openatlas.eu/api/"
+NUXT_PUBLIC_OPENAPI_BASE_URL="https://demo-dev.openatlas.eu/openapi.json"
 
 # -------------------------------------------------------------------------------------------------
-# api
+# map
 # -------------------------------------------------------------------------------------------------
-NUXT_PUBLIC_API_BASE_URL="https://demo-dev.openatlas.eu/api/"
+NUXT_PUBLIC_MAP_BASELAYER_URL_LIGHT="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+NUXT_PUBLIC_MAP_BASELAYER_URL_DARK="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+
+# -------------------------------------------------------------------------------------------------
+# analytics
+# -------------------------------------------------------------------------------------------------
+NUXT_PUBLIC_MATOMO_BASE_URL="https://matomo.acdh.oeaw.ac.at"
+# NUXT_PUBLIC_MATOMO_ID=
 
 # -------------------------------------------------------------------------------------------------
 # cms
@@ -31,10 +38,4 @@ OAUTH_CLIENT_SECRET=
 # GitHub OAuth app callback URL.
 OAUTH_REDIRECT_URL="https://openatlas-discovery-demo.acdh-ch-dev.oeaw.ac.at/api/oauth/callback"
 # Deployed website's base URL.
-OAUTH_ALLOWED_ORIGIN="https://openatlas-discovery-demo.acdh-ch-dev.oeaw.ac.at/"
-
-# -------------------------------------------------------------------------------------------------
-# map
-# -------------------------------------------------------------------------------------------------
-NUXT_PUBLIC_MAP_BASELAYER_ATTRIBUTION="&copy; <a href=\"https://osm.org/copyright\" target=\"_blank\">OpenStreetMap</a> contributors"
-NUXT_PUBLIC_MAP_BASELAYER_URL="https://tile.jawg.io/jawg-light/{z}/{x}/{y}.png?access-token=TUhizWedCN04NDjuRQtXfgE0HSuYwHzro3NRUDa3LMUlLbymREaTyUW2lpuoNnMz"
+OAUTH_ALLOWED_ORIGIN="https://openatlas-discovery-demo.acdh-ch-dev.oeaw.ac.at"

.gitignore

@@ -8,7 +8,6 @@ node_modules/
 # non-public environment variables
 .env.local
 .env.*.local
-.env
 
 # caches
 .eslintcache
@@ -29,6 +28,10 @@ dist
 .output/
 
 # playwright
-/test-results/
-/playwright-report/
+/blob-report/
 /playwright/.cache/
+/playwright-report/
+/test-results/
+
+# generated api-client
+/lib/api-client/api.ts

.npmrc

@@ -0,0 +1,4 @@
+engine-strict=true
+# shamefully-hoist=true
+shell-emulator=true
+use-node-version=20.11.1

.vscode/extensions.json

@@ -1,3 +1,15 @@
 {
-	"recommendations": ["esbenp.prettier-vscode"]
+	"recommendations": [
+		"bradlc.vscode-tailwindcss",
+		"dbaeumer.vscode-eslint",
+		"editorconfig.editorconfig",
+		"esbenp.prettier-vscode",
+		"lokalise.i18n-ally",
+		"mikestead.dotenv",
+		"ms-playwright.playwright",
+		"nuxt.mdc",
+		"stylelint.vscode-stylelint",
+		"vue.volar",
+		"vue.vscode-typescript-vue-plugin"
+	]
 }

.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+	"configurations": [
+		{
+			"cwd": "${workspaceFolder}",
+			"name": "App: Web (server-side)",
+			"request": "launch",
+			"runtimeArgs": ["run", "dev"],
+			"runtimeExecutable": "pnpm",
+			"skipFiles": ["<node_internals>/**"],
+			"type": "node"
+		},
+		{
+			"name": "App: Web (client-side)",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:3000"
+		}
+	],
+	"compounds": [
+		{
+			"name": "App: Web",
+			"configurations": ["App: Web (server-side)", "App: Web (client-side)"]
+		}
+	]
+}

.vscode/settings.json

@@ -1,13 +1,49 @@
 {
-	"nuxt.isNuxtApp": false,
-	"i18n-ally.localesPaths": ["locales"],
-	"i18n-ally.keystyle": "nested",
-	"prettier.requireConfig": true,
+	"css.validate": false,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
+		"source.fixAll": "explicit"
 	},
-	"cSpell.words": ["Cidoc", "nuxt"],
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
-	"typescript.tsdk": "node_modules/typescript/lib"
+	"editor.inlayHints.enabled": "offUnlessPressed",
+	"editor.linkedEditing": true,
+	"editor.quickSuggestions": {
+		"strings": true
+	},
+	"editor.rulers": [100],
+	"editor.stickyScroll.enabled": true,
+	"eslint.enable": true,
+	"eslint.options": {
+		"ignorePath": ".gitignore"
+	},
+	"eslint.validate": ["javascript", "typescript", "vue"],
+	"files.associations": {
+		"*.css": "tailwindcss"
+	},
+	"files.eol": "\n",
+	"html.autoCreateQuotes": false,
+	"i18n-ally.annotations": false,
+	"i18n-ally.keepFulfilled": true,
+	"i18n-ally.keystyle": "nested",
+	"i18n-ally.localesPaths": ["./messages"],
+	"i18n-ally.review.enabled": false,
+	"i18n-ally.sortKeys": true,
+	"i18n-ally.tabStyle": "tab",
+	"less.validate": false,
+	"prettier.ignorePath": ".gitignore",
+	"scss.validate": false,
+	"stylelint.enable": true,
+	"stylelint.snippet": ["css", "postcss", "tailwindcss", "vue"],
+	"stylelint.validate": ["css", "postcss", "tailwindcss", "vue"],
+	"tailwindCSS.validate": true,
+	"terminal.integrated.enablePersistentSessions": false,
+	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"typescript.inlayHints.parameterNames.enabled": "all",
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	"typescript.preferences.preferTypeOnlyAutoImports": true,
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"workbench.editor.labelFormat": "medium",
+	"[markdown][mdc]": {
+		"editor.wordWrap": "on"
+	}
 }

Dockerfile

@@ -0,0 +1,57 @@
+# syntax=docker/dockerfile:1
+
+# using alpine base image to avoid `sharp` memory leaks.
+# @see https://sharp.pixelplumbing.com/install#linux-memory-allocator
+
+# build
+FROM node:20-alpine AS build
+
+RUN corepack enable
+
+RUN mkdir /app && chown -R node:node /app
+WORKDIR /app
+
+USER node
+
+COPY --chown=node:node .npmrc package.json pnpm-lock.yaml ./
+COPY ./patches ./patches
+RUN sed -i "s/use-node-version/# use-node-version/" .npmrc
+
+RUN pnpm fetch
+
+COPY --chown=node:node ./ ./
+RUN sed -i "s/use-node-version/# use-node-version/" .npmrc
+
+ARG NUXT_PUBLIC_API_BASE_URL
+ARG NUXT_PUBLIC_APP_BASE_URL
+ARG NUXT_PUBLIC_BOTS
+ARG NUXT_PUBLIC_DATABASE
+ARG NUXT_PUBLIC_MAP_BASELAYER_ATTRIBUTION
+ARG NUXT_PUBLIC_MAP_BASELAYER_URL_DARK
+ARG NUXT_PUBLIC_MAP_BASELAYER_URL_LIGHT
+ARG NUXT_PUBLIC_MATOMO_BASE_URL
+ARG NUXT_PUBLIC_MATOMO_ID
+ARG NUXT_PUBLIC_OPENAPI_BASE_URL
+ARG NUXT_PUBLIC_REDMINE_ID
+
+RUN pnpm install --frozen-lockfile --offline
+
+ENV NODE_ENV=production
+
+RUN pnpm run build
+
+# serve
+FROM node:20-alpine AS serve
+
+RUN mkdir /app && chown -R node:node /app
+WORKDIR /app
+
+USER node
+
+COPY --from=build --chown=node:node /app/.output ./
+
+ENV NODE_ENV=production
+
+EXPOSE 3000
+
+CMD ["node", "./server/index.mjs"]

app.vue

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