jekyll-theme-zer0 0.10.0 → 0.10.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11f1a090a15824b7b1fc5754e858839d93318efad779deb8d63f5b5641a08f02
-  data.tar.gz: 476de246227f2f492eb142f7d4f9f0b1e20b9dc97350069bb6b3fff3ef295f8b
+  metadata.gz: d85d69f52f828fb686300bac5c2312c0c8bfbd1eed9059fab3c071073efb003b
+  data.tar.gz: dd68d098ec262a62b7ab3c50163830467fdaa36fe3cbba9c00941e6893f334bd
 SHA512:
-  metadata.gz: 8a2aba3a52815a120646b1b094a973dd01e4c28555f37de5562a9a262d4ad6dda7944753c9f235862ef60b8ce99ad94c62b98bdabf821b983243812d07b27480
-  data.tar.gz: e54a3074c2d26c178211144219c9e934258edca74f498e073e37edc7e68d4a84d18181295d7467ac6de5647d6bc0d52e41605838171028f96b86dbbdd04caa1f
+  metadata.gz: c352ba15e82dfdeb1945caddbc35fff0dc7c8d26431d1d73f5ba66fb51055fa0ba046bdcde3f4c4e48d5ddcafc8bcdca50ce43b39a656e85ba95af656a274b21
+  data.tar.gz: a52ea996e45089efcb33286a86555e6f340d93273e45552455e2b5331564fe0ce3cbc781246372d1fac567f5a974cb4cf6b5613caa9a798eec7d1a69587459a4

data/CHANGELOG.md

@@ -1,5 +1,112 @@
 # Changelog
 
+## [0.10.3] - 2025-11-29
+
+### Added
+
+- **New: AI-Generated Preview Images** - 17 new preview images for posts and collections
+  - Business, Development, Science, Technology, Tutorial, World category index pages
+  - Individual post previews: startup funding, quantum computing, AI tools, CSS grid, remote work
+  - Quickstart guide previews: GitHub setup, Jekyll setup, machine setup
+  - Documentation and blog index previews
+
+### Changed
+
+- **Improved: Preview Image Path Handling** (`_layouts/journals.html`, `_layouts/category.html`, `_layouts/collection.html`)
+  - Layouts now support both absolute paths (`/assets/...`) and relative paths
+  - Conditional logic detects path type and constructs URL correctly
+  - Eliminates double-slash issues in image URLs
+
+- **Improved: Intro Section Preview Image Logic** (`_includes/content/intro.html`)
+  - Smart path detection for preview images (absolute vs relative)
+  - Handles URLs with `://` schemes, paths starting with `/`, and relative filenames
+  - Cleaner Liquid template logic with proper variable assignment
+
+- **Improved: Docker Development Setup** (`docker-compose.yml`, `docker/Dockerfile`)
+  - Command now runs `bundle install` before Jekyll serve (fixes volume mount overwrites)
+  - Dockerfile copies gemspec and lib/ for proper dependency resolution
+  - More reliable container startup with dependency installation
+
+- **Improved: Preview Image Generator** (`scripts/lib/preview_generator.py`)
+  - Switched from OpenAI SDK to direct HTTP API calls
+  - Eliminates SDK dependency - only requires `requests` package
+  - Better error handling with HTTP status code parsing
+  - Added request timeouts (120s for generation, 60s for download)
+
+### Fixed
+
+- **Fixed: Asset Paths in Config** (`_config.yml`)
+  - Corrected `teaser` and `info_banner` paths to use `/assets/images/` prefix
+  - Images now load correctly across all pages
+
+- **Fixed: Preview Image Double-Slash URLs**
+  - Removed extra `/` between `public_folder` and `site.teaser` in fallback images
+  - All layouts now generate clean, valid image URLs
+
+## [0.10.2] - 2025-11-28
+
+### Added
+
+- **Enhanced: Navbar Auto-Hide on Scroll** (`assets/js/auto-hide-nav.js`)
+  - Navbar hides when scrolling down past 100px threshold
+  - Navbar reappears immediately when scrolling up
+  - Automatic body padding to prevent content jump under fixed navbar
+  - Performance-optimized with `requestAnimationFrame` throttling
+  - Respects `prefers-reduced-motion` accessibility setting
+
+### Changed
+
+- **Improved: Header Positioning** (`_includes/core/header.html`)
+  - Changed from `z-1` to Bootstrap's `fixed-top` class
+  - Provides proper z-index (1030) and fixed positioning
+
+- **Refactored: Navbar CSS** (`_sass/custom.scss`)
+  - Replaced broken `.hide-navbar` and `.fixed-navbar` classes
+  - New `.navbar-hidden` class with `translateY(-100%)` transform
+  - Added `!important` to override Bootstrap's `fixed-top` positioning
+  - Added explicit background color for opaque navbar
+  - Added `prefers-reduced-motion` media query for accessibility
+
+### Fixed
+
+- **Fixed: Navbar Blocking Content on Scroll Up**
+  - Content no longer obscured when scrolling back to top
+  - Body padding dynamically calculated based on navbar height
+
+## [0.10.1] - 2025-11-28
+
+### Added
+
+- **Enhanced: Mermaid v2.1 - GitHub Pages Compatible** (`_includes/components/mermaid.html`)
+  - Client-side conversion of native markdown ` ```mermaid ` code blocks to rendered diagrams
+  - Full GitHub Pages compatibility without custom plugins (all processing client-side)
+  - CSS to hide code blocks during conversion (prevents flash of unstyled content)
+  - Print styles and improved responsive design
+  - Documented dual syntax support (native markdown and HTML div)
+
+### Changed
+
+- **Improved: Mermaid Configuration** (`_config.yml`)
+  - Added clear comments explaining GitHub Pages compatibility
+  - Documented that `jekyll-mermaid` plugin is optional
+  - Updated usage instructions for both syntax options
+
+- **Improved: Mermaid Documentation**
+  - `docs/jekyll/mermaid.md`: Added native markdown syntax as recommended option
+  - `docs/jekyll/mermaid-native-markdown.md`: Fixed documentation about front matter requirements
+  - Added GitHub Pages compatibility badges to documentation
+
+### Fixed
+
+- **Fixed: Native Markdown Mermaid Syntax Not Rendering**
+  - ` ```mermaid ` code blocks now properly convert to diagrams via JavaScript
+  - Works with GitHub Pages remote_theme deployment
+
+- **Fixed: Mermaid Test Script** (`scripts/test-mermaid.sh`)
+  - Corrected file path references from `pages/_docs/jekyll/` to `docs/jekyll/`
+  - Fixed SIGPIPE issues with `curl | grep` pipelines causing false test failures
+  - All 21 tests now pass successfully
+
 ## [0.10.0] - 2025-11-28
 
 ### Added

data/_includes/components/mermaid.html

@@ -1,21 +1,39 @@
 <!--
   ===================================================================
-  MERMAID DIAGRAM INTEGRATION
+  MERMAID DIAGRAM INTEGRATION (v2.1 - GitHub Pages Compatible)
   ===================================================================
   
   File: mermaid.html
   Path: _includes/components/mermaid.html
   Purpose: Load and initialize Mermaid.js for diagram rendering
   
-  Usage:
+  Usage (Two syntaxes supported):
+  
+  1. Native Markdown Code Blocks (Recommended):
+     ```mermaid
+     graph TD
+       A[Start] -> B[End]
+     ```
+     
+  2. HTML Div Syntax:
+     <div class="mermaid">
+       graph TD
+         A[Start] -- > B[End]
+     </div>
+  
+  Requirements:
   - Set 'mermaid: true' in page front matter
-  - Use <div class="mermaid">...</div> syntax in content
   - Supports all Mermaid diagram types (flowcharts, sequence, gantt, etc.)
   
   Configuration:
-  - Latest stable version via CDN
+  - Mermaid v10 via CDN (latest stable)
   - Forest theme for dark mode compatibility
-  - Initialized on document ready
+  - Client-side code block conversion for GitHub Pages compatibility
+  
+  GitHub Pages Compatibility:
+  - No custom plugins required (jekyll-mermaid is optional)
+  - All processing done client-side via JavaScript
+  - Works with remote_theme on GitHub Pages
   
   Documentation:
   - https://mermaid.js.org/
@@ -29,9 +47,51 @@
 <!-- Initialize Mermaid with custom configuration -->
 <script>
   document.addEventListener('DOMContentLoaded', function() {
+    // ============================================================
+    // Step 1: Convert native markdown code blocks to mermaid divs
+    // This enables ```mermaid syntax to work with GitHub Pages
+    // ============================================================
+    
+    // Find all code blocks with language-mermaid class (from ```mermaid)
+    var codeBlocks = document.querySelectorAll('pre > code.language-mermaid, code.language-mermaid');
+    
+    codeBlocks.forEach(function(codeBlock) {
+      // Get the mermaid content (decode HTML entities)
+      var content = codeBlock.textContent || codeBlock.innerText;
+      
+      // Create a new mermaid div
+      var mermaidDiv = document.createElement('div');
+      mermaidDiv.className = 'mermaid';
+      mermaidDiv.textContent = content;
+      
+      // Replace the pre/code block with the mermaid div
+      var preElement = codeBlock.closest('pre');
+      if (preElement && preElement.parentNode) {
+        preElement.parentNode.replaceChild(mermaidDiv, preElement);
+      } else if (codeBlock.parentNode) {
+        codeBlock.parentNode.replaceChild(mermaidDiv, codeBlock);
+      }
+    });
+    
+    // Also handle pre elements that might have data-language="mermaid"
+    var preBlocks = document.querySelectorAll('pre[data-language="mermaid"]');
+    preBlocks.forEach(function(preBlock) {
+      var content = preBlock.textContent || preBlock.innerText;
+      var mermaidDiv = document.createElement('div');
+      mermaidDiv.className = 'mermaid';
+      mermaidDiv.textContent = content;
+      if (preBlock.parentNode) {
+        preBlock.parentNode.replaceChild(mermaidDiv, preBlock);
+      }
+    });
+    
+    // ============================================================
+    // Step 2: Initialize Mermaid with custom configuration
+    // ============================================================
+    
     mermaid.initialize({
-      startOnLoad: true,
-      theme: 'forest',  // Options: default, forest, dark, neutral, base
+      startOnLoad: false,  // We'll manually run after conversion
+      theme: 'forest',     // Options: default, forest, dark, neutral, base
       themeVariables: {
         primaryColor: '#007bff',
         primaryTextColor: '#fff',
@@ -69,9 +129,20 @@
         fontSize: 11,
         numberSectionStyles: 4,
         axisFormat: '%Y-%m-%d'
-      }
+      },
+      securityLevel: 'loose'  // Required for some advanced features
+    });
+    
+    // ============================================================
+    // Step 3: Render all mermaid diagrams
+    // ============================================================
+    
+    // Run mermaid to render all .mermaid divs
+    mermaid.run().then(function() {
+      console.log('Mermaid.js: All diagrams rendered successfully');
+    }).catch(function(error) {
+      console.warn('Mermaid.js: Some diagrams failed to render', error);
     });
-    console.log('Mermaid.js initialized successfully');
   });
 </script>
 
@@ -80,10 +151,12 @@
 
 <!-- Custom CSS for Mermaid diagrams -->
 <style>
+  /* Mermaid container styling */
   .mermaid {
     text-align: center;
     margin: 2rem auto;
     background-color: transparent;
+    overflow-x: auto;
   }
   
   /* Ensure diagrams are responsive */
@@ -92,10 +165,26 @@
     height: auto;
   }
   
+  /* Hide code blocks before conversion (prevent flash of unstyled content) */
+  pre > code.language-mermaid,
+  code.language-mermaid {
+    display: block;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  
   /* Dark mode compatibility */
   @media (prefers-color-scheme: dark) {
     .mermaid {
       filter: brightness(0.9);
     }
   }
+  
+  /* Print styles */
+  @media print {
+    .mermaid svg {
+      max-width: 100% !important;
+      page-break-inside: avoid;
+    }
+  }
 </style>

data/_includes/content/intro.html

@@ -15,8 +15,20 @@
 
 <!-- Intro Section -->
 
+{% comment %}
+  Determine the preview image path. If page.preview starts with '/' or 'http', 
+  use it directly. Otherwise, prepend the public folder path.
+{% endcomment %}
+{% assign preview_image = page.preview | default: site.info_banner %}
+{% assign preview_first_char = preview_image | slice: 0 %}
+{% if preview_image contains '://' or preview_first_char == '/' %}
+  {% assign preview_path = preview_image %}
+{% else %}
+  {% assign preview_path = '/' | append: site.public_folder | append: '/' | append: preview_image %}
+{% endif %}
+
 <div class="bd-intro pt-5 ps-lg-2 position-relative" style="
-  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{site.baseurl}}/{{ site.public_folder }}/{{ page.preview | default: site.info_banner }}') no-repeat center center / cover;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ site.baseurl }}{{ preview_path }}') no-repeat center center / cover;
   color: #fff;">
 
   <br>

data/_includes/core/header.html

@@ -28,7 +28,7 @@
   ===================================================================
 -->
 
-<header id="navbar" class="container-fluid text-center z-1" role="navigation">
+<header id="navbar" class="container-fluid text-center fixed-top" role="navigation">
 
     <!-- ================================ -->
     <!-- TOP NAVIGATION BAR              -->

data/_layouts/category.html

@@ -112,10 +112,15 @@ layout: default
             {% endif %}
             <a href="{{ fpost.url | relative_url }}" class="text-decoration-none">
               {% if fpost.preview %}
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ fpost.preview }}" 
-                     class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
+                {% if fpost.preview contains '/assets' %}
+                  <img src="{{ site.baseurl }}{{ fpost.preview }}" 
+                       class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
+                {% else %}
+                  <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ fpost.preview }}" 
+                       class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
+                {% endif %}
               {% else %}
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}" 
+                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
                      class="card-img-top" alt="Preview" loading="lazy">
               {% endif %}
             </a>
@@ -167,10 +172,15 @@ layout: default
               {% endif %}
               <a href="{{ cpost.url | relative_url }}" class="text-decoration-none">
                 {% if cpost.preview %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ cpost.preview }}" 
-                       class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
+                  {% if cpost.preview contains '/assets' %}
+                    <img src="{{ site.baseurl }}{{ cpost.preview }}" 
+                         class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
+                  {% else %}
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ cpost.preview }}" 
+                         class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
+                  {% endif %}
                 {% else %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}" 
+                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
                        class="card-img-top" alt="Preview" loading="lazy">
                 {% endif %}
               </a>

data/_layouts/collection.html

@@ -84,10 +84,15 @@ layout: default
                 <!-- ====================== -->
                 <!-- Display preview image with fallback to site teaser -->
                 {% if post.preview %}
-                    <img src="{{site.baseurl}}/{{ site.public_folder }}/{{ post.preview}}" 
-                         class="card-img-top" alt="Preview image for {{ post.title }}">
+                    {% if post.preview contains '/assets' %}
+                        <img src="{{ site.baseurl }}{{ post.preview }}" 
+                             class="card-img-top" alt="Preview image for {{ post.title }}">
+                    {% else %}
+                        <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ post.preview }}" 
+                             class="card-img-top" alt="Preview image for {{ post.title }}">
+                    {% endif %}
                 {% else %}
-                    <img src="{{site.baseurl}}/{{ site.public_folder }}/{{ site.teaser }}" 
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
                          class="card-img-top" alt="Default preview image">
                 {% endif %}
                 

data/_layouts/journals.html

@@ -189,10 +189,15 @@ layout: default
               <div class="card h-100 border-0 shadow-sm">
                 <a href="{{ rpost.url | relative_url }}" class="text-decoration-none">
                   {% if rpost.preview %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ rpost.preview }}" 
-                         class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
+                    {% if rpost.preview contains '/assets' %}
+                      <img src="{{ site.baseurl }}{{ rpost.preview }}" 
+                           class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
+                    {% else %}
+                      <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ rpost.preview }}" 
+                           class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
+                    {% endif %}
                   {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}" 
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
                          class="card-img-top" alt="Preview" loading="lazy">
                   {% endif %}
                 </a>

data/_sass/custom.scss

@@ -177,23 +177,31 @@ img {
     height: auto;
 }
 
+// ============================================
+// NAVBAR - Fixed positioning with auto-hide
+// ============================================
+// Uses Bootstrap's fixed-top class for positioning (z-index: 1030)
+// JavaScript adds/removes .navbar-hidden class on scroll
+
 #navbar {
-    // position: fixed;
-    top: 0;
-    width: 100%;
-    transition: transform 0.3s;
+    // Transition for smooth hide/show animation
+    transition: transform 0.3s ease-in-out !important;
+    
+    // Ensure navbar background is opaque
+    background-color: var(--bs-body-bg);
 }
 
-.fixed-navbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    transition: transform 0.3s;
+// Hidden state - slides up out of view
+// Using higher specificity to override Bootstrap's fixed-top
+#navbar.navbar-hidden {
+    transform: translateY(-100%) !important;
 }
 
-.hide-navbar {
-    transform: translateY(-100%);
-    top: 0px;
+// Respect user's motion preferences
+@media (prefers-reduced-motion: reduce) {
+    #navbar {
+        transition: none !important;
+    }
 }
 
 $enable-cssgrid: true;

data/assets/js/auto-hide-nav.js

@@ -1,18 +1,81 @@
-// Hides the navbar when scrolling down half a page and shows it when scrolling up
-window.onload = function() {
-    let lastScrollTop = 0;
-    const navbar = document.getElementById('navbar');
-
-    window.addEventListener('scroll', function() {
-        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        let halfPageHeight = window.innerHeight / 2;
-
-        if (scrollTop > lastScrollTop && scrollTop > halfPageHeight) {
-            navbar.classList.add('hide-navbar');
-            navbar.classList.add('fixed-navbar');
-        } else {
-            navbar.classList.remove('hide-navbar');
+/**
+ * Auto-hide navbar on scroll
+ * 
+ * Behavior:
+ * - Navbar is fixed at top and visible by default
+ * - Hides when scrolling DOWN past a threshold (100px)
+ * - Reappears when scrolling UP
+ * - Respects prefers-reduced-motion accessibility setting
+ * - Adds body padding to prevent content jump
+ */
+(function() {
+    'use strict';
+
+    // Configuration
+    const SCROLL_THRESHOLD = 100; // Pixels before hide/show triggers
+    const SCROLL_DELTA = 5; // Minimum scroll distance to trigger change
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const navbar = document.getElementById('navbar');
+        if (!navbar) return;
+
+        let lastScrollTop = 0;
+        let ticking = false;
+
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+        // Calculate and set body padding to prevent content jump
+        function updateBodyPadding() {
+            const navbarHeight = navbar.offsetHeight;
+            document.body.style.paddingTop = navbarHeight + 'px';
+        }
+
+        // Initial padding setup
+        updateBodyPadding();
+
+        // Update padding on window resize
+        window.addEventListener('resize', updateBodyPadding, { passive: true });
+
+        // Scroll handler
+        function handleScroll() {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollDelta = scrollTop - lastScrollTop;
+
+            // Only trigger if scroll delta exceeds minimum threshold
+            if (Math.abs(scrollDelta) < SCROLL_DELTA) {
+                ticking = false;
+                return;
+            }
+
+            if (scrollDelta > 0 && scrollTop > SCROLL_THRESHOLD) {
+                // Scrolling DOWN past threshold - hide navbar
+                navbar.classList.add('navbar-hidden');
+            } else if (scrollDelta < 0) {
+                // Scrolling UP - show navbar
+                navbar.classList.remove('navbar-hidden');
+            }
+
+            // Always show navbar when at top of page
+            if (scrollTop <= 0) {
+                navbar.classList.remove('navbar-hidden');
+            }
+
+            lastScrollTop = Math.max(0, scrollTop);
+            ticking = false;
+        }
+
+        // Optimized scroll listener using requestAnimationFrame
+        window.addEventListener('scroll', function() {
+            if (!ticking) {
+                window.requestAnimationFrame(handleScroll);
+                ticking = true;
+            }
+        }, { passive: true });
+
+        // Disable animations if user prefers reduced motion
+        if (prefersReducedMotion) {
+            navbar.style.transition = 'none';
         }
-        lastScrollTop = scrollTop;
     });
-}
+})();

data/scripts/lib/preview_generator.py

@@ -234,13 +234,13 @@ class PreviewGenerator:
         return safe_name[:50]  # Limit length
     
     def generate_image_openai(self, prompt: str, output_path: Path) -> GenerationResult:
-        """Generate image using OpenAI DALL-E."""
-        if not HAS_OPENAI:
+        """Generate image using OpenAI DALL-E via HTTP API (no SDK required)."""
+        if not HAS_REQUESTS:
             return GenerationResult(
                 success=False,
                 image_path=None,
                 preview_url=None,
-                error="openai package not installed. Run: pip install openai",
+                error="requests package not installed. Run: pip install requests",
                 prompt_used=prompt,
             )
         
@@ -255,8 +255,6 @@ class PreviewGenerator:
             )
         
         try:
-            client = OpenAI(api_key=api_key)
-            
             self.debug(f"Generating with prompt: {prompt[:200]}...")
             
             # Parse size
@@ -267,27 +265,29 @@ class PreviewGenerator:
             }
             size = size_map.get(self.image_size, "1024x1024")
             
-            response = client.images.generate(
-                model="dall-e-3",
-                prompt=prompt,
-                size=size,
-                quality="standard",
-                n=1,
+            # Use HTTP API directly instead of SDK
+            response = requests.post(
+                "https://api.openai.com/v1/images/generations",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json",
+                },
+                json={
+                    "model": "dall-e-3",
+                    "prompt": prompt,
+                    "size": size,
+                    "quality": "standard",
+                    "n": 1,
+                },
+                timeout=120,  # 2 minute timeout for image generation
             )
+            response.raise_for_status()
             
-            image_url = response.data[0].url
+            data = response.json()
+            image_url = data['data'][0]['url']
             
             # Download image
-            if not HAS_REQUESTS:
-                return GenerationResult(
-                    success=False,
-                    image_path=None,
-                    preview_url=image_url,
-                    error="requests package not installed. Run: pip install requests",
-                    prompt_used=prompt,
-                )
-            
-            img_response = requests.get(image_url)
+            img_response = requests.get(image_url, timeout=60)
             img_response.raise_for_status()
             
             output_path.write_bytes(img_response.content)
@@ -300,6 +300,21 @@ class PreviewGenerator:
                 prompt_used=prompt,
             )
             
+        except requests.exceptions.HTTPError as e:
+            error_msg = str(e)
+            try:
+                error_data = e.response.json()
+                if 'error' in error_data:
+                    error_msg = error_data['error'].get('message', str(e))
+            except:
+                pass
+            return GenerationResult(
+                success=False,
+                image_path=None,
+                preview_url=None,
+                error=error_msg,
+                prompt_used=prompt,
+            )
         except Exception as e:
             return GenerationResult(
                 success=False,

data/scripts/test-mermaid.sh

@@ -13,7 +13,8 @@
 #   --docker     Test Docker container
 ###############################################################################
 
-set -euo pipefail
+# Note: Removed -e flag to avoid SIGPIPE issues with pipelines (curl | grep)
+set -uo pipefail
 
 # Colors for output
 RED='\033[0;31m'
@@ -132,24 +133,63 @@ test_url() {
 test_mermaid_script() {
     local url="$1"
     local description="$2"
+    local response
+    local count
     
-    run_test "$description" "curl -s '$url' | grep -q 'mermaid.min.js'"
+    TOTAL_TESTS=$((TOTAL_TESTS + 1))
+    response=$(curl -s "$url" 2>/dev/null) || true
+    count=$(echo "$response" | grep -c 'mermaid.min.js' || true)
+    if [ "$count" -gt 0 ]; then
+        TESTS_PASSED=$((TESTS_PASSED + 1))
+        log_success "$description"
+        return 0
+    else
+        TESTS_FAILED=$((TESTS_FAILED + 1))
+        log_error "$description"
+        return 1
+    fi
 }
 
 # Test Mermaid initialization
 test_mermaid_init() {
     local url="$1"
     local description="$2"
+    local response
+    local count
     
-    run_test "$description" "curl -s '$url' | grep -q 'mermaid.initialize'"
+    TOTAL_TESTS=$((TOTAL_TESTS + 1))
+    response=$(curl -s "$url" 2>/dev/null) || true
+    count=$(echo "$response" | grep -c 'mermaid.initialize' || true)
+    if [ "$count" -gt 0 ]; then
+        TESTS_PASSED=$((TESTS_PASSED + 1))
+        log_success "$description"
+        return 0
+    else
+        TESTS_FAILED=$((TESTS_FAILED + 1))
+        log_error "$description"
+        return 1
+    fi
 }
 
 # Test diagram rendering
 test_diagram_rendering() {
     local url="$1"
     local description="$2"
+    local response
+    local count
     
-    run_test "$description" "curl -s '$url' | grep -q 'class=\"mermaid\"'"
+    TOTAL_TESTS=$((TOTAL_TESTS + 1))
+    response=$(curl -s "$url" 2>/dev/null) || true
+    count=$(echo "$response" | grep -c 'class="mermaid"' || true)
+    if [ "$count" -gt 0 ]; then
+        TESTS_PASSED=$((TESTS_PASSED + 1))
+        log_success "$description"
+        return 0
+    else
+        TESTS_FAILED=$((TESTS_FAILED + 1))
+        log_error "$description"
+        return 1
+    fi
 }
 
 # Main test execution
@@ -165,9 +205,9 @@ main() {
     log_info "Testing core files..."
     
     test_file_exists "_includes/components/mermaid.html" "Mermaid include file exists"
-    test_file_exists "pages/_docs/jekyll/mermaid.md" "Main documentation exists"
-    test_file_exists "pages/_docs/jekyll/mermaid-test-suite.md" "Test suite exists"
-    test_file_exists "pages/_docs/jekyll/jekyll-diagram-with-mermaid.md" "Tutorial exists"
+    test_file_exists "docs/jekyll/mermaid.md" "Main documentation exists"
+    test_file_exists "docs/jekyll/mermaid-test-suite.md" "Test suite exists"
+    test_file_exists "docs/jekyll/jekyll-diagram-with-mermaid.md" "Tutorial exists"
     
     # Configuration tests
     log_info "Testing configuration..."
@@ -188,10 +228,10 @@ main() {
     # Documentation tests
     log_info "Testing documentation..."
     
-    test_file_content "pages/_docs/jekyll/mermaid.md" "mermaid: true" "Main docs have front matter"
-    test_file_content "pages/_docs/jekyll/mermaid-test-suite.md" "mermaid: true" "Test suite has front matter"
-    test_file_content "pages/_docs/jekyll/mermaid.md" "graph TD" "Main docs have examples"
-    test_file_content "pages/_docs/jekyll/mermaid-test-suite.md" "graph TD" "Test suite has examples"
+    test_file_content "docs/jekyll/mermaid.md" "mermaid: true" "Main docs have front matter"
+    test_file_content "docs/jekyll/mermaid-test-suite.md" "mermaid: true" "Test suite has front matter"
+    test_file_content "docs/jekyll/mermaid.md" "graph TD" "Main docs have examples"
+    test_file_content "docs/jekyll/mermaid-test-suite.md" "graph TD" "Test suite has examples"
     
     # Server tests (if not quick mode)
     if [ "$QUICK" = false ]; then

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-zer0
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.10.3
 platform: ruby
 authors:
 - Amr Abdel
@@ -161,7 +161,24 @@ files:
 - assets/images/gravatar-small.png
 - assets/images/gravatar.png
 - assets/images/info-banner-mountain-wizard.png
+- assets/images/previews/10-ai-tools-that-will-transform-your-productivity-.png
+- assets/images/previews/business.png
+- assets/images/previews/css-grid-mastery-build-any-layout-you-can-imagine.png
+- assets/images/previews/development.png
 - assets/images/previews/git-workflow-best-practices-for-modern-teams.png
+- assets/images/previews/github-setup-deployment.png
+- assets/images/previews/jekyll-setup.png
+- assets/images/previews/machine-setup.png
+- assets/images/previews/published-documentation-library.png
+- assets/images/previews/quantum-computing-explained-from-qubits-to-quantum.png
+- assets/images/previews/science.png
+- assets/images/previews/technology.png
+- assets/images/previews/the-complete-guide-to-startup-funding-in-2025.png
+- assets/images/previews/the-remote-work-revolution-how-global-teams-are-re.png
+- assets/images/previews/tutorial.png
+- assets/images/previews/world-news.png
+- assets/images/previews/zer0-mistakes-news-network-building-dynamic-news-s.png
+- assets/images/previews/zer0-mistakes-quick-start-guide.png
 - assets/images/wizard-on-journey.png
 - assets/images/zer0-checkpoint-1.png
 - assets/images/zer0-checkpoint-2.png