Release version 2.1.2

The language switcher offers all 184 ISO 639-1 languages, but only 29
had a UI catalogue, so the other 154 rendered Close, Imprint, Language
and the rest of the interface strings in English. Nothing noticed:
the existing unit test only checks the catalogues that are present.

A new integration test requires every language except the source to
ship a catalogue with a non-empty entry for each of the 11 interface
strings, and lists missing catalogues apart from incomplete ones. The
154 missing catalogues are added, written through
i18n_sync.write_catalog so they share the existing format; make i18n-ui
never overwrites them, so a later correction survives.

The translations were written without a native reviewer. Most widely
used languages are solid; these are best-effort and likely wrong:
ae, cr, ii, kr, na, nv, oj, sg, aa, hz, ho, mh, za, vo. Uncertain:
ab, ak, av, ay, bi, bm, bo, ce, ch, cu, dv, dz, ee, ff, fj, gn, gv, ie,
ik, iu, kg, ki, kj, kl, ks, kv, kw, lg, li, ln, lu, ng, nr, os, pi, qu,
rn, sa, se, ss, to, tw, ty, ve, wa, wo.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.claude/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!.settings.json

.claude/settings.json

@@ -0,0 +1,52 @@
+{
+  "permissions": {
+    "allow": [
+      "Read",
+      "Edit",
+      "Write",
+      "Bash(*)",
+      "Read(//tmp/**)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:api.github.com)",
+      "WebFetch(domain:docs.docker.com)",
+      "WebFetch(domain:pypi.org)",
+      "WebFetch(domain:docs.cypress.io)",
+      "WebFetch(domain:flask.palletsprojects.com)",
+      "Skill(update-config)",
+      "Skill(update-config:*)"
+    ],
+    "deny": [
+      "Bash(git push --force*)",
+      "Bash(git reset --hard*)",
+      "Bash(rm -rf*)",
+      "Bash(sudo*)"
+    ],
+    "ask": [
+      "Bash(git push*)",
+      "Bash(docker run*)",
+      "Bash(curl*)"
+    ],
+    "additionalDirectories": [
+      "/tmp"
+    ]
+  },
+  "sandbox": {
+    "enabled": true,
+    "autoAllowBashIfSandboxed": true,
+    "filesystem": {
+      "allowWrite": [
+        ".",
+        "/tmp"
+      ],
+      "denyRead": [
+        "~/.ssh",
+        "~/.gnupg",
+        "~/.kube",
+        "~/.aws",
+        "~/.config/gcloud"
+      ]
+    }
+  }
+}

.dockerignore

@@ -0,0 +1,2 @@
+app/node_modules/
+app/static/vendor/

.github/FUNDING.yml

@@ -0,0 +1,7 @@
+github: kevinveenbirkenbach
+
+patreon: kevinveenbirkenbach
+
+buy_me_a_coffee: kevinveenbirkenbach
+
+custom: https://s.veen.world/paypaldonate

.github/workflows/ci.yml

@@ -0,0 +1,90 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "**"
+    tags-ignore:
+      - "**"
+
+permissions:
+  contents: read
+
+jobs:
+  security:
+    name: Run security workflow
+    uses: ./.github/workflows/security.yml
+    permissions:
+      contents: read
+      packages: read
+      security-events: write
+
+  tests:
+    name: Run test workflow
+    uses: ./.github/workflows/tests.yml
+
+  lint:
+    name: Run lint workflow
+    uses: ./.github/workflows/lint.yml
+    permissions:
+      contents: read
+      security-events: write
+
+  publish:
+    name: Publish image
+    runs-on: ubuntu-latest
+    needs:
+      - security
+      - tests
+      - lint
+    if: github.event_name == 'push'
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Detect semver tag on current commit
+        id: semver
+        run: |
+          SEMVER_TAG="$(git tag --points-at "$GITHUB_SHA" | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1 || true)"
+          if [ -n "$SEMVER_TAG" ]; then
+            {
+              echo "found=true"
+              echo "raw_tag=$SEMVER_TAG"
+              echo "version=${SEMVER_TAG#v}"
+            } >> "$GITHUB_OUTPUT"
+          else
+            echo "found=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Compute image name
+        if: steps.semver.outputs.found == 'true'
+        id: image
+        run: echo "name=ghcr.io/$(echo "${GITHUB_REPOSITORY}" | tr '[:upper:]' '[:lower:]')" >> "$GITHUB_OUTPUT"
+
+      - name: Set up Docker Buildx
+        if: steps.semver.outputs.found == 'true'
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Login to GHCR
+        if: steps.semver.outputs.found == 'true'
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and publish image
+        if: steps.semver.outputs.found == 'true'
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ steps.image.outputs.name }}:${{ steps.semver.outputs.version }}

.github/workflows/lint.yml

@@ -0,0 +1,132 @@
+name: Lint
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  lint-actions:
+    name: Lint GitHub Actions
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Run actionlint
+        run: docker run --rm -v "$PWD:/repo" -w /repo rhysd/actionlint:latest
+
+  lint-yaml:
+    name: Lint YAML
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install lint dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install ".[dev]"
+
+      - name: Run yamllint
+        run: yamllint --strict .
+
+  lint-js:
+    name: Lint JavaScript
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: app/package.json
+
+      - name: Install Node dependencies
+        working-directory: app
+        run: npm install
+
+      - name: Run eslint
+        working-directory: app
+        run: npx eslint .
+
+  lint-shell:
+    name: Lint shell scripts
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Run shellcheck
+        run: docker run --rm -v "$PWD:/mnt" -w /mnt koalaman/shellcheck:stable scripts/*.sh
+
+  lint-python:
+    name: Lint Python
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install lint dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install ".[dev]"
+
+      - name: Ruff lint
+        run: ruff check .
+
+      - name: Ruff format check
+        run: ruff format --check .
+
+  lint-docker:
+    name: Lint Dockerfile
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Run hadolint
+        id: hadolint
+        continue-on-error: true
+        uses: hadolint/hadolint-action@2332a7b74a6de0dda2e2221d575162eba76ba5e5
+        with:
+          dockerfile: ./Dockerfile
+          format: sarif
+          output-file: hadolint-results.sarif
+          failure-threshold: warning
+
+      - name: Upload hadolint SARIF
+        if: always() && github.event_name == 'push'
+        uses: github/codeql-action/upload-sarif@v4
+        with:
+          sarif_file: hadolint-results.sarif
+          wait-for-processing: true
+          category: hadolint
+
+      - name: Fail on hadolint warnings
+        if: always()
+        run: python3 utils/check_hadolint_sarif.py hadolint-results.sarif

.github/workflows/security.yml

@@ -0,0 +1,48 @@
+name: Security
+
+on:
+  workflow_call:
+
+permissions:
+  contents: read
+
+jobs:
+  analyze:
+    name: Run security scan
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      contents: read
+      packages: read
+      security-events: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - language: actions
+            build-mode: none
+          - language: javascript-typescript
+            build-mode: none
+          - language: python
+            build-mode: none
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v4
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
+          queries: security-extended,security-and-quality
+
+      - name: Run manual build steps
+        if: matrix.build-mode == 'manual'
+        run: |
+          echo "No manual build is configured for this repository."
+          exit 1
+
+      - name: Perform CodeQL analysis
+        uses: github/codeql-action/analyze@v4
+        with:
+          category: /language:${{ matrix.language }}

.github/workflows/tests.yml

@@ -0,0 +1,199 @@
+name: Tests
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  test-lint:
+    name: Run lint tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install lint test dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed .
+
+      - name: Run lint test suite
+        run: python -m unittest discover -s tests/lint -t .
+
+  test-integration:
+    name: Run integration tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install integration test dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed .
+
+      - name: Run integration test suite
+        run: python -m unittest discover -s tests/integration -t .
+
+  test-unit:
+    name: Run unit tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install unit test dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed .
+
+      - name: Run unit test suite
+        run: python -m unittest discover -s tests/unit -t .
+
+  security-python:
+    name: Run Python security checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install security dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed ".[dev]"
+
+      - name: Run Bandit
+        run: python -m bandit -q -ll -ii -r app main.py
+
+      - name: Export runtime requirements
+        run: python utils/export_runtime_requirements.py > runtime-requirements.txt
+
+      - name: Audit Python runtime dependencies
+        run: python -m pip_audit -r runtime-requirements.txt
+
+  test-security:
+    name: Run security guardrail tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install security test dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed .
+
+      - name: Run security test suite
+        run: python -m unittest discover -s tests/security -t .
+
+  e2e:
+    name: Run end-to-end tests
+    runs-on: ubuntu-latest
+    needs:
+      - test-lint
+      - test-unit
+      - test-integration
+      - security-python
+      - test-security
+    env:
+      FLASK_HOST: "127.0.0.1"
+      FLASK_PORT: "5001"
+      PORT: "5001"
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12"
+
+      - name: Install Python dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install --ignore-installed .
+
+      - name: Prepare app config for CI
+        run: cp app/config.sample.yaml app/config.yaml
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: app/package.json
+
+      - name: Install Node dependencies
+        working-directory: app
+        run: npm install
+
+      - name: Install Cypress system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libasound2t64 \
+            libatk-bridge2.0-0 \
+            libatk1.0-0 \
+            libatspi2.0-0t64 \
+            libcups2t64 \
+            libdrm2 \
+            libgbm1 \
+            libglib2.0-0t64 \
+            libgtk-3-0t64 \
+            libnotify4 \
+            libnspr4 \
+            libnss3 \
+            libpango-1.0-0 \
+            libpangocairo-1.0-0 \
+            libxcomposite1 \
+            libxdamage1 \
+            libxfixes3 \
+            libxkbcommon0 \
+            libxrandr2 \
+            libxss1 \
+            libxtst6 \
+            xauth \
+            xvfb
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@f790eee7a50d9505912f50c2095510be7de06aa7 # v6.10.9
+        with:
+          working-directory: app
+          install: false
+          start: python app.py
+          wait-on: http://127.0.0.1:5001
+          wait-on-timeout: 120

.gitignore

@@ -1,2 +1,15 @@
+app/config.yaml
+app/i18n/content/
+*__pycache__*
 app/static/cache/*
-*__pycache__*
+.env
+app/cypress/screenshots/*
+.ruff_cache/
+.venv/
+app/node_modules/
+app/static/vendor/
+hadolint-results.sarif
+build/
+*.egg-info/
+app/core.*
+.mcp.json

.yamllint

@@ -0,0 +1,23 @@
+---
+# Correctness only. No `extends: default`, so nothing but the rules below runs:
+# the repository predates this linter and its cosmetic findings (indentation,
+# line length, trailing spaces) would be noise nobody acts on.
+#
+# key-duplicates is the rule that earns its keep: PyYAML keeps the last of two
+# identical keys without complaining, so a duplicated entry in a translation
+# catalogue silently drops a translation.
+ignore: |
+  .git/
+  .venv/
+  venv/
+  node_modules/
+  app/node_modules/
+  app/static/vendor/
+  build/
+  .ruff_cache/
+
+rules:
+  key-duplicates: enable
+  octal-values:
+    forbid-implicit-octal: true
+    forbid-explicit-octal: true

AGENTS.md

@@ -0,0 +1,13 @@
+# Agent Instructions
+
+## Pre-Commit Validation
+
+- You MUST run `make test` before every commit whenever the staged change includes at least one file that is not `.md` or `.rst`, unless explicitly instructed otherwise.
+- You MUST commit only after all tests pass.
+- You MUST NOT commit automatically without explicit confirmation from the user.
+
+## Vendor Assets
+
+- Browser vendor assets (Bootstrap, Font Awesome, etc.) are managed via npm.
+- Run `npm install` inside `app/` to populate `app/static/vendor/` before starting the dev server or running e2e tests.
+- Never commit `app/node_modules/` or `app/static/vendor/` — both are gitignored and generated at build time.

CHANGELOG.md

@@ -0,0 +1,62 @@
+# Changelog
+
+## [2.1.2] - 2026-09-10
+
+* CI: lint tests install the project first, so the image publishes again
+* Tooling: make test runs every local suite in .venv and keeps going
+* Image: multi-stage build ships only runtime assets, no node or dev packages
+* Security: CodeQL findings fixed; iframe links only open configured origins
+* i18n: interface strings translated for all 184 languages, test-enforced
+
+## [2.1.1] - 2026-09-10
+
+* Accessibility: header icons are *aria-hidden*, links read by label alone
+* Test coverage: unit test requires *aria-hidden* on every header icon
+
+## [2.1.0] - 2026-08-22
+
+* Multilingual site: every ISO 639-1 language has its own URL, */* follows the visitor's browser language, and a switcher in the navbar lists all 184 in their own script
+* Right-to-left layouts: Arabic, Hebrew, Persian, Urdu and six more mirror the page automatically
+* Machine translation: *make i18n* fills your card and menu texts from a LibreTranslate instance, *make i18n-ui* the interface strings; hand-corrected entries are never overwritten
+* Brand protection: list your product names in *app/i18n/keep.txt* and they stay untranslated in every language
+* Search engines: each page declares a canonical URL and an *hreflang* alternate per language
+* Security: configuration and translations are HTML-escaped, script URLs are stripped from links, images and the iframe view — set *TRUSTED_HOSTS* in *.env* to pin your public hostname
+* Reliability: a slow NASA APOD lookup no longer takes the page down
+* Developer tooling: *make test-e2e* runs Cypress directly instead of through act, and YAML, JavaScript and shell now have linters in CI
+
+## [2.0.0] - 2026-05-18
+
+* * Asset resolution: new probe-first resolver tries a HEAD request and embeds reachable image URLs directly via a new external_url field, falling back to the cache-download path only when the probe fails; broken /static/https://... URLs no longer appear when the source cannot be downloaded
+* Template integration: an asset_src context processor in app.py picks external_url first and url_for(static, cache) second, so base.html.j2, navigation.html.j2, and card.html.j2 never wrap an absolute URL in the static prefix
+* Test coverage: 16 new unit tests cover every probe, cache, and fallback branch; a live integration test exercises https://file.infinito.nexus/assets/img/logo.png to prove the probe-first path works end-to-end without writing to the cache directory
+* Sample configuration: new Infinito.Nexus card in app/config.sample.yaml driven by the canonical file.infinito.nexus asset URL
+* SPOT for build variables: env.example is the single source of truth for IMAGE_NAME and PORT; the Makefile and docker-compose.yml reference both with no defaults and fail loudly when either variable is missing
+* Bootstrap targets: make env and make config materialise .env and app/config.yaml from their checked-in templates without overwriting existing files; build, build-no-cache, up, run-dev, run-prod, dev, prod, and browse depend on both so a fresh checkout runs in a single make invocation
+* Recipe sourcing: Makefile recipes load .env at recipe-execution time via a shared _require_env helper, so a freshly bootstrapped .env is picked up in the same make invocation that created it
+* README: PortUI screenshot added under the title
+* Lint: removed an unused sys import in the live integration test
+
+
+## [1.2.0] - 2026-05-11
+
+* * Navigation behavior: Top-level dropdowns now open reliably on hover and click via Bootstrap, escape the header and navbar overflow clips, and flip between downward and upward based on whether more space is above or below the toggle
+* Compose-driven dependencies: docker-compose runs npm install inside the container on every up and persists node_modules plus static/vendor in named volumes, removing the host-side npm-install step from up, dev, prod, and test-e2e
+* Test coverage: New Cypress specs cover both header and footer dropdown directions, with a Jinja unit test guarding the data-bs-toggle attribute on top-level dropdown toggles
+* Harness configuration: Enabled the Claude Code sandbox with scoped filesystem rules, consolidated the bash allowlist behind a single wildcard, and gitignored local-only state under .claude
+
+
+## [1.1.0] - 2026-03-30
+
+* *CI stabilization and modularization*: Split into reusable workflows (lint, security, tests) with correct permissions for CodeQL and SARIF uploads
+* *Modern Python packaging*: Migration to pyproject.toml and updated Dockerfile using Python 3.12
+* *Improved test coverage*: Added unit, integration, lint, security, and E2E tests using act
+* *Local vendor assets*: Replaced external CDNs with npm-based local asset pipeline
+* *Enhanced build workflow*: Extended Makefile with targets for test, lint, security, and CI plus vendor build process
+* *Frontend fix*: Prevented navbar wrapping and improved layout behavior
+* *Developer guidelines*: Introduced AGENTS.md and CLAUDE.md with enforced pre-commit rules
+
+
+## [1.0.0] - 2026-02-19
+
+* Official Release🥳
+

CLAUDE.md

@@ -0,0 +1,5 @@
+# CLAUDE.md
+
+## Startup
+
+You MUST read `AGENTS.md` and follow all instructions in it at the start of every conversation before doing anything else.

Dockerfile

@@ -1,18 +1,32 @@
-# Basis-Image für Python
-FROM python:slim
+FROM node:22-slim AS assets
 
-# Arbeitsverzeichnis festlegen
 WORKDIR /app
+COPY app/package.json ./
+COPY app/scripts ./scripts
+RUN npm install --omit=dev --no-audit --no-fund
 
-# Abhängigkeiten kopieren und installieren
-COPY app/requirements.txt requirements.txt
-RUN pip install --no-cache-dir -r requirements.txt
+FROM python:3.12-slim AS base
 
-# Anwendungscode kopieren
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    FLASK_HOST=0.0.0.0
+
+WORKDIR /tmp/build
+
+COPY pyproject.toml README.md main.py ./
+COPY app ./app
+RUN python -m pip install --no-cache-dir .
+
+WORKDIR /app
 COPY app/ .
 
-# Port freigeben
-EXPOSE 5000
-
-# Startbefehl
 CMD ["python", "app.py"]
+
+FROM base AS dev
+
+# hadolint ignore=DL3008
+RUN apt-get update && apt-get install -y --no-install-recommends nodejs npm && rm -rf /var/lib/apt/lists/*
+
+FROM base AS runtime
+
+COPY --from=assets /app/static/vendor ./static/vendor

MIRRORS

@@ -0,0 +1,4 @@
+git@github.com:kevinveenbirkenbach/port-ui.git
+ssh://git@code.infinito.nexus:2201/kevinveenbirkenbach/port-ui.git
+ssh://git@git.veen.world:2201/kevinveenbirkenbach/port-ui.git
+

Makefile

@@ -0,0 +1,261 @@
+# Load environment variables from .env
+ifneq (,$(wildcard .env))
+    include .env
+    # Export variables defined in .env
+    export $(shell sed 's/=.*//' .env)
+endif
+
+PYTHON ?= python3
+ACT ?= act
+TEST_VENV := $(CURDIR)/.venv
+TEST_PYTHON ?= $(TEST_VENV)/bin/python
+
+# Bootstrap the local .env from the checked-in env.example template.
+# Idempotent: leaves an existing .env untouched.
+.PHONY: env
+env:
+	@if [ -f .env ]; then \
+		echo ".env already exists — leaving it alone."; \
+	else \
+		cp env.example .env; \
+		echo "Created .env from env.example — review and adjust."; \
+	fi
+
+# Bootstrap app/config.yaml from the checked-in app/config.sample.yaml
+# template. Idempotent: leaves an existing config.yaml untouched. The
+# Dockerfile COPYs the whole app/ directory at build time, so this file
+# must exist before `make build` / `make up`.
+.PHONY: config
+config:
+	@if [ -f app/config.yaml ]; then \
+		echo "app/config.yaml already exists — leaving it alone."; \
+	else \
+		cp app/config.sample.yaml app/config.yaml; \
+		echo "Created app/config.yaml from app/config.sample.yaml — review and adjust."; \
+	fi
+
+# Build/run recipes source .env at recipe-execution time (not at make
+# parse time) so they work in the same invocation that bootstrapped
+# .env via the `env` prereq. Without this, the inner $$IMAGE_NAME /
+# $$PORT would be empty on the very first `make build` after a fresh
+# checkout — the parse-time `include .env` happens before `env` runs.
+define _require_env
+	if [ ! -f .env ]; then echo "ERROR: .env missing"; exit 1; fi; \
+	. ./.env; \
+	for v in $(1); do \
+		eval "val=\$$$$v"; \
+		[ -n "$$val" ] || { echo "ERROR: $$v is empty in .env (see env.example)"; exit 1; }; \
+	done
+endef
+
+.PHONY: build
+build: env config
+	# Build the Docker image.
+	@$(call _require_env,IMAGE_NAME); \
+		docker build -t "$$IMAGE_NAME" .
+
+.PHONY: build-no-cache
+build-no-cache: env config
+	# Build the Docker image without cache.
+	@$(call _require_env,IMAGE_NAME); \
+		docker build --no-cache -t "$$IMAGE_NAME" .
+
+.PHONY: up
+up: env config
+	# Start the application using docker-compose with build.
+	docker-compose up -d --build --force-recreate
+
+.PHONY: down
+down:
+	# Stop and remove the 'portfolio' container, ignore errors, and bring down compose.
+	- docker stop portfolio || true
+	- docker rm portfolio || true
+	- docker-compose down
+
+.PHONY: run-dev
+run-dev: env config config
+	# Run the container in development mode (hot-reload).
+	@$(call _require_env,IMAGE_NAME PORT); \
+		docker run -d \
+			-p "$$PORT:$$PORT" \
+			--name portfolio \
+			-v "$(PWD)/app/:/app" \
+			-e PORT="$$PORT" \
+			-e TRUSTED_HOSTS="$$TRUSTED_HOSTS" \
+			-e FLASK_APP=app.py \
+			-e FLASK_ENV=development \
+			"$$IMAGE_NAME"
+
+.PHONY: run-prod
+run-prod: env config config
+	# Run the container in production mode.
+	@$(call _require_env,IMAGE_NAME PORT); \
+		docker run -d \
+			-p "$$PORT:$$PORT" \
+			--name portfolio \
+			-e PORT="$$PORT" \
+			-e TRUSTED_HOSTS="$$TRUSTED_HOSTS" \
+			"$$IMAGE_NAME"
+
+.PHONY: logs
+logs:
+	# Display the logs of the 'portfolio' container.
+	docker logs -f portfolio
+
+.PHONY: dev
+dev: env config
+	# Start the application in development mode using docker-compose.
+	FLASK_ENV=development docker-compose up -d
+
+.PHONY: prod
+prod: env config
+	# Start the application in production mode using docker-compose (with build).
+	docker-compose up -d --build
+
+.PHONY: cleanup
+cleanup:
+	# Remove all stopped Docker containers to reclaim space.
+	docker container prune -f
+
+.PHONY: delete
+delete:
+	# Force remove the 'portfolio' container if it exists.
+	- docker rm -f portfolio
+
+.PHONY: browse
+browse: env
+	# Open the application in the browser at http://localhost:$$PORT
+	@$(call _require_env,PORT); \
+		chromium "http://localhost:$$PORT"
+
+.PHONY: install
+install:
+	# Install runtime Python dependencies from pyproject.toml.
+	$(PYTHON) -m pip install -e .
+
+.PHONY: install-dev
+install-dev:
+	# Install runtime and developer dependencies from pyproject.toml.
+	$(PYTHON) -m pip install -e ".[dev]"
+
+.PHONY: i18n
+i18n: env config
+	# Fill missing content translations in app/i18n/content/ via LibreTranslate.
+	@$(call _require_env,LIBRETRANSLATE_URL); \
+		$(PYTHON) utils/i18n_sync.py \
+			--url "$$LIBRETRANSLATE_URL" \
+			--api-key "$$LIBRETRANSLATE_API_KEY"
+
+.PHONY: i18n-ui
+i18n-ui: env
+	# Fill missing interface translations in app/i18n/ui/ via LibreTranslate.
+	@$(call _require_env,LIBRETRANSLATE_URL); \
+		$(PYTHON) utils/i18n_sync.py \
+			--catalog ui \
+			--url "$$LIBRETRANSLATE_URL" \
+			--api-key "$$LIBRETRANSLATE_API_KEY"
+
+.PHONY: lint-actions
+lint-actions:
+	# Lint GitHub Actions workflows.
+	docker run --rm -v "$$PWD:/repo" -w /repo rhysd/actionlint:latest
+
+.PHONY: lint-python
+lint-python: install-dev
+	# Run Python lint and format checks.
+	$(PYTHON) -m ruff check .
+	$(PYTHON) -m ruff format --check .
+
+.PHONY: lint-docker
+lint-docker:
+	# Lint the Dockerfile.
+	docker run --rm -i hadolint/hadolint < Dockerfile
+
+.PHONY: lint-yaml
+lint-yaml: install-dev
+	# Lint YAML for duplicate keys and ambiguous scalars (see .yamllint).
+	$(PYTHON) -m yamllint --strict .
+
+.PHONY: lint-js
+lint-js: node-deps
+	# Lint the browser and Cypress JavaScript.
+	cd app && env -u ELECTRON_RUN_AS_NODE npx eslint .
+
+.PHONY: lint-shell
+lint-shell:
+	# Lint the shell scripts.
+	docker run --rm -v "$$PWD:/mnt" -w /mnt koalaman/shellcheck:stable scripts/*.sh
+
+.PHONY: test-lint
+test-lint: install
+	# Run lint guardrail tests.
+	$(PYTHON) -m unittest discover -s tests/lint -t .
+
+.PHONY: test-integration
+test-integration: install
+	# Run repository integration tests.
+	$(PYTHON) -m unittest discover -s tests/integration -t .
+
+.PHONY: test-unit
+test-unit: install
+	# Run repository unit tests.
+	$(PYTHON) -m unittest discover -s tests/unit -t .
+
+.PHONY: test-security
+test-security: install
+	# Run repository security guardrail tests.
+	$(PYTHON) -m unittest discover -s tests/security -t .
+
+.PHONY: lint
+lint: lint-actions lint-python lint-yaml lint-js lint-docker lint-shell test-lint
+	# Run the full lint suite.
+
+.PHONY: security
+security: install-dev test-security
+	# Run security checks.
+	$(PYTHON) -m bandit -q -ll -ii -r app main.py
+	$(PYTHON) utils/export_runtime_requirements.py > /tmp/portfolio-runtime-requirements.txt
+	$(PYTHON) -m pip_audit -r /tmp/portfolio-runtime-requirements.txt
+
+.PHONY: node-deps
+node-deps:
+	# Install the Cypress binary and the browser vendor assets into app/.
+	cd app && npm install
+
+.PHONY: test-e2e
+test-e2e: env config node-deps
+	# Run Cypress against a locally started Flask app — no act, no runner image.
+	@$(call _require_env,PORT); \
+		PORT="$$PORT" PYTHON="$(PYTHON)" scripts/run-e2e.sh
+
+.PHONY: test-e2e-act
+test-e2e-act:
+	# Run the CI end-to-end job through act (stop portfolio container to free port first).
+	-docker stop portfolio 2>/dev/null || true
+	$(ACT) workflow_dispatch -W .github/workflows/tests.yml -j e2e
+	-docker start portfolio 2>/dev/null || true
+
+.PHONY: test-workflow
+test-workflow:
+	# Run the GitHub test workflow locally via act.
+	$(ACT) workflow_dispatch -W .github/workflows/tests.yml
+
+.PHONY: lint-workflow
+lint-workflow:
+	# Run the GitHub lint workflow locally via act.
+	$(ACT) workflow_dispatch -W .github/workflows/lint.yml
+
+.PHONY: quality
+quality: lint-workflow test-workflow
+	# Run the GitHub lint and test workflows locally via act.
+
+.PHONY: ci
+ci: lint security test-unit test-integration test-e2e
+	# Run the local CI suite.
+
+.PHONY: test
+test:
+	# Run every local suite in a project virtualenv, since PEP 668 refuses pip on
+	# a system Python, and keep going so each failing suite reports.
+	@[ -x "$(TEST_PYTHON)" ] || python3 -m venv "$(TEST_VENV)"
+	$(MAKE) --keep-going ci PYTHON="$(TEST_PYTHON)"

README.md

@@ -1,37 +1,225 @@
-# Landingpage
+# PortUI 🖥️✨
 
-## Access
-### Locale
-[http://127.0.0.1:5000](http://127.0.0.1:5000)
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-blue?logo=github)](https://github.com/sponsors/kevinveenbirkenbach) [![Patreon](https://img.shields.io/badge/Support-Patreon-orange?logo=patreon)](https://www.patreon.com/c/kevinveenbirkenbach) [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20Coffee-Funding-yellow?logo=buymeacoffee)](https://buymeacoffee.com/kevinveenbirkenbach) [![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://s.veen.world/paypaldonate)
 
+A lightweight, Docker-powered portfolio/landing-page generator—fully customizable via YAML! Showcase your projects, skills, and online presence in minutes.  
 
-## Administrate Docker
-### Stop and Destroy
-```bash 
-docker stop landingpage
-docker rm landingpage
-```
+![PortUI screenshot](assets/img/screenshot.png)
+
+> 🚀 You can also pair PortUI with JavaScript for sleek, web-based desktop-style interfaces.  
+> 💻 Example in action: [CyMaIS.Cloud](https://cymais.cloud/) (demo)  
+> 🌐 Another live example: [veen.world](https://www.veen.world/) (Kevin’s personal site)
+
+---
+
+## ✨ Key Features
+
+- **Dynamic Navigation**  
+  Create dropdowns & nested menus with ease.  
+- **Customizable Cards**  
+  Highlight skills, projects, or services—with icons, titles, and links.  
+- **Smart Cache Management**  
+  Auto-cache assets for lightning-fast loading.  
+- **Responsive Design**  
+  Built on Bootstrap; looks great on desktop, tablet & mobile.  
+- **184 Languages**  
+  Every ISO 639-1 code, browser-negotiated, RTL-aware, with machine translation for your own content.  
+- **YAML-Driven**  
+  All content & structure defined in a simple `config.yaml`.  
+- **CLI Control**  
+  Manage Docker containers via the `portfolio` command.
+
+---
+
+## 🌐 Quick Access
+
+- **Local Preview:**  
+  [http://127.0.0.1:5000](http://127.0.0.1:5000)
+
+---
+
+## 🏁 Getting Started
+
+### 🔧 Prerequisites
+
+- Docker & Docker Compose  
+- Basic Python & YAML knowledge  
+
+### 🛠️ Installation via Git
+
+1. **Clone & enter repo**  
+   ```bash
+   git clone <repository_url>
+   cd <repository_directory>
+   ```
+
+2. **Configure**
+   Copy `config.sample.yaml` → `config.yaml` & customize.
+3. **Build & run**
+
+   ```bash
+   docker-compose up --build
+   ```
+4. **Browse**
+   Open [http://localhost:5000](http://localhost:5000)
+
+### 📦 Installation via Kevin’s Package Manager
 
-### Build
 ```bash
-docker build -t application-landingpage .
+pkgmgr install portui
 ```
 
-### Run
+Once installed, the `portui` CLI is available system-wide.
+
+---
+
+## 🖥️ CLI Commands
 
-#### Run Development Environment
 ```bash
-docker run -d -p 5000:5000 --name landingpage -v $(pwd)/app/:/app -e FLASK_APP=app.py -e FLASK_ENV=development application-landingpage
+portui --help
 ```
 
-#### Run Production Environment
-```bash
-docker run -d -p 5000:5000 --name landingpage application-landingpage
+* `build` Build the Docker image
+* `up` Start containers (with build)
+* `down` Stop & remove containers
+* `run-dev` Dev mode (hot-reload)
+* `run-prod` Production mode
+* `logs` View container logs
+* `dev` Docker-Compose dev environment
+* `prod` Docker-Compose prod environment
+* `cleanup` Prune stopped containers
+
+---
+
+## 🔧 YAML Configuration Guide
+
+Define your site’s structure in `config.yaml`:
+
+```yaml
+accounts:
+  name: Online Accounts
+  description: Discover my online presence.
+  icon:
+    class: fa-solid fa-users
+  children:
+    - name: Channels
+      description: Platforms where I share content.
+      icon:
+        class: fas fa-newspaper
+      children:
+        - name: Mastodon
+          description: Follow me on Mastodon.
+          icon:
+            class: fa-brands fa-mastodon
+          url: https://microblog.veen.world/@kevinveenbirkenbach
+          identifier: "@kevinveenbirkenbach@microblog.veen.world"
+  cards:
+    - icon:
+        source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
+      title: Agile Coach
+      text: I lead agile transformations and improve team dynamics through Scrum and Agile Coaching.
+      url: https://www.agile-coach.world
+      link_text: www.agile-coach.world
+
+company:
+  title: Kevin Veen-Birkenbach
+  subtitle: Consulting & Coaching Solutions
+  logo:
+    source: https://cloud.veen.world/s/logo_face_512x512/download
+  favicon:
+    source: https://cloud.veen.world/s/veen_world_favicon/download
+  address:
+    street: Afrikanische Straße 43
+    postal_code: DE-13351
+    city: Berlin
+    country: Germany
+  imprint_url: https://s.veen.world/imprint
 ```
 
-### Debug
+* **`children`** enables multi-level menus.
+* **`link`** references other YAML paths to avoid duplication.
+
+---
+
+## 🌍 Languages
+
+Every ISO 639-1 language — all 184 two-letter codes — has a URL, a display
+name in its own script and a writing direction. The interface ships translated
+for 29 of them; the rest fall back to English string by string until a
+catalogue is filled. `/` serves the best match for the visitor's
+`Accept-Language` header, `/<code>/` forces one, and a switcher in the navbar
+lists them all. The ten right-to-left languages get `dir="rtl"` and Bootstrap's RTL
+stylesheet automatically.
+
+Translations live in two catalogues, both keyed by the English source string:
+
+| Path | Tracked | Holds |
+| --- | --- | --- |
+| `app/i18n/ui/<code>.yaml` | yes | Interface strings. Shipped for 29 languages; English is the source and has no file. |
+| `app/i18n/content/<code>.yaml` | no | Your `config.yaml` prose, generated per deployment. |
+
+A string with no catalogue entry falls back to English, so a half-filled
+catalogue degrades instead of breaking.
+
+Fill the content catalogues from a [LibreTranslate](https://libretranslate.com/)
+instance — set `LIBRETRANSLATE_URL` in `.env`, then:
+
 ```bash
-docker logs -f landingpage
+make i18n
 ```
-## Author
-This software was created from [Kevin Veen-Birkenbach](https://www.veen.world/) with the help of [ChatGPT]()
+
+This fills the interface strings of the languages that ship no catalogue as
+well. Existing entries are never overwritten, and a string the shipped
+catalogue already covers is never requested, so corrections you make by hand
+survive later runs.
+
+`name`, `title`, `description`, `text`, `warning`, `info` and `subtitel` are
+translated; `url`, `link_text`, `identifier` and icon classes never are.
+
+A machine cannot tell the menu label "Pictures" from the brand "Mastodon", so
+list the brands in `app/i18n/keep.txt`, one per line — they are then stored as
+themselves in every language and cost no request:
+
+```
+# Strings utils/i18n_sync.py stores as themselves instead of translating.
+Mastodon
+Nextcloud
+freelancermap.de
+```
+
+Add one-off entries with `--keep Foo Bar`, or point somewhere else with
+`--keep-file`. A protected string never replaces an entry you already wrote by
+hand.
+
+---
+
+## 🚢 Production Deployment
+
+* Use a reverse proxy (NGINX/Apache).
+* Secure with SSL/TLS.
+* Swap to a production database if needed.
+
+Because every page carries a canonical URL and 184 `hreflang` alternates, two
+details of the proxy setup now matter:
+
+* **Set `TRUSTED_HOSTS`** in `.env` to your public hostname(s), comma-separated.
+  Left empty, the app reflects whatever `Host` header arrives into its canonical,
+  `hreflang` and redirect URLs — so a shared cache in front of it can be made to
+  store a redirect pointing somewhere else.
+* **Have the proxy send `X-Forwarded-Proto`.** Without it the app cannot know TLS
+  terminated upstream and every canonical URL claims `http://`. `X-Forwarded-Host`
+  is deliberately *not* trusted; set `Host` to the public name instead.
+
+---
+
+## 📜 License
+
+Licensed under **GNU AGPLv3**. See [LICENSE](./LICENSE) for details.
+
+---
+
+## ✍️ Author
+
+Created by [Kevin Veen-Birkenbach](https://www.veen.world/)
+
+Enjoy building your portfolio! 🌟

app/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

app/__init__.py

@@ -0,0 +1 @@
+"""Portfolio UI web application package."""

app/app.py

@@ -1,10 +1,33 @@
+import logging
 import os
-from flask import Flask, render_template
+
 import requests
-import hashlib
 import yaml
-from utils.configuration_resolver import ConfigurationResolver
-from utils.cache_manager import CacheManager
+from flask import Flask, current_app, make_response, render_template, request, url_for
+from markupsafe import Markup
+from werkzeug.middleware.proxy_fix import ProxyFix
+
+try:
+    from app.utils import i18n
+    from app.utils.asset_resolver import asset_src, resolve_asset_cache
+    from app.utils.cache_manager import CacheManager
+    from app.utils.compute_card_classes import compute_card_classes
+    from app.utils.configuration_resolver import ConfigurationResolver
+except ImportError:  # pragma: no cover - supports running from the app/ directory.
+    from utils.asset_resolver import asset_src, resolve_asset_cache
+    from utils.cache_manager import CacheManager
+    from utils.compute_card_classes import compute_card_classes
+    from utils.configuration_resolver import ConfigurationResolver
+
+    from utils import i18n
+
+TRANSLATED_SECTIONS = ("cards", "company", "navigation", "platform")
+
+logging.basicConfig(level=logging.DEBUG)
+
+FLASK_ENV = os.getenv("FLASK_ENV", "production")
+FLASK_HOST = os.getenv("FLASK_HOST", "127.0.0.1")
+FLASK_PORT = int(os.getenv("FLASK_PORT", os.getenv("PORT", 5000)))
 
 # Initialize the CacheManager
 cache_manager = CacheManager()
@@ -12,39 +35,164 @@ cache_manager = CacheManager()
 # Clear cache on startup
 cache_manager.clear_cache()
 
-def load_config(app):
-    """Load and resolve the configuration."""
-    # Lade die Konfigurationsdatei
-    with open("config.yaml", "r") as f:
-        config = yaml.safe_load(f)
 
-    # Resolve links in the configuration
+def load_config(app):
+    """Load and resolve the configuration from config.yaml."""
+    with open("config.yaml", "r", encoding="utf-8") as handle:
+        config = yaml.safe_load(handle)
+
+    if config.get("nasa_api_key"):
+        app.config["NASA_API_KEY"] = config["nasa_api_key"]
+
     resolver = ConfigurationResolver(config)
     resolver.resolve_links()
-    # Update the app configuration
     app.config.update(resolver.get_config())
+    app.config["TRANSLATED_CONFIG"] = {}
+    i18n.clear_catalogs()
 
+
+def cache_icons_and_logos(app):
+    """Resolve every icon/logo/favicon to either a local cache path or
+    an external URL (see ``resolve_asset_cache``)."""
+    for card in app.config["cards"]:
+        icon = card.get("icon")
+        if icon:
+            resolve_asset_cache(icon, cache_manager)
+
+    resolve_asset_cache(app.config["company"]["logo"], cache_manager)
+    resolve_asset_cache(app.config["platform"]["favicon"], cache_manager)
+    resolve_asset_cache(app.config["platform"]["logo"], cache_manager)
+
+
+# Initialize Flask app
 app = Flask(__name__)
-load_config(app)
 
-# Hole die Umgebungsvariable FLASK_ENV oder setze einen Standardwert
-FLASK_ENV = os.getenv("FLASK_ENV", "production")
-    
+app.jinja_options = {**app.jinja_options, "autoescape": True}
+
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=0, x_proto=1)
+
+
+def trusted_hosts(raw):
+    """Parse a comma-separated host list, or None when nothing is configured.
+
+    Args:
+        raw: the ``TRUSTED_HOSTS`` value, possibly empty.
+    """
+    hosts = [host.strip() for host in raw.split(",") if host.strip()]
+    return hosts or None
+
+
+app.config["TRUSTED_HOSTS"] = trusted_hosts(os.getenv("TRUSTED_HOSTS", ""))
+
+# Load configuration and cache assets on startup
+load_config(app)
+cache_icons_and_logos(app)
+
+
+@app.context_processor
+def utility_processor():
+    def include_svg(path):
+        full_path = os.path.join(current_app.root_path, "static", path)
+        try:
+            with open(full_path, "r", encoding="utf-8") as handle:
+                svg = handle.read()
+            # Trusted local SVG asset shipped with the application package.
+            return Markup(svg)  # nosec B704
+        except OSError:
+            return ""
+
+    def template_asset_src(asset):
+        return asset_src(asset, lambda filename: url_for("static", filename=filename))
+
+    return dict(include_svg=include_svg, asset_src=template_asset_src)
+
+
 @app.before_request
 def reload_config_in_dev():
+    """Reload config and recache icons before each request in development mode."""
     if FLASK_ENV == "development":
         load_config(app)
-        
-    # Cache the icons
-    for card in app.config["cards"]:
-        card["icon"]["cache"] = cache_manager.cache_file(card["icon"]["source"])
-    
-    app.config["company"]["logo"]["cache"] = cache_manager.cache_file(app.config["company"]["logo"]["source"])
-    app.config["company"]["favicon"]["cache"] = cache_manager.cache_file(app.config["company"]["favicon"]["source"])
+        cache_icons_and_logos(app)
 
-@app.route('/')
+
+def translated_config(lang):
+    """Return the configuration sections translated into ``lang``, memoized.
+
+    The memo is dropped by ``load_config``, so a development reload picks up
+    edited content on the next request.
+    """
+    memo = app.config["TRANSLATED_CONFIG"]
+    if lang not in memo:
+        source = {section: app.config[section] for section in TRANSLATED_SECTIONS}
+        memo[lang] = i18n.translate_tree(source, lang)
+    return memo[lang]
+
+
+def apod_background():
+    """Return today's NASA APOD image URL, or None when unavailable."""
+    api_key = app.config.get("NASA_API_KEY")
+    if not api_key:
+        return None
+
+    try:
+        resp = requests.get(
+            "https://api.nasa.gov/planetary/apod",
+            params={"api_key": api_key},
+            timeout=10,
+        )
+    except requests.RequestException:
+        logging.warning("APOD lookup failed", exc_info=True)
+        return None
+
+    if not resp.ok:
+        return None
+
+    data = resp.json()
+    return data.get("url") if data.get("media_type") == "image" else None
+
+
+def render_index(lang):
+    """Render the index page in ``lang``."""
+    config = translated_config(lang)
+    cards = config["cards"]
+    lg_classes, md_classes = compute_card_classes(cards)
+
+    return render_template(
+        "pages/index.html.j2",
+        cards=cards,
+        company=config["company"],
+        navigation=config["navigation"],
+        platform=config["platform"],
+        lg_classes=lg_classes,
+        md_classes=md_classes,
+        apod_bg=apod_background(),
+        lang=lang,
+        lang_dir=i18n.direction(lang),
+        languages=i18n.LANGUAGES,
+        ui_strings=i18n.ui_strings(lang),
+        t=lambda source: i18n.catalog(lang).get(source, source),
+    )
+
+
+@app.route("/")
 def index():
-    return render_template("pages/index.html.j2", cards=app.config["cards"], company=app.config["company"], navigation=app.config["navigation"])
+    """Render the index page in the language the browser asks for."""
+    response = make_response(render_index(i18n.negotiate(request.accept_languages)))
+    response.headers["Vary"] = "Accept-Language"
+    return response
+
+
+@app.route(f"/<any({','.join(i18n.LANGUAGES)}):lang>/")
+def localized_index(lang):
+    """Render the index page in an explicitly requested language."""
+    return render_index(lang)
+
 
 if __name__ == "__main__":
-    app.run(debug=(FLASK_ENV == "development"), host="0.0.0.0", port=5000)
+    print(f"Starting app on {FLASK_HOST}:{FLASK_PORT}, FLASK_ENV={FLASK_ENV}")
+    app.run(
+        debug=(FLASK_ENV == "development"),
+        host=FLASK_HOST,
+        port=FLASK_PORT,
+        use_reloader=False,
+    )

app/config.sample.yaml

@@ -0,0 +1,692 @@
+---
+accounts:
+  nasa_api_key: YOUR_REAL_KEY_HERE
+  name: Online Presence
+  description: Discover my online presence.
+  icon:
+      class: fa-solid fa-users
+  children:
+  - name: Publishing Channels
+    description: Platforms where I share content.
+    icon:
+      class: fas fa-newspaper
+    children:
+    - name: Microblogs
+      description: Stay updated with my microblog posts.
+      icon:
+        class: fa-solid fa-pen-nib
+      children:
+      - name: Mastodon
+        description: Follow my updates on Mastodon.
+        icon:
+          class: fa-brands fa-mastodon
+        url: https://microblog.veen.world/@kevinveenbirkenbach
+        identifier: "@kevinveenbirkenbach@microblog.veen.world"
+      - name: Twitter
+        description: Follow me on Twitter (limited use).
+        icon:
+          class: fa-brands fa-twitter
+        url: https://s.veen.world/twitter
+        identifier: kevinbirkenbach
+        warning: I rarely use X/Twitter and recommend alternative platforms like Mastodon.
+        alternatives:
+        - link: accounts.publishingchannels.microblogs.mastodon
+      - name: Bluesky
+        description: Follow me on Bluesky (coming soon).
+        icon:
+          class: fa-brands fa-bluesky
+        info: Bluesky is coming soon.
+        alternatives:
+        - link: accounts.publishingchannels.microblogs.mastodon
+
+    - name: Pictures
+      description: View my photography.
+      icon:
+        class: fa-solid fa-images
+      children:
+      - name: Pixelfed
+        description: Explore my photo gallery on Pixelfed.
+        icon:
+            class: fa-solid fa-camera
+        url: https://s.veen.world/pictures
+      - name: Instagram
+        description: Follow me on Instagram.
+        icon:
+          class: fa-brands fa-instagram
+        url: https://www.instagram.com/kevinveenbirkenbach/
+        identifier: kevinveenbirkenbach
+        warning: Platforms by Meta (e.g., Instagram, Facebook) may compromise your data privacy. Consider using decentralized alternatives.
+        alternatives:
+        - link: accounts.publishingchannels.pictures.pixelfed
+
+    - name: Videos
+      description: Watch my video content.
+      icon:
+          class: fa-solid fa-video
+      children:
+      - name: Peertube
+        description: Discover my videos on Peertube.
+        icon:
+          class: fa-solid fa-video
+        url: https://s.veen.world/videos
+      - name: YouTube
+        description: Follow me on YouTube (inactive).
+        icon:
+          class: fa-brands fa-youtube
+        url: https://s.veen.world/youtube
+        warning: I no longer publish videos on YouTube. Please visit my Peertube channel instead.
+        alternatives:
+        - link: accounts.publishingchannels.videos.peertube
+
+    - name: Blog
+      description: Read my articles and stories.
+      icon:
+          class: fa-solid fa-blog
+      url: https://blog.veen.world
+
+    - name: Code
+      description: Access my coding projects.
+      icon:
+          class: fa-solid fa-laptop-code
+      children:
+      - name: GitHub
+        description: View my GitHub repositories.
+        icon:
+          class: bi bi-github
+        url: https://github.com/kevinveenbirkenbach
+      - name: Gitea
+        description: Explore my self-hosted repositories.
+        icon:
+          class: fa-solid fa-code
+        url: https://git.veen.world/kevinveenbirkenbach
+
+  - name: Social Networks
+    description: Social and developer platforms.
+    icon:
+      class: fa fa-users
+    children:
+    - name: Facebook
+      warning: I recommend to don't use Facebook and connect instead with me via the Fediverse. Check out the listed alternatives.
+      description: Visit my Facebook page.
+      icon:
+        class: fa-brands fa-facebook
+      url: https://www.facebook.com/kevinveenbirkenbach
+      alternatives:
+      - link: accounts.socialnetworks.friendica
+    - name: Friendica
+      description: Visit my friendica profile
+      icon:
+        class: fas fa-network-wired
+      url: https://s.veen.world/friendica
+      identifier: "kevinveenbirkenbach@friendica.veen.world"
+  - link: navigation.header.contact.messenger
+
+  - name: Career Profiles
+    description: Professional networking profiles.
+    icon:
+      class: fa-solid fa-user-tie
+    children:
+    - name: XING
+      description: View my XING profile.
+      icon:
+        class: bi bi-building
+      url: https://s.veen.world/xing
+    - name: LinkedIn
+      description: Connect with me on LinkedIn.
+      icon:
+        class: bi bi-linkedin
+      url: https://s.veen.world/linkedin
+    - name: upwork.com
+      description: Check out my profile on upwork
+      icon:
+        class: fas fa-users
+      url: https://s.veen.world/upwork
+    - name: freelancermap.de
+      description: Check out my profile on freelancermap.de
+      icon:
+        class: fas fa-people-arrows
+      url: https://s.veen.world/freelancermap
+    - name: malt
+      description: Check out my profile on malt
+      icon:
+        class: fas fa-sun
+      url: https://s.veen.world/malt
+  - name: Sports
+    description: My sports activities and logs.
+    icon:
+      class: fa-solid fa-running
+    children:
+    - name: Garmin
+      description: Explore my Garmin activity records.
+      icon:
+        class: fa-solid fa-person-running
+      url: https://s.veen.world/garmin
+    - name: Eversports
+      description: View my Eversports sessions.
+      icon:
+        class: fa-solid fa-dumbbell
+      url: https://s.veen.world/eversports
+
+  - name: Duolingo
+    description: Join me in language learning.
+    icon:
+      class: fa-solid fa-language
+    url: https://www.duolingo.com/profile/kevinbirkenbach
+
+  - name: Spotify
+    description: Listen to my playlists.
+    icon:
+      class: fa-brands fa-spotify
+    url: https://open.spotify.com/user/31vebfzbjf3p7oualis76qfpr5ty
+
+  - name: Patreon
+    description: Support my work on Patreon.
+    icon:
+      class: fa-brands fa-patreon
+    url: https://patreon.com/kevinveenbirkenbach
+
+  - name: Discourse
+    description: Join discussions on my forum.
+    icon:
+      class: fa-brands fa-discourse
+    url: https://forum.veen.world/u/kevinveenbirkenbach
+
+  - name: Nextcloud
+    description: Share data with me via nextcloud
+    icon:
+      class: fa fa-cloud
+    url: https://s.veen.world/cloud
+
+cards:
+- icon:
+    source: https://file.infinito.nexus/assets/img/logo.png
+  title: Infinito.Nexus
+  text: Open-source self-hosting stack — one-click deployable FOSS web apps with
+    shared identity, asset, and observability services. The platform that hosts
+    this site, including the dashboard you are looking at.
+  url: https://infinito.nexus
+  link_text: infinito.nexus
+  iframe: true
+- icon:
+    source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
+  title: Agile Coach
+  text: I lead agile transformations and improve team dynamics through Scrum, DevOps,
+    and Agile Coaching. My goal is to enhance collaboration and efficiency in organizations,
+    ensuring agile principles are effectively implemented for sustainable success.
+  url: https://www.agile-coach.world
+  link_text: www.agile-coach.world
+  iframe: true
+- icon: 
+    source: https://cloud.veen.world/s/logo_personal_coach_512x512/download
+  title: Personal Coach
+  text: Offering personalized coaching for growth and development, I utilize a blend
+    of hypnotherapy, mediation, and holistic techniques. My approach is tailored to
+    help you achieve personal and professional milestones, fostering holistic well-being.
+  url: https://www.personalcoach.berlin
+  link_text: www.personalcoach.berlin
+- icon: 
+    source: https://cloud.veen.world/s/logo_yachtmaster_512x512/download
+  title: Yachtmaster
+  text: As a Yachtmaster, I provide comprehensive sailing education, yacht delivery,
+    and voyage planning services. Whether you're learning to sail or need an experienced
+    skipper, my expertise ensures a safe and enjoyable experience on the water.
+  url: https://www.yachtmaster.world
+  link_text: www.yachtmaster.world
+- icon: 
+    source: https://cloud.veen.world/s/logo_polymath_512x512/download
+  title: Polymath
+  text: I support the evaluation and execution of complex cross-domain projects, offering
+    insights across land, sea, sky, and digital realms. My expertise helps clients
+    navigate and succeed in multifaceted environments with strategic precision.
+  url: https://www.crossdomain.consulting/
+  link_text: www.crossdomain.consulting
+- icon: 
+    source: https://cloud.veen.world/s/logo_cybermaster_512x512/download
+  title: Cybermaster
+  text: Specializing in open-source IT solutions for German SMBs, I focus on automation,
+    security, and reliability. My services are designed to create robust infrastructures
+    that streamline operations and safeguard digital assets.
+  url: https://www.cybermaster.space
+  link_text: www.cybermaster.space
+- icon: 
+    source: https://cloud.veen.world/s/logo_prompt_master_512x512/download
+  title: Prompt Engineer
+  text: Leveraging AI's power, I specialize in crafting custom prompts and creative
+    content for AI-driven applications. My services are aimed at businesses, creatives,
+    and researchers looking to harness AI technology for innovation, efficiency, and
+    exploring new possibilities.
+  url: https://promptmaster.nexus
+  link_text: www.promptmaster.nexus
+- icon: 
+    source: https://cloud.veen.world/s/logo_mediator_512x512/download
+  title: Mediator
+  text: Specializing in resolving interpersonal and business conflicts with empathy
+    and neutrality, I facilitate open communication to achieve lasting agreements
+    and strengthen relationships. My mediation services are designed for individuals,
+    teams, and organizations to foster a harmonious and productive environment.
+  url: https://www.mediator.veen.world
+  link_text: www.mediator.veen.world
+- icon: 
+    source: https://cloud.veen.world/s/logo_hypnotherapist_512x512/download
+  title: Hypnotherapist
+  text: As a certified Hypnotherapist, I offer tailored sessions to address mental
+    and emotional challenges through hypnosis. My approach helps unlock the subconscious
+    to overcome negative beliefs and stress, empowering you to activate self-healing
+    and embrace positive life changes.
+  url: https://www.hypno.veen.world
+  link_text: www.hypno.veen.world
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_skydiver_512x512/download
+#  title: Aerospace Consultant
+#  text: As an Aerospace Consultant with aviation credentials, including a Sport Pilot
+#    License for Parachutes, and a Restricted Radiotelephony and Operator's Certificate
+#    I deliver expert consulting services. Currently training for my Private Pilot
+#    License, I specialize in guiding clients through aviation regulations, safety
+#    standards, and operational efficiency.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_hunter_512x512/download
+#  title: Wildlife Expert
+#  text: As a certified hunter and wildlife coach, I offer educational programs, nature
+#    walks, survival trainings, and photo expeditions, merging ecological knowledge
+#    with nature respect. My goal is to foster sustainable conservation and enhance
+#    appreciation for the natural world through responsible practices.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_diver_512x512/download
+#  title: Master Diver
+#  text: As a certified master diver with trainings in various specialties, I offer
+#    diving instruction, underwater photography, and guided dive tours. My experience
+#    ensures safe and enriching underwater adventures, highlighting marine conservation
+#    and the wonders of aquatic ecosystems.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_massage_therapist_512x512/download
+#  title: Massage Therapist
+#  text: Certified in Tantra Massage, I offer unique full-body rituals to awaken senses
+#    and harmonize body and mind. My sessions, a blend of ancient Tantra and modern
+#    relaxation, focus on energy flow, personal growth, and spiritual awakening.
+#  url: 
+#  link_text: Website under construction
+platform:
+  titel:    Kevin Veen-Birkenbach
+  subtitel: Consulting and Coaching Solutions
+  logo:
+    source: https://cloud.veen.world/s/logo_face_512x512/download
+  favicon:
+    source: https://cloud.veen.world/s/veen_world_favicon/download
+company:
+  titel:    Kevin Veen-Birkenbach
+  subtitel: Consulting and Coaching Solutions
+  logo:
+    source: https://cloud.veen.world/s/logo_cymais_512x512/download
+  address:
+      street:       Afrikanische Straße 43
+      postal_code:  DE-13351
+      city:         Berlin
+      country:      Germany
+  imprint: https://veen.world/
+
+navigation:
+  header:
+    children:
+    - link: accounts.publishingchannels.children
+    - link: accounts.socialnetworks
+    - name: Contact
+      description: Get in touch
+      icon:
+          class: fa-solid fa-envelope
+      children:
+      - name: Email
+        description: Send me an email
+        icon:
+          class: fa-solid fa-envelope
+        children:
+        - name: Email
+          description: Send me an email
+          icon:
+            class: fa-solid fa-envelope
+          url: mailto:kevin@veen.world
+          identifier: kevin@veen.world
+          alternatives:
+            - link: navigation.header.contact.messenger.matrix
+        - name: Encrypted Email (PGP)
+          description: Download my PGP key
+          icon:
+            class: fa-solid fa-key
+          url: https://s.veen.world/pgp
+          identifier: kevin@veen.world
+          info: |
+            #### Why Use PGP?
+            PGP ensures your email content stays private, protecting against surveillance, data breaches, and unauthorized access.
+
+            #### Protect Your Privacy
+            In an age of mass data collection, PGP empowers you to communicate securely and assert control over your information. For insights on protecting your digital rights, visit the [Electronic Frontier Foundation (EFF)](https://www.eff.org/).
+
+            #### Build Trust
+            Encrypting emails demonstrates a commitment to privacy and security, fostering trust in professional and personal communication.
+
+            #### Stand for Security
+            Using PGP is more than a tool—it's a statement about valuing freedom, privacy, and the security of digital communication. Explore the principles of secure communication with [privacy guides](https://privacyguides.org/).
+      - name: Mobile
+        description: Call me
+        icon:
+          class: fa-solid fa-phone
+        url: "tel:+491781798023"
+        identifier: "+491781798023"
+        target: _top
+      - name: Messenger
+        description: Social and developer networks
+        icon:
+          class: fa-solid fa-comments
+        children: 
+        - name: Matrix
+          description: Chat with me on Matrix
+          icon:
+            class: fa-solid fa-cubes
+          identifier: "@kevinveenbirkenbach:veen.world"
+          info: |
+            #### Why Use Matrix?
+            Matrix is a secure, decentralized communication platform that ensures privacy and control over your data. Learn more about [Matrix](https://matrix.org/).
+
+            #### Privacy and Security
+            End-to-end encryption keeps your conversations private and secure.
+
+            #### Decentralized and Open
+            Matrix's federated network means you can host your own server or use any provider while staying connected.
+
+            #### A Movement for Digital Freedom
+            By using Matrix, you support open, transparent, and secure communication.
+        - name: Signal
+          description: Message me on Signal
+          icon:
+            class: fa-brands fa-signal-messenger
+          identifier: "+491781798023"
+          warning: Signal is not hosted by me!
+          alternatives:
+            - link: navigation.header.contact.messenger.matrix
+        - name: Telegram
+          description: Message me on Telegram
+          icon:
+            class: fa-brands fa-telegram
+          target: _blank
+          url: https://t.me/kevinveenbirkenbach
+          identifier: kevinveenbirkenbach
+          warning: Telegram is not hosted by me!
+          alternatives:
+            - link: navigation.header.contact.messenger.matrix
+        - name: WhatsApp
+          description: Chat with me on WhatsApp
+          icon:
+            class: fa-brands fa-whatsapp
+          url: https://wa.me/491781798023
+          identifier: "+491781798023"
+          info: Consider using decentralized and privacy-respecting alternatives to maintain control over your data, improve security, and foster healthier online interactions.
+          alternatives:
+            - link: navigation.header.contact.messenger.matrix
+            - link: navigation.header.contact.messenger.signal
+            - link: navigation.header.contact.messenger.telegram
+  footer:
+    children:
+    - link: accounts
+    - name: Solution Hub
+      description: Curated collection of self hosted tools
+      icon:
+          class: fa-solid fa-network-wired
+      url: 
+      children:
+      - name: Community
+        description: Tools to manage the community
+        icon:
+            class: fa-solid fa-users
+        children:
+        - name: Forum
+          description: Join the discussion
+          icon:
+            class: fa-brands fa-discourse
+          url: https://forum.veen.world/
+        - name: Learning Platform
+          description: Learn with my academy
+          icon:
+            class: fa-solid fa-graduation-cap
+          url: https://academy.veen.world/
+        - name: Newsletter
+          description: Subscribe to my newsletter
+          icon:
+            class: fa-solid fa-envelope-open-text
+          url: https://newsletter.veen.world/subscription/form
+      - name: Project Management
+        description: Project Management Tools
+        icon:
+            class: fa-solid fa-chart-line
+        children:
+        - name: Open Project
+          description: Explore my projects
+          icon:
+            class: fa-solid fa-tasks
+          url: https://project.veen.world/
+          
+        - name: Taiga
+          description: View my Kanban board
+          icon:
+            class: bi bi-clipboard2-check-fill
+          url: https://kanban.veen.world/
+        
+        - name: Snipe IT
+          description: Manage my inventory
+          icon:
+            class: fas fa-box-open
+          url: https://inventory.veen.world/
+          
+      - name: Communication
+        icon:
+          class: fa-solid fa-comments
+        children:
+        - name: Elements
+          description: Chat with me
+          icon:
+            class: fa-solid fa-comment
+          url: https://element.veen.world/
+          
+        - name: Big Blue Button
+          description: Join live events
+          icon:
+            class: fa-solid fa-video
+          url: https://meet.veen.world/
+          
+        - name: Mailu
+          description: Send me a mail
+          icon:
+            class: fa-solid fa-envelope
+          url: https://mail.veen.world/
+      - name: Administration
+        icon:
+          class: fas fa-building
+        children:
+        - name: Matomo
+          description: Analyze with Matomo
+          icon:
+            class: fa-solid fa-chart-simple
+          url: https://matomo.veen.world/
+        - name: phpMyAdmin
+          description: Administrate MySQL and MariaDB databases
+          icon:
+            class: fas fa-database
+          url: https://phpmyadmin.veen.world/
+        - name: Keycloak
+          description: Manage User via Keycloak
+          icon:
+            class: fas fa-user-shield
+          url: https://auth.veen.world/admin
+        - name: LDAP
+          description: Manage LDAP
+          icon:
+            class: fas fa-key
+          url: https://ldap.veen.world/
+      - name: Tools
+        icon:
+          class: fas fa-tools
+        children:
+        - name: Baserow
+          description: Organize with Baserow
+          icon:
+            class: fa-solid fa-table
+          url: https://baserow.veen.world/    
+        - name: Yourls
+          description: Find my curated links
+          icon:
+            class: bi bi-link
+          url: https://s.veen.world/admin/
+          
+        - name: Nextcloud
+          description: Access my cloud storage
+          icon:
+            class: fa-solid fa-cloud
+          url: https://cloud.veen.world/
+    - name: About Me
+      description: All information about me
+      icon:
+          class: fa-solid fa-user
+      children:
+      - name: Logbooks
+        description: Access my personal logbooks (diving, flying, sailing)
+        icon:
+            class: fa-solid fa-book
+        children:
+        - name: Skydiver
+          description: View my skydiving logs
+          icon:
+            class: fa-solid fa-parachute-box
+          url: https://s.veen.world/skydiverlog
+          
+        - name: Skipper
+          description: See my sailing records
+          icon:
+            class: fa-solid fa-sailboat
+          url: https://s.veen.world/meilenbuch
+          
+        - name: Diver
+          description: Check my diving logs
+          icon:
+            class: fa-solid fa-fish
+          url: https://s.veen.world/diverlog
+          
+        - name: Pilot
+          description: Review my flight logs
+          icon:
+            class: fa-solid fa-plane
+          url: https://s.veen.world/pilotlog
+          
+        - name: Nature
+          description: Explore my nature logs
+          icon:
+            class: fa-solid fa-tree
+          url: https://s.veen.world/naturejournal
+      - name: Vita
+        description: View my CV
+        icon:
+            class: fa-solid fa-file-lines
+        url: https://s.veen.world/lebenslauf
+      - name: Languages
+        icon:
+          class: fa-solid fa-language
+        children:
+        - link: accounts.duolingo
+        - name: Languages Credentials
+          description: Check out which languages I speak
+          url: https://s.veen.world/languages
+          icon:
+            class: fa-solid fa-language
+      - name: Credentials
+        description: Access my certifications, degrees, and professional records
+        icon:
+          class: fa-solid fa-id-card
+        children:
+          - name: Degrees
+            description: View my academic degrees
+            icon:
+              class: fa-solid fa-graduation-cap
+            url: https://s.veen.world/degrees
+          - name: Certificates
+            description: View my training and professional development records
+            icon:
+              class: fa-solid fa-certificate
+            url: https://s.veen.world/certificates
+          - name: Certifications
+            description: Browse all my certifications
+            icon:
+              class: fa-solid fa-scroll
+            url: https://s.veen.world/certifications
+      - name: Skill Matrix
+        description: Checkout my skills
+        icon:
+          class: fa-solid fa-layer-group
+        url: https://s.veen.world/skillmatrix
+      - link: accounts 
+    - name: Support Me
+      description: "Discover all the ways you can support my work."
+      icon:
+        class: fa-solid fa-hands-helping
+      children:
+        - name: Buy me a Coffee
+          description: "Support my work with a coffee – every cup helps!"
+          icon:
+            class: fa-solid fa-mug-hot
+          url: https://s.veen.world/buymeacoffee
+        - name: Patreon
+          description: "Become a member and support me monthly with exclusive content."
+          icon:
+            class: fa-brands fa-patreon
+          url: https://s.veen.world/patreon
+        - name: PayPal
+          description: "Donate to my open source projects with a one-time or monthly PayPal contribution."
+          icon:
+            class: fa-brands fa-paypal
+          url: https://s.veen.world/paypaldonate
+        - name: GitHub Sponsors
+          description: "Directly support my projects through GitHub Sponsors."
+          icon:
+            class: fa-brands fa-github
+          url: https://s.veen.world/githubsponsors
+    - name: Imprint
+      description: Check out the imprint information
+      icon:
+          class: fa-solid fa-scale-balanced
+      url: https://s.veen.world/imprint
+      iframe: true
+    - name: Settings
+      description: Application settings
+      icon:
+        class: fa-solid fa-cog
+      children:
+        - name: Toggle Fullscreen
+          description: Enter or exit fullscreen mode
+          icon:
+            class: fa-solid fa-expand-arrows-alt
+          onclick: "toggleFullscreen()"
+        - name: Toggle Full Width
+          description: Switch between normal and full-width layout
+          icon:
+            class: fa-solid fa-arrows-left-right
+          onclick: "setFullWidth(!initFullWidthFromUrl())"
+        - name: Open in new tab
+          description: Open the currently embedded iframe URL in a fresh browser tab
+          icon:
+            class: fa-solid fa-up-right-from-square
+          onclick: openIframeInNewTab()
+        - name: Print
+          description: Print the current view
+          icon:
+            class: fa-solid fa-print
+          onclick: window.print()
+        - name: Zoom +
+          icon:
+            class: fa-solid fa-search-plus
+          onclick: zoomPage(1.1)
+        - name: Zoom –
+          icon:
+            class: fa-solid fa-search-minus
+          onclick: zoomPage(0.9)

app/config.yaml

@@ -1,512 +0,0 @@
----
-accounts:
-  name: Accounts
-  description: My Online Accounts
-  icon:
-      class: fa-solid fa-users
-  subitems:
-  - name: Publications
-    description: My Publications
-    icon:
-        class: fas fa-newspaper
-    subitems:
-    - name: Microblog
-      description: Read my microblogs
-      icon:
-          class: fa-brands fa-mastodon
-      url: https://microblog.veen.world/@kevinveenbirkenbach
-      
-    - name: Pictures
-      icon:
-        class: fa-solid fa-images
-      subitems:
-      - name: Pixelfed  
-        description: View my photo gallery
-        icon:
-            class: fa-solid fa-camera
-        url: https://s.veen.world/pictures
-      - name: Instagram
-        description: Follow me on Instagram
-        icon:
-          class: fa-brands fa-instagram
-        url: https://www.instagram.com/kevinveenbirkenbach/
-        identifier: kevinveenbirkenbach
-        warning: Using software and platforms from the Meta corporation (e.g., Facebook, Instagram, WhatsApp) may compromise your data privacy and digital freedom due to centralized control, extensive data collection practices, and inconsistent moderation policies. These platforms often fail to adequately address harmful content, misinformation, and abuse.
-      
-    - name: Videos
-      description: Watch my videos
-      icon:
-          class: fa-solid fa-video
-      url: https://s.veen.world/videos
-      
-    - name: Blog
-      description: Read my blog
-      icon:
-          class: fa-solid fa-blog
-      url: https://blog.veen.world
-      
-    - name: Code
-      icon:
-          class: fa-solid fa-laptop-code
-      description: Check out my Code
-      subitems:
-      - name: Github
-        description: View my GitHub profile
-        icon:
-          class: bi bi-github
-        url: https://github.com/kevinveenbirkenbach
-        
-      - name: Gitea
-        description: Explore my code repositories
-        icon:
-          class: fa-solid fa-code
-        url: https://git.veen.world/kevinveenbirkenbach
-  - name: Social Media
-    description: Social and developer networks
-    icon:
-      class: fa-brands fa-meta
-    url: 
-    subitems:
-    - name: Facebook
-      description: Like my Facebook page
-      icon:
-        class: fa-brands fa-facebook
-      url: https://www.facebook.com/kevinveenbirkenbach
-  - link: navigation.header.contact.messenger
-  - name: Carreer Profiles
-    icon:
-      class: fa-solid fa-user-tie
-    subitems:
-    - name: XING
-      description: Visit my XING profile
-      icon:
-        class: bi bi-building
-      url: https://www.xing.com/profile/Kevin_VeenBirkenbach
-      
-    - name: LinkedIn
-      description: Connect on LinkedIn
-      icon:
-        class: bi bi-linkedin
-      url: https://www.linkedin.com/in/kevinveenbirkenbach
-      
-  - name: Sports
-    description: My sport activities
-    icon:
-      class: fa-solid fa-running
-    url: 
-    subitems:
-    - name: Garmin
-      description: My Garmin activities
-      icon:
-        class: fa-solid fa-person-running
-      url: https://s.veen.world/garmin
-      
-    - name: Eversports
-      description: My Eversports sessions
-      icon:
-        class: fa-solid fa-dumbbell
-      url: https://s.veen.world/eversports
-      
-  - name: Duolingo
-    description: Learn with me on Duolingo
-    icon:
-      class: fa-solid fa-language
-    url: https://www.duolingo.com/profile/kevinbirkenbach
-    
-  - name: Spotify
-    description: Listen to my playlists
-    icon:
-      class: fa-brands fa-spotify
-    url: https://open.spotify.com/user/31vebfzbjf3p7oualis76qfpr5ty
-    
-  - name: Patreon
-    description: Support me on Patreon
-    icon:
-      class: fa-brands fa-patreon
-    url: https://patreon.com/kevinveenbirkenbach
-    
-  - name: Discourse
-    description: Follow me on Discourse
-    icon:
-      class: fa-brands fa-discourse
-    url: https://forum.veen.world/u/kevinveenbirkenbach
-    
-
-cards:
-- icon: 
-    source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
-  title: Agile Coach
-  text: I lead agile transformations and improve team dynamics through Scrum, DevOps,
-    and Agile Coaching. My goal is to enhance collaboration and efficiency in organizations,
-    ensuring agile principles are effectively implemented for sustainable success.
-  url: https://www.agile-coach.world
-  link_text: www.agile-coach.world
-- icon: 
-    source: https://cloud.veen.world/s/logo_personal_coach_512x512/download
-  title: Personal Coach
-  text: Offering personalized coaching for growth and development, I utilize a blend
-    of hypnotherapy, mediation, and holistic techniques. My approach is tailored to
-    help you achieve personal and professional milestones, fostering holistic well-being.
-  url: https://www.personalcoach.berlin
-  link_text: www.personalcoach.berlin
-- icon: 
-    source: https://cloud.veen.world/s/logo_yachtmaster_512x512/download
-  title: Yachtmaster
-  text: As a Yachtmaster, I provide comprehensive sailing education, yacht delivery,
-    and voyage planning services. Whether you're learning to sail or need an experienced
-    skipper, my expertise ensures a safe and enjoyable experience on the water.
-  url: https://www.yachtmaster.world
-  link_text: www.yachtmaster.world
-- icon: 
-    source: https://cloud.veen.world/s/logo_polymath_512x512/download
-  title: Polymath
-  text: I support the evaluation and execution of complex cross-domain projects, offering
-    insights across land, sea, sky, and digital realms. My expertise helps clients
-    navigate and succeed in multifaceted environments with strategic precision.
-  url: https://www.crossdomain.consulting/
-  link_text: www.crossdomain.consulting
-- icon: 
-    source: https://cloud.veen.world/s/logo_cybermaster_512x512/download
-  title: Cybermaster
-  text: Specializing in open-source IT solutions for German SMBs, I focus on automation,
-    security, and reliability. My services are designed to create robust infrastructures
-    that streamline operations and safeguard digital assets.
-  url: https://www.cybermaster.space
-  link_text: www.cybermaster.space
-- icon: 
-    source: https://cloud.veen.world/s/logo_prompt_master_512x512/download
-  title: Prompt Engineer
-  text: Leveraging AI's power, I specialize in crafting custom prompts and creative
-    content for AI-driven applications. My services are aimed at businesses, creatives,
-    and researchers looking to harness AI technology for innovation, efficiency, and
-    exploring new possibilities.
-  url: https://promptmaster.nexus
-  link_text: www.promptmaster.nexus
-- icon: 
-    source: https://cloud.veen.world/s/logo_mediator_512x512/download
-  title: Mediator
-  text: Specializing in resolving interpersonal and business conflicts with empathy
-    and neutrality, I facilitate open communication to achieve lasting agreements
-    and strengthen relationships. My mediation services are designed for individuals,
-    teams, and organizations to foster a harmonious and productive environment.
-  url: https://www.mediator.veen.world
-  link_text: www.mediator.veen.world
-- icon: 
-    source: https://cloud.veen.world/s/logo_hypnotherapist_512x512/download
-  title: Hypnotherapist
-  text: As a certified Hypnotherapist, I offer tailored sessions to address mental
-    and emotional challenges through hypnosis. My approach helps unlock the subconscious
-    to overcome negative beliefs and stress, empowering you to activate self-healing
-    and embrace positive life changes.
-  url: https://www.hypno.veen.world
-  link_text: www.hypno.veen.world
-- icon: 
-    source: https://cloud.veen.world/s/logo_skydiver_512x512/download
-  title: Aerospace Consultant
-  text: As an Aerospace Consultant with aviation credentials, including a Sport Pilot
-    License for Parachutes, and a Restricted Radiotelephony and Operator's Certificate
-    I deliver expert consulting services. Currently training for my Private Pilot
-    License, I specialize in guiding clients through aviation regulations, safety
-    standards, and operational efficiency.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_hunter_512x512/download
-  title: Wildlife Expert
-  text: As a certified hunter and wildlife coach, I offer educational programs, nature
-    walks, survival trainings, and photo expeditions, merging ecological knowledge
-    with nature respect. My goal is to foster sustainable conservation and enhance
-    appreciation for the natural world through responsible practices.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_diver_512x512/download
-  title: Master Diver
-  text: As a certified master diver with trainings in various specialties, I offer
-    diving instruction, underwater photography, and guided dive tours. My experience
-    ensures safe and enriching underwater adventures, highlighting marine conservation
-    and the wonders of aquatic ecosystems.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_massage_therapist_512x512/download
-  title: Massage Therapist
-  text: Certified in Tantra Massage, I offer unique full-body rituals to awaken senses
-    and harmonize body and mind. My sessions, a blend of ancient Tantra and modern
-    relaxation, focus on energy flow, personal growth, and spiritual awakening.
-  url: 
-  link_text: Website under construction
-company:
-  titel: Kevin Veen-Birkenbach
-  subtitel: Consulting and Coaching Solutions
-  logo:
-    source: https://cloud.veen.world/s/logo_face_512x512/download
-  favicon:
-    source: https://cloud.veen.world/s/veen_world_favicon/download
-  address:
-    street: Afrikanische Straße 43
-    postal_code: DE-13351
-    city: Berlin
-    country: Germany
-  imprint_url: https://s.veen.world/imprint
-navigation:
-  header:      
-  - name: Contact
-    description: Get in touch
-    icon:
-        class: fa-solid fa-envelope
-    subitems:
-    - name: Email
-      description: Send me an email
-      icon:
-        class: fa-solid fa-envelope
-      subitems:
-      - name: Email
-        description: Send me an email
-        icon:
-          class: fa-solid fa-envelope
-        url: mailto:kevin@veen.world
-        identifier: kevin@veen.world
-        alternatives:
-          - link: navigation.header.contact.messenger.matrix
-      - name: Encrypted Email (PGP)
-        description: Download my PGP key
-        icon:
-          class: fa-solid fa-key
-        url: https://s.veen.world/pgp
-        identifier: kevin@veen.world
-        info: |
-          #### Why Use PGP?
-          PGP ensures your email content stays private, protecting against surveillance, data breaches, and unauthorized access.
-
-          #### Protect Your Privacy
-          In an age of mass data collection, PGP empowers you to communicate securely and assert control over your information. For insights on protecting your digital rights, visit the [Electronic Frontier Foundation (EFF)](https://www.eff.org/).
-
-          #### Build Trust
-          Encrypting emails demonstrates a commitment to privacy and security, fostering trust in professional and personal communication.
-
-          #### Stand for Security
-          Using PGP is more than a tool—it's a statement about valuing freedom, privacy, and the security of digital communication. Explore the principles of secure communication with [privacy guides](https://privacyguides.org/).
-    - name: Mobile
-      description: Call me
-      icon:
-        class: fa-solid fa-phone
-      url: "tel:+491781798023"
-      identifier: "+491781798023"
-      target: _top
-    - name: Messenger
-      description: Social and developer networks
-      icon:
-        class: fa-solid fa-comments
-      subitems: 
-      - name: Matrix
-        description: Chat with me on Matrix
-        icon:
-          class: fa-solid fa-cubes
-        identifier: "@kevinveenbirkenbach:veen.world"
-        info: |
-          #### Why Use Matrix?
-          Matrix is a secure, decentralized communication platform that ensures privacy and control over your data. Learn more about [Matrix](https://matrix.org/).
-
-          #### Privacy and Security
-          End-to-end encryption keeps your conversations private and secure.
-
-          #### Decentralized and Open
-          Matrix's federated network means you can host your own server or use any provider while staying connected.
-
-          #### A Movement for Digital Freedom
-          By using Matrix, you support open, transparent, and secure communication.
-      - name: Signal
-        description: Message me on Signal
-        icon:
-          class: fa-brands fa-signal-messenger
-        identifier: "+491781798023"
-        warning: Signal is not hosted by me!
-        alternatives:
-          - link: navigation.header.contact.messenger.matrix
-      - name: Telegram
-        description: Message me on Telegram
-        icon:
-          class: fa-brands fa-telegram
-        target: _blank
-        url: https://t.me/kevinveenbirkenbach
-        identifier: kevinveenbirkenbach
-        warning: Telegram is not hosted by me!
-        alternatives:
-          - link: navigation.header.contact.messenger.matrix
-      - name: WhatsApp
-        description: Chat with me on WhatsApp
-        icon:
-          class: fa-brands fa-whatsapp
-        url: https://wa.me/491781798023
-        identifier: "+491781798023"
-        info: Consider using decentralized and privacy-respecting alternatives to maintain control over your data, improve security, and foster healthier online interactions.
-        alternatives:
-          - link: navigation.header.contact.messenger.matrix
-          - link: navigation.header.contact.messenger.signal
-          - link: navigation.header.contact.messenger.telegram
-
-  footer:
-  - link: accounts
-  - name: Solution Hub
-    description: Curated collection of self hosted tools
-    icon:
-        class: fa-solid fa-network-wired
-    url: 
-    subitems:
-    - name: Community
-      description: Tools to manage the community
-      icon:
-          class: fa-solid fa-users
-      subitems:
-      - name: Forum
-        description: Join the discussion
-        icon:
-          class: fa-brands fa-discourse
-        url: https://forum.veen.world/
-      - name: Learning Platform
-        description: Learn with my academy
-        icon:
-          class: fa-solid fa-graduation-cap
-        url: https://academy.veen.world/
-      - name: Newsletter
-        description: Subscribe to my newsletter
-        icon:
-          class: fa-solid fa-envelope-open-text
-        url: https://newsletter.veen.world/subscription/form
-    - name: Project Management
-      description: Project Management Tools
-      icon:
-          class: fa-solid fa-chart-line
-      subitems:
-      - name: Open Project
-        description: Explore my projects
-        icon:
-          class: fa-solid fa-tasks
-        url: https://project.veen.world/
-        
-      - name: Taiga
-        description: View my Kanban board
-        icon:
-          class: bi bi-clipboard2-check-fill
-        url: https://kanban.veen.world/
-        
-    - name: Communication
-      icon:
-        class: fa-solid fa-comments
-      subitems:
-      - name: Elements
-        description: Chat with me
-        icon:
-          class: fa-solid fa-comment
-        url: https://element.veen.world/
-        
-      - name: Big Blue Button
-        description: Join live events
-        icon:
-          class: fa-solid fa-video
-        url: https://meet.veen.world/
-        
-      - name: Mailu
-        description: Send me a mail
-        icon:
-          class: fa-solid fa-envelope
-        url: https://mail.veen.world/
-    - name: Tools
-      icon:
-        class: fas fa-tools
-      subitems:
-      - name: Matomo
-        description: Analyze with Matomo
-        icon:
-          class: fa-solid fa-chart-simple
-        url: https://matomo.veen.world/
-        
-      - name: Baserow
-        description: Organize with Baserow
-        icon:
-          class: fa-solid fa-table
-        url: https://baserow.veen.world/    
-      - name: Yourls
-        description: Find my curated links
-        icon:
-          class: bi bi-link
-        url: https://s.veen.world/admin/
-        
-      - name: Nextcloud
-        description: Access my cloud storage
-        icon:
-          class: fa-solid fa-cloud
-        url: https://cloud.veen.world/
-        
-  - name: About
-    description: All information about me
-    icon:
-        class: fa-solid fa-user
-    subitems:
-    - name: Logbooks
-      description: Access my personal logbooks (diving, flying, sailing)
-      icon:
-          class: fa-solid fa-book
-      subitems:
-      - name: Skydiver
-        description: View my skydiving logs
-        icon:
-          class: fa-solid fa-parachute-box
-        url: https://s.veen.world/skydiverlog
-        
-      - name: Skipper
-        description: See my sailing records
-        icon:
-          class: fa-solid fa-sailboat
-        url: https://s.veen.world/meilenbuch
-        
-      - name: Diver
-        description: Check my diving logs
-        icon:
-          class: fa-solid fa-fish
-        url: https://s.veen.world/diverlog
-        
-      - name: Pilot
-        description: Review my flight logs
-        icon:
-          class: fa-solid fa-plane
-        url: https://s.veen.world/pilotlog
-        
-      - name: Nature
-        description: Explore my nature logs
-        icon:
-          class: fa-solid fa-tree
-        url: https://s.veen.world/naturejournal
-    - name: Vita
-      description: View my CV
-      icon:
-          class: fa-solid fa-file-lines
-      url: https://s.veen.world/lebenslauf
-    - name: Credentials
-      description: Access my certifications, degrees, and professional records
-      icon:
-        class: fa-solid fa-id-card
-      subitems:
-        - name: Degrees
-          description: View my academic degrees
-          icon:
-            class: fa-solid fa-graduation-cap
-          url: https://s.veen.world/degrees
-        - name: Certificates
-          description: View my training and professional development records
-          icon:
-            class: fa-solid fa-certificate
-          url: https://s.veen.world/certificates
-        - name: Certifications
-          description: Browse all my certifications
-          icon:
-            class: fa-solid fa-scroll
-          url: https://s.veen.world/certifications
-    - link: accounts
-      
-  - name: Imprint
-    description: Check out the imprint information
-    icon:
-        class: fa-solid fa-scale-balanced
-    url: https://s.veen.world/imprint

app/cypress.config.js

@@ -0,0 +1,19 @@
+// cypress.config.js
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    // your app under test must already be running on this port
+    baseUrl: `http://localhost:${process.env.PORT || 5001}`,
+    defaultCommandTimeout: 60000,
+    pageLoadTimeout: 60000,
+    requestTimeout: 1500,
+    responseTimeout: 15000,
+    specPattern: 'cypress/e2e/**/*.spec.js',
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      // here you could hook into events, but we don’t need anything special
+      return config;
+    }
+  },
+});

app/cypress/e2e/container.spec.js

@@ -0,0 +1,90 @@
+// cypress/e2e/container.spec.js
+
+describe('Custom Scroll & Container Resizing', () => {
+  beforeEach(() => {
+    // Assumes your app is running at baseUrl, and container.js is loaded on “/”
+    cy.visit('/');
+  });
+
+  it('on load, the scroll-container gets a positive height and proper overflow', () => {
+    // wait for our JS to run
+    cy.window().should('have.property', 'adjustScrollContainerHeight');
+
+    // Grab the inline style of .scroll-container
+    cy.get('.scroll-container')
+      .should('have.attr', 'style')
+      .then(style => {
+        // height:<number>px must be present
+        const m = style.match(/height:\s*(\d+(?:\.\d+)?)px/);
+        expect(m, 'height set').to.not.be.null;
+        expect(parseFloat(m[1]), 'height > 0').to.be.greaterThan(0);
+
+        // overflow shorthand should include both hidden & auto (order-insensitive)
+        expect(style).to.include('overflow:');
+        expect(style).to.match(/overflow:\s*(hidden\s+auto|auto\s+hidden)/);
+      });
+  });
+
+  it('on window resize, scroll-container height updates', () => {
+    // record original height
+    cy.get('.scroll-container')
+      .invoke('css', 'height')
+      .then(orig => {
+        // resize to a smaller viewport
+        cy.viewport(320, 480);
+        cy.wait(100); // allow resize handler to fire
+
+        cy.get('.scroll-container')
+          .invoke('css', 'height')
+          .then(newH => {
+            expect(parseFloat(newH), 'height changed on resize').to.not.equal(parseFloat(orig));
+          });
+      });
+  });
+
+  context('custom scrollbar thumb', () => {
+    beforeEach(() => {
+      // inject tall content to force scrolling
+      cy.get('.scroll-container').then($sc => {
+        $sc[0].innerHTML = '<div style="height:2000px">long</div>';
+      });
+      // re-run scrollbar setup
+      cy.window().invoke('updateCustomScrollbar');
+    });
+
+    it('shows a thumb with reasonable size & position', () => {
+      cy.get('#custom-scrollbar').should('have.css', 'opacity', '1');
+
+      cy.get('#scroll-thumb')
+        .should('have.css', 'height')
+        .then(h => {
+          const hh = parseFloat(h);
+          expect(hh).to.be.at.least(20);
+          // ensure thumb is smaller than container
+          cy.get('#custom-scrollbar')
+            .invoke('css', 'height')
+            .then(ch => {
+              expect(hh).to.be.lessThan(parseFloat(ch));
+            });
+        });
+
+      // scroll a bit and verify thumb.top changes
+      cy.get('.scroll-container').scrollTo(0, 200);
+      cy.wait(50);
+      cy.get('#scroll-thumb')
+        .invoke('css', 'top')
+        .then(t => {
+          expect(parseFloat(t)).to.be.greaterThan(0);
+        });
+    });
+
+    it('hides scrollbar when content fits', () => {
+      // remove overflow
+      cy.get('.scroll-container').then($sc => {
+        $sc[0].innerHTML = '<div style="height:10px">tiny</div>';
+      });
+      cy.window().invoke('updateCustomScrollbar');
+      cy.get('#custom-scrollbar').should('have.css', 'opacity', '0');
+    });
+  });
+});

app/cypress/e2e/fullscreen.spec.js

@@ -0,0 +1,85 @@
+// cypress/e2e/fullscreen.spec.js
+
+describe('Fullscreen Toggle', () => {
+  const ROOT = '/';
+
+  beforeEach(() => {
+    cy.visit(ROOT);
+  });
+
+  it('defaults to normal mode when no fullscreen param is present', () => {
+    // Body should not have fullscreen class
+    cy.get('body').should('not.have.class', 'fullscreen');
+
+    // URL should not include `fullscreen`
+    cy.url().should('not.include', 'fullscreen=');
+
+    // Header and footer should be visible (max-height > 0)
+    cy.get('header').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+    cy.get('footer').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+  });
+
+  it('initFullscreenFromUrl() picks up ?fullscreen=1 on load', () => {
+    cy.visit(`${ROOT}?fullscreen=1`);
+
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+
+    // Header and footer should be collapsed (max-height == 0)
+    cy.get('header').should('have.css', 'max-height', '0px');
+    cy.get('footer').should('have.css', 'max-height', '0px');
+  });
+
+  it('enterFullscreen() adds fullscreen class, sets full width, and updates URL', () => {
+    cy.window().then(win => {
+      win.exitFullscreen(); // ensure starting state
+      win.enterFullscreen();
+    });
+
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid');
+
+    cy.get('header').should('have.css', 'max-height', '0px');
+    cy.get('footer').should('have.css', 'max-height', '0px');
+  });
+
+  it('exitFullscreen() removes fullscreen class, resets width, and URL param', () => {
+    // start in fullscreen
+    cy.window().invoke('enterFullscreen');
+
+    // then exit
+    cy.window().invoke('exitFullscreen');
+
+    cy.get('body').should('not.have.class', 'fullscreen');
+    cy.url().should('not.include', 'fullscreen=');
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+
+    // Header and footer should be expanded again
+    cy.get('header').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+    cy.get('footer').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+  });
+
+  it('toggleFullscreen() toggles into and out of fullscreen', () => {
+    // Toggle into fullscreen
+    cy.window().invoke('toggleFullscreen');
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+
+    // Toggle back
+    cy.window().invoke('toggleFullscreen');
+    cy.get('body').should('not.have.class', 'fullscreen');
+    cy.url().should('not.include', 'fullscreen=');
+  });
+});

app/cypress/e2e/fullwidth.spec.js

@@ -0,0 +1,61 @@
+// cypress/e2e/fullwidth.spec.js
+
+describe('Full-width Toggle', () => {
+  // test page must include your <div class="container"> wrapper
+  const ROOT = '/'; 
+
+  it('defaults to .container when no param is present', () => {
+    cy.visit(ROOT);
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+      
+    // URL should not include `fullwidth`
+    cy.url().should('not.include', 'fullwidth=');
+  });
+
+  it('initFullWidthFromUrl() picks up ?fullwidth=1 on load', () => {
+    cy.visit(`${ROOT}?fullwidth=1`);
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid')
+      .and('not.have.class', 'container');
+    cy.url().should('include', 'fullwidth=1');
+  });
+
+  it('setFullWidth(true) switches to container-fluid and updates URL', () => {
+    cy.visit(ROOT);
+
+    // call your global function
+    cy.window().invoke('setFullWidth', true);
+
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid')
+      .and('not.have.class', 'container');
+
+    cy.url().should('include', 'fullwidth=1');
+  });
+
+  it('setFullWidth(false) reverts to container and removes URL param', () => {
+    cy.visit(`${ROOT}?fullwidth=1`);
+
+    // now reset
+    cy.window().invoke('setFullWidth', false);
+
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+
+    cy.url().should('not.include', 'fullwidth=1');
+  });
+
+  it('updateUrlFullWidth() toggles the query param without changing layout', () => {
+    cy.visit(ROOT);
+
+    // manually toggle URL only
+    cy.window().invoke('updateUrlFullWidth', true);
+    cy.url().should('include', 'fullwidth=1');
+
+    cy.window().invoke('updateUrlFullWidth', false);
+    cy.url().should('not.include', 'fullwidth=');
+  });
+});

app/cypress/e2e/i18n.spec.js

@@ -0,0 +1,243 @@
+// cypress/e2e/i18n.spec.js
+
+const GERMAN_BROWSER = { headers: { 'Accept-Language': 'de-DE,de;q=0.9,en;q=0.8' } };
+
+describe('Language negotiation', () => {
+  it('serves English to an English browser', () => {
+    cy.visit('/', { headers: { 'Accept-Language': 'en-US,en;q=0.9' } });
+    cy.get('html').should('have.attr', 'lang', 'en');
+    cy.get('footer.footer a.iframe-link').should('contain.text', 'Imprint');
+  });
+
+  it('serves German to a German browser', () => {
+    cy.visit('/', GERMAN_BROWSER);
+    cy.get('html').should('have.attr', 'lang', 'de');
+    cy.get('footer.footer a.iframe-link').should('contain.text', 'Impressum');
+  });
+
+  it('falls back to English for an unsupported browser language', () => {
+    cy.visit('/', { headers: { 'Accept-Language': 'xx-XX' } });
+    cy.get('html').should('have.attr', 'lang', 'en');
+  });
+
+  it('lets the URL prefix override the browser language', () => {
+    cy.visit('/fr/', GERMAN_BROWSER);
+    cy.get('html').should('have.attr', 'lang', 'fr');
+    cy.get('footer.footer a.iframe-link').should('contain.text', 'Mentions légales');
+  });
+
+  it('rejects an unsupported language code', () => {
+    cy.request({ url: '/xx/', failOnStatusCode: false })
+      .its('status')
+      .should('eq', 404);
+  });
+
+  it('does not turn unrelated single-segment paths into redirects', () => {
+    ['/robots.txt', '/favicon.ico', '/sitemap.xml'].forEach(path => {
+      cy.request({ url: path, failOnStatusCode: false, followRedirect: false })
+        .its('status')
+        .should('eq', 404);
+    });
+  });
+
+  it('marks the negotiated route as varying by language', () => {
+    cy.request('/')
+      .its('headers.vary')
+      .should('contain', 'Accept-Language');
+  });
+});
+
+describe('Language switcher', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 720);
+    cy.visit('/en/');
+  });
+
+  it('names the active language and offers every ISO 639-1 code', () => {
+    cy.get('#navbarDropdownLanguage')
+      .should('have.attr', 'data-bs-toggle', 'dropdown')
+      .and('contain.text', 'English');
+
+    cy.get('#navbarDropdownLanguage')
+      .parent('.nav-item')
+      .find('> .dropdown-menu a.dropdown-item')
+      .should('have.length', 184);
+  });
+
+  it('marks the active language', () => {
+    cy.get('#navbarDropdownLanguage').click();
+    cy.get('.dropdown-menu a.dropdown-item.active[hreflang="en"]').should('exist');
+  });
+
+  it('navigates to the chosen language', () => {
+    cy.get('#navbarDropdownLanguage').click();
+    cy.get('.dropdown-menu a.dropdown-item[hreflang="de"]')
+      .should('have.text', 'Deutsch')
+      .click();
+
+    cy.url().should('match', /\/de\/$/);
+    cy.get('html').should('have.attr', 'lang', 'de');
+  });
+});
+
+describe('Translated interface strings', () => {
+  it('translates the strings rendered by the templates', () => {
+    cy.visit('/de/');
+    cy.get('#dynamicCopyButton').should('have.text', 'Kopieren');
+    cy.get('#dynamicChildrenSection h6').should('have.text', 'Optionen:');
+    cy.get('#dynamicAlternativesSection h6').should('have.text', 'Alternativen:');
+    cy.get('.modal-footer button').should('have.text', 'Schließen');
+  });
+
+  it('exposes the catalogue to client-side code', () => {
+    cy.visit('/de/');
+    cy.window().its('I18N').should('deep.include', {
+      Open: 'Öffnen',
+      'Open Link': 'Link öffnen',
+      'Identifier copied to clipboard!': 'Kennung in die Zwischenablage kopiert!',
+    });
+  });
+
+  it('leaves the catalogue untranslated in the source language', () => {
+    cy.visit('/en/');
+    cy.window().its('I18N').should('deep.include', { Open: 'Open' });
+  });
+});
+
+describe('Strings translated by modal.js', () => {
+  const item = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } },
+    ],
+  };
+
+  beforeEach(() => {
+    cy.visit('/de/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  it('translates the button of a list entry', () => {
+    cy.window().invoke('openDynamicPopup', item);
+    cy.get('#dynamicAlternativesList button').should('have.text', 'Öffnen');
+  });
+
+  it('translates the link label when the entry has no description', () => {
+    cy.window().invoke('openDynamicPopup', {
+      ...item,
+      url: 'https://example.com',
+      description: null,
+    });
+    cy.get('#dynamicModalLinkHref').should('have.text', 'Link öffnen');
+  });
+
+  it('translates the clipboard confirmation', () => {
+    cy.window().invoke('openDynamicPopup', item);
+    cy.get('#dynamicCopyButton').click();
+    cy.window()
+      .its('alert')
+      .should('have.been.calledWith', 'Kennung in die Zwischenablage kopiert!');
+  });
+});
+
+describe('Right-to-left languages', () => {
+  it('flips the document and loads the RTL stylesheet', () => {
+    cy.visit('/ar/');
+    cy.get('html').should('have.attr', 'dir', 'rtl');
+    cy.get('link[href*="bootstrap.rtl.min.css"]').should('exist');
+    cy.get('link[href*="vendor/bootstrap/css/bootstrap.min.css"]').should('not.exist');
+    cy.get('body').should('have.css', 'direction', 'rtl');
+  });
+
+  it('keeps left-to-right languages on the default stylesheet', () => {
+    cy.visit('/en/');
+    cy.get('html').should('have.attr', 'dir', 'ltr');
+    cy.get('link[href*="bootstrap.rtl.min.css"]').should('not.exist');
+  });
+
+  it('actually serves the RTL stylesheet it links to', () => {
+    cy.visit('/ar/');
+    cy.get('link[href*="bootstrap.rtl.min.css"]')
+      .should('have.attr', 'href')
+      .then(href => {
+        cy.request(href).its('status').should('eq', 200);
+      });
+  });
+});
+
+describe('Translated interface details', () => {
+  it('translates the strings only a screen reader sees', () => {
+    cy.visit('/de/');
+
+    cy.get('#dynamicModal .btn-close').should('have.attr', 'aria-label', 'Schließen');
+  });
+
+  it('translates the alert headings', () => {
+    cy.visit('/fr/');
+
+    cy.get('#dynamicModalWarning h5').should('contain.text', 'Avertissement');
+    cy.get('#dynamicModalInfo h5').should('contain.text', 'Informations');
+  });
+
+  it('translates the language switcher tooltip', () => {
+    cy.visit('/de/');
+
+    cy.get('#navbarDropdownLanguage').should('have.attr', 'title', 'Sprache');
+  });
+
+  it('tags each switcher entry with its own language', () => {
+    cy.visit('/en/');
+
+    cy.get('.dropdown-menu a.dropdown-item[hreflang="ja"]').should(
+      'have.attr',
+      'lang',
+      'ja',
+    );
+  });
+
+  it('scrolls inside the language menu instead of past the page', () => {
+    cy.viewport(1280, 720);
+    cy.visit('/en/');
+    cy.get('#navbarDropdownLanguage').click();
+
+    cy.get('.dropdown-menu.language-menu').should($menu => {
+      const menu = $menu[0];
+      expect(menu.scrollHeight, 'taller than it shows').to.be.greaterThan(
+        menu.clientHeight,
+      );
+      expect(menu.getBoundingClientRect().height).to.be.lessThan(720);
+      expect(getComputedStyle(menu).overflowY).to.eq('auto');
+    });
+  });
+
+  it('offers the switcher in the header only', () => {
+    cy.viewport(1280, 720);
+    cy.visit('/en/');
+
+    cy.get('#navbarNavheader #navbarDropdownLanguage').should('exist');
+    cy.get('#navbarNavfooter #navbarDropdownLanguage').should('not.exist');
+  });
+});
+
+describe('Search engine metadata', () => {
+  beforeEach(() => {
+    cy.visit('/de/');
+  });
+
+  it('declares an alternate for every language plus a default', () => {
+    cy.get('link[rel="alternate"][hreflang]').should('have.length', 185);
+    cy.get('link[rel="alternate"][hreflang="x-default"]').should('exist');
+    cy.get('link[rel="alternate"][hreflang="ja"]')
+      .should('have.attr', 'href')
+      .and('match', /\/ja\/$/);
+  });
+
+  it('points the canonical URL at the language actually served', () => {
+    cy.get('link[rel="canonical"]').should('have.attr', 'href').and('match', /\/de\/$/);
+  });
+});

app/cypress/e2e/iframe.spec.js

@@ -0,0 +1,46 @@
+// cypress/e2e/iframe.spec.js
+
+describe('Iframe integration', () => {
+  beforeEach(() => {
+    // Visit the app’s base URL (configured in cypress.config.js)
+    cy.visit('/');
+  });
+
+  it('opens the iframe when an .iframe-link is clicked', () => {
+    // Find the first iframe-link on the page
+    cy.get('.iframe-link').first().then($link => {
+      const href = $link.prop('href');
+
+      // Click it
+      cy.wrap($link).click();
+
+      // The URL should now include ?iframe=<encoded href>
+      cy.url().should('include', 'iframe=' + encodeURIComponent(href));
+
+      // The <body> should have the "fullscreen" class
+      cy.get('body').should('have.class', 'fullscreen');
+
+      // And the <main> should contain a visible <iframe src="<href>">
+      cy.get('main iframe')
+        .should('have.attr', 'src', href)
+        .and('be.visible');
+    });
+  });
+
+  it('restores the original content when a .js-restore element is clicked', () => {
+    // First open the iframe
+    cy.get('.iframe-link').first().click();
+
+    // Then click the first .js-restore element (e.g. header or logo)
+    cy.get('.js-restore').first().click();
+
+    // The URL must no longer include the iframe parameter
+    cy.url().should('not.include', 'iframe=');
+
+    // The <body> should no longer have the "fullscreen" class
+    cy.get('body').should('not.have.class', 'fullscreen');
+
+    // And no <iframe> should remain inside <main>
+    cy.get('main iframe').should('not.exist');
+  });
+});

app/cypress/e2e/injection.spec.js

@@ -0,0 +1,285 @@
+// cypress/e2e/injection.spec.js
+
+describe('Untrusted content in the modal', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    icon: { class: 'fa fa-test' },
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  describe('markdown rendered into innerHTML', () => {
+    it('strips a plain script URL', () => {
+      open({
+        warning: '[click me](javascript:window.__xss = true)',
+        info: '![x](data:text/html;base64,PHNjcmlwdD4=)',
+      });
+
+      cy.get('#dynamicModalWarningText').find('a').should('not.exist');
+      cy.get('#dynamicModalWarningText').should('contain.text', 'click me');
+      cy.get('#dynamicModalInfoText').find('img').should('not.exist');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('strips a script URL hidden behind character references', () => {
+      open({
+        warning:
+          '[a](javascript:window.__xss=1) [b](javascript:window.__xss=1)',
+        info: '[c](java	script:window.__xss=1) [d](java
script:window.__xss=1)',
+      });
+
+      cy.get('#dynamicModalWarningText').find('a').should('not.exist');
+      cy.get('#dynamicModalInfoText').find('a').should('not.exist');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('strips a script URL written as a reference-style link', () => {
+      open({
+        warning: '[click me][ref]\n\n[ref]: javascript:window.__xss=1',
+      });
+
+      cy.get('#dynamicModalWarningText').find('a').should('not.exist');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('neutralises raw HTML', () => {
+      open({
+        warning: '<img src=x onerror="window.__xss = true">',
+        info: '<a href="javascript:window.__xss = true">x</a>',
+      });
+
+      cy.get('#dynamicModalWarningText').find('img').should('not.exist');
+      cy.get('#dynamicModalWarningText').should('contain.text', 'onerror');
+      cy.get('#dynamicModalInfoText').find('a').should('not.exist');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('neutralises raw HTML used as the text of a stripped link', () => {
+      open({ warning: '[<img src=x onerror="window.__xss = true">](javascript:bad)' });
+
+      cy.get('#dynamicModalWarningText').find('img').should('not.exist');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('keeps a relative link', () => {
+      open({ warning: 'See [the notes](/#anchor)' });
+
+      cy.get('#dynamicModalWarningText')
+        .find('a')
+        .should('have.attr', 'href', '/#anchor');
+    });
+
+    it('keeps the text of a link it strips', () => {
+      open({ warning: '[read this](javascript:window.__xss=1)' });
+
+      cy.get('#dynamicModalWarningText').should('contain.text', 'read this');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('keeps ordinary markdown', () => {
+      open({ warning: 'See [Matrix](https://matrix.org/) and **mind** this' });
+
+      cy.get('#dynamicModalWarningText')
+        .find('a')
+        .should('have.attr', 'href', 'https://matrix.org/');
+      cy.get('#dynamicModalWarningText').find('strong').should('have.text', 'mind');
+    });
+  });
+
+  describe('values interpolated outside markdown', () => {
+    it('does not treat an interface string as markup', () => {
+      cy.window().then(win => {
+        win.I18N.Open = '<img src=x onerror="window.__xss = true">';
+      });
+      open({
+        alternatives: [
+          { name: 'Alt', identifier: 'A', icon: { class: 'fa-alt' } },
+        ],
+      });
+
+      cy.get('#dynamicAlternativesList').find('img').should('not.exist');
+      cy.get('#dynamicAlternativesList').should('contain.text', 'onerror');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('falls back to the English source when a string is missing', () => {
+      cy.window().then(win => {
+        delete win.I18N;
+      });
+      open({
+        alternatives: [
+          { name: 'Alt', identifier: 'A', icon: { class: 'fa-alt' } },
+        ],
+      });
+
+      cy.get('#dynamicAlternativesList button').should('have.text', 'Open');
+    });
+
+    it('renders no placeholder for a missing name', () => {
+      open({ name: undefined });
+
+      cy.get('#dynamicModalLabel').should('not.contain.text', 'undefined');
+    });
+
+    it('does not treat the name or the icon class as markup', () => {
+      open({
+        name: '<img src=x onerror="window.__xss = true">',
+        icon: { class: 'fa" onmouseover="window.__xss = true' },
+        alternatives: [
+          {
+            name: '<img src=y onerror="window.__xss = true">',
+            identifier: 'ALT1',
+            icon: { class: 'fa-alt' },
+          },
+        ],
+      });
+
+      cy.get('#dynamicModalLabel').find('img').should('not.exist');
+      cy.get('#dynamicModalLabel').should('contain.text', 'onerror');
+      cy.get('#dynamicAlternativesList').find('img').should('not.exist');
+      cy.get('#dynamicAlternativesList').should('contain.text', 'onerror');
+      cy.window().should('not.have.property', '__xss');
+    });
+  });
+
+  describe('the link the modal offers', () => {
+    it('drops a URL that uses an unsafe scheme', () => {
+      open({ url: 'javascript:window.__xss = true', description: 'Bad' });
+
+      cy.get('#dynamicModalLinkHref').should('not.have.attr', 'href');
+      cy.get('#dynamicModalLinkHref').should('have.text', 'Bad');
+      cy.window().should('not.have.property', '__xss');
+    });
+
+    it('keeps an ordinary URL', () => {
+      open({ url: 'https://example.com', description: 'Good' });
+
+      cy.get('#dynamicModalLinkHref').should(
+        'have.attr',
+        'href',
+        'https://example.com',
+      );
+    });
+
+    it('keeps a URL that carries surrounding whitespace', () => {
+      open({ url: ' https://example.com ', description: 'Good' });
+
+      cy.get('#dynamicModalLinkHref').should('have.attr', 'href');
+    });
+
+    it('keeps a mailto URL', () => {
+      open({ url: 'mailto:kevin@veen.world', description: 'Write' });
+
+      cy.get('#dynamicModalLinkHref').should(
+        'have.attr',
+        'href',
+        'mailto:kevin@veen.world',
+      );
+    });
+
+    it('restores the link after a popup whose URL was dropped', () => {
+      open({ url: 'javascript:window.__xss = true', description: 'Bad' });
+      cy.get('#dynamicModalLinkHref').should('not.have.attr', 'href');
+
+      open({ url: 'https://example.com', description: 'Good' });
+      cy.get('#dynamicModalLinkHref').should(
+        'have.attr',
+        'href',
+        'https://example.com',
+      );
+    });
+
+    it('does not let one popup iframe handler outlive it', () => {
+      open({ url: 'https://a.test/', description: 'A', iframe: true });
+      cy.get('#dynamicModalLinkHref').should('have.class', 'iframe');
+
+      open({ url: 'https://b.test/', description: 'B' });
+
+      cy.get('#dynamicModalLinkHref').should('not.have.class', 'iframe');
+      cy.get('#dynamicModalLinkHref').should($anchor => {
+        expect($anchor[0].onclick, 'stale click handler').to.equal(null);
+      });
+    });
+
+    it('opens the current popup URL, not an earlier one', () => {
+      open({ url: 'https://a.test/', description: 'A', iframe: true });
+      open({ url: 'https://b.test/', description: 'B', iframe: true });
+
+      cy.get('#dynamicModalLinkHref').click();
+
+      cy.get('#main')
+        .find('iframe', { timeout: 4000 })
+        .should('have.attr', 'src', 'https://b.test/');
+    });
+  });
+});
+
+describe('Untrusted content reaching the iframe', () => {
+  const AFTER_THE_FADE = 3000;
+
+  it('refuses to open a script URL handed over by the modal', () => {
+    cy.visit('/');
+    cy.window().invoke('openDynamicPopup', {
+      name: 'Bad',
+      icon: { class: 'fa fa-test' },
+      url: 'javascript:window.__xss = true',
+      description: 'Watch',
+      iframe: true,
+    });
+
+    cy.get('#dynamicModalLinkHref').click({ force: true });
+
+    cy.wait(AFTER_THE_FADE);
+    cy.get('#main').find('iframe').should('not.exist');
+    cy.window().should('not.have.property', '__xss');
+  });
+
+  it('refuses a script URL supplied through the query string', () => {
+    cy.visit('/?iframe=javascript:window.__xss%20%3D%20true');
+
+    cy.wait(AFTER_THE_FADE);
+    cy.get('#main').find('iframe').should('not.exist');
+    cy.window().should('not.have.property', '__xss');
+  });
+
+  it('still opens a configured iframe target from the query string', () => {
+    cy.visit('/');
+    cy.get('a.iframe-link').first().invoke('prop', 'href').then((href) => {
+      cy.visit(`/?iframe=${encodeURIComponent(href)}`);
+
+      cy.get('#main')
+        .find('iframe', { timeout: AFTER_THE_FADE })
+        .should('have.attr', 'src', href);
+    });
+  });
+
+  it('refuses a foreign origin supplied through the query string', () => {
+    cy.visit('/?iframe=https://example.com/');
+
+    cy.wait(AFTER_THE_FADE);
+    cy.get('#main').find('iframe').should('not.exist');
+  });
+
+  it('does not open a foreign query-string origin in a new tab', () => {
+    cy.visit('/?iframe=https://example.com/', {
+      onBeforeLoad(win) {
+        cy.stub(win, 'open').as('open');
+        cy.stub(win, 'alert');
+      },
+    });
+
+    cy.window().then((win) => win.openIframeInNewTab());
+    cy.get('@open').should('not.have.been.called');
+  });
+});

app/cypress/e2e/menu.spec.js

@@ -0,0 +1,196 @@
+// cypress/e2e/menu.spec.js
+
+describe('Navigation dropdowns', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 720);
+    cy.visit('/');
+  });
+
+  it('opens top-level dropdowns with explicit Bootstrap instances', () => {
+    cy.get('#navbarNavheader .nav-item.dropdown > .nav-link.dropdown-toggle')
+      .first()
+      .as('toggle')
+      .should('have.attr', 'data-bs-toggle', 'dropdown')
+      .and('have.attr', 'aria-expanded', 'false');
+
+    cy.get('@toggle').then($toggle => {
+      cy.window().then(win => {
+        expect(win.bootstrap.Dropdown.getInstance($toggle[0])).to.exist;
+      });
+    });
+
+    cy.get('@toggle')
+      .parent('.nav-item')
+      .find('> .dropdown-menu')
+      .as('menu')
+      .should('not.have.class', 'show')
+      .should('not.be.visible');
+
+    cy.get('@toggle').click();
+    cy.get('@toggle').should('have.attr', 'aria-expanded', 'true');
+    cy.get('@toggle').parent('.nav-item').should('have.class', 'dropdown');
+    cy.get('@menu')
+      .should('have.class', 'show')
+      .and('be.visible');
+  });
+
+  it('flips footer dropdowns upward where there is more space above', () => {
+    cy.get('#navbarNavfooter .nav-item .nav-link.dropdown-toggle')
+      .first()
+      .as('toggle');
+
+    cy.get('@toggle')
+      .parent('.nav-item')
+      .as('item')
+      .find('> .dropdown-menu')
+      .as('menu')
+      .should('not.have.class', 'show');
+
+    // Make sure the footer sits at the bottom of the viewport before clicking
+    // — otherwise the toggle could land near the top and chooseDirection would
+    // keep .dropdown (more space below than above).
+    // ensureScrollable:false because on short pages the body isn't scrollable
+    // and the footer is already in view (which is fine for this test).
+    cy.scrollTo('bottom', { ensureScrollable: false });
+    cy.get('@toggle').then($toggle => {
+      const rect = $toggle[0].getBoundingClientRect();
+      expect(rect.top, 'toggle is in the lower half of the viewport')
+        .to.be.greaterThan(Cypress.config('viewportHeight') / 2);
+    });
+    cy.get('@toggle').click({ scrollBehavior: false });
+    cy.get('@item').should('have.class', 'dropup');
+    cy.get('@item').should('not.have.class', 'dropdown');
+    cy.get('@menu')
+      .should('have.class', 'show')
+      .and('be.visible');
+  });
+});
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/cypress/e2e/modal.spec.js

@@ -0,0 +1,130 @@
+// cypress/e2e/dynamic_popup.spec.js
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/cypress/e2e/navbar_logo_visibility.spec.js

@@ -0,0 +1,32 @@
+describe('Navbar Logo Visibility', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should have #navbar_logo present in the DOM', () => {
+    cy.get('#navbar_logo').should('exist');
+  });
+
+  it('should be invisible (opacity 0) by default', () => {
+    cy.get('#navbar_logo')
+      .should('exist')
+      .and('have.css', 'opacity', '0');
+  });
+
+  it('should become visible (opacity 1) after entering fullscreen', () => {
+    cy.window().then(win => {
+      win.enterFullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '1');
+  });
+
+  it('should become invisible again (opacity 0) after exiting fullscreen', () => {
+    cy.window().then(win => {
+      win.enterFullscreen();
+      win.exitFullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '0');
+  });
+});

app/cypress/e2e/tooltips.spec.js

@@ -0,0 +1,130 @@
+// cypress/e2e/dynamic_popup.spec.js
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/eslint.config.js

@@ -0,0 +1,78 @@
+'use strict';
+/**
+ * Correctness only — eslint's recommended set, no stylistic rules.
+ *
+ * The browser scripts are plain <script> tags sharing one global scope: each
+ * file declares some functions and calls others declared elsewhere. That is why
+ * they are listed as globals and why no-redeclare is off — the declaring file
+ * would otherwise be reported for defining its own function.
+ */
+const js = require('@eslint/js');
+const globals = require('globals');
+
+// Vendored libraries plus the functions static/js files call across each other.
+// Keep this to names that really cross a file boundary. Every superfluous
+// entry is a permanent no-undef blind spot for a typo of that name.
+const SHARED = {
+  bootstrap: 'readonly',
+  marked: 'readonly',
+  $: 'readonly',
+  jQuery: 'readonly',
+  openDynamicPopup: 'readonly',
+  closeAllModals: 'readonly',
+  isSafeUrl: 'readonly',
+  openIframe: 'readonly',
+  enterFullscreen: 'readonly',
+  exitFullscreen: 'readonly',
+  setFullWidth: 'readonly',
+  initFullWidthFromUrl: 'readonly',
+  adjustScrollContainerHeight: 'readonly',
+  updateCustomScrollbar: 'readonly',
+};
+
+module.exports = [
+  { ignores: ['node_modules/**', 'static/vendor/**', 'cypress/screenshots/**'] },
+  {
+    files: ['static/js/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'script',
+      globals: { ...globals.browser, ...SHARED },
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      'no-redeclare': 'off',
+      // vars: 'local' — a top-level function here is the API other files and
+      // the templates call, so only unused locals are a defect.
+      'no-unused-vars': [
+        'error',
+        { vars: 'local', args: 'none', caughtErrors: 'none' },
+      ],
+    },
+  },
+  {
+    files: ['cypress/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'script',
+      globals: {
+        ...globals.browser,
+        ...globals.mocha,
+        cy: 'readonly',
+        Cypress: 'readonly',
+        expect: 'readonly',
+        assert: 'readonly',
+      },
+    },
+    rules: js.configs.recommended.rules,
+  },
+  {
+    files: ['scripts/**/*.js', 'cypress.config.js', 'eslint.config.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'commonjs',
+      globals: globals.node,
+    },
+    rules: js.configs.recommended.rules,
+  },
+];

app/i18n/keep.txt

@@ -0,0 +1,46 @@
+# Strings utils/i18n_sync.py stores as themselves instead of translating.
+# One per line; blank lines and lines starting with # are ignored.
+
+Baserow
+Big Blue Button
+Bluesky
+Buy me a Coffee
+Discourse
+Duolingo
+Eversports
+Facebook
+Friendica
+Garmin
+Gitea
+GitHub
+GitHub Sponsors
+Infinito.Nexus
+Instagram
+Keycloak
+LDAP
+LinkedIn
+Mailu
+Mastodon
+Matomo
+Matrix
+Nextcloud
+Open Project
+Patreon
+PayPal
+Peertube
+Pixelfed
+Signal
+Snipe IT
+Spotify
+Taiga
+Telegram
+Twitter
+WhatsApp
+XING
+YouTube
+Yourls
+Zoom
+freelancermap.de
+malt
+phpMyAdmin
+upwork.com

app/i18n/ui/aa.yaml

@@ -0,0 +1,11 @@
+Alternatives: Tan doorit
+Close: Alif
+Copy: Garraab
+Identifier copied to clipboard!: Astooti tixi rakaakayih culte!
+Imprint: Qaanuunih warsa
+Information: Warsa
+Language: Af
+Open: Fak
+Open Link: Tixi fak
+Options: Doorit
+Warning: Kassiisa

app/i18n/ui/ab.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтернативақәа
+Close: Аркра
+Copy: Акопиа ахыхра
+Identifier copied to clipboard!: Аидентификатор абуфер ахь иқәыргылоуп!
+Imprint: Азакәантә информациа
+Information: Аинформациа
+Language: Абызшәа
+Open: Аартра
+Open Link: Азхьарԥш аартра
+Options: Апараметрқәа
+Warning: Агәаҽанижьра

app/i18n/ui/ae.yaml

@@ -0,0 +1,11 @@
+Alternatives: Aniiā
+Close: Pairi.dāraiia
+Copy: Paitiš.kərənu
+Identifier copied to clipboard!: Nāman paitiš.kərətəm!
+Imprint: Dātō.xvarənah
+Information: Vaēdiia
+Language: Hizuuā
+Open: Vīuuāraiia
+Open Link: Paθō vīuuāraiia
+Options: Vərəθra
+Warning: Aiβi.saŋha

app/i18n/ui/af.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatiewe
+Close: Maak toe
+Copy: Kopieer
+Identifier copied to clipboard!: Identifiseerder na knipbord gekopieer!
+Imprint: Regskennisgewing
+Information: Inligting
+Language: Taal
+Open: Maak oop
+Open Link: Maak skakel oop
+Options: Opsies
+Warning: Waarskuwing

app/i18n/ui/ak.yaml

@@ -0,0 +1,11 @@
+Alternatives: Nneɛma foforɔ
+Close: To mu
+Copy: Twa
+Identifier copied to clipboard!: Wɔatwa nsɛnkyerɛnneɛ no akɔ clipboard so!
+Imprint: Mmara ho nsɛm
+Information: Nsɛm
+Language: Kasa
+Open: Bue
+Open Link: Bue link no
+Options: Nhyehyɛe
+Warning: Kɔkɔbɔ

app/i18n/ui/am.yaml

@@ -0,0 +1,11 @@
+Alternatives: አማራጮች
+Close: ዝጋ
+Copy: ቅዳ
+Identifier copied to clipboard!: መለያው ወደ ቅንጥብ ሰሌዳ ተቀድቷል!
+Imprint: ሕጋዊ መረጃ
+Information: መረጃ
+Language: ቋንቋ
+Open: ክፈት
+Open Link: ማገናኛውን ክፈት
+Options: ምርጫዎች
+Warning: ማስጠንቀቂያ

app/i18n/ui/an.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativas
+Close: Zarrar
+Copy: Copiar
+Identifier copied to clipboard!: Identificador copiau en o portafuellas!
+Imprint: Aviso legal
+Information: Información
+Language: Idioma
+Open: Ubrir
+Open Link: Ubrir o vinclo
+Options: Opcions
+Warning: Alvertencia

app/i18n/ui/ar.yaml

@@ -0,0 +1,11 @@
+Alternatives: بدائل
+Close: إغلاق
+Copy: نسخ
+Identifier copied to clipboard!: تم نسخ المعرّف إلى الحافظة!
+Imprint: معلومات قانونية
+Information: معلومات
+Language: اللغة
+Open: فتح
+Open Link: فتح الرابط
+Options: خيارات
+Warning: تحذير

app/i18n/ui/as.yaml

@@ -0,0 +1,11 @@
+Alternatives: বিকল্পসমূহ
+Close: বন্ধ কৰক
+Copy: কপি কৰক
+Identifier copied to clipboard!: চিনাক্তকাৰী ক্লিপবোৰ্ডলৈ কপি কৰা হ'ল!
+Imprint: আইনী তথ্য
+Information: তথ্য
+Language: ভাষা
+Open: খোলক
+Open Link: লিংক খোলক
+Options: বিকল্প
+Warning: সতৰ্কবাণী

app/i18n/ui/av.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтернативаби
+Close: Къазе
+Copy: Копия гьабе
+Identifier copied to clipboard!: Идентификатор буфералде копия гьабуна!
+Imprint: Закон баян
+Information: Хабар
+Language: МацӀ
+Open: Рагье
+Open Link: Ссылка рагье
+Options: Параметрал
+Warning: ТӀаде кӀвар

app/i18n/ui/ay.yaml

@@ -0,0 +1,11 @@
+Alternatives: Yaqha ajlliwinaka
+Close: Jist'antaña
+Copy: Qillqaña
+Identifier copied to clipboard!: Uñt'ayiri clipboard ukar qillqatawa!
+Imprint: Kamachi yatiyawi
+Information: Yatiyawi
+Language: Aru
+Open: Jist'araña
+Open Link: Link jist'araña
+Options: Ajlliwinaka
+Warning: Iwxt'awi

app/i18n/ui/az.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativlər
+Close: Bağla
+Copy: Kopyala
+Identifier copied to clipboard!: İdentifikator mübadilə buferinə kopyalandı!
+Imprint: Hüquqi məlumat
+Information: Məlumat
+Language: Dil
+Open: Aç
+Open Link: Keçidi aç
+Options: Seçimlər
+Warning: Xəbərdarlıq

app/i18n/ui/ba.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтернативалар
+Close: Ябырға
+Copy: Күсерергә
+Identifier copied to clipboard!: Идентификатор алмашыу буферына күсерелде!
+Imprint: Хоҡуҡи мәғлүмәт
+Information: Мәғлүмәт
+Language: Тел
+Open: Асырға
+Open Link: Һылтанманы асырға
+Options: Параметрҙар
+Warning: Иҫкәртеү

app/i18n/ui/be.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтэрнатывы
+Close: Закрыць
+Copy: Капіяваць
+Identifier copied to clipboard!: Ідэнтыфікатар скапіяваны ў буфер абмену!
+Imprint: Прававая інфармацыя
+Information: Інфармацыя
+Language: Мова
+Open: Адкрыць
+Open Link: Адкрыць спасылку
+Options: Параметры
+Warning: Папярэджанне

app/i18n/ui/bg.yaml

@@ -0,0 +1,11 @@
+Alternatives: Алтернативи
+Close: Затвори
+Copy: Копирай
+Identifier copied to clipboard!: Идентификаторът е копиран в клипборда!
+Imprint: Правна информация
+Information: Информация
+Language: Език
+Open: Отвори
+Open Link: Отвори връзката
+Options: Опции
+Warning: Предупреждение

app/i18n/ui/bi.yaml

@@ -0,0 +1,11 @@
+Alternatives: Narafala jois
+Close: Klosem
+Copy: Kopi
+Identifier copied to clipboard!: Namba blong aedentifikesen i kopi finis!
+Imprint: Loa infomesen
+Information: Infomesen
+Language: Lanwis
+Open: Openem
+Open Link: Openem link
+Options: Ol jois
+Warning: Woning

app/i18n/ui/bm.yaml

@@ -0,0 +1,11 @@
+Alternatives: Sugandili wɛrɛw
+Close: A datugu
+Copy: A kopi
+Identifier copied to clipboard!: Tɔgɔ taamasiyɛn kopilen don!
+Imprint: Sariya kunnafoni
+Information: Kunnafoni
+Language: Kan
+Open: A dayɛlɛ
+Open Link: Jɛɲɔgɔnya dayɛlɛ
+Options: Sugandiliw
+Warning: Lasɔmini

app/i18n/ui/bn.yaml

@@ -0,0 +1,11 @@
+Alternatives: অন্যান্য বিকল্প
+Close: বন্ধ করুন
+Copy: অনুলিপি
+Identifier copied to clipboard!: শনাক্তকারী ক্লিপবোর্ডে অনুলিপি করা হয়েছে!
+Imprint: আইনি তথ্য
+Information: তথ্য
+Language: ভাষা
+Open: খুলুন
+Open Link: লিঙ্ক খুলুন
+Options: বিকল্প
+Warning: সতর্কতা

app/i18n/ui/bo.yaml

@@ -0,0 +1,11 @@
+Alternatives: གདམ་ག་གཞན།
+Close: ཁ་རྒྱག
+Copy: འདྲ་བཤུས།
+Identifier copied to clipboard!: ངོས་འཛིན་རྟགས་སྦྱར་སྡེར་དུ་འདྲ་བཤུས་བྱས་ཟིན།
+Imprint: ཁྲིམས་ཀྱི་གསལ་བསྒྲགས།
+Information: ཆ་འཕྲིན།
+Language: སྐད་ཡིག
+Open: ཁ་ཕྱེ།
+Open Link: སྦྲེལ་ཐག་ཁ་ཕྱེ།
+Options: གདམ་ག
+Warning: ཉེན་བརྡ།

app/i18n/ui/br.yaml

@@ -0,0 +1,11 @@
+Alternatives: Dibaboù all
+Close: Serriñ
+Copy: Eilañ
+Identifier copied to clipboard!: Eilet eo bet an anaouder er golver!
+Imprint: Titouroù lezennel
+Information: Titouroù
+Language: Yezh
+Open: Digeriñ
+Open Link: Digeriñ al liamm
+Options: Dibarzhioù
+Warning: Diwall

app/i18n/ui/bs.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternative
+Close: Zatvori
+Copy: Kopiraj
+Identifier copied to clipboard!: Identifikator je kopiran u međuspremnik!
+Imprint: Pravne informacije
+Information: Informacije
+Language: Jezik
+Open: Otvori
+Open Link: Otvori link
+Options: Opcije
+Warning: Upozorenje

app/i18n/ui/ca.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatives
+Close: Tanca
+Copy: Copia
+Identifier copied to clipboard!: S'ha copiat l'identificador al porta-retalls!
+Imprint: Avís legal
+Information: Informació
+Language: Idioma
+Open: Obre
+Open Link: Obre l'enllaç
+Options: Opcions
+Warning: Advertiment

app/i18n/ui/ce.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтернативаш
+Close: ДӀакъовла
+Copy: Копи ян
+Identifier copied to clipboard!: Идентификатор буфере копи йина!
+Imprint: Бакъонан хаам
+Information: Хаам
+Language: Мотт
+Open: ДӀаелла
+Open Link: ТӀе хьажорг дӀаелла
+Options: Параметраш
+Warning: Кхайкхам

app/i18n/ui/ch.yaml

@@ -0,0 +1,11 @@
+Alternatives: Otro na ayek
+Close: Huchom
+Copy: Kopia
+Identifier copied to clipboard!: Ma kopia i identifier gi clipboard!
+Imprint: Infotmasion lai
+Information: Infotmasion
+Language: Lengguahi
+Open: Baba
+Open Link: Baba i link
+Options: Ayek
+Warning: Adbietensia

app/i18n/ui/co.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternative
+Close: Chjode
+Copy: Cupià
+Identifier copied to clipboard!: L'identificatore hè statu cupiatu in u preme-papers!
+Imprint: Menzioni legali
+Information: Infurmazione
+Language: Lingua
+Open: Apre
+Open Link: Apre u ligame
+Options: Uzzione
+Warning: Avertimentu

app/i18n/ui/cr.yaml

@@ -0,0 +1,11 @@
+Alternatives: kotakak
+Close: kipahamok
+Copy: ayisinahikêwin
+Identifier copied to clipboard!: kiskinowâcihcikan kî-ayisinahikâtêw!
+Imprint: wiyasiwêwin kiskêyihtamowin
+Information: kiskêyihtamowin
+Language: pîkiskwêwin
+Open: yôhtênamok
+Open Link: yôhtêna mâmawikan
+Options: nawasônamowina
+Warning: kitahamâkêwin

app/i18n/ui/cs.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativy
+Close: Zavřít
+Copy: Kopírovat
+Identifier copied to clipboard!: Identifikátor zkopírován do schránky!
+Imprint: Tiráž
+Information: Informace
+Language: Jazyk
+Open: Otevřít
+Open Link: Otevřít odkaz
+Options: Možnosti
+Warning: Upozornění

app/i18n/ui/cu.yaml

@@ -0,0 +1,11 @@
+Alternatives: Инаѧ
+Close: Затвори
+Copy: Списати
+Identifier copied to clipboard!: Именованїе списано бысть!
+Imprint: Законное вѣдѣнїе
+Information: Вѣдѣнїе
+Language: Ѧзыкъ
+Open: Отверзи
+Open Link: Отверзи съвѧзь
+Options: Изволенїѧ
+Warning: Предостереженїе

app/i18n/ui/cv.yaml

@@ -0,0 +1,11 @@
+Alternatives: Альтернативӑсем
+Close: Хуп
+Copy: Копиле
+Identifier copied to clipboard!: Идентификатор буфера копиленӗ!
+Imprint: Саккун информацийӗ
+Information: Информаци
+Language: Чӗлхе
+Open: Уҫ
+Open Link: Каҫӑна уҫ
+Options: Параметрсем
+Warning: Асӑрхаттару

app/i18n/ui/cy.yaml

@@ -0,0 +1,11 @@
+Alternatives: Dewisiadau eraill
+Close: Cau
+Copy: Copïo
+Identifier copied to clipboard!: Wedi copïo'r dynodwr i'r clipfwrdd!
+Imprint: Gwybodaeth gyfreithiol
+Information: Gwybodaeth
+Language: Iaith
+Open: Agor
+Open Link: Agor y ddolen
+Options: Opsiynau
+Warning: Rhybudd

app/i18n/ui/da.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativer
+Close: Luk
+Copy: Kopiér
+Identifier copied to clipboard!: Identifikator kopieret til udklipsholder!
+Imprint: Juridisk information
+Information: Information
+Language: Sprog
+Open: Åbn
+Open Link: Åbn link
+Options: Valgmuligheder
+Warning: Advarsel

app/i18n/ui/de.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativen
+Close: Schließen
+Copy: Kopieren
+Identifier copied to clipboard!: Kennung in die Zwischenablage kopiert!
+Imprint: Impressum
+Information: Information
+Language: Sprache
+Open: Öffnen
+Open Link: Link öffnen
+Options: Optionen
+Warning: Warnung

app/i18n/ui/dv.yaml

@@ -0,0 +1,11 @@
+Alternatives: ބަދަލު އިޚްތިޔާރުތައް
+Close: ބަންދުކުރޭ
+Copy: ކޮޕީކުރޭ
+Identifier copied to clipboard!: އައިޑެންޓިފަޔަރ ކްލިޕްބޯޑަށް ކޮޕީކުރެވިއްޖެ!
+Imprint: ޤާނޫނީ މަޢުލޫމާތު
+Information: މަޢުލޫމާތު
+Language: ބަސް
+Open: ހުޅުވާ
+Open Link: ލިންކު ހުޅުވާ
+Options: އިޚްތިޔާރުތައް
+Warning: އިންޒާރު

app/i18n/ui/dz.yaml

@@ -0,0 +1,11 @@
+Alternatives: གདམ་ཁ་གཞན།
+Close: ཁ་བསྡམས།
+Copy: འདྲ་བཤུས།
+Identifier copied to clipboard!: ངོས་འཛིན་འདི་འདྲ་བཤུས་འབད་ཡི།
+Imprint: ཁྲིམས་དོན་བརྡ་དོན།
+Information: བརྡ་དོན།
+Language: ཁ་སྐད།
+Open: ཁ་ཕྱེ།
+Open Link: འབྲེལ་མཐུད་ཁ་ཕྱེ།
+Options: གདམ་ཁ།
+Warning: ཉེན་བརྡ།

app/i18n/ui/ee.yaml

@@ -0,0 +1,11 @@
+Alternatives: Tiatia bubuwo
+Close: Tu
+Copy: Kɔpi
+Identifier copied to clipboard!: Wokɔpi dzesidede ɖe clipboard dzi!
+Imprint: Se ŋuti nyatakakawo
+Information: Nyatakaka
+Language: Gbe
+Open: Ʋu
+Open Link: Ʋu kadodoa
+Options: Tiatiawo
+Warning: Nuxlɔ̃ame

app/i18n/ui/el.yaml

@@ -0,0 +1,11 @@
+Alternatives: Εναλλακτικές
+Close: Κλείσιμο
+Copy: Αντιγραφή
+Identifier copied to clipboard!: Το αναγνωριστικό αντιγράφηκε στο πρόχειρο!
+Imprint: Νομικές πληροφορίες
+Information: Πληροφορίες
+Language: Γλώσσα
+Open: Άνοιγμα
+Open Link: Άνοιγμα συνδέσμου
+Options: Επιλογές
+Warning: Προειδοποίηση

app/i18n/ui/eo.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativoj
+Close: Fermi
+Copy: Kopii
+Identifier copied to clipboard!: Identigilo kopiita al la tondujo!
+Imprint: Jura informo
+Information: Informo
+Language: Lingvo
+Open: Malfermi
+Open Link: Malfermi ligilon
+Options: Opcioj
+Warning: Averto

app/i18n/ui/es.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativas
+Close: Cerrar
+Copy: Copiar
+Identifier copied to clipboard!: ¡Identificador copiado al portapapeles!
+Imprint: Aviso legal
+Information: Información
+Language: Idioma
+Open: Abrir
+Open Link: Abrir enlace
+Options: Opciones
+Warning: Advertencia

app/i18n/ui/et.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatiivid
+Close: Sulge
+Copy: Kopeeri
+Identifier copied to clipboard!: Identifikaator kopeeriti lõikelauale!
+Imprint: Õiguslik teave
+Information: Teave
+Language: Keel
+Open: Ava
+Open Link: Ava link
+Options: Valikud
+Warning: Hoiatus

app/i18n/ui/eu.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatibak
+Close: Itxi
+Copy: Kopiatu
+Identifier copied to clipboard!: Identifikatzailea arbelean kopiatu da!
+Imprint: Lege-oharra
+Information: Informazioa
+Language: Hizkuntza
+Open: Ireki
+Open Link: Ireki esteka
+Options: Aukerak
+Warning: Abisua

app/i18n/ui/fa.yaml

@@ -0,0 +1,11 @@
+Alternatives: جایگزین‌ها
+Close: بستن
+Copy: کپی
+Identifier copied to clipboard!: شناسه در کلیپ‌بورد کپی شد!
+Imprint: اطلاعات حقوقی
+Information: اطلاعات
+Language: زبان
+Open: باز کردن
+Open Link: باز کردن پیوند
+Options: گزینه‌ها
+Warning: هشدار

app/i18n/ui/ff.yaml

@@ -0,0 +1,11 @@
+Alternatives: Suɓaaji goɗɗi
+Close: Uddu
+Copy: Natto
+Identifier copied to clipboard!: Innde heɓtirde natta!
+Imprint: Humpito laawol
+Information: Humpito
+Language: Ɗemngal
+Open: Uddit
+Open Link: Uddit jokkorde
+Options: Suɓaaji
+Warning: Reentino

app/i18n/ui/fi.yaml

@@ -0,0 +1,11 @@
+Alternatives: Vaihtoehdot
+Close: Sulje
+Copy: Kopioi
+Identifier copied to clipboard!: Tunniste kopioitu leikepöydälle!
+Imprint: Oikeudelliset tiedot
+Information: Tiedot
+Language: Kieli
+Open: Avaa
+Open Link: Avaa linkki
+Options: Valinnat
+Warning: Varoitus

app/i18n/ui/fj.yaml

@@ -0,0 +1,11 @@
+Alternatives: Na ka tale e so
+Close: Sogota
+Copy: Kopitaka
+Identifier copied to clipboard!: Sa kopitaki na ivakatakilakila!
+Imprint: iTukutuku vakalawa
+Information: iTukutuku
+Language: Vosa
+Open: Dolava
+Open Link: Dolava na isema
+Options: Digidigi
+Warning: iVakasala

app/i18n/ui/fo.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativ
+Close: Lat aftur
+Copy: Avrita
+Identifier copied to clipboard!: Eyðmerki avritað í setiborðið!
+Imprint: Løgfrøðilig kunning
+Information: Kunning
+Language: Mál
+Open: Lat upp
+Open Link: Lat leinkju upp
+Options: Valmøguleikar
+Warning: Ávaring

app/i18n/ui/fr.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatives
+Close: Fermer
+Copy: Copier
+Identifier copied to clipboard!: Identifiant copié dans le presse-papiers !
+Imprint: Mentions légales
+Information: Informations
+Language: Langue
+Open: Ouvrir
+Open Link: Ouvrir le lien
+Options: Options
+Warning: Avertissement

app/i18n/ui/fy.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativen
+Close: Slute
+Copy: Kopiearje
+Identifier copied to clipboard!: Identifikaasje nei it klamboerd kopiearre!
+Imprint: Kolofon
+Information: Ynformaasje
+Language: Taal
+Open: Iepenje
+Open Link: Keppeling iepenje
+Options: Opsjes
+Warning: Warskôging

app/i18n/ui/ga.yaml

@@ -0,0 +1,11 @@
+Alternatives: Roghanna eile
+Close: Dún
+Copy: Cóipeáil
+Identifier copied to clipboard!: Cóipeáladh an t-aitheantóir chuig an ghearrthaisce!
+Imprint: Fógra dlíthiúil
+Information: Faisnéis
+Language: Teanga
+Open: Oscail
+Open Link: Oscail an nasc
+Options: Roghanna
+Warning: Rabhadh

app/i18n/ui/gd.yaml

@@ -0,0 +1,11 @@
+Alternatives: Roghainnean eile
+Close: Dùin
+Copy: Dèan lethbhreac
+Identifier copied to clipboard!: Chaidh lethbhreac dhen aithnichear a chur air an stòr-bhòrd!
+Imprint: Fiosrachadh laghail
+Information: Fiosrachadh
+Language: Cànan
+Open: Fosgail
+Open Link: Fosgail an ceangal
+Options: Roghainnean
+Warning: Rabhadh

app/i18n/ui/gl.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativas
+Close: Pechar
+Copy: Copiar
+Identifier copied to clipboard!: Identificador copiado no portapapeis!
+Imprint: Aviso legal
+Information: Información
+Language: Idioma
+Open: Abrir
+Open Link: Abrir ligazón
+Options: Opcións
+Warning: Advertencia

app/i18n/ui/gn.yaml

@@ -0,0 +1,11 @@
+Alternatives: Ambue jeporavorã
+Close: Mboty
+Copy: Monguatia
+Identifier copied to clipboard!: Oñemonguatia pe mboheraguapy!
+Imprint: Léi marandu
+Information: Marandu
+Language: Ñe'ẽ
+Open: Mbojuruja
+Open Link: Mbojuruja joajuha
+Options: Jeporavorã
+Warning: Ñemomarandu

app/i18n/ui/gu.yaml

@@ -0,0 +1,11 @@
+Alternatives: અન્ય વિકલ્પો
+Close: બંધ કરો
+Copy: કૉપિ કરો
+Identifier copied to clipboard!: ઓળખકર્તા ક્લિપબોર્ડ પર કૉપિ કર્યો!
+Imprint: કાનૂની માહિતી
+Information: માહિતી
+Language: ભાષા
+Open: ખોલો
+Open Link: લિંક ખોલો
+Options: વિકલ્પો
+Warning: ચેતવણી

app/i18n/ui/gv.yaml

@@ -0,0 +1,11 @@
+Alternatives: Reihghyn elley
+Close: Dooney
+Copy: Jean lhiasaghey
+Identifier copied to clipboard!: Ta'n enmyssagh er ny lhiasaghey!
+Imprint: Fys leighoil
+Information: Fys
+Language: Çhengey
+Open: Foshil
+Open Link: Foshil y kiangley
+Options: Reihghyn
+Warning: Raaue

app/i18n/ui/ha.yaml

@@ -0,0 +1,11 @@
+Alternatives: Madadai
+Close: Rufe
+Copy: Kwafi
+Identifier copied to clipboard!: An kwafi mai ganowa zuwa allon rubutu!
+Imprint: Bayanin doka
+Information: Bayani
+Language: Harshe
+Open: Buɗe
+Open Link: Buɗe mahaɗi
+Options: Zaɓuɓɓuka
+Warning: Gargaɗi

app/i18n/ui/he.yaml

@@ -0,0 +1,11 @@
+Alternatives: חלופות
+Close: סגור
+Copy: העתק
+Identifier copied to clipboard!: המזהה הועתק ללוח!
+Imprint: מידע משפטי
+Information: מידע
+Language: שפה
+Open: פתח
+Open Link: פתח קישור
+Options: אפשרויות
+Warning: אזהרה

app/i18n/ui/hi.yaml

@@ -0,0 +1,11 @@
+Alternatives: अन्य विकल्प
+Close: बंद करें
+Copy: कॉपी करें
+Identifier copied to clipboard!: पहचानकर्ता क्लिपबोर्ड पर कॉपी हो गया!
+Imprint: कानूनी सूचना
+Information: जानकारी
+Language: भाषा
+Open: खोलें
+Open Link: लिंक खोलें
+Options: विकल्प
+Warning: चेतावनी

app/i18n/ui/ho.yaml

@@ -0,0 +1,11 @@
+Alternatives: Ma haida
+Close: Koua
+Copy: Kopi
+Identifier copied to clipboard!: Ladana ia kopi vadaeni!
+Imprint: Taravatu sivaraina
+Information: Sivaraina
+Language: Gado
+Open: Kehoa
+Open Link: Link kehoa
+Options: Abia hidi
+Warning: Hadibaia

app/i18n/ui/hr.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternative
+Close: Zatvori
+Copy: Kopiraj
+Identifier copied to clipboard!: Identifikator je kopiran u međuspremnik!
+Imprint: Pravne informacije
+Information: Informacije
+Language: Jezik
+Open: Otvori
+Open Link: Otvori poveznicu
+Options: Mogućnosti
+Warning: Upozorenje

app/i18n/ui/ht.yaml

@@ -0,0 +1,11 @@
+Alternatives: Lòt chwa
+Close: Fèmen
+Copy: Kopye
+Identifier copied to clipboard!: Idantifyan an kopye nan klipbòd la!
+Imprint: Enfòmasyon legal
+Information: Enfòmasyon
+Language: Lang
+Open: Louvri
+Open Link: Louvri lyen an
+Options: Opsyon
+Warning: Avètisman

app/i18n/ui/hu.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatívák
+Close: Bezárás
+Copy: Másolás
+Identifier copied to clipboard!: Az azonosító a vágólapra másolva!
+Imprint: Impresszum
+Information: Információ
+Language: Nyelv
+Open: Megnyitás
+Open Link: Hivatkozás megnyitása
+Options: Lehetőségek
+Warning: Figyelmeztetés

app/i18n/ui/hy.yaml

@@ -0,0 +1,11 @@
+Alternatives: Այլընտրանքներ
+Close: Փակել
+Copy: Պատճենել
+Identifier copied to clipboard!: Նույնացուցիչը պատճենվեց սեղմատախտակին!
+Imprint: Իրավական տեղեկություններ
+Information: Տեղեկություն
+Language: Լեզու
+Open: Բացել
+Open Link: Բացել հղումը
+Options: Ընտրանքներ
+Warning: Զգուշացում

app/i18n/ui/hz.yaml

@@ -0,0 +1,11 @@
+Alternatives: Ovikeṱa oviṱjaṱa
+Close: Pata
+Copy: Hiṱa
+Identifier copied to clipboard!: Ondjiviro ya hiṱwa!
+Imprint: Omambo woveta
+Information: Omambo
+Language: Ombango
+Open: Paturura
+Open Link: Paturura omukambo
+Options: Ovikeṱa
+Warning: Omaṱoororo

app/i18n/ui/ia.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternativas
+Close: Clauder
+Copy: Copiar
+Identifier copied to clipboard!: Identificator copiate al area de transferentia!
+Imprint: Information legal
+Information: Information
+Language: Lingua
+Open: Aperir
+Open Link: Aperir ligamine
+Options: Optiones
+Warning: Advertimento

app/i18n/ui/id.yaml

@@ -0,0 +1,11 @@
+Alternatives: Alternatif
+Close: Tutup
+Copy: Salin
+Identifier copied to clipboard!: Pengenal disalin ke papan klip!
+Imprint: Informasi hukum
+Information: Informasi
+Language: Bahasa
+Open: Buka
+Open Link: Buka tautan
+Options: Opsi
+Warning: Peringatan