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

Allows these files to be used in live samples.

build/index.ts

@@ -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.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)
   );
 });
 

server/index.ts

@@ -224,7 +224,7 @@ 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)) {
+  if (/\.(gif|jpe?g|mp3|mp4|png|ogg|svg|ttf|webm|webp)$/.test(req.path)) {
     // Remember, Image.findByURLWithFallback() will return the absolute file path
     // iff it exists on disk.
     // Using a "fallback" strategy here so that images embedded in live samples