DOCUMENTATION: Support showing images in markdown docs (#2207)

src/@types/global.d.ts

@@ -7,6 +7,14 @@ declare module "*.png" {
   const value: string;
   export default value;
 }
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
 
 // Achievements communicated back to Electron shell for Steam.
 declare interface Document {

src/Documentation/pages.ts

@@ -3165,3 +3165,5 @@ AllPages["nsDoc/index.md"] = nsDoc_index_md;
 export const nsApiPages = Object.keys(AllPages)
   .filter((page) => page.startsWith("nsDoc"))
   .map((page) => page.replace("nsDoc/", ""));
+
+export const DocImages: Record<string, string> = {};

src/ui/MD/MD.tsx

@@ -10,6 +10,7 @@ import rehypeMathjax from "rehype-mathjax/svg";
 import rehypeRaw from "rehype-raw";
 import { FilePath } from "../../Paths/FilePath";
 import { getPage } from "../../Documentation/root";
+import { DocImages } from "../../Documentation/pages";
 
 export function MD(props: { pageFilePath: FilePath; top: number }): React.ReactElement {
   const pageContent = getPage(props.pageFilePath);
@@ -47,6 +48,9 @@ export function MD(props: { pageFilePath: FilePath; top: number }): React.ReactE
       remarkPlugins={[remarkGfm, remarkMath]}
       // Use rehypeRaw to support HTML content in NS API docs.
       rehypePlugins={[rehypeMathjax, rehypeRaw]}
+      transformImageUri={(__src, alt) => {
+        return DocImages[alt];
+      }}
     >
       {pageContent}
     </ReactMarkdown>

tools/bundle-doc/index.js

@@ -3,13 +3,18 @@ const path = require("path");
 
 const docFiles = [];
 const nsDocFiles = [];
+const docImagesFiles = [];
 const docRoot = path.resolve(__dirname, "../../src/Documentation/doc");
 const markdownRoot = path.resolve(__dirname, "../../markdown");
+const docImagesRoot = path.resolve(__dirname, "../../src/Documentation/images");
 const addFileToListOfDocPages = (files, root, filePath) => {
   // Windows path uses "\", so we need to replace it with "/".
   files.push(path.relative(root, filePath).replace(/\\/g, "/"));
 };
 const processDir = (dir) => {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
   console.log(dir);
   for (const file of fs.readdirSync(dir)) {
     const filePath = path.join(dir, file);
@@ -19,14 +24,17 @@ const processDir = (dir) => {
     }
     if (filePath.startsWith(docRoot)) {
       addFileToListOfDocPages(docFiles, docRoot, filePath);
-    } else {
+    } else if (filePath.startsWith(markdownRoot)) {
       addFileToListOfDocPages(nsDocFiles, markdownRoot, filePath);
+    } else {
+      addFileToListOfDocPages(docImagesFiles, docImagesRoot, filePath);
     }
   }
 };
 
 processDir(docRoot);
 processDir(markdownRoot);
+processDir(docImagesRoot);
 
 /**
  * When importing NS API markdown files, we use "nsDoc_something" instead of file<number> like other docs. Currently,
@@ -46,9 +54,10 @@ processDir(markdownRoot);
  * in src\Documentation\doc, but we rarely add or remove files in it, so it's not a big deal. Checking ~60 lines is also
  * much easier than checking ~1400 lines.
  */
-const autogeneratedContent = `// THIS FILE IS AUTOGENERATED. DO NOT EDIT IT MANUALLY.
+let autogeneratedContent = `// THIS FILE IS AUTOGENERATED. DO NOT EDIT IT MANUALLY.
 ${docFiles.map((f, i) => `import file${i} from "./doc/${f}?raw";`).join("\n")}
 ${nsDocFiles.map((f, i) => `import nsDoc_${f.replaceAll(".", "_")} from "../../markdown/${f}?raw";`).join("\n")}
+${docImagesFiles.map((f, i) => `import docImages_${f.replaceAll(".", "_")} from "./images/${f}";`).join("\n")}
 
 export const AllPages: Record<string, string> = {};
 ${docFiles.map((f, i) => `AllPages["${f}"] = file${i};`).join("\n")}
@@ -57,7 +66,14 @@ ${nsDocFiles.map((f, i) => `AllPages["nsDoc/${f}"] = nsDoc_${f.replaceAll(".", "
 export const nsApiPages = Object.keys(AllPages)
   .filter((page) => page.startsWith("nsDoc"))
   .map((page) => page.replace("nsDoc/", ""));
+
+export const DocImages: Record<string, string> = {};
 `;
+if (docImagesFiles.length > 0) {
+  autogeneratedContent += `
+${docImagesFiles.map((f, i) => `DocImages["${f}"] = docImages_${f.replaceAll(".", "_")};`).join("\n")}
+`;
+}
 
 fs.writeFile(path.resolve(__dirname, "../../src/Documentation/pages.ts"), autogeneratedContent, (err) => {
   if (err) {

webpack.config.js

@@ -155,7 +155,7 @@ module.exports = (env, argv) => {
             },
           },
         },
-        { test: /\.(ttf|woff2|png|jpe?g|gif|jp2|webp)$/, type: "asset/resource" },
+        { test: /\.(ttf|woff2|png|jpe?g|gif|jp2|webp|svg)$/, type: "asset/resource" },
         {
           test: /\.s?css$/,
           use: ["style-loader", "css-loader"],