Added image resizing

packages/@zblog/toolchain/package.json

@@ -13,5 +13,10 @@
     "build": "tsc -p tsconfig.json"
   },
   "author": "",
-  "license": "ISC"
-}
+  "license": "ISC",
+  "devDependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@types/fluent-ffmpeg": "^2.1.27",
+    "fluent-ffmpeg": "^2.1.3"
+  }
+}

packages/@zblog/toolchain/src/file-loader.ts

@@ -1,8 +1,11 @@
 import { IPluginBuilder, Plugin } from "./typings.js";
 import { copyFile } from "./toolchain-helpers.js";
+import { path } from "@ffmpeg-installer/ffmpeg";
+import ffmpeg from "fluent-ffmpeg";
 
 type Options = {
   files: { path: string; menuEntry?: boolean; nameOverride?: string }[];
+  imageWidth?: number;
 };
 
 export class FileLoader implements IPluginBuilder {
@@ -11,13 +14,24 @@ export class FileLoader implements IPluginBuilder {
     this.options = options;
   }
   build(): Plugin {
+    ffmpeg.setFfmpegPath(path);
     return async (builderContext) => {
       const { menuManifest } = builderContext;
       const { files } = this.options;
       files.forEach((file) => {
         const fileName =
           file.nameOverride ?? file.path.split("/").pop() ?? file.path;
-        copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
+        const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
+        if (isImage) {
+          console.log("Processing image", file.path);
+          ffmpeg(file.path)
+            .output(`${builderContext.outputDirectory}/${fileName}`)
+            .size(`${this.options.imageWidth ?? 200}x?`)
+            .run();
+        } else {
+          console.log("Copying file", file.path);
+          copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
+        }
         if (file.menuEntry) {
           menuManifest.push({
             name: fileName,

packages/@zblog/toolchain/src/markdown-loader.ts

@@ -6,11 +6,14 @@ import {
 } from "./toolchain-helpers.js";
 import { toHtml } from "./markdown-parser.js";
 import { IPluginBuilder, MenuManifest, Plugin } from "./typings.js";
+import { path } from "@ffmpeg-installer/ffmpeg";
+import ffmpeg from "fluent-ffmpeg";
 
 type MarkdownLoaderManifestOptions = {
   notesRootPath: string;
   noteFileName: string;
   assetsDirectoryName: string;
+  imageWidth?: number;
 };
 
 type MarkdownLoaderManifest = {
@@ -51,13 +54,27 @@ const createMarkdownLoaderManifest = ({
 
 const copyAssetsToOutputDirectory = (
   manifest: MarkdownLoaderManifest,
-  outputDirectory: string
+  outputDirectory: string,
+  options: MarkdownLoaderOptions
 ) => {
-  manifest.forEach((m) =>
-    m.assetFiles.forEach((asset) =>
-      copyFile(asset.path, `${outputDirectory}/${m.name}_${asset.name}`)
-    )
-  );
+  ffmpeg.setFfmpegPath(path);
+  manifest.forEach((m) => {
+    return m.assetFiles.forEach((asset) => {
+      const isImage = asset.path.match(/\.(png|jpe?g|gif|webp)$/);
+      if (isImage) {
+        console.log("Processing image", asset.path);
+        ffmpeg(asset.path)
+          .output(`${outputDirectory}/${m.name}_${asset.name}`)
+          .size(`${options.imageWidth ?? 200}x?`)
+          .run();
+      } else {
+        return copyFile(
+          asset.path,
+          `${outputDirectory}/${m.name}_${asset.name}`
+        );
+      }
+    });
+  });
 };
 
 const writeMarkdownAsHtmlToOutputDirectory = (
@@ -85,6 +102,7 @@ type MarkdownLoaderOptions = {
   noteFileName: string;
   noteHtmlTemplatePath: string;
   markdownHtmlReplacementTag: string;
+  imageWidth?: number;
 };
 export class MarkdownLoader implements IPluginBuilder {
   options: MarkdownLoaderOptions;
@@ -115,7 +133,8 @@ export class MarkdownLoader implements IPluginBuilder {
       );
       copyAssetsToOutputDirectory(
         markdownManifest,
-        builderContext.outputDirectory
+        builderContext.outputDirectory,
+        this.options
       );
     };
   }

packages/@zblog/toolchain/src/markdown-parser.ts

@@ -417,7 +417,7 @@ class ImageLink extends Symbol {
   }
 
   render() {
-    return `<img src="${this.link}" alt="${this.alt}"/>`;
+    return `<img src="${this.link}" alt="${this.alt}" loading="lazy"/>`;
   }
 }