@knowcode/doc-builder 1.8.7 → 1.9.1

package/.claude/settings.local.json

@@ -44,7 +44,8 @@
       "Bash(./user-management/add-users.sh:*)",
       "Bash(DEBUG=1 ./add-users.sh add wru-bid-analysis.vercel.app lindsay@knowcode.tech)",
       "Bash(brew upgrade:*)",
-      "Bash(psql:*)"
+      "Bash(psql:*)",
+      "Bash(open /Users/lindsaysmith/Documents/lambda1.nosync/doc-builder/html/image-modal-test.html)"
     ],
     "deny": []
   }

package/CHANGELOG.md

@@ -5,6 +5,33 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.0] - 2025-07-27
+
+### Added
+- **Image Modal System** - Click any image to view in full-screen modal
+- Professional image modal with smooth animations and backdrop blur
+- Multiple close methods: X button, overlay click, Escape key
+- Auto-displays alt text as captions when available
+- Responsive design for mobile and desktop
+- Dark theme support with proper styling
+- Hover effects on images with subtle transform and shadow
+- Comprehensive markdown document standards guide
+
+### Features
+- All content images automatically become clickable
+- Modal prevents body scrolling when open
+- Professional styling with rounded corners and shadows
+- Keyboard accessibility with Escape key support
+- Alt text integration for meaningful captions
+- Mobile-optimized with adjusted button and caption sizes
+
+### Technical Details
+- CSS-first approach with minimal JavaScript
+- Auto-initialization for all content images via `initImageModal()`
+- Event delegation for proper cleanup and performance
+- Uses CSS variables for consistent theming
+- Backdrop filter effects for modern browser support
+
 ## [1.8.7] - 2025-07-26
 
 ### Fixed

package/README.md

@@ -36,6 +36,7 @@ npx @knowcode/doc-builder@latest deploy
 
 - **Scans** your markdown files and automatically generates navigation
 - **Converts** markdown to HTML with syntax highlighting and diagram support
+- **Enhances** images with clickable modals for full-screen viewing
 - **Styles** everything with a clean, Notion-inspired theme
 - **Deploys** to Vercel with a single command - leveraging their generous free tier
 - **Provides** optional features like authentication, dark mode, and changelog generation, SEO
@@ -74,6 +75,7 @@ This aligns perfectly with our mission: beautiful documentation should be access
 - 🔍 **SEO Optimized** - Meta tags & structured data
 - 🔐 **Optional Auth** - Supabase authentication (opt-in)
 - 📊 **Mermaid Diagrams** - Built-in diagram support
+- 🖼️ **Image Modals** - Click any image for full-screen view
 - 🌙 **Dark Mode** - Automatic theme switching
 - ☁️ **Vercel Deploy** - One-command deployment
 - ✅ **Google Verification** - Search Console ready

package/assets/css/notion-style.css

@@ -2066,5 +2066,146 @@ body.authenticated .private-nav {
 .private-nav .nav-title::after {
   content: ' 🔒';
   font-size: 0.8em;
+}
+
+/* ============================================================================
+   Image Modal System
+   ============================================================================ */
+
+/* Style all content images to be clickable */
+.content img {
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--easing-out);
+  border-radius: var(--radius-md);
+  max-width: 100%;
+  height: auto;
+}
+
+.content img:hover {
+  opacity: 0.9;
+  transform: scale(1.02);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Modal overlay - hidden by default */
+.image-modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10000;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--duration-normal) var(--easing-out);
+}
+
+/* Show modal when active */
+.image-modal.active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+}
+
+/* Modal content container */
+.image-modal-content {
+  position: relative;
+  max-width: 95%;
+  max-height: 95%;
+  margin: auto;
+  cursor: default;
+}
+
+/* Modal image */
+.image-modal-img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100vh;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  cursor: default;
+}
+
+/* Close button */
+.image-modal-close {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: bold;
+  transition: all var(--duration-fast) var(--easing-out);
+  backdrop-filter: blur(10px);
+}
+
+.image-modal-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: scale(1.1);
+}
+
+/* Image caption in modal */
+.image-modal-caption {
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  text-align: center;
+  backdrop-filter: blur(10px);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .image-modal {
+  background: rgba(0, 0, 0, 0.95);
+}
+
+[data-theme="dark"] .image-modal-close {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+[data-theme="dark"] .image-modal-close:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .image-modal-content {
+    max-width: 98%;
+    max-height: 98%;
+  }
+  
+  .image-modal-close {
+    top: -40px;
+    width: 35px;
+    height: 35px;
+    font-size: 18px;
+  }
+  
+  .image-modal-caption {
+    bottom: -40px;
+    font-size: var(--text-xs);
+    padding: var(--space-2) var(--space-3);
+  }
+}
   opacity: 0.6;
 }

package/assets/js/main.js

@@ -1475,6 +1475,81 @@ function initMarkdownLinkRedirects() {
   });
 }
 
+// Image Modal System
+function initImageModal() {
+  // Create modal HTML structure
+  const modalHTML = `
+    <div class="image-modal" id="imageModal">
+      <div class="image-modal-content">
+        <div class="image-modal-close" id="imageModalClose">&times;</div>
+        <img class="image-modal-img" id="imageModalImg" src="" alt="">
+        <div class="image-modal-caption" id="imageModalCaption"></div>
+      </div>
+    </div>
+  `;
+  
+  // Add modal to document body
+  document.body.insertAdjacentHTML('beforeend', modalHTML);
+  
+  const modal = document.getElementById('imageModal');
+  const modalImg = document.getElementById('imageModalImg');
+  const modalCaption = document.getElementById('imageModalCaption');
+  const closeBtn = document.getElementById('imageModalClose');
+  
+  // Add click handlers to all content images
+  const contentImages = document.querySelectorAll('.content img');
+  contentImages.forEach(img => {
+    img.addEventListener('click', function() {
+      modal.classList.add('active');
+      modalImg.src = this.src;
+      modalImg.alt = this.alt;
+      modalCaption.textContent = this.alt;
+      
+      // Hide caption if no alt text
+      if (!this.alt) {
+        modalCaption.style.display = 'none';
+      } else {
+        modalCaption.style.display = 'block';
+      }
+      
+      // Prevent body scrolling
+      document.body.style.overflow = 'hidden';
+    });
+  });
+  
+  // Close modal functions
+  function closeModal() {
+    modal.classList.remove('active');
+    document.body.style.overflow = '';
+  }
+  
+  // Close on X button click
+  closeBtn.addEventListener('click', closeModal);
+  
+  // Close on overlay click (but not on image click)
+  modal.addEventListener('click', function(e) {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+  
+  // Close on Escape key
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && modal.classList.contains('active')) {
+      closeModal();
+    }
+  });
+  
+  // Prevent modal content from closing modal when clicked
+  modalImg.addEventListener('click', function(e) {
+    e.stopPropagation();
+  });
+  
+  document.querySelector('.image-modal-content').addEventListener('click', function(e) {
+    e.stopPropagation();
+  });
+}
+
 // Initialize on DOM Load
 document.addEventListener('DOMContentLoaded', () => {
   initMarkdownLinkRedirects();
@@ -1485,5 +1560,6 @@ document.addEventListener('DOMContentLoaded', () => {
   initNavigationFilter();
   addPDFExportButton();
   generateBreadcrumbs();
+  initImageModal();
   initTooltips();
 });