@udx/md2html 1.3.1 → 1.4.0

package/package.json

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

package/static/chapter-navigation.css

@@ -16,16 +16,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 +34,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 +190,22 @@
 }
 
 /* Add padding to the content to prevent floating nav from overlapping */
+/* Content is centered in the remaining space to the right of the sidebar */
 .chapter-content {
-  padding-left: calc(var(--chapter-nav-width) + 40px);
+  /* Leave space for sidebar on the left - push content further right */
+  margin-left: calc(var(--chapter-nav-width) + 120px);
+  /* Add margin on the right for balance */
+  margin-right: 80px;
+  /* Remove padding-left since we're using margin */
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Responsive adjustments */
 @media (max-width: 1024px) {
   .chapter-content {
-    padding-left: calc(var(--chapter-nav-width) + 30px);
+    margin-left: calc(var(--chapter-nav-width) + 60px);
+    margin-right: 40px;
   }
 }
 
@@ -202,12 +219,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 +234,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
@@ -227,10 +153,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 +166,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 +188,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 +218,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 +256,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 +267,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;
   }
 }
 
@@ -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 */