refactor: make filepaths' logic cleaner

Author: EscapedGibbon

docusaurus.config.js

@@ -57,7 +57,7 @@ async function createConfig() {
         return {
           name: 'generate-images-plugin',
           async loadContent() {
-            const { imageLoader } = await import('./imageLoader.js');
+            const { imageLoader } = await import('./imageLoader.mjs');
             await imageLoader();
           },
         };

imageDataset.js renamed to imageDataset.mjs

@@ -2,16 +2,17 @@ import fs from 'fs';
 
 import { fetchURL, write } from 'image-js';
 
-import { defaultImages, defaultMasks } from './imageDataset.js';
+import { defaultImages, defaultMasks } from './imageDataset.mjs';
 
 export async function imageLoader() {
-  const staticDir = '/demoImages/';
+  const demoImagesDir = 'demoImages';
+  const staticDir = 'static';
 
   const imageData = { masks: [], images: [] };
   try {
     // Create static directory if it doesn't exist
-    if (!fs.existsSync(`./static${staticDir}`)) {
-      fs.mkdirSync(`./static${staticDir}`, { recursive: true });
+    if (!fs.existsSync(`./${staticDir}/${demoImagesDir}`)) {
+      fs.mkdirSync(`./${staticDir}/${demoImagesDir}`, { recursive: true });
     }
 
     const images = await Promise.all(
@@ -21,50 +22,49 @@ export async function imageLoader() {
     for (let i = 0; i < images.length; i++) {
       const image = images[i];
       const imageDataUrl = defaultImages[i];
-      const imageTitle = imageDataUrl.value.slice(
-        imageDataUrl.value.lastIndexOf('/') + 1,
-      );
-      write(`./static${staticDir}images/${imageTitle}`, image, {
+      const imageTitle = getFilename(imageDataUrl.value);
+      write(`./${staticDir}/${demoImagesDir}/images/${imageTitle}`, image, {
         recursive: true,
       });
-
+      // Keeping object structure for compatibility
       imageData.images.push({
         type: 'url',
         imageType: 'image',
         label: `${imageDataUrl.label} (${image.width}x${image.height})`,
-        value: `${staticDir}images/${imageTitle}`,
+        value: `/${demoImagesDir}/images/${imageTitle}`,
       });
     }
 
-    // Fetch all masks in parallel
     const masks = await Promise.all(
       defaultMasks.map((maskDataUrl) => fetchURL(maskDataUrl.value)),
     );
 
     for (let i = 0; i < masks.length; i++) {
       const mask = masks[i];
       const maskDataUrl = defaultMasks[i];
-      const maskTitle = maskDataUrl.value.slice(
-        maskDataUrl.value.lastIndexOf('/') + 1,
-      );
-      write(`./static${staticDir}masks/${maskTitle}`, mask, {
+      const maskTitle = getFilename(maskDataUrl.value);
+      write(`./${staticDir}/${demoImagesDir}/masks/${maskTitle}`, mask, {
         recursive: true,
       });
+      // Keeping object structure for compatibility
       imageData.masks.push({
         type: 'url',
         imageType: 'mask',
         label: `${maskDataUrl.label} (${mask.width}x${mask.height})`,
-        value: `${staticDir}masks/${maskTitle}`,
+        value: `/${demoImagesDir}/masks/${maskTitle}`,
       });
     }
-
-    const outputPath = `./static${staticDir}imageData.json`;
+    // Write data about newly created files.
+    const outputPath = `./${staticDir}/${demoImagesDir}/imageData.json`;
 
     fs.writeFileSync(outputPath, JSON.stringify(imageData, null, 2));
   } catch (error) {
     throw new Error(`Error in imageLoader: ${error.message}`);
   }
-  // Fetch all images in parallel
 
   return imageData;
 }
+// Returns only filename with extension.
+function getFilename(filepath) {
+  return filepath.replace(/^.*[\\/]/, '');
+}