feat: add image loader plugin to docusaurus

Author: EscapedGibbon

docusaurus.config.js

@@ -53,6 +53,15 @@ async function createConfig() {
     baseUrl: '/',
 
     plugins: [
+      function generateImagesPlugin(context) {
+        return {
+          name: 'generate-images-plugin',
+          async loadContent() {
+            const { imageLoader } = await import('./imageLoader.js');
+            await imageLoader(context.siteDir);
+          },
+        };
+      },
       demoLoaderPlugin,
       [
         '@dipakparmar/docusaurus-plugin-umami',

imageLoader.js

@@ -1,14 +1,14 @@
 const fs = require('fs');
 const imageJs = require('image-js');
 const { fetchURL } = require('image-js');
+require('ts-node/register');
 const {
   defaultImages,
   defaultMasks,
 } = require('./src/demo/contexts/demo/defaultImages');
 
 async function imageLoader(siteDir) {
   const imageData = [];
-  const path = './static/';
   for (let imageDataUrl of defaultImages) {
     const image = await fetchURL(imageDataUrl.value);
     const imageTitle = imageDataUrl.value.slice(
@@ -45,13 +45,11 @@ async function imageLoader(siteDir) {
   }
 
   // Use absolute path
-  const outputPath = siteDir.concat('static/imageData.json');
+  const outputPath = siteDir.concat('/static/imageData.json');
   fs.writeFileSync(outputPath, JSON.stringify(imageData, null, 2));
 
   console.log('Image data saved to:', outputPath);
   return imageData;
 }
 
-imageLoader('/Users/maxim/git/zakodium/image-js-docs/');
-
 module.exports = { imageLoader };

package-lock.json

@@ -49,6 +49,7 @@
     "eslint-config-zakodium": "^16.0.0",
     "prettier": "^3.6.2",
     "raw-loader": "^4.0.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.9.2"
   },
   "browserslist": {