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 <[email protected]>
Co-authored-by: Claas Augner <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Claas Augner <[email protected]>
Co-authored-by: Florian Dieminger <[email protected]>

Author: 5 people

Diff for: .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

Diff for: .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

Diff for: .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.

Diff for: 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.