markdownr 0.5.2 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e91138e164e026f52b6957f44693eb86d75b79eda7e4404d094f1ea0d4e35d26
-  data.tar.gz: b549ff9d07b45f43cc1639c2b4a47171f3a38bb76e2e98c1bb0ffe03ddc53fbe
+  metadata.gz: d8c9a7eee19198ff1effccac6edfac5938353e964073a25abaf44d90f3fcf9ce
+  data.tar.gz: 85bc3bc0825aceef42b0fe6ecbb5f3b753a0b0b8b3facc084b6e8c25f042439a
 SHA512:
-  metadata.gz: cfc1004e65a89e09263f3a35f2da2b3b354afe8351efa87e49194b0aec3bef5aaeedd7d4aba70f00c01ebca6468150a296be2bdad0d8ca238f87b5bc73ebca0d
-  data.tar.gz: c0cc3d73580b42c40c3f9244ed5acc69a74363237c54af0d21877bf4f1a64d2b642150fc4c384d13a6efb74a1bf86f12819d10b913f935ff60298e1e055e8460
+  metadata.gz: b3d9654e8b565eb97ba6571fe742855dd5e7580402dc558526fa445e388b803872d6c23dbbb4e684e8ae7b9276dc8e96d4bebc824c7dfa5c07f99cde2ca6624e
+  data.tar.gz: e81586f4f208d925c453a915b1601b5ccad5a1353ad139e19af984f810a49071a0b952eaf548b74e53159c6d7e1302d6bb86f3ab0814fd9615c5b398b381068d

data/lib/markdown_server/version.rb

@@ -1,3 +1,3 @@
 module MarkdownServer
-  VERSION = "0.5.2"
+  VERSION = "0.5.4"
 end

data/views/layout.erb

@@ -20,10 +20,41 @@
       max-width: 900px;
       margin: 0 auto;
       padding: 1.5rem 2rem 3rem;
+      transition: max-width 0.25s ease, margin-left 0.25s ease;
     }
     .container.has-toc {
       max-width: 1150px;
     }
+    body.wide-mode .container,
+    body.wide-mode .container.has-toc {
+      margin-left: 0 !important;
+      max-width: 100vw !important;
+    }
+    /* When right sidebar has content, shrink container to leave room */
+    body.wide-mode:has(.right-sidebar:not(:empty)) .container,
+    body.wide-mode:has(.right-sidebar:not(:empty)) .container.has-toc {
+      max-width: calc(100vw - 220px) !important;
+    }
+
+    /* Right sidebar — empty placeholder, shown in wide mode only when it has content */
+    .right-sidebar {
+      display: none;
+      position: fixed;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 220px;
+      border-left: 1px solid #e0d8c8;
+      background: #faf8f4;
+      padding: 1rem;
+      overflow-y: auto;
+      z-index: 10;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      font-size: 0.8rem;
+    }
+    body.wide-mode .right-sidebar:not(:empty) {
+      display: block;
+    }
 
     /* Breadcrumbs */
     .breadcrumbs {
@@ -230,11 +261,40 @@
     .md-content li { margin-bottom: 0.3rem; }
 
     /* Tables */
+    .table-outer {
+      position: relative;
+      margin: 1rem 0;
+    }
     .table-wrap {
       overflow-x: auto;
-      margin: 1rem 0;
       -webkit-overflow-scrolling: touch;
     }
+    .table-expand-btn {
+      position: fixed;
+      right: 6px;
+      z-index: 50;
+      display: none;
+      background: rgba(250, 248, 244, 0.92);
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 4px 7px;
+      cursor: pointer;
+      font-size: 1rem;
+      line-height: 1;
+      color: #aaa;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
+      transform: translateY(-50%);
+    }
+    .table-expand-btn:hover {
+      color: #555;
+      border-color: #999;
+      background: #fff;
+    }
+    .table-expand-btn.is-expanded {
+      color: #8b6914;
+      border-color: #c8a84b;
+    }
     .md-content table {
       border-collapse: collapse;
       width: 100%;
@@ -944,6 +1004,8 @@
     <%= yield %>
   </div>
 
+  <div class="right-sidebar"></div>
+
   <script>
     // Breadcrumb auto-hide: visible on load for 5s, hides on scroll down,
     // shows for 5s on scroll up then hides again
@@ -1017,16 +1079,71 @@
       });
     })();
 
-    // Wrap tables in scrollable containers
+    // Wrap tables in scrollable containers + add expand buttons
+    var _tableItems = [];
     document.querySelectorAll('.md-content table').forEach(function(table) {
-      if (!table.parentElement.classList.contains('table-wrap')) {
-        var wrapper = document.createElement('div');
-        wrapper.className = 'table-wrap';
-        table.parentNode.insertBefore(wrapper, table);
-        wrapper.appendChild(table);
-      }
+      if (table.closest('.table-wrap')) return;
+
+      var outer = document.createElement('div');
+      outer.className = 'table-outer';
+
+      var wrapper = document.createElement('div');
+      wrapper.className = 'table-wrap';
+
+      table.parentNode.insertBefore(outer, table);
+      outer.appendChild(wrapper);
+      wrapper.appendChild(table);
+
+      var btn = document.createElement('button');
+      btn.className = 'table-expand-btn';
+      btn.title = 'Expand table to full width';
+      btn.setAttribute('aria-label', 'Expand table to full width');
+      btn.innerHTML = '&#x2922;';
+      btn.addEventListener('click', function() {
+        var isOn = document.body.classList.toggle('wide-mode');
+        _tableItems.forEach(function(i) {
+          var active = isOn && i.btn === btn;
+          i.btn.classList.toggle('is-expanded', active);
+          i.btn.innerHTML = active ? '&#x2921;' : '&#x2922;';
+          i.btn.title = active ? 'Collapse table' : 'Expand table to full width';
+          i.btn.setAttribute('aria-label', i.btn.title);
+        });
+        _updateTableBtns();
+      });
+      document.body.appendChild(btn);
+      _tableItems.push({ outer: outer, btn: btn });
     });
 
+    function _updateTableBtns() {
+      var containerEl = document.querySelector('.container');
+      if (!containerEl) return;
+      // Use the container's natural max-width (ignoring wide-mode expansion) so the
+      // button position is stable before and after toggling wide mode.
+      var naturalMaxWidth = containerEl.classList.contains('has-toc') ? 1150 : 900;
+      var naturalWidth = Math.min(naturalMaxWidth, window.innerWidth);
+      // Right gap = space to the right of a centered container of naturalWidth
+      var rightGap = Math.round((window.innerWidth - naturalWidth) / 2);
+      if (rightGap < 60) {
+        _tableItems.forEach(function(item) { item.btn.style.display = 'none'; });
+        return;
+      }
+      _tableItems.forEach(function(item) {
+        var r = item.outer.getBoundingClientRect();
+        var inView = r.top < window.innerHeight - 20 && r.bottom > 55;
+        if (inView) {
+          var visTop = Math.max(r.top, 55);
+          var visBot = Math.min(r.bottom, window.innerHeight);
+          item.btn.style.top = Math.round((visTop + visBot) / 2) + 'px';
+          item.btn.style.display = 'block';
+        } else {
+          item.btn.style.display = 'none';
+        }
+      });
+    }
+    window.addEventListener('scroll', _updateTableBtns, { passive: true });
+    window.addEventListener('resize', _updateTableBtns);
+    _updateTableBtns();
+
     // TOC scroll spy — highlight the nearest heading (sidebar + drawer)
     (function() {
       var sidebarLinks = document.querySelectorAll('.toc-sidebar a');
@@ -1419,6 +1536,7 @@
       var touchMoved = false;
       var historyStack = [];
       var currentPopupPos = { x: 0, y: 0 };
+      var mouseLeaveTimer = null;
 
       function escHtml(s) {
         return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
@@ -1446,11 +1564,11 @@
 
       var extLinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;flex-shrink:0"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
 
-      function showPopup(x, y, title, bodyHtml, href) {
+      function showPopup(x, y, title, bodyHtml, href, linkRect) {
         // Remove old popup without clearing historyStack
         if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
         popup = null;
-        currentPopupPos = { x: x, y: y };
+        currentPopupPos = { x: x, y: y, linkRect: linkRect || null };
 
         popup = document.createElement('div');
         popup.className = 'link-ctx-popup';
@@ -1469,6 +1587,14 @@
           '<div class="link-ctx-popup-body">' + bodyHtml + '</div>';
         document.body.appendChild(popup);
 
+        clearTimeout(mouseLeaveTimer);
+        popup.addEventListener('mouseleave', function() {
+          mouseLeaveTimer = setTimeout(hidePopup, 150);
+        });
+        popup.addEventListener('mouseenter', function() {
+          clearTimeout(mouseLeaveTimer);
+        });
+
         repositionPopup();
 
         var backBtnEl = popup.querySelector('.link-ctx-popup-back');
@@ -1476,7 +1602,7 @@
           backBtnEl.addEventListener('click', function(e) {
             e.stopPropagation();
             var prev = historyStack.pop();
-            if (prev) showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href);
+            if (prev) showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href, prev.linkRect);
           });
         }
         popup.querySelector('.link-ctx-popup-close').addEventListener('click', hidePopup);
@@ -1492,10 +1618,10 @@
           if (!linkHref || isAnchorOnly(linkHref)) return;
           e.stopPropagation();
           e.preventDefault();
-          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y };
+          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
           var titleEl = popup.querySelector('.link-ctx-popup-title');
           historyStack.push({
-            x: savedPos.x, y: savedPos.y,
+            x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
             title: titleEl ? titleEl.querySelector('span').textContent : '',
             bodyHtml: body.innerHTML,
             href: titleEl ? (titleEl.getAttribute('href') || '') : ''
@@ -1510,10 +1636,10 @@
           if (!linkHref || isAnchorOnly(linkHref)) return;
           e.stopPropagation();
           e.preventDefault();
-          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y };
+          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
           var titleEl = popup.querySelector('.link-ctx-popup-title');
           historyStack.push({
-            x: savedPos.x, y: savedPos.y,
+            x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
             title: titleEl ? titleEl.querySelector('span').textContent : '',
             bodyHtml: body.innerHTML,
             href: titleEl ? (titleEl.getAttribute('href') || '') : ''
@@ -1529,13 +1655,35 @@
       function repositionPopup() {
         if (!popup) return;
         var x = currentPopupPos.x, y = currentPopupPos.y;
+        var rect = currentPopupPos.linkRect;
         var vw = Math.min(window.innerWidth, document.documentElement.clientWidth);
         var vh = window.innerHeight;
-        var left = x + 12;
-        var top = y + 12;
-        if (left + popup.offsetWidth > vw - 8) left = Math.max(8, vw - popup.offsetWidth - 8);
-        if (top + popup.offsetHeight > vh - 8) top = Math.max(8, y - popup.offsetHeight - 12);
-        if (top < 8) top = 8;
+        var pw = popup.offsetWidth;
+        var ph = popup.offsetHeight;
+
+        // Horizontal: position so mouse is ~16px inside left edge, clamped to viewport
+        var left = Math.min(x - 16, vw - pw - 8);
+        if (left < 8) left = 8;
+
+        // Vertical: tight to link bounds when available
+        var top;
+        if (rect) {
+          var gap = 3;
+          var belowTop = rect.bottom + gap;
+          var aboveTop = rect.top - ph - gap;
+          if (belowTop + ph <= vh - 8) {
+            top = belowTop;                          // fits below
+          } else if (aboveTop >= 8) {
+            top = aboveTop;                          // fits above
+          } else {
+            top = Math.max(8, vh - ph - 8);         // clamp: covers link
+          }
+        } else {
+          top = y + 12;
+          if (top + ph > vh - 8) top = Math.max(8, y - ph - 12);
+          if (top < 8) top = 8;
+        }
+
         popup.style.left = left + 'px';
         popup.style.top = top + 'px';
       }
@@ -1550,28 +1698,32 @@
       }
 
       function hidePopup() {
+        clearTimeout(mouseLeaveTimer);
         if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
         popup = null;
         historyStack = [];
       }
 
+
       function handleLink(anchor, x, y, chained) {
         if (!chained) historyStack = [];
         var href = anchor.getAttribute('href');
         if (!href || isAnchorOnly(href)) return;
         var label = anchor.textContent.trim() || href;
+        // For chained popup navigation keep the current link rect; for new popups measure the anchor
+        var linkRect = chained ? currentPopupPos.linkRect : anchor.getBoundingClientRect();
 
         if (isLocalMd(href)) {
           var path = previewPath(href);
           var cached = cache[path];
           if (cached && typeof cached === 'object') {
-            showPopup(x, y, cached.title || label, cached.html, href);
+            showPopup(x, y, cached.title || label, cached.html, href, linkRect);
           } else if (cached === false) {
             showPopup(x, y, label,
               '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>' +
-              '<p style="margin:0;color:#888;font-family:sans-serif;font-size:0.82rem">Preview not available</p>', href);
+              '<p style="margin:0;color:#888;font-family:sans-serif;font-size:0.82rem">Preview not available</p>', href, linkRect);
           } else {
-            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href);
+            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href, linkRect);
             if (cached === undefined) {
               cache[path] = null;
               fetch(path)
@@ -1592,13 +1744,13 @@
           var extKey = 'ext:' + href;
           var extCached = cache[extKey];
           if (extCached && typeof extCached === 'object') {
-            showPopup(x, y, extCached.title || label, extCached.html, href);
+            showPopup(x, y, extCached.title || label, extCached.html, href, linkRect);
           } else if (extCached === false) {
             showPopup(x, y, label,
               '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>' +
-              '<p style="margin:0.5rem 0 0;color:#888;font-family:sans-serif;font-size:0.82rem">Could not fetch page content.</p>', href);
+              '<p style="margin:0.5rem 0 0;color:#888;font-family:sans-serif;font-size:0.82rem">Could not fetch page content.</p>', href, linkRect);
           } else {
-            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href);
+            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href, linkRect);
             if (extCached === undefined) {
               cache[extKey] = null;
               fetch('/fetch?url=' + encodeURIComponent(href))
@@ -1623,7 +1775,7 @@
             }
           }
         } else {
-          showPopup(x, y, label, '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>', href);
+          showPopup(x, y, label, '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>', href, linkRect);
         }
       }
 
@@ -1686,6 +1838,7 @@
           });
           a.addEventListener('mouseleave', function() {
             clearTimeout(hoverTimer);
+            if (popup) mouseLeaveTimer = setTimeout(hidePopup, 150);
           });
         });
       })();

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markdownr
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.5.4
 platform: ruby
 authors:
 - Brian Dunn