fix: actually retrieve and set images from localhost

src/bindings.d.ts

@@ -25,6 +25,8 @@ export interface Content {
   branch?: string;
   rest?: string;
   pathprefix?: string;
+  localMode?: boolean;
+  origin?: string;
 }
 
 declare module 'mdast' {

src/index.ts

@@ -69,6 +69,10 @@ export async function run(req: Request, ctx: Helix.UniversalContext): Promise<Re
     localMode = true;
   }
 
+  // Store localMode and origin in context for use in other steps
+  ctx.attributes.content.localMode = localMode;
+  ctx.attributes.content.origin = origin;
+
   // retrieve the devsitepaths.json file based on if authorization is present
   // always retrieve from stage devsitepaths.json when in local mode
   if(req.headers.get('authorization') || localMode) {
@@ -222,7 +226,13 @@ export async function run(req: Request, ctx: Helix.UniversalContext): Promise<Re
 
     if (pathName.endsWith('md')) {
       const resolvedPath = resolvePath(pathName, path);
-      const rawUrl = `https://raw.githubusercontent.com/${ctx.attributes.content.owner}/${ctx.attributes.content.repo}/${ctx.attributes.content.branch}${resolvedPath}`;
+      let rawUrl;
+      if(localMode) {
+        let flatPath = resolvedPath.replace('/src/pages', '');
+        rawUrl = `${origin}${flatPath}`;
+      } else {
+        rawUrl = `https://raw.githubusercontent.com/${ctx.attributes.content.owner}/${ctx.attributes.content.repo}/${ctx.attributes.content.branch}${resolvedPath}`;
+      }
 
       try {
         const fragment = await fetchData(rawUrl);

src/steps/mdx-to-gridtables.ts

@@ -60,6 +60,7 @@ function listToMatrix<T>(list: T[], width: number): T[][] {
 
 export default function mdxToBlocks(ctx: Helix.UniversalContext) {
   const { content: { mdast } } = ctx.attributes;
+  const { log } = ctx;
   const ATTRIBUTE_PREFIX = 'data-';
 
   // for loop since we mutate in the loop
@@ -117,18 +118,39 @@ export default function mdxToBlocks(ctx: Helix.UniversalContext) {
     const totalSlots = repeat * slots.length;
     let slotsToInsert = mdast.children.slice(i + 1, i + 1 + totalSlots);
 
-    if (node.name === 'Embed') { // This is for embedding local videos
-      slotsToInsert = slotsToInsert.map((val) => {
-        const valWithChildren = val as { children: Array<any> };
-        if (valWithChildren.children) {
-          valWithChildren.children = valWithChildren.children.map((data) => {
-            const updatedValue = resolve(ctx, data.value, 'img');
-            return { ...data, value: updatedValue };
-          });
-        }
-        return val;
-      });
-    }
+    // Helper function to recursively resolve image URLs in nodes
+    const resolveImagesInNode = (nodeItem: any): any => {
+      if (!nodeItem) return nodeItem;
+
+      // Handle image nodes (type: 'image' with url property)
+      if (nodeItem.type === 'image' && nodeItem.url) {
+        return {
+          ...nodeItem,
+          url: resolve(ctx, nodeItem.url, 'img'),
+        };
+      }
+
+      // Handle nodes with children
+      if (nodeItem.children && Array.isArray(nodeItem.children)) {
+        return {
+          ...nodeItem,
+          children: nodeItem.children.map(resolveImagesInNode),
+        };
+      }
+
+      // For Embed component - handle legacy structure with value property
+      if (node.name === 'Embed' && nodeItem.value) {
+        return {
+          ...nodeItem,
+          value: resolve(ctx, nodeItem.value, 'img'),
+        };
+      }
+
+      return nodeItem;
+    };
+
+    // Resolve image URLs in all slots for all components
+    slotsToInsert = slotsToInsert.map(resolveImagesInNode);
 
 
     const rowsToInsert = listToMatrix(slotsToInsert, slots.length);

src/steps/rewrite-links.ts

@@ -24,7 +24,9 @@ export function resolve(ctx: Helix.UniversalContext, pathOrUrl: string, type: 'i
     owner,
     repo,
     branch,
-    pathprefix
+    pathprefix,
+    localMode,
+    origin
   } = ctx.attributes.content;
 
   // do not rewrite the links if it's an external link or an anchor link.
@@ -57,7 +59,13 @@ export function resolve(ctx: Helix.UniversalContext, pathOrUrl: string, type: 'i
     // use this image URL
     const imageURL = `${projectRoot}${relativePath}`;
 
-    const fetchImage = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}${imageURL}`;
+    let fetchImage;
+    if(localMode) {
+      let flatPath = imageURL.replace('/src/pages', '');
+      fetchImage = `${origin}${flatPath}`;
+    } else {
+      fetchImage = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}${imageURL}`;
+    }
     resolved = fetchImage;
     log.debug(`    resolved start: ${resolved}`);
     resolved = `${resolved}`;