Merge remote-tracking branch 'origin/main' into MP-1369-new-community…

…-page
mdn · Aug 23, 2024 · c667573 · c667573
2 parents dc3317a + a4d8749
commit c667573
Show file tree

Hide file tree

Showing 21 changed files with 482 additions and 376 deletions.
diff --git a/build/check-images.ts b/build/check-images.ts
@@ -10,7 +10,6 @@ import { Document, FileAttachment } from "../content/index.js";
 import { FLAW_LEVELS } from "../libs/constants/index.js";
 import { findMatchesInText, findMatchesInMarkdown } from "./matches.js";
 import * as cheerio from "cheerio";
-import { Element } from "domhandler";
 import { Doc } from "../libs/types/document.js";
 
 const { default: sizeOf } = imagesize;
@@ -34,7 +33,7 @@ export function checkImageReferences(
   const checked = new Map<string, number>();
 
   function addImageFlaw(
-    $img: cheerio.Cheerio<Element>,
+    $img: cheerio.Cheerio<cheerio.Element>,
     src: string,
     {
       explanation,
@@ -236,7 +235,7 @@ export function checkImageWidths(
   const checked = new Map();
 
   function addStyleFlaw(
-    $img: cheerio.Cheerio<Element>,
+    $img: cheerio.Cheerio<cheerio.Element>,
     style: string,
     suggestion: string
   ) {

diff --git a/build/extract-sections.ts b/build/extract-sections.ts
@@ -1,5 +1,4 @@
 import * as cheerio from "cheerio";
-import { Element, ParentNode } from "domhandler";
 import { ProseSection, Section } from "../libs/types/document.js";
 import { extractSpecifications } from "./extract-specifications.js";
 
@@ -10,17 +9,20 @@ export async function extractSections(
 ): Promise<[Section[], string[]]> {
   const flaws: string[] = [];
   const sections: Section[] = [];
-  const section = cheerio.load("<div></div>")("div").eq(0);
+  const section = cheerio
+    .load("<div></div>", {
+      // decodeEntities: false
+    })("div")
+    .eq(0);
 
-  const bodies = $("body");
-  const body = bodies[0] as ParentNode;
-  const iterable = [...(body.childNodes as Element[])];
+  const body = $("body")[0] as cheerio.ParentNode;
+  const iterable = [...(body.childNodes as cheerio.Element[])];
 
   let c = 0;
   for (const child of iterable) {
     if (
-      (child as Element).tagName === "h2" ||
-      (child as Element).tagName === "h3"
+      (child as cheerio.Element).tagName === "h2" ||
+      (child as cheerio.Element).tagName === "h3"
     ) {
       if (c) {
         const [subSections, subFlaws] = await addSections(section.clone());
@@ -162,7 +164,7 @@ export async function extractSections(
  *   }]
  */
 async function addSections(
-  $: cheerio.Cheerio<Element>
+  $: cheerio.Cheerio<cheerio.Element>
 ): Promise<SectionsAndFlaws> {
   const flaws: string[] = [];
 
@@ -205,14 +207,17 @@ async function addSections(
      */
     if (countPotentialSpecialDivs > 1) {
       const subSections: Section[] = [];
-      const section = cheerio.load("<div></div>")("div").eq(0);
+      const section = cheerio
+        .load("<div></div>", {
+          // decodeEntities: false
+        })("div")
+        .eq(0);
 
       // Loop over each and every "root element" in the node and keep piling
       // them up in a buffer, until you encounter a `div.bc-data` or `div.bc-specs` then
       // add that to the stack, clear and repeat.
-      const div = $[0] as ParentNode;
-      console.log({ div });
-      const iterable = [...(div.childNodes as Element[])];
+      const div = $[0] as cheerio.ParentNode;
+      const iterable = [...(div.childNodes as cheerio.Element[])];
       let c = 0;
       let countSpecialDivsFound = 0;
       for (const child of iterable) {
@@ -285,7 +290,7 @@ async function addSections(
 }
 
 async function _addSingleSpecialSection(
-  $: cheerio.Cheerio<Element>
+  $: cheerio.Cheerio<cheerio.Element>
 ): Promise<Section[]> {
   let id: string | null = null;
   let title: string | null = null;
@@ -368,7 +373,9 @@ async function _addSingleSpecialSection(
   throw new Error(`Unrecognized special section type '${specialSectionType}'`);
 }
 
-function _addSectionProse($: cheerio.Cheerio<Element>): SectionsAndFlaws {
+function _addSectionProse(
+  $: cheerio.Cheerio<cheerio.Element>
+): SectionsAndFlaws {
   let id: string | null = null;
   let title: string | null = null;
   let isH3 = false;

diff --git a/build/flaws/broken-links.ts b/build/flaws/broken-links.ts
@@ -9,7 +9,6 @@ import {
 } from "../../libs/constants/index.js";
 import { isValidLocale } from "../../libs/locale-utils/index.js";
 import * as cheerio from "cheerio";
-import { Element } from "domhandler";
 import { Doc } from "../../libs/types/document.js";
 import { Flaw } from "./index.js";
 import { ONLY_AVAILABLE_IN_ENGLISH } from "../../libs/l10n/l10n.js";
@@ -44,7 +43,7 @@ function isHomepageURL(url) {
 }
 
 function mutateLink(
-  $element: cheerio.Cheerio<Element>,
+  $element: cheerio.Cheerio<cheerio.Element>,
   suggestion: string = null,
   enUSFallback: string = null,
   isSelfLink = false
@@ -94,7 +93,7 @@ export function getBrokenLinksFlaws(
 
   // A closure function to help making it easier to append flaws
   function addBrokenLink(
-    $element: cheerio.Cheerio<Element>,
+    $element: cheerio.Cheerio<cheerio.Element>,
     index: number,
     href: string,
     suggestion: string = null,
@@ -138,7 +137,11 @@ export function getBrokenLinksFlaws(
     });
   }
 
-  function checkHash(hash: string, a: cheerio.Cheerio<Element>, href: string) {
+  function checkHash(
+    hash: string,
+    a: cheerio.Cheerio<cheerio.Element>,
+    href: string
+  ) {
     if (hash.startsWith(":~:")) {
       // Ignore fragment directives.
       return;

diff --git a/build/flaws/pre-tags.ts b/build/flaws/pre-tags.ts
@@ -2,7 +2,6 @@ import { Flaw } from "./index.js";
 
 import { getFirstMatchInText } from "../matches.js";
 import * as cheerio from "cheerio";
-import { Element } from "domhandler";
 import { Doc } from "../../libs/types/document.js";
 const escapeHTML = (s: string) =>
   s
@@ -37,7 +36,7 @@ export function getPreTagFlaws(
   //
   // This makes it easier to edit the code in raw form. It also makes it less
   // heavy because any HTML will be replaced with Prism HTML anyway.
-  function addCodeTagFlaw($pre: cheerio.Cheerio<Element>) {
+  function addCodeTagFlaw($pre: cheerio.Cheerio<cheerio.Element>) {
     const id = `bad_pre_tags${flaws.length + 1}`;
     const type = "pre_with_html";
     const explanation = `<pre><code>CODE can be just <pre>CODE`;

diff --git a/build/flaws/unsafe-html.ts b/build/flaws/unsafe-html.ts
@@ -6,7 +6,6 @@ import {
 } from "../../libs/env/index.js";
 import { findMatchesInText } from "../matches.js";
 import * as cheerio from "cheerio";
-import { Element } from "domhandler";
 import { Doc } from "../../libs/types/document.js";
 
 const safeIFrameSrcs = [
@@ -33,7 +32,7 @@ function getAndMarkupUnsafeHTMLFlaws(
 ) {
   const flaws: Flaw[] = [];
 
-  function addFlaw(element: Element, explanation: string) {
+  function addFlaw(element: cheerio.Element, explanation: string) {
     const id = `unsafe_html${flaws.length + 1}`;
     let html = $.html($(element));
     $(element).replaceWith($("<code>").addClass("unsafe-html").text(html));

diff --git a/build/index.ts b/build/index.ts
@@ -529,6 +529,8 @@ export async function buildDocument(
 
   doc.other_translations = document.translations || [];
 
+  doc.pageType = metadata["page-type"] || "unknown";
+
   injectSource(doc, document, metadata);
 
   if (document.metadata["short-title"]) {

diff --git a/build/utils.ts b/build/utils.ts
@@ -5,7 +5,6 @@ import path from "node:path";
 import { cwd } from "node:process";
 
 import * as cheerio from "cheerio";
-import { Element } from "domhandler";
 import got from "got";
 import { fileTypeFromBuffer } from "file-type";
 import imagemin from "imagemin";
@@ -154,9 +153,11 @@ export function splitSections(rawHTML) {
   const blocks = [];
   const toc = [];
 
-  const section = cheerio.load("<div></div>")("div").eq(0);
+  const section = cheerio
+    .load("<div></div>", { decodeEntities: false })("div")
+    .eq(0);
 
-  const iterable = [...($("#_body")[0] as Element).childNodes];
+  const iterable = [...($("#_body")[0] as cheerio.Element).childNodes];
   let c = 0;
   iterable.forEach((child) => {
     if ("tagName" in child && child.tagName === "h2") {

diff --git a/client/pwa/package.json b/client/pwa/package.json
@@ -12,14 +12,14 @@
     "dev": "webpack-cli --watch"
   },
   "dependencies": {
-    "@zip.js/zip.js": "2.7.48",
+    "@zip.js/zip.js": "2.7.51",
     "dexie": "4.0.8"
   },
   "devDependencies": {
     "@types/dexie": "1.3.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.4",
-    "webpack": "^5.93.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "workers-preview": "^1.0.6"
   }

diff --git a/client/pwa/yarn.lock b/client/pwa/yarn.lock
@@ -72,28 +72,12 @@
   dependencies:
     dexie "*"
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*":
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.1.tgz#c48251553e8759db9e656de3efc846954ac32304"
-  integrity sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
-"@types/estree@*", "@types/estree@^1.0.5":
+"@types/estree@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.8":
+"@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -249,10 +233,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zip.js/[email protected].48":
-  version "2.7.48"
-  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.48.tgz#34e7c0ccb3f644d7aaf3c3f47eb1f39e477f694f"
-  integrity sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==
+"@zip.js/[email protected].51":
+  version "2.7.51"
+  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.51.tgz#a434e285048b951a5788d3d2d59aa68f209e7141"
+  integrity sha512-RKHaebzZZgQkUuzb49/qweN69e8Np9AUZ9QygydDIrbG1njypSAKwkeqIVeuf2JVGBDyB7Z9HKvzPgYrSlv9gw==
 
 acorn-import-attributes@^1.9.5:
   version "1.9.5"
@@ -381,10 +365,10 @@ electron-to-chromium@^1.4.601:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.645.tgz#117f964252eb2f0ff00fc7360cb3080e2cf66e3c"
   integrity sha512-EeS1oQDCmnYsRDRy2zTeC336a/4LZ6WKqvSaM1jLocEk5ZuyszkQtCpsqvuvaIXGOUjwtvF6LTcS8WueibXvSw==
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.0:
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz#d037603789dd9555b89aaec7eb78845c49089bc5"
-  integrity sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -902,12 +886,11 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.93.0:
-  version "5.93.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5"
-  integrity sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==
+webpack@^5.94.0:
+  version "5.94.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.94.0.tgz#77a6089c716e7ab90c1c67574a28da518a20970f"
+  integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==
   dependencies:
-    "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.5"
     "@webassemblyjs/ast" "^1.12.1"
     "@webassemblyjs/wasm-edit" "^1.12.1"
@@ -916,7 +899,7 @@ webpack@^5.93.0:
     acorn-import-attributes "^1.9.5"
     browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.17.0"
+    enhanced-resolve "^5.17.1"
     es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"

diff --git a/client/scripts/postprocess-client-build.js b/client/scripts/postprocess-client-build.js
@@ -6,7 +6,7 @@
 import fs from "node:fs";
 import path from "node:path";
 
-import * as cheerio from "cheerio";
+import cheerio from "cheerio";
 import md5File from "md5-file";
 
 export async function hashSomeStaticFilesForClientBuild(buildRoot) {

diff --git a/client/src/ui/organisms/footer/index.tsx b/client/src/ui/organisms/footer/index.tsx
@@ -24,42 +24,39 @@ export function Footer() {
           <ul className="social-icons">
             <li>
               <a
-                className="icon icon-mastodon"
                 href="https://mozilla.social/@mdn"
                 target="_blank"
                 rel="me noopener noreferrer"
               >
+                <span className="icon icon-mastodon"></span>
                 <span className="visually-hidden">MDN on Mastodon</span>
               </a>
             </li>
             <li>
               <a
-                className="icon icon-twitter-x"
                 href="https://twitter.com/mozdevnet"
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <span className="icon icon-twitter-x"></span>
                 <span className="visually-hidden">
                   MDN on X (formerly Twitter)
                 </span>
               </a>
             </li>
             <li>
               <a
-                className="icon icon-github-mark-small"
                 href="https://github.com/mdn/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <span className="icon icon-github-mark-small"></span>
                 <span className="visually-hidden">MDN on GitHub</span>
               </a>
             </li>
             <li>
-              <a
-                className="icon icon-feed"
-                href="/en-US/blog/rss.xml"
-                target="_blank"
-              >
+              <a href="/en-US/blog/rss.xml" target="_blank">
+                <span className="icon icon-feed"></span>
                 <span className="visually-hidden">MDN Blog RSS Feed</span>
               </a>
             </li>