feat(observatory): launch HTTP Observatory (#10371)

Introduces the HTTP Observatory on MDN.

Originally part of the Mozilla Observatory standalone tool, the 
HTTP Observatory is now available on MDN under the new "Tools" menu.

Backend: https://github.com/mdn/mdn-http-observatory

(MP-556)

---------

Co-authored-by: Andi Pieper <apieper@mozilla.com>
Co-authored-by: Claas Augner <caugner@mozilla.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
Co-authored-by: Florian Dieminger <me@fiji-flo.de>

.github/workflows/prod-build.yml

@@ -243,6 +243,9 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnplay.dev
 
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.mozilla.net
+
           # Sentry.
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: prod

.github/workflows/stage-build.yml

@@ -260,6 +260,9 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
 
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.allizom.net
+
           # Sentry.
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: stage

.github/workflows/test-build.yml

@@ -156,6 +156,9 @@ jobs:
 
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: play.test.mdn.allizom.net
+
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.allizom.net
         run: |
 
           # Info about which CONTENT_* environment variables were set and to what.

build/spas.ts

@@ -12,6 +12,8 @@ import {
   VALID_LOCALES,
   MDN_PLUS_TITLE,
   DEFAULT_LOCALE,
+  OBSERVATORY_TITLE_FULL,
+  OBSERVATORY_TITLE,
 } from "../libs/constants/index.js";
 import {
   CONTENT_ROOT,
@@ -38,11 +40,17 @@ const FEATURED_ARTICLES = [
 ];
 
 const LATEST_NEWS: (NewsItem | string)[] = [
+  "blog/mdn-http-observatory-launch/",
   "blog/mdn-curriculum-launch/",
   "blog/baseline-evolution-on-mdn/",
   "blog/introducing-the-mdn-playground/",
 ];
 
+const PAGE_DESCRIPTIONS = Object.freeze({
+  observatory:
+    "Test your site’s HTTP headers, including CSP and HSTS, to find security problems and get actionable recommendations to make your website more secure. Test other websites to see how you compare.",
+});
+
 const contributorSpotlightRoot = CONTRIBUTOR_SPOTLIGHT_ROOT;
 
 async function buildContributorSpotlight(
@@ -145,6 +153,27 @@ export async function buildSPAs(options: {
 
       const SPAs = [
         { prefix: "play", pageTitle: "Playground | MDN" },
+        {
+          prefix: "observatory",
+          pageTitle: `HTTP Header Security Test - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
+        {
+          prefix: "observatory/analyze",
+          pageTitle: `Scan results - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+          noIndexing: true,
+        },
+        {
+          prefix: "observatory/docs/tests_and_scoring",
+          pageTitle: `Tests & Scoring - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
+        {
+          prefix: "observatory/docs/faq",
+          pageTitle: `FAQ - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
         { prefix: "search", pageTitle: "Search", onlyFollow: true },
         { prefix: "plus", pageTitle: MDN_PLUS_TITLE },
         {
@@ -182,10 +211,17 @@ export async function buildSPAs(options: {
         },
       ];
       const locale = VALID_LOCALES.get(pathLocale) || pathLocale;
-      for (const { prefix, pageTitle, noIndexing, onlyFollow } of SPAs) {
+      for (const {
+        prefix,
+        pageTitle,
+        pageDescription,
+        noIndexing,
+        onlyFollow,
+      } of SPAs) {
         const url = `/${locale}/${prefix}`;
         const context: HydrationData = {
           pageTitle,
+          pageDescription,
           locale,
           noIndexing,
           onlyFollow,
@@ -283,6 +319,11 @@ export async function buildSPAs(options: {
     "plus/docs",
     "MDN Plus"
   );
+  await buildStaticPages(
+    fileURLToPath(new URL("../copy/observatory/", import.meta.url)),
+    "observatory/docs",
+    OBSERVATORY_TITLE
+  );
 
   // Build all the home pages in all locales.
   // Fetch merged content PRs for the latest contribution section.