chore(build,content,server): allow mp3/mp4/ogg/ttf/webm attachments

Allows these files to be used in live samples.

build/check-images.ts

@@ -6,7 +6,7 @@ import path from "path";
 
 import sizeOf from "image-size";
 
-import { Document, Image } from "../content";
+import { Document, FileAttachment } from "../content";
 import { FLAW_LEVELS } from "../libs/constants";
 import { findMatchesInText } from "./matches-in-text";
 import { DEFAULT_LOCALE } from "../libs/constants";
@@ -133,12 +133,12 @@ export function checkImageReferences(doc, $, options, { url, rawContent }) {
       // but all our images are going to be static.
       finalSrc = absoluteURL.pathname;
       // We can use the `finalSrc` to look up and find the image independent
-      // of the correct case because `Image.findByURL` operates case
+      // of the correct case because `FileAttachment.findByURL` operates case
       // insensitively.
 
-      // What follows uses the same algorithm as Image.findByURLWithFallback
+      // What follows uses the same algorithm as FileAttachment.findByURLWithFallback
       // but only adds a filePath if it exists for the DEFAULT_LOCALE
-      const filePath = Image.findByURL(finalSrc);
+      const filePath = FileAttachment.findByURL(finalSrc);
       let enUSFallback = false;
       if (
         !filePath &&
@@ -149,7 +149,7 @@ export function checkImageReferences(doc, $, options, { url, rawContent }) {
           new RegExp(`^/${doc.locale}/`, "i"),
           `/${DEFAULT_LOCALE}/`
         );
-        if (Image.findByURL(enUSFinalSrc)) {
+        if (FileAttachment.findByURL(enUSFinalSrc)) {
           // Use the en-US src instead
           finalSrc = enUSFinalSrc;
           // Note that this `<img src="...">` value can work if you use the
@@ -350,7 +350,7 @@ export function checkImageWidths(doc, $, options, { rawContent }) {
           );
         }
       } else if (!imgSrc.includes("://") && imgSrc.startsWith("/")) {
-        const filePath = Image.findByURLWithFallback(imgSrc);
+        const filePath = FileAttachment.findByURLWithFallback(imgSrc);
         if (filePath) {
           const dimensions = sizeOf(filePath);
           img.attr("width", `${dimensions.width}`);

build/flaws/broken-links.ts

@@ -4,7 +4,7 @@ import path from "path";
 import fromMarkdown from "mdast-util-from-markdown";
 import visit from "unist-util-visit";
 
-import { Document, Redirect, Image } from "../../content";
+import { Document, Redirect, FileAttachment } from "../../content";
 import { findMatchesInText } from "../matches-in-text";
 import {
   DEFAULT_LOCALE,
@@ -271,7 +271,7 @@ export function getBrokenLinksFlaws(doc, $, { rawContent }, level) {
       const found = Document.findByURL(hrefNormalized);
       if (!found) {
         // Before we give up, check if it's an image.
-        if (!Image.findByURLWithFallback(hrefNormalized)) {
+        if (!FileAttachment.findByURLWithFallback(hrefNormalized)) {
           // Even if it's a redirect, it's still a flaw, but it'll be nice to
           // know what it *should* be.
           const resolved = Redirect.resolve(hrefNormalized);

build/index.ts

@@ -8,7 +8,7 @@ import {
   MacroRedirectedLinkError,
 } from "../kumascript/src/errors";
 
-import { Document, Image, execGit } from "../content";
+import { Document, FileAttachment, execGit } from "../content";
 import { CONTENT_ROOT, REPOSITORY_URLS } from "../libs/env";
 import * as kumascript from "../kumascript";
 
@@ -167,7 +167,7 @@ function postLocalFileLinks($, doc) {
     // So we'll look-up a lot "false positives" that are not images.
     // Thankfully, this lookup is fast.
     const url = `${doc.mdn_url}/${href}`;
-    const image = Image.findByURLWithFallback(url);
+    const image = FileAttachment.findByURLWithFallback(url);
     if (image) {
       $(element).attr("href", url);
     }
@@ -265,14 +265,14 @@ function makeTOC(doc) {
  *
  * @param {Document} document
  */
-function getAdjacentImages(documentDirectory) {
+function getAdjacentFileAttachments(documentDirectory) {
   const dirents = fs.readdirSync(documentDirectory, { withFileTypes: true });
   return dirents
     .filter((dirent) => {
       // This needs to match what we do in filecheck/checker.py
       return (
         !dirent.isDirectory() &&
-        /\.(png|jpeg|jpg|gif|svg|webp)$/i.test(dirent.name)
+        /\.(mp3|mp4|png|jpeg|jpg|gif|ogg|svg|ttf|webm|webp)$/i.test(dirent.name)
       );
     })
     .map((dirent) => path.join(documentDirectory, dirent.name));
@@ -501,8 +501,8 @@ export async function buildDocument(
   // The checkImageReferences() does 2 things. Checks image *references* and
   // it returns which images it checked. But we'll need to complement any
   // other images in the folder.
-  getAdjacentImages(path.dirname(document.fileInfo.path)).forEach((fp) =>
-    fileAttachments.add(fp)
+  getAdjacentFileAttachments(path.dirname(document.fileInfo.path)).forEach(
+    (fp) => fileAttachments.add(fp)
   );
 
   // Check the img tags for possible flaws and possible build-time rewrites

content/image.ts → content/file-attachment.ts

@@ -9,6 +9,18 @@ import { DEFAULT_LOCALE } from "../libs/constants";
 import { ROOTS } from "../libs/env";
 import { memoize, slugToFolder } from "./utils";
 
+function isFileAttachment(filePath: string) {
+  return isAudio(filePath) || isVideo(filePath) || isImage(filePath);
+}
+
+function isAudio(filePath) {
+  return /\.(mp3|ogg)$/i.test(filePath);
+}
+
+function isVideo(filePath) {
+  return /\.(mp4|webm)$/i.test(filePath);
+}
+
 function isImage(filePath) {
   if (fs.statSync(filePath).isDirectory()) {
     return false;
@@ -38,7 +50,7 @@ function urlToFilePath(url) {
 
 const find = memoize((relativePath: string) => {
   return ROOTS.map((root) => path.join(root, relativePath)).find(
-    (filePath) => fs.existsSync(filePath) && isImage(filePath)
+    (filePath) => fs.existsSync(filePath) && isFileAttachment(filePath)
   );
 });
 

content/index.ts

@@ -2,7 +2,7 @@ export * as Document from "./document";
 export * as Translation from "./translation";
 export { getPopularities } from "./popularities";
 export * as Redirect from "./redirect";
-export * as Image from "./image";
+export * as FileAttachment from "./file-attachment";
 export { buildURL, memoize, slugToFolder, execGit, getRoot } from "./utils";
 export { resolveFundamental } from "../libs/fundamental-redirects";
 export { translationsOf } from "./translations";

server/index.ts

@@ -16,7 +16,7 @@ import {
   renderContributorsTxt,
 } from "../build";
 import { findDocumentTranslations } from "../content/translations";
-import { Document, Redirect, Image } from "../content";
+import { Document, Redirect, FileAttachment } from "../content";
 import { CONTENT_ROOT, CONTENT_TRANSLATED_ROOT } from "../libs/env";
 import { CSP_VALUE, DEFAULT_LOCALE } from "../libs/constants";
 import {
@@ -224,12 +224,12 @@ app.get("/*", async (req, res, ...args) => {
 
   // TODO: Would be nice to have a list of all supported file extensions
   // in a constants file.
-  if (/\.(png|webp|gif|jpe?g|svg)$/.test(req.path)) {
-    // Remember, Image.findByURLWithFallback() will return the absolute file path
+  if (/\.(gif|jpe?g|mp3|mp4|png|ogg|svg|ttf|webm|webp)$/.test(req.path)) {
+    // Remember, FileAttachment.findByURLWithFallback() will return the absolute file path
     // iff it exists on disk.
     // Using a "fallback" strategy here so that images embedded in live samples
     // are resolved if they exist in en-US but not in <locale>
-    const filePath = Image.findByURLWithFallback(req.path);
+    const filePath = FileAttachment.findByURLWithFallback(req.path);
     if (filePath) {
       // The second parameter to `send()` has to be either a full absolute
       // path or a path that doesn't start with `../` otherwise you'd