feat(de): launch German translation experiment (#12033)

We launched the German locale as a public preview on a separate test environment [1]
 in October 2024, and the next step is to expose the locale to more users by launching 
it as an experiment on production in November 2024, with the following constraints:

[1] https://github.com/orgs/mdn/discussions/741

1. The locale should not be indexed by search engines.
2. The locale should be clearly marked as experimental and machine translated.

This commit includes the following changes:

1. The {stage,prod}-build workflows are updated to build `de` by checking out `mdn/translated-content-de` and moving the `files/de` folder into `mdn/translated-content`.
    - _Caveats_: This prevents `sync-translated-content` on `de`, and `tool gather-git-history` from fetching `de` history, but that's acceptable.
2. German translations are added in various places:
    - in the baseline indicator (in terms of the of the BCD section id),
    - the indicator for `en-US` links (in case of pages without translations),
    - the disclaimer at the top of every page about the locale being experimental and automatically translated,
    - the TOC header ("In this article"),
    - the article footer ("Help improve MDN"), and
    - macros (especially sidebars).
3. A short survey is added that is shown on all `/de/docs/` pages, when navigating from another `/de/docs/` page.
    - _Related_: For this survey, the `src` field now supports a callback to create the survey URL dynamically in order to pass the current MDN page's URL as a hidden survey parameter. 
4. Special treatment for German is added in two places:
    - in the `client`, the repo `translated-content` is manually replaced by `translated-content-de`,
    - during SSR, the robots value is set to `"noindex, follow"` to prevent search engines from indexing the pages.

.github/workflows/prod-build.yml

@@ -115,6 +115,19 @@ jobs:
           # See matching warning for mdn/content checkout step
           fetch-depth: 0
 
+      - name: Checkout (translated-content-de)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        with:
+          repository: mdn/translated-content-de
+          path: mdn/translated-content-de
+
+      - name: Move de into translated-content
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        run: |
+          mv mdn/translated-content-de/files/de mdn/translated-content/files/
+          rm -rf mdn/translated-content-de
+
       - uses: actions/checkout@v4
         if: ${{ ! vars.SKIP_BUILD }}
         with:
@@ -263,11 +276,11 @@ jobs:
           yarn build:sw
           yarn build:prepare
 
-          yarn tool sync-translated-content
+          yarn tool sync-translated-content es fr ja ko pt-br ru zh-cn zh-tw
 
           # Build using one process per locale.
           # Note: We have 4 cores, but 9 processes is a reasonable number.
-          for locale in en-us es fr ja ko pt-br ru zh-cn zh-tw; do
+          for locale in en-us de es fr ja ko pt-br ru zh-cn zh-tw; do
             yarn build:docs --locale $locale 2>&1 | sed "s/^/[$locale] /"   &
             pids+=($!)
           done

.github/workflows/stage-build.yml

@@ -138,6 +138,19 @@ jobs:
           # See matching warning for mdn/content checkout step
           fetch-depth: 0
 
+      - name: Checkout (translated-content-de)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        with:
+          repository: mdn/translated-content-de
+          path: mdn/translated-content-de
+
+      - name: Move de into translated-content
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        run: |
+          mv mdn/translated-content-de/files/de mdn/translated-content/files/
+          rm -rf mdn/translated-content-de
+
       - uses: actions/checkout@v4
         if: ${{ ! vars.SKIP_BUILD }}
         with:
@@ -279,11 +292,11 @@ jobs:
           yarn build:sw
           yarn build:prepare
 
-          yarn tool sync-translated-content
+          yarn tool sync-translated-content es fr ja ko pt-br ru zh-cn zh-tw
 
           # Build using one process per locale.
           # Note: We have 4 cores, but 9 processes is a reasonable number.
-          for locale in en-us es fr ja ko pt-br ru zh-cn zh-tw; do
+          for locale in en-us de es fr ja ko pt-br ru zh-cn zh-tw; do
             yarn build:docs --locale $locale 2>&1 | sed "s/^/[$locale] /"   &
             pids+=($!)
           done

.github/workflows/test-de-build.yml

@@ -1,5 +1,8 @@
 name: Test-DE Build
 
+env:
+  DEFAULT_NOTES: ""
+
 on:
   schedule:
     # * is a special character in YAML so you have to quote this string
@@ -12,6 +15,23 @@ on:
         required: false
         default: ${DEFAULT_NOTES}
 
+      invalidate:
+        description: "Invalidate CDN (use only in exceptional circumstances)"
+        type: boolean
+        required: false
+        default: false
+
+  workflow_call:
+    secrets:
+      GCP_PROJECT_NAME:
+        required: true
+      WIP_PROJECT_ID:
+        required: true
+
+permissions:
+  contents: read
+  id-token: write
+
 jobs:
   trigger:
     runs-on: ubuntu-latest
@@ -22,3 +42,276 @@ jobs:
       - run: gh workflow run "${{ github.workflow }}" --repo "${{ github.repository }}" --ref "test-de"
         env:
           GH_TOKEN: ${{ secrets.AUTOMERGE_TOKEN }}
+
+  build:
+    environment: test-de
+    runs-on: ubuntu-latest
+
+    # Only run the scheduled workflows on the main repo.
+    if: github.repository == 'mdn/yari' && github.ref_name == 'test-de'
+
+    steps:
+      - name: Checkout (yari)
+        uses: actions/checkout@v4
+
+      - name: Checkout (content)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        with:
+          repository: mdn/content
+          path: mdn/content
+          # Yes, this means fetch EVERY COMMIT EVER.
+          # It's probably not sustainable in the far future (e.g. past 2021)
+          # but for now it's good enough. We'll need all the history
+          # so we can figure out each document's last-modified date.
+          fetch-depth: 0
+
+      - name: Checkout (mdn-studio)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD }}
+        with:
+          repository: mdn/mdn-studio
+          path: mdn/mdn-studio
+          lfs: true
+          token: ${{ secrets.MDN_STUDIO_PAT }}
+
+      - name: Checkout (curriculum)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD }}
+        with:
+          repository: mdn/curriculum
+          path: mdn/curriculum
+
+      - name: Checkout (translated-content)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        with:
+          repository: mdn/translated-content
+          path: mdn/translated-content
+          # See matching warning for mdn/content checkout step
+          fetch-depth: 0
+
+      - name: Checkout (translated-content-de)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        with:
+          repository: mdn/translated-content-de
+          path: mdn/translated-content-de
+
+      - name: Move de into translated-content
+        run: |
+          mv mdn/translated-content-de/files/de mdn/translated-content/files/
+          rm -rf mdn/translated-content-de
+
+      - name: Checkout (contributor-spotlight)
+        uses: actions/checkout@v4
+        if: ${{ ! vars.SKIP_BUILD }}
+        with:
+          repository: mdn/mdn-contributor-spotlight
+          path: mdn/mdn-contributor-spotlight
+
+      - name: Setup Node.js
+        if: ${{ ! vars.SKIP_BUILD || ! vars.SKIP_FUNCTION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install
+        if: ${{ ! vars.SKIP_BUILD }}
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Print notes
+        if: github.event.inputs.notes
+        run: |
+          echo "notes: ${{ github.event.inputs.notes }}"
+
+      - name: Print CPU info
+        run: cat /proc/cpuinfo
+
+      - name: Build
+        if: ${{ ! vars.SKIP_BUILD }}
+        env:
+          # Remember, the mdn/content repo got cloned into `pwd` into a
+          # sub-folder called "mdn/content"
+          CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files
+          CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/mdn/translated-content/files
+          CONTRIBUTOR_SPOTLIGHT_ROOT: ${{ github.workspace }}/mdn/mdn-contributor-spotlight/contributors
+          BLOG_ROOT: ${{ github.workspace }}/mdn/mdn-studio/content/posts
+          CURRICULUM_ROOT: ${{ github.workspace }}/mdn/curriculum
+          BASE_URL: "https://de.test.developer.allizom.org"
+
+          # The default for this environment variable is geared for writers
+          # (aka. local development). Usually defaults are supposed to be for
+          # secure production but this is an exception and default
+          # is not insecure.
+          BUILD_LIVE_SAMPLES_BASE_URL: https://live.de.test.mdnyalp.dev
+          BUILD_LEGACY_LIVE_SAMPLES_BASE_URL: https://live.de.test.mdnyalp.dev
+
+          # Use the stage version of interactive examples.
+          BUILD_INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net
+
+          # Now is not the time to worry about flaws.
+          #BUILD_FLAW_LEVELS: "*:ignore"
+
+          # This enables the Plus call-to-action banner and the Plus landing page
+          REACT_APP_ENABLE_PLUS: true
+
+          # This adds the ability to sign in (stage only for now)
+          REACT_APP_DISABLE_AUTH: false
+
+          # Use the stage version of interactive examples in react app
+          REACT_APP_INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net
+
+          # Firefox Accounts and SubPlat settings
+          REACT_APP_FXA_SIGNIN_URL: /users/fxa/login/authenticate/
+          REACT_APP_FXA_SETTINGS_URL: https://accounts.stage.mozaws.net/settings/
+          REACT_APP_MDN_PLUS_SUBSCRIBE_URL: https://accounts.stage.mozaws.net/subscriptions/products/prod_Jtbg9tyGyLRuB0
+          REACT_APP_MDN_PLUS_5M_PLAN: price_1JFoTYKb9q6OnNsLalexa03p
+          REACT_APP_MDN_PLUS_5Y_PLAN: price_1JpIPwKb9q6OnNsLJLsIqMp7
+          REACT_APP_MDN_PLUS_10M_PLAN: price_1K6X7gKb9q6OnNsLi44HdLcC
+          REACT_APP_MDN_PLUS_10Y_PLAN: price_1K6X8VKb9q6OnNsLFlUcEiu4
+
+          # No surveys.
+
+          # Telemetry.
+          REACT_APP_GLEAN_CHANNEL: test-de
+          REACT_APP_GLEAN_ENABLED: true
+
+          # Newsletter
+          REACT_APP_NEWSLETTER_ENABLED: false
+
+          # Placement
+          REACT_APP_PLACEMENT_ENABLED: false
+
+          # Playground
+          REACT_APP_PLAYGROUND_BASE_HOST: play.de.test.mdn.allizom.net
+        run: |
+          set -eo pipefail
+
+          # Info about which CONTENT_* environment variables were set and to what.
+          echo "CONTENT_ROOT=$CONTENT_ROOT"
+          echo "CONTENT_TRANSLATED_ROOT=$CONTENT_TRANSLATED_ROOT"
+          echo "BLOG_ROOT=$BLOG_ROOT"
+          # Build the ServiceWorker first
+          yarn build:sw
+          yarn build:prepare
+
+          yarn tool sync-translated-content es fr ja ko pt-br ru zh-cn zh-tw
+
+          # Build using one process per locale.
+          # Note: We have 4 cores, but 9 processes is a reasonable number.
+          for locale in en-us de es fr ja ko pt-br ru zh-cn zh-tw; do
+            yarn build:docs --locale $locale 2>&1 | sed "s/^/[$locale] /"   &
+            pids+=($!)
+          done
+
+          for pid in "${pids[@]}"; do
+            wait $pid
+          done
+
+          du -sh client/build
+
+          # Build the blog
+          yarn build:blog
+
+          # Build the curriculum
+          yarn build:curriculum
+
+          # Generate sitemap index file
+          yarn build --sitemap-index
+
+          # SSR all pages
+          yarn render:html
+
+          # Generate whatsdeployed files.
+          yarn tool whatsdeployed --output client/build/_whatsdeployed/code.json
+          yarn tool whatsdeployed $CONTENT_ROOT --output client/build/_whatsdeployed/content.json
+          yarn tool whatsdeployed $CONTENT_TRANSLATED_ROOT --output client/build/_whatsdeployed/translated-content.json
+
+      - name: Auth (Cloud Storage)
+        uses: google-github-actions/auth@v2
+        with:
+          token_format: access_token
+          service_account: deploy-test-de-content@${{ secrets.GCP_PROJECT_NAME }}.iam.gserviceaccount.com
+          workload_identity_provider: projects/${{ secrets.WIP_PROJECT_ID }}/locations/global/workloadIdentityPools/github-actions/providers/github-actions
+
+      - name: Setup gcloud
+        uses: google-github-actions/setup-gcloud@v2
+
+      - name: Sync build
+        if: ${{ ! vars.SKIP_BUILD }}
+        run: |-
+          gsutil -q -m -h "Cache-Control: public, max-age=3600" cp -r client/build/static gs://${{ vars.GCP_BUCKET_NAME }}/main/
+          gsutil -q -m -h "Cache-Control: public, max-age=3600" rsync -cdrj html,json,txt -y "^static/" client/build gs://${{ vars.GCP_BUCKET_NAME }}/main
+
+      - name: Auth (Cloud Function)
+        if: ${{ ! vars.SKIP_FUNCTION }}
+        uses: google-github-actions/auth@v2
+        with:
+          token_format: access_token
+          service_account: deploy-test-de-nonprod-mdn-ing@${{ secrets.GCP_PROJECT_NAME }}.iam.gserviceaccount.com
+          workload_identity_provider: projects/${{ secrets.WIP_PROJECT_ID }}/locations/global/workloadIdentityPools/github-actions/providers/github-actions
+
+      - name: Setup gcloud
+        if: ${{ ! vars.SKIP_FUNCTION }}
+        uses: google-github-actions/setup-gcloud@v2
+        with:
+          install_components: "beta"
+
+      - name: Generate redirects map
+        if: ${{ ! vars.SKIP_FUNCTION }}
+        working-directory: cloud-function
+        env:
+          CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files
+          CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/mdn/translated-content/files
+        run: |
+          npm ci
+          npm run build-redirects
+          npm run build-canonicals
+
+      - name: Deploy function
+        if: ${{ ! vars.SKIP_FUNCTION }}
+        run: |-
+          set -eo pipefail
+
+          for region in europe-west3; do
+            gcloud beta functions deploy mdn-nonprod-test-de-$region \
+            --gen2 \
+            --runtime=nodejs20 \
+            --region=$region \
+            --source=cloud-function \
+            --trigger-http \
+            --allow-unauthenticated \
+            --entry-point=mdnHandler \
+            --concurrency=100 \
+            --min-instances=1 \
+            --max-instances=100 \
+            --memory=2GB \
+            --timeout=120s \
+            --set-env-vars="ORIGIN_MAIN=de.test.developer.allizom.org" \
+            --set-env-vars="ORIGIN_LIVE_SAMPLES=live.de.test.mdnyalp.dev" \
+            --set-env-vars="ORIGIN_PLAY=de.test.mdnyalp.dev" \
+            --set-env-vars="SOURCE_CONTENT=https://storage.googleapis.com/${{ vars.GCP_BUCKET_NAME }}/main/" \
+            --set-env-vars="SOURCE_API=https://api.developer.allizom.org/" \
+            --set-env-vars="SENTRY_DSN=${{ secrets.SENTRY_DSN_CLOUD_FUNCTION }}" \
+            --set-env-vars="SENTRY_ENVIRONMENT=test-de" \
+            --set-env-vars="SENTRY_TRACES_SAMPLE_RATE=${{ vars.SENTRY_TRACES_SAMPLE_RATE }}" \
+            --set-env-vars="SENTRY_RELEASE=${{ github.sha }}" \
+            --set-secrets="KEVEL_SITE_ID=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-kevel-site-id/versions/latest" \
+            --set-secrets="KEVEL_NETWORK_ID=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-kevel-network-id/versions/latest" \
+            --set-secrets="SIGN_SECRET=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-sign-secret/versions/latest" \
+            2>&1 | sed "s/^/[$region] /" &
+            pids+=($!)
+          done
+
+          for pid in "${pids[@]}"; do
+            wait $pid
+          done
+
+      - name: Invalidate CDN
+        if: ${{ github.event.inputs.invalidate }}
+        run: gcloud compute url-maps invalidate-cdn-cache ${{ secrets.GCP_LOAD_BALANCER_NAME }} --path "/*" --async

client/src/document/baseline-indicator.tsx

@@ -40,6 +40,7 @@ const ENGINES: {
 ];
 
 const LOCALIZED_BCD_IDS = {
+  de: "browser-kompatibilität",
   "en-US": "browser_compatibility",
   es: "compatibilidad_con_navegadores",
   fr: "compatibilité_des_navigateurs",

client/src/document/index.scss

@@ -954,6 +954,10 @@ html a.only-in-en-us:after {
   vertical-align: super;
 }
 
+html[lang="de"] a.only-in-en-us:after {
+  content: "(engl.)";
+}
+
 html[lang="es"] a.only-in-en-us:after {
   content: "(inglés)";
 }