@udx/md2html 1.0.0

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@udx/md2html",
+  "version": "1.0.0",
+  "description": "Magazine-quality Markdown to HTML converter with professional styling",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "md2html": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "markdown",
+    "html",
+    "documentation",
+    "converter",
+    "generator",
+    "stylish",
+    "publishing"
+  ],
+  "author": "UDX <info@udx.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/andypotanin/udx.dev#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andypotanin/udx.dev.git",
+    "directory": "tools/md2html"
+  },
+  "bugs": {
+    "url": "https://github.com/andypotanin/udx.dev/issues"
+  },
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "commander": "^11.0.0",
+    "handlebars": "^4.7.8",
+    "marked": "^9.1.0"
+  },
+  "engines": {
+    "node": ">=14.16"
+  },
+  "files": [
+    "index.js",
+    "static/",
+    "README.md"
+  ]
+}

package/static/chapter-navigation.css

@@ -0,0 +1,213 @@
+/* Chapter Navigation Styles */
+:root {
+  --chapter-nav-width: 180px;
+  --chapter-nav-text-color: #333;
+  --chapter-nav-text-faded: rgba(51, 51, 51, 0.4);
+  --chapter-text-normal-size: 0.9rem;
+  --chapter-text-active-size: calc(var(--chapter-text-normal-size) * 1.5);
+  --chapter-text-inactive-size: calc(var(--chapter-text-normal-size) * 0.8);
+}
+
+/* Container for the floating navigation */
+.chapter-nav-container {
+  position: relative;
+  width: 100%;
+}
+
+/* Floating navigation styles - clean and minimal */
+.chapter-navigation {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20px;
+  width: var(--chapter-nav-width);
+  max-height: 80vh;
+  overflow-y: auto;
+  background-color: transparent;
+  padding: 10px 0;
+  z-index: 100;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+  transition: transform 0.3s ease;
+  border: 0 none transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.chapter-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.chapter-nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.chapter-nav-item {
+  margin-bottom: 10px;
+  transition: all 0.3s ease;
+}
+
+.chapter-nav-link {
+  display: block;
+  padding: 4px 0;
+  font-size: var(--chapter-text-inactive-size);
+  color: var(--chapter-nav-text-faded);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  background-color: transparent;
+  border-radius: 0;
+  line-height: 1.3;
+}
+
+.chapter-nav-link:hover {
+  color: var(--chapter-nav-text-color);
+}
+
+.chapter-nav-item.active .chapter-nav-link {
+  font-size: var(--chapter-text-active-size);
+  color: var(--chapter-nav-text-color);
+  font-weight: 500;
+}
+
+/* Mobile dropdown styles - native-looking and minimal */
+.mobile-chapter-nav {
+  display: none;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  padding: 8px 12px;
+}
+
+.mobile-chapter-dropdown {
+  position: relative;
+}
+
+.chapter-dropdown-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 10px 12px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.chapter-dropdown-btn:hover,
+.chapter-dropdown-btn:focus {
+  border-color: rgba(0, 0, 0, 0.2);
+  outline: none;
+}
+
+.current-chapter {
+  font-weight: 500;
+}
+
+.dropdown-icon {
+  transition: transform 0.3s ease;
+  opacity: 0.6;
+}
+
+.chapter-dropdown-btn.active .dropdown-icon {
+  transform: rotate(180deg);
+  opacity: 0.9;
+}
+
+.chapter-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 4px;
+  z-index: 101;
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: none; /* Initially hidden */
+}
+
+.chapter-dropdown-menu ul {
+  list-style: none;
+  padding: 8px 0;
+  margin: 0;
+}
+
+.chapter-dropdown-menu li {
+  padding: 0;
+}
+
+.chapter-dropdown-menu a {
+  display: block;
+  padding: 10px 12px;
+  color: var(--chapter-nav-text-faded);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.chapter-dropdown-menu a:hover,
+.chapter-dropdown-menu a:focus {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--chapter-nav-text-color);
+  outline: none;
+}
+
+.chapter-dropdown-menu li.active a {
+  font-weight: 500;
+  color: var(--chapter-nav-text-color);
+  font-size: calc(0.95rem * 1.2);
+}
+
+/* Add padding to the content to prevent floating nav from overlapping */
+.chapter-content {
+  padding-left: calc(var(--chapter-nav-width) + 40px);
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .chapter-content {
+    padding-left: calc(var(--chapter-nav-width) + 30px);
+  }
+}
+
+@media (max-width: 768px) {
+  .chapter-navigation {
+    display: none;
+  }
+  
+  .mobile-chapter-nav {
+    display: block;
+  }
+  
+  .chapter-content {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* Hide nav when printing */
+@media print {
+  .chapter-navigation,
+  .mobile-chapter-nav {
+    display: none;
+  }
+  
+  .chapter-content {
+    padding-left: 0;
+  }
+}

package/static/scripts.js

@@ -0,0 +1,410 @@
+// Apply syntax highlighting
+document.addEventListener('DOMContentLoaded', (event) => {
+  // Apply syntax highlighting
+  document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightElement(block);
+  });
+
+  // Add copy buttons to code blocks
+  document.querySelectorAll('pre').forEach((pre) => {
+    if (!pre.querySelector('.copy-button')) {
+      const button = document.createElement('button');
+      button.className = 'copy-button';
+      button.textContent = 'Copy';
+      button.addEventListener('click', () => {
+        const code = pre.querySelector('code').textContent;
+        navigator.clipboard.writeText(code);
+        button.textContent = 'Copied!';
+        setTimeout(() => {
+          button.textContent = 'Copy';
+        }, 2000);
+      });
+      pre.appendChild(button);
+    }
+  });
+
+  // Add heading IDs for anchor links if they don't exist
+  document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
+    if (!heading.id) {
+      const id = heading.textContent
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/[\s_-]+/g, '-')
+        .trim();
+      heading.id = id;
+    }
+  });
+
+  // Make all external links open in new tabs
+  document.querySelectorAll('a').forEach(link => {
+    const href = link.getAttribute('href');
+    if (href && href.startsWith('http') && !href.startsWith('#')) {
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
+    }
+  });
+
+  // Ensure all tables are 100% width with stronger enforcement
+  document.querySelectorAll('table').forEach(table => {
+    // Force full width with inline style AND classes
+    table.style.width = '100%';
+    table.style.tableLayout = 'fixed';
+    table.setAttribute('width', '100%');
+    table.classList.add('w-full');
+    table.classList.add('table-fixed');
+    
+    // Add responsive wrapper if not already wrapped
+    if (table.parentElement.tagName !== 'DIV' || !table.parentElement.classList.contains('table-responsive')) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'table-responsive w-full overflow-x-auto my-8';
+      wrapper.style.width = '100%';
+      wrapper.style.maxWidth = '100%';
+      table.parentNode.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    }
+    
+    // Add proper classes and styles to table headers
+    table.querySelectorAll('th').forEach(th => {
+      th.classList.add('bg-gray-50');
+      th.classList.add('font-semibold');
+      th.classList.add('p-3');
+      th.classList.add('text-left');
+      th.classList.add('border');
+      th.classList.add('border-gray-200');
+      th.style.padding = '0.75rem 1rem';
+    });
+    
+    // Add proper classes and styles to table cells
+    table.querySelectorAll('td').forEach(td => {
+      td.classList.add('p-3');
+      td.classList.add('text-left');
+      td.classList.add('border');
+      td.classList.add('border-gray-200');
+      td.style.padding = '0.75rem 1rem';
+      td.style.borderColor = 'rgba(0, 0, 0, 0.1)';
+    });
+    
+    // Force table to use entire container width
+    const parentWidth = table.parentElement.offsetWidth;
+    if (parentWidth > 0) {
+      table.style.minWidth = parentWidth + 'px';
+    }
+  });
+
+  // Remove any blue highlights
+  document.querySelectorAll('.highlight, [style*="background-color: rgb(173, 214, 255)"]').forEach(el => {
+    el.classList.remove('highlight');
+    el.style.backgroundColor = 'transparent';
+    el.style.boxShadow = 'none';
+  });
+  
+  // Format tabular data with scaling operations
+  document.querySelectorAll('p').forEach(p => {
+    const text = p.textContent.trim();
+    if (text.includes('IT/SRE for every') || text.includes('DevOps Engineer for every')) {
+      // Find the paragraph containing the scaling information
+      const container = document.createElement('div');
+      container.className = 'scaling-table';
+      
+      // Parse the content and create a grid layout
+      const content = p.textContent.trim();
+      const parts = content.split(',').map(part => part.trim());
+      
+      parts.forEach(part => {
+        const itemDiv = document.createElement('div');
+        itemDiv.textContent = part;
+        itemDiv.className = 'scaling-item';
+        container.appendChild(itemDiv);
+      });
+      
+      // Replace the paragraph with the grid container
+      p.parentNode.replaceChild(container, p);
+    }
+  });
+  
+  // Improve table layout and ensure proper alignment
+  document.querySelectorAll('table').forEach(table => {
+    // Add a container for horizontal scrolling if needed
+    const wrapper = document.createElement('div');
+    wrapper.style.width = '100%';
+    wrapper.style.overflowX = 'auto';
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+    
+    // Ensure consistent styling
+    table.querySelectorAll('th, td').forEach(cell => {
+      cell.style.padding = '0.75em 1em';
+      cell.style.verticalAlign = 'top';
+      cell.style.textAlign = 'left';
+      cell.style.fontSize = '18px';
+    });
+  });
+  
+  // Process quote attributions with em dash
+  document.querySelectorAll('blockquote + p').forEach(p => {
+    const text = p.textContent || '';
+    if (text.startsWith('—') || text.startsWith('-') || text.startsWith('–')) {
+      p.style.textAlign = 'right';
+      p.style.fontStyle = 'italic';
+      p.style.marginTop = '-1.5em';
+      p.style.marginBottom = '2em';
+    }
+  });
+
+  // Style numbered items that are not in a list (like "1. Title")
+  document.querySelectorAll('p').forEach(p => {
+    const text = p.textContent.trim();
+    const match = text.match(/^(\d+)\.\s+(.+)$/);
+    if (match && match[1] && match[2]) {
+      const number = match[1];
+      const content = match[2];
+      
+      // Don't apply this to short numbers followed by short content (likely actual content, not a title)
+      if (content.length > 5) {
+        p.innerHTML = `<span style="display: inline-block; min-width: 1.5em; margin-right: 0.5em; text-align: right; font-weight: bold;">${number}.</span>${content}`;
+        p.style.marginTop = '1.5em';
+        p.style.marginBottom = '0.75em';
+        p.style.fontWeight = '600';
+        p.style.fontSize = '22px';
+      }
+    }
+  });
+
+  // Convert imgix images to use w=1600 parameter
+  document.querySelectorAll('img[src*="imgix.net"]').forEach(img => {
+    const src = img.getAttribute('src');
+    if (src) {
+      const separator = src.includes('?') ? '&' : '?';
+      if (!src.includes('w=')) {
+        img.setAttribute('src', `${src}${separator}w=1600`);
+      }
+    }
+  });
+  
+  window.initChapterNavigation = () => {
+    const chapterNavItems = document.querySelectorAll('.chapter-nav-item');
+    const chapterDropdownBtn = document.getElementById('chapter-dropdown-btn');
+    const chapterDropdownMenu = document.getElementById('chapter-dropdown-menu');
+    const currentChapterText = document.querySelector('.current-chapter');
+    
+    if (chapterDropdownMenu) {
+      chapterDropdownMenu.style.display = 'none';
+    }
+    
+    const throttle = (func, limit) => {
+      let inThrottle;
+      return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+          func.apply(context, args);
+          inThrottle = true;
+          setTimeout(() => inThrottle = false, limit);
+        }
+      };
+    };
+    
+    window.updateActiveChapter = () => {
+      try {
+        // Only target H2 headings
+        const headings = Array.from(document.querySelectorAll('h2'));
+        
+        if (!headings.length || !chapterNavItems.length) return;
+        
+        // Calculate which heading is most visible in the viewport
+        const viewportHeight = window.innerHeight;
+        const viewportMiddle = viewportHeight / 2;
+        
+        let bestVisibleHeading = null;
+        let bestVisibleScore = -1;
+        
+        headings.forEach(heading => {
+          if (!heading) return;
+          
+          const rect = heading.getBoundingClientRect();
+          
+          if (rect.bottom < 0 || rect.top > viewportHeight) return;
+          
+          const visibleTop = Math.max(0, rect.top);
+          const visibleBottom = Math.min(viewportHeight, rect.bottom);
+          const visibleHeight = visibleBottom - visibleTop;
+          
+          const distanceFromMiddle = Math.abs(rect.top + rect.height / 2 - viewportMiddle);
+          const normalizedDistance = 1 - (distanceFromMiddle / viewportHeight);
+          
+          const score = visibleHeight * normalizedDistance * 2;
+          
+          if (score > bestVisibleScore) {
+            bestVisibleScore = score;
+            bestVisibleHeading = heading;
+          }
+        });
+        
+        if (bestVisibleHeading) {
+          const headingId = bestVisibleHeading.getAttribute('id');
+          const headingText = bestVisibleHeading.textContent.trim();
+          
+          chapterNavItems.forEach(item => {
+            if (!item) return;
+            
+            const navLink = item.querySelector('.chapter-nav-link');
+            if (!navLink) return;
+            
+            const itemText = navLink.textContent.trim();
+            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            
+            if (isActive) {
+              item.classList.add('active');
+              
+              const navContainer = document.querySelector('.chapter-navigation');
+              if (navContainer) {
+                const itemOffset = item.offsetTop;
+                const navHeight = navContainer.offsetHeight;
+                const itemHeight = item.offsetHeight;
+                
+                navContainer.scrollTop = itemOffset - (navHeight / 2) + (itemHeight / 2);
+              }
+              
+              if (currentChapterText) {
+                currentChapterText.textContent = itemText;
+              }
+            } else {
+              item.classList.remove('active');
+            }
+          });
+          
+          const mobileDropdownItems = document.querySelectorAll('#chapter-dropdown-menu li');
+          mobileDropdownItems.forEach(item => {
+            if (!item) return;
+            
+            const link = item.querySelector('a');
+            if (!link) return;
+            
+            const itemText = link.textContent.trim();
+            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            
+            if (isActive) {
+              item.classList.add('active');
+            } else {
+              item.classList.remove('active');
+            }
+          });
+        } else if (headings.length > 0) {
+          const firstHeading = headings[0];
+          const firstHeadingText = firstHeading.textContent.trim();
+          
+          chapterNavItems.forEach(item => {
+            if (!item) return;
+            
+            const navLink = item.querySelector('.chapter-nav-link');
+            if (!navLink) return;
+            
+            const itemText = navLink.textContent.trim();
+            const isActive = itemText === firstHeadingText;
+            
+            if (isActive) {
+              item.classList.add('active');
+              if (currentChapterText) {
+                currentChapterText.textContent = itemText;
+              }
+            } else {
+              item.classList.remove('active');
+            }
+          });
+          
+          const mobileDropdownItems = document.querySelectorAll('#chapter-dropdown-menu li');
+          mobileDropdownItems.forEach(item => {
+            if (!item) return;
+            
+            const link = item.querySelector('a');
+            if (!link) return;
+            
+            const itemText = link.textContent.trim();
+            const isActive = itemText === firstHeadingText;
+            
+            if (isActive) {
+              item.classList.add('active');
+            } else {
+              item.classList.remove('active');
+            }
+          });
+        }
+      } catch (error) {
+        console.error('Error updating active chapter:', error);
+      }
+    };
+    
+    if (chapterDropdownBtn && chapterDropdownMenu) {
+      chapterDropdownBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        chapterDropdownBtn.classList.toggle('active');
+        
+        const isCurrentlyHidden = chapterDropdownMenu.style.display === 'none' || chapterDropdownMenu.style.display === '';
+        chapterDropdownMenu.style.display = isCurrentlyHidden ? 'block' : 'none';
+        
+        chapterDropdownBtn.setAttribute('aria-expanded', isCurrentlyHidden ? 'true' : 'false');
+        
+        console.log('Dropdown toggled, now visible:', isCurrentlyHidden);
+      });
+      
+      chapterDropdownBtn.addEventListener('touchend', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        chapterDropdownBtn.classList.toggle('active');
+        
+        const isCurrentlyHidden = chapterDropdownMenu.style.display === 'none' || chapterDropdownMenu.style.display === '';
+        chapterDropdownMenu.style.display = isCurrentlyHidden ? 'block' : 'none';
+        
+        chapterDropdownBtn.setAttribute('aria-expanded', isCurrentlyHidden ? 'true' : 'false');
+        
+        console.log('Dropdown touched, now visible:', isCurrentlyHidden);
+      }, { passive: false });
+    }
+    
+    document.addEventListener('click', (e) => {
+      if (chapterDropdownMenu && chapterDropdownBtn && !e.target.closest('.mobile-chapter-dropdown')) {
+        chapterDropdownBtn.classList.remove('active');
+        chapterDropdownMenu.style.display = 'none';
+        chapterDropdownBtn.setAttribute('aria-expanded', 'false');
+      }
+    });
+    
+    document.querySelectorAll('.chapter-nav-link, #chapter-dropdown-menu a').forEach(link => {
+      if (!link) return;
+      
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const targetId = link.getAttribute('href');
+        if (!targetId) return;
+        
+        const targetElement = document.querySelector(targetId);
+        
+        if (targetElement) {
+          window.scrollTo({
+            top: targetElement.offsetTop - 80,
+            behavior: 'smooth'
+          });
+          
+          if (chapterDropdownMenu && chapterDropdownBtn) {
+            chapterDropdownMenu.style.display = 'none';
+            chapterDropdownBtn.classList.remove('active');
+            chapterDropdownBtn.setAttribute('aria-expanded', 'false');
+          }
+        }
+      });
+    });
+    
+    window.addEventListener('scroll', throttle(updateActiveChapter, 100));
+    
+    updateActiveChapter();
+  };
+  
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', window.initChapterNavigation);
+  } else {
+    window.initChapterNavigation();
+  }
+});