fix: Replace Figure with Image component in Notion importer

- Change mdx-converter to generate Image instead of Figure
- Update README examples to use Image
- Remove debug code from Dockerfile
- Figure component was removed, Image is the standard now

Dockerfile

@@ -45,13 +45,7 @@ RUN set -e; \
     mkdir -p public/data; \
     cp -a src/content/assets/data/. public/data/
 
-# Build the application
-RUN echo "🔍 Debug: Checking if article.mdx exists..." && \
-    ls -lh src/content/article.mdx && \
-    echo "🔍 Debug: Checking if Figure component exists..." && \
-    ls -lh src/components/Figure.astro && \
-    echo "🔍 Debug: First 20 lines of article.mdx:" && \
-    head -20 src/content/article.mdx
+# Build the application (with minimal placeholder content)
 RUN npm run build
 
 # Generate the PDF (light theme, full wait)

app/scripts/notion-importer/README.md

@@ -73,7 +73,7 @@ notion-importer/
 ### 🎯 **Advanced Media Handling**
 - **Local download**: Automatic download of all Notion media (images, files, PDFs)
 - **Path transformation**: Smart path conversion for web accessibility
-- **Figure components**: Automatic conversion to Astro `Figure` components with zoom/download
+- **Image components**: Automatic conversion to Astro `Image` components with zoom/download
 - **Media organization**: Structured media storage by page ID
 
 ### 🧮 **Interactive Components**
@@ -121,7 +121,7 @@ published: "2024-01-15"
 tableOfContentsAutoCollapse: true
 ---
 
-import Figure from '../components/Figure.astro';
+import Image from '../components/Image.astro';
 import Note from '../components/Note.astro';
 import gettingStartedImage from './media/getting-started/image1.png';
 

app/scripts/notion-importer/mdx-converter.mjs

@@ -122,12 +122,12 @@ function addComponentImports(content) {
 }
 
 /**
- * Transform Notion images to Figure components
+ * Transform Notion images to Image components
  * @param {string} content - MDX content
- * @returns {string} - Content with Figure components
+ * @returns {string} - Content with Image components
  */
 function transformImages(content) {
-    console.log('  🖼️  Transforming images to Figure components...');
+    console.log('  🖼️  Transforming images to Image components...');
 
     let hasImages = false;
 
@@ -163,8 +163,8 @@ function transformImages(content) {
             : cleaned;
     };
 
-    // Create Figure component with import
-    const createFigureComponent = (src, alt = '', caption = '') => {
+    // Create Image component with import
+    const createImageComponent = (src, alt = '', caption = '') => {
         const cleanSrc = cleanSrcPath(src);
 
         // Skip PDF URLs and external URLs - they should remain as links only
@@ -177,7 +177,7 @@ function transformImages(content) {
 
         const varName = generateImageVarName(cleanSrc);
         imageImports.set(cleanSrc, varName);
-        usedComponents.add('Figure');
+        usedComponents.add('Image');
 
         const props = [];
         props.push(`src={${varName}}`);
@@ -187,30 +187,30 @@ function transformImages(content) {
         if (alt) props.push(`alt="${alt}"`);
         if (caption) props.push(`caption={'${caption}'}`);
 
-        return `<Figure\n  ${props.join('\n  ')}\n/>`;
+        return `<Image\n  ${props.join('\n  ')}\n/>`;
     };
 
     // Transform markdown images: ![alt](src)
     content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
         const cleanSrc = cleanSrcPath(src);
-        const cleanAlt = cleanAltText(alt || 'Figure');
+        const cleanAlt = cleanAltText(alt || 'Image');
         hasImages = true;
 
-        return createFigureComponent(cleanSrc, cleanAlt);
+        return createImageComponent(cleanSrc, cleanAlt);
     });
 
     // Transform images with captions (Notion sometimes adds captions as separate text)
     content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)\s*\n\s*([^\n]+)/g, (match, alt, src, caption) => {
         const cleanSrc = cleanSrcPath(src);
-        const cleanAlt = cleanAltText(alt || 'Figure');
+        const cleanAlt = cleanAltText(alt || 'Image');
         const cleanCap = cleanCaption(caption);
         hasImages = true;
 
-        return createFigureComponent(cleanSrc, cleanAlt, cleanCap);
+        return createImageComponent(cleanSrc, cleanAlt, cleanCap);
     });
 
     if (hasImages) {
-        console.log('    ✅ Figure components with imports will be created');
+        console.log('    ✅ Image components with imports will be created');
     }
 
     return content;