@udx/md2html 1.3.1 → 1.4.2

package/index.js

@@ -289,11 +289,13 @@ async function buildHtml(srcDir, outputFile) {
     }
     
     // Process all mathematical formulas in the content (before image processing)
-    // This pattern matches: $formula$ for inline math
-    const inlineMathPattern = /\$(.*?)\$/g;
+    // This pattern matches: $formula$ for inline math, but NOT across newlines or table cells
+    // The [^\n$|] ensures we don't match across lines, other dollar signs, or table cell separators
+    const inlineMathPattern = /\$([^\n$|]+?)\$/g;
     combinedMarkdown = combinedMarkdown.replace(inlineMathPattern, (match, formula) => {
-      // Skip if it's likely a currency symbol
-      if (/^\s*\d+(\.\d+)?\s*$/.test(formula)) {
+      // Skip if it's likely a currency value (numbers with optional commas, decimals, K/M suffixes)
+      // Also skip if it starts with a number (likely currency like $22,945)
+      if (/^\s*[\d,]+(\.\d+)?[KMB]?\s*$/.test(formula) || /^\d/.test(formula.trim())) {
         return match;
       }
       return `\\(${formula}\\)`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udx/md2html",
-  "version": "1.3.1",
+  "version": "1.4.2",
   "description": "Magazine-quality Markdown to HTML converter with professional styling",
   "main": "index.js",
   "type": "module",

package/static/chapter-navigation.css

@@ -1,10 +1,11 @@
 /* Chapter Navigation Styles */
 :root {
-  --chapter-nav-width: 220px;
+  --chapter-nav-width: 264px;
   --chapter-nav-text-color: #1a1a1a;
   --chapter-nav-text-faded: rgba(51, 51, 51, 0.65);
   --chapter-nav-active-color: #991b1b;
   --chapter-text-size: 0.85rem;
+  --content-gap: 80px;
 }
 
 /* Container for the floating navigation */
@@ -16,16 +17,16 @@
 /* Floating navigation styles - clean and minimal */
 .chapter-navigation {
   position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20px;
+  top: 0;
+  left: 0;
   width: var(--chapter-nav-width);
-  max-height: 80vh;
+  height: 100vh;
   overflow-y: auto;
-  background-color: transparent;
-  padding: 10px 0;
+  background-color: #fff;
+  padding: 40px 20px 60px 20px;
   z-index: 100;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
+  scrollbar-width: thin; /* Show thin scrollbar for Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
   transition: transform 0.3s ease;
   border: 0 none transparent !important;
   box-shadow: none !important;
@@ -34,9 +35,18 @@
   -moz-box-shadow: none !important;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
+/* Show thin scrollbar for Chrome, Safari and Opera */
 .chapter-navigation::-webkit-scrollbar {
-  display: none;
+  width: 4px;
+}
+
+.chapter-navigation::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chapter-navigation::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
 }
 
 .chapter-nav-list {
@@ -181,14 +191,24 @@
 }
 
 /* Add padding to the content to prevent floating nav from overlapping */
+/* Content fills the space to the right of the sidebar, article centers within it */
 .chapter-content {
-  padding-left: calc(var(--chapter-nav-width) + 40px);
+  /* Position content to start right after the sidebar */
+  margin-left: var(--chapter-nav-width);
+  margin-right: 0;
+  /* Override Tailwind container max-width so content fills available space */
+  max-width: none !important;
+  width: auto !important;
+  /* Remove horizontal padding - let the article's mx-auto handle centering */
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Responsive adjustments */
 @media (max-width: 1024px) {
   .chapter-content {
-    padding-left: calc(var(--chapter-nav-width) + 30px);
+    margin-left: var(--chapter-nav-width);
+    margin-right: 0;
   }
 }
 
@@ -202,12 +222,14 @@
   }
   
   .chapter-content {
-    padding-left: 20px;
-    padding-right: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
-/* Hide nav when printing */
+/* Hide nav when printing - let browser print dialog control all margins */
 @media print {
   .chapter-navigation,
   .mobile-chapter-nav {
@@ -215,6 +237,12 @@
   }
   
   .chapter-content {
-    padding-left: 0;
+    /* Remove all margins and padding so browser print dialog controls page margins */
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    max-width: 100% !important;
+    width: 100% !important;
   }
 }

package/static/scripts.js

@@ -44,90 +44,16 @@ document.addEventListener('DOMContentLoaded', (event) => {
     }
   });
 
-  // Smart table sizing - auto-fit columns based on content
+  // Table enhancement - add responsive wrapper and basic styling
+  // Note: We do NOT set inline styles for table-layout or width to avoid conflicts with CSS
   document.querySelectorAll('table').forEach(table => {
-    // Use auto layout for smart column sizing
-    table.style.tableLayout = 'auto';
-    table.style.width = 'auto';
-    table.style.maxWidth = '100%';
-    table.classList.add('auto-size');
-    
     // 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 overflow-x-auto my-8';
-      wrapper.style.maxWidth = '100%';
+      wrapper.className = 'table-responsive';
       table.parentNode.insertBefore(wrapper, table);
       wrapper.appendChild(table);
     }
-    
-    // Analyze columns and apply smart sizing
-    const rows = table.querySelectorAll('tr');
-    if (rows.length > 0) {
-      const headerCells = table.querySelectorAll('th');
-      const numCols = headerCells.length || (rows[0] ? rows[0].querySelectorAll('td').length : 0);
-      
-      // Analyze each column's content
-      for (let colIdx = 0; colIdx < numCols; colIdx++) {
-        let isNumeric = true;
-        let isCurrency = true;
-        let isCompact = true;
-        let maxLength = 0;
-        
-        rows.forEach(row => {
-          const cells = row.querySelectorAll('th, td');
-          if (cells[colIdx]) {
-            const text = cells[colIdx].textContent.trim();
-            maxLength = Math.max(maxLength, text.length);
-            
-            // Check if numeric (including decimals and commas)
-            if (!/^[\d,.\-\s]+$/.test(text) && text !== '') {
-              isNumeric = false;
-            }
-            
-            // Check if currency (starts with $ or ends with .00)
-            if (!/^\$?[\d,]+\.?\d*$/.test(text) && text !== '') {
-              isCurrency = false;
-            }
-            
-            // Compact if short content (less than 15 chars)
-            if (text.length > 15) {
-              isCompact = false;
-            }
-          }
-        });
-        
-        // Apply column classes based on analysis
-        rows.forEach(row => {
-          const cells = row.querySelectorAll('th, td');
-          if (cells[colIdx]) {
-            if (isCurrency && maxLength <= 15) {
-              cells[colIdx].classList.add('col-currency');
-            } else if (isNumeric && maxLength <= 10) {
-              cells[colIdx].classList.add('col-numeric');
-            } else if (isCompact && maxLength <= 10) {
-              cells[colIdx].classList.add('col-compact');
-            } else {
-              cells[colIdx].classList.add('col-text');
-            }
-          }
-        });
-      }
-    }
-    
-    // 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.style.padding = '0.5rem 0.75rem';
-      th.style.borderBottom = '2px solid #e5e7eb';
-    });
-    
-    // Add proper classes and styles to table cells
-    table.querySelectorAll('td').forEach(td => {
-      td.style.padding = '0.5rem 0.75rem';
-      td.style.borderBottom = '1px solid #e5e7eb';
-    });
   });
 
   // Remove any blue highlights
@@ -137,30 +63,6 @@ document.addEventListener('DOMContentLoaded', (event) => {
     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);
-    }
-  });
-  
   // Process quote attributions with em dash
   document.querySelectorAll('blockquote + p').forEach(p => {
     const text = p.textContent || '';
@@ -227,10 +129,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
     
     window.updateActiveChapter = () => {
       try {
-        // Only target H2 headings
-        const headings = Array.from(document.querySelectorAll('h2'));
+        // Target H2 and H3 headings for navigation
+        const allHeadings = Array.from(document.querySelectorAll('h2, h3'));
+        const h2Headings = Array.from(document.querySelectorAll('h2'));
         
-        if (!headings.length || !chapterNavItems.length) return;
+        if (!allHeadings.length || !chapterNavItems.length) return;
         
         // Calculate which heading is most visible in the viewport
         const viewportHeight = window.innerHeight;
@@ -239,7 +142,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
         let bestVisibleHeading = null;
         let bestVisibleScore = -1;
         
-        headings.forEach(heading => {
+        allHeadings.forEach(heading => {
           if (!heading) return;
           
           const rect = heading.getBoundingClientRect();
@@ -261,10 +164,29 @@ document.addEventListener('DOMContentLoaded', (event) => {
           }
         });
         
+        // Find the parent H2 for the current heading (if it's an H3)
+        const findParentH2 = (heading) => {
+          if (!heading || heading.tagName === 'H2') return heading;
+          
+          // Walk backwards through all headings to find the parent H2
+          const headingIndex = allHeadings.indexOf(heading);
+          for (let i = headingIndex - 1; i >= 0; i--) {
+            if (allHeadings[i].tagName === 'H2') {
+              return allHeadings[i];
+            }
+          }
+          return null;
+        };
+        
         if (bestVisibleHeading) {
           const headingId = bestVisibleHeading.getAttribute('id');
           const headingText = bestVisibleHeading.textContent.trim();
           
+          // Get parent H2 if current heading is H3
+          const parentH2 = findParentH2(bestVisibleHeading);
+          const parentH2Text = parentH2 ? parentH2.textContent.trim() : null;
+          const parentH2Id = parentH2 ? parentH2.getAttribute('id') : null;
+          
           chapterNavItems.forEach(item => {
             if (!item) return;
             
@@ -272,22 +194,30 @@ document.addEventListener('DOMContentLoaded', (event) => {
             if (!navLink) return;
             
             const itemText = navLink.textContent.trim();
-            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            const itemId = item.getAttribute('data-chapter-id');
+            
+            // Check if this nav item matches the current heading OR its parent H2
+            const isCurrentHeading = itemText === headingText || itemId === headingId;
+            const isParentSection = parentH2 && (itemText === parentH2Text || itemId === parentH2Id);
+            const isActive = isCurrentHeading || isParentSection;
             
             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;
+              // Only scroll to and update text for the most specific (current) heading
+              if (isCurrentHeading) {
+                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);
+                }
                 
-                navContainer.scrollTop = itemOffset - (navHeight / 2) + (itemHeight / 2);
-              }
-              
-              if (currentChapterText) {
-                currentChapterText.textContent = itemText;
+                if (currentChapterText) {
+                  currentChapterText.textContent = itemText;
+                }
               }
             } else {
               item.classList.remove('active');
@@ -302,7 +232,10 @@ document.addEventListener('DOMContentLoaded', (event) => {
             if (!link) return;
             
             const itemText = link.textContent.trim();
-            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            const itemId = item.getAttribute('data-chapter-id');
+            const isCurrentHeading = itemText === headingText || itemId === headingId;
+            const isParentSection = parentH2 && (itemText === parentH2Text || itemId === parentH2Id);
+            const isActive = isCurrentHeading || isParentSection;
             
             if (isActive) {
               item.classList.add('active');
@@ -310,8 +243,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
               item.classList.remove('active');
             }
           });
-        } else if (headings.length > 0) {
-          const firstHeading = headings[0];
+        } else if (h2Headings.length > 0) {
+          const firstHeading = h2Headings[0];
           const firstHeadingText = firstHeading.textContent.trim();
           
           chapterNavItems.forEach(item => {

package/static/styles.css

@@ -1,4 +1,10 @@
 @media print {
+  /* Remove all margins so browser print dialog controls page margins */
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  
   pre, pre code {
     white-space: pre-wrap !important;
     overflow-x: hidden !important;
@@ -27,11 +33,15 @@
   .content-container {
     max-width: 100% !important;
     width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
   
-  article {
+  article, main, section {
     width: 100% !important;
     max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
 }
 
@@ -47,10 +57,10 @@ body {
 
 .content-container {
   width: 100%;
-  max-width: 768px;
+  max-width: 800px;
   margin: 0 auto;
   padding: 2rem;
-  font-size: 18px !important;
+  font-size: 20px !important;
   /* Magazine-style container */
 }
 
@@ -63,7 +73,7 @@ html:not(:has(details[open])) {
 .prose p {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
-  font-size: 18px !important;
+  font-size: 20px !important;
   line-height: 1.6 !important;
 }
 
@@ -88,7 +98,7 @@ html:not(:has(details[open])) {
 }
 
 .prose li {
-  font-size: 18px !important;
+  font-size: 20px !important;
   margin-bottom: 0.5em !important;
   line-height: 1.6 !important;
   position: relative !important;
@@ -182,42 +192,41 @@ blockquote + p {
   margin-top: 2em;
 }
 
-/* Enhanced table styling with true full width enforcement */
+/* Enhanced table styling - use auto layout for natural column sizing */
 .prose table,
 table.w-full,
 article table,
 div table,
 .table-responsive table {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  margin: 2em 0 !important;
-  border-collapse: collapse !important;
-  table-layout: fixed !important;
-  display: table !important;
+  width: 100%;
+  margin: 2em 0;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: table;
 }
 
 /* Table wrapper to handle overflow properly */
 .table-responsive,
 div.overflow-x-auto {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  overflow-x: auto !important;
-  margin: 2em 0 !important;
-  display: block !important;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 2em 0;
+  display: block;
 }
 
 .prose table th, .prose table td {
-  padding: 0.75em 1em !important;
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-  text-align: left !important;
-  vertical-align: top !important;
+  padding: 0.75em 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .prose table th {
-  font-weight: 600 !important;
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* Grid-based tables for special formatting needs */
@@ -709,48 +718,30 @@ main > svg,
 }
 
 /* ============================================
-   SMART TABLE SIZING
+   TABLE STYLING
    ============================================ */
 
-/* Auto-sized tables - columns fit content */
-table.auto-size {
+/* Tables use auto layout to fit content naturally */
+table {
   table-layout: auto;
-  width: auto;
-  max-width: 100%;
-}
-
-/* Compact columns for short content (numbers, codes) */
-table .col-compact {
-  width: 1%;
-  white-space: nowrap;
-}
-
-/* Numeric columns - right aligned, compact */
-table .col-numeric {
-  width: 1%;
-  white-space: nowrap;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Currency columns */
-table .col-currency {
-  width: 1%;
-  white-space: nowrap;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
+  width: 100%;
+  border-collapse: collapse;
 }
 
-/* Description/text columns - expand to fill */
-table .col-text {
-  width: auto;
+/* Ensure table cells don't overlap */
+table th,
+table td {
+  padding: 0.75em 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
-/* Shrink-to-fit table wrapper */
-.table-auto-wrapper {
-  display: inline-block;
-  max-width: 100%;
-  overflow-x: auto;
+table th {
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* Print table sizing */

package/static/themes/legal.css

@@ -3,8 +3,8 @@
 
 body {
   font-family: "Times New Roman", Times, Georgia, serif;
-  font-size: 12pt;
-  line-height: 1.5;
+  font-size: 11pt;
+  line-height: 1.4;
 }
 
 .content-container {
@@ -12,55 +12,62 @@ body {
   padding: 1in;
 }
 
+@media print {
+  .content-container {
+    padding: 1.25in !important;
+    max-width: 6in !important;
+  }
+}
+
 /* Formal heading styles */
 .prose h1, h1 {
-  font-size: 18pt !important;
+  font-size: 16pt !important;
   font-weight: bold !important;
   text-align: center !important;
-  margin-bottom: 24pt !important;
+  margin-bottom: 20pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 .prose h2, h2 {
-  font-size: 14pt !important;
+  font-size: 13pt !important;
   font-weight: bold !important;
-  margin-top: 18pt !important;
-  margin-bottom: 12pt !important;
+  margin-top: 16pt !important;
+  margin-bottom: 10pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 .prose h3, h3 {
-  font-size: 12pt !important;
+  font-size: 11pt !important;
   font-weight: bold !important;
-  margin-top: 12pt !important;
+  margin-top: 10pt !important;
   margin-bottom: 6pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 .prose h4, h4, .prose h5, h5, .prose h6, h6 {
-  font-size: 12pt !important;
+  font-size: 11pt !important;
   font-weight: bold !important;
   font-style: italic !important;
-  margin-top: 12pt !important;
-  margin-bottom: 6pt !important;
+  margin-top: 10pt !important;
+  margin-bottom: 5pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 .prose p, p {
-  font-size: 12pt !important;
+  font-size: 11pt !important;
   text-align: justify !important;
-  margin-bottom: 12pt !important;
+  margin-bottom: 10pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 .prose li {
-  font-size: 12pt !important;
+  font-size: 11pt !important;
   font-family: "Times New Roman", Times, Georgia, serif !important;
 }
 
 /* Table styling for government documents */
 .prose table {
-  font-size: 10pt !important;
+  font-size: 9pt !important;
   border-collapse: collapse !important;
 }
 
@@ -121,7 +128,9 @@ figure img {
 /* Print-optimized styling */
 @media print {
   body {
-    font-size: 12pt !important;
+    font-size: 11pt !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
   
   .chapter-navigation, .mobile-chapter-nav {
@@ -130,5 +139,11 @@ figure img {
   
   .chapter-content {
     padding-left: 0 !important;
+    margin: 0 !important;
+  }
+  
+  /* Ensure no content bleeds to edges */
+  * {
+    box-sizing: border-box !important;
   }
 }