markdownr 0.5.17 → 0.5.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9044a1bee7c704aad77abde049a1e46063496e5e42c3a5f09ec5184bff42bb10
-  data.tar.gz: bd1168ac32f70f7df78b6a6bc047cdb1a7331dc9813ffc38636ff080116d6c52
+  metadata.gz: a3cd57887599183f3350f1dd63f44f636ab03b9d3c3a462a1aaec04793cbbfeb
+  data.tar.gz: 8ecb0febc8ba672c28ad2cc9d2cdea0cbe7a1e1c79508bb0ec1b4fcb40c133fa
 SHA512:
-  metadata.gz: eaca881e0e2e9fa996381cb944fb9ade2c26dcb09dff96d1d595dfbc79d1150b7024f138086e2b58e255ae79d12d1580ed68298480a9cf209adca8cc77cae80c
-  data.tar.gz: 93a40be77ea08b3aa335b8c84e6c4741a962a6851c29abd851a99c5698f504fb9bca5d9a1e179a0d859797d08db56c92691f8cec2ea9a293c082a87f80bce8b8
+  metadata.gz: 83b163d0b783c29163dfc8d7803e0536dd78a295d7b4d72518dd55015b7e302fae23d83bec507fb1f363eee3af2f5e031f5ca8fd9a42de10c42ff72bce996446
+  data.tar.gz: b6a498d1d81abdd6ad981c4c930ba934776895c2606bc0ae9ae42bcfb71890d79be8bcdeec55e190c36199c34ed6b74ce2926b1705161ba862f68752b2d9a838

data/bin/markdownr

@@ -43,6 +43,10 @@ OptionParser.new do |opts|
     options[:hard_wrap] = false
   end
 
+  opts.on("--verbose", "Print each request (time, IP, method, path) to stdout") do
+    options[:verbose] = true
+  end
+
   opts.on("-v", "--version", "Show version") do
     puts "markdownr #{MarkdownServer::VERSION}"
     exit
@@ -64,6 +68,7 @@ MarkdownServer::App.set :allow_robots, options[:allow_robots] || false
 MarkdownServer::App.set :index_file, options[:index_file]
 MarkdownServer::App.set :link_tooltips, options.fetch(:link_tooltips, true)
 MarkdownServer::App.set :hard_wrap, options.fetch(:hard_wrap, true)
+MarkdownServer::App.set :verbose, options[:verbose] || false
 MarkdownServer::App.set :port, options[:port]
 MarkdownServer::App.set :bind, options[:bind]
 MarkdownServer::App.set :server_settings, { max_threads: options[:threads], min_threads: 1 }

data/lib/markdown_server/app.rb

@@ -31,8 +31,10 @@ module MarkdownServer
       set :protection, false
       set :host_authorization, { permitted_hosts: [] }
       set :behind_proxy, false
+      set :verbose, false
       set :session_secret, ENV.fetch("MARKDOWNR_SESSION_SECRET", SecureRandom.hex(64))
       set :sessions, key: "markdownr_session", same_site: :strict, httponly: true
+      set :popup_assets_content, File.read(File.join(settings.views, "popup_assets.erb"))
     end
 
     helpers do
@@ -137,8 +139,7 @@ module MarkdownServer
         # Auto-link bare Bible verse citations (e.g. "John 3:16" → BibleGateway link).
         # Skips inline code, fenced code blocks, and citations already inside a link.
         text = MarkdownServer.link_citations(text) do |canonical, verse, citation|
-          url = "https://www.biblegateway.com/passage/?search=#{CGI.escape("#{canonical} #{verse}")}&version=CEB"
-          "[#{citation}](#{url})"
+          "[#{citation}](#{MarkdownServer.biblegateway_url(canonical, verse)})"
         end
 
         # Process wiki links BEFORE Kramdown so that | isn't consumed as
@@ -785,6 +786,27 @@ module MarkdownServer
         end
       end
 
+      # Returns true when serving an HTML file that should have popup assets injected.
+      # Add additional path prefixes here as needed.
+      def inject_assets_for_html_path?(relative_path)
+        relative_path.start_with?("scripture/resources/books/bible")
+      end
+
+      # Injects popup CSS and JS into an HTML document before </body>.
+      # Also auto-links bare Bible verse citations in HTML text nodes.
+      # Falls back to appending before </html>, then to end of document.
+      def inject_markdownr_assets(html_content)
+        html_content = MarkdownServer.link_citations_html(html_content) do |canonical, verse, citation|
+          url = MarkdownServer.biblegateway_url(canonical, verse)
+          %(<a href="#{h(url)}">#{h(citation)}</a>)
+        end
+
+        assets = settings.popup_assets_content
+        inserted = false
+        result = html_content.sub(/<\/(body|html)>/i) { inserted = true; "#{assets}</#{$1}>" }
+        inserted ? result : html_content + assets
+      end
+
       def admin?
         return true if session[:admin]
 
@@ -817,6 +839,13 @@ module MarkdownServer
       end
     end
 
+    before do
+      if settings.verbose
+        $stdout.puts "#{Time.now.strftime("%Y-%m-%d %H:%M:%S")} #{client_ip} #{request.request_method} #{request.fullpath}"
+        $stdout.flush
+      end
+    end
+
     get "/" do
       redirect "/browse/"
     end
@@ -1167,6 +1196,20 @@ module MarkdownServer
       when ".epub"
         redirect @download_href
 
+      when ".html"
+        if inject_assets_for_html_path?(relative_path)
+          content = File.read(real_path, encoding: "utf-8")
+          halt 200, { "Content-Type" => "text/html; charset=utf-8" }, inject_markdownr_assets(content)
+        else
+          send_file real_path, type: "text/html"
+        end
+
+      when ".css"
+        send_file real_path, type: "text/css"
+
+      when ".js"
+        send_file real_path, type: "application/javascript"
+
       else
         content = File.read(real_path, encoding: "utf-8") rescue nil
         if content.nil? || content.encoding == Encoding::BINARY || !content.valid_encoding?

data/lib/markdown_server/bible_citations.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+require "cgi"
 #
 # Bible citation auto-linking for Markdown rendering.
 #
@@ -102,6 +103,12 @@ module MarkdownServer
   # Sorted longest-first for runtime lookup (same order as the regex alternation).
   BIBLE_BOOK_MAP_SORTED = BIBLE_BOOK_MAP.sort_by { |k, _| -k.length }.freeze
 
+  BIBLEGATEWAY_VERSION = "CEB".freeze
+
+  def self.biblegateway_url(canonical, verse)
+    "https://www.biblegateway.com/passage/?search=#{CGI.escape("#{canonical} #{verse}")}&version=#{BIBLEGATEWAY_VERSION}"
+  end
+
   # Scans +text+ for bare Bible verse citations and yields each one as
   # (canonical_book, verse, raw_citation). Returns the transformed string
   # with each citation replaced by whatever the block returns. Code spans,
@@ -125,6 +132,7 @@ module MarkdownServer
   _book_alts = BIBLE_BOOK_MAP.keys.sort_by(&:length).reverse
                              .map { |k| Regexp.escape(k) }.join("|")
   _verse     = /\d+[abc]?(?:[–—\-]\d+[abc]?)?(?:,\s*\d+[abc]?(?:[–—\-]\d+[abc]?)?)*(?:ff\.?|f\.)?/
+  _citation  = "(?:#{_book_alts})\\.?[ \\t]?\\d+(?::#{_verse.source})?"
 
   # Combined regex. Four alternatives — only the last (group 4) is replaced:
   #   1. inline code span   → return verbatim
@@ -135,7 +143,32 @@ module MarkdownServer
     "(`[^`]*?`)" \
     "|(`{3}[\\s\\S]*?`{3})" \
     "|(?<!\\!)(\\[[^\\[\\]]*\\]\\([^)]+\\))" \
-    "|((?:#{_book_alts})\\.?[ \\t]?\\d+(?::#{_verse.source})?)",
+    "|(#{_citation})",
     Regexp::MULTILINE
   )
+
+  # HTML-aware version of BIBLE_CITATION_RE. Skips <script>, <style>, existing
+  # <a> elements, and all other HTML tags. Group 5 captures bare citations.
+  HTML_BIBLE_CITATION_RE = Regexp.new(
+    "(<script\\b[^>]*>[\\s\\S]*?</script>)" \
+    "|(<style\\b[^>]*>[\\s\\S]*?</style>)" \
+    "|(<a\\b[^>]*>[\\s\\S]*?</a>)" \
+    "|(<[^>]+>)" \
+    "|(#{_citation})",
+    Regexp::MULTILINE | Regexp::IGNORECASE
+  )
+
+  # Like link_citations but operates on raw HTML. Skips tag content, script/style
+  # blocks, and existing anchor elements; yields bare citations in text nodes.
+  def self.link_citations_html(html)
+    html.gsub(HTML_BIBLE_CITATION_RE) do |m|
+      next m if $1 || $2 || $3 || $4  # skip tags / scripts / styles / anchors
+      citation = $5
+      entry = BIBLE_BOOK_MAP_SORTED.find { |k, _| citation.start_with?(k) }
+      next m unless entry
+      abbrev, canonical = entry
+      verse = citation[abbrev.length..].sub(/\A\.?[ \t]?/, "")
+      yield canonical, verse, citation
+    end
+  end
 end

data/lib/markdown_server/version.rb

@@ -1,3 +1,3 @@
 module MarkdownServer
-  VERSION = "0.5.17"
+  VERSION = "0.5.19"
 end

data/views/layout.erb

@@ -777,6 +777,7 @@
       background: #faf8f4;
       flex-shrink: 0;
       cursor: grab;
+      touch-action: none;
     }
     .link-ctx-popup-header.is-dragging {
       cursor: grabbing;
@@ -861,8 +862,8 @@
       position: absolute;
       bottom: 0;
       right: 0;
-      width: 20px;
-      height: 20px;
+      width: 36px;
+      height: 36px;
       cursor: nwse-resize;
       touch-action: none;
       border-bottom-right-radius: 5px;
@@ -982,7 +983,9 @@
     .blb-usage li { margin-bottom: 0.15rem; }
     .blb-usage p { margin: 0; }
 
+
     /* Footnote tooltips */
+    sup[id^="fnref:"] { position: relative; }
     .footnote-tooltip {
       position: absolute;
       bottom: 100%;
@@ -999,8 +1002,8 @@
       z-index: 150;
       box-shadow: 0 2px 8px rgba(0,0,0,0.25);
       margin-bottom: 6px;
+      cursor: pointer;
     }
-    .footnote-tooltip { cursor: pointer; }
     .footnote-tooltip::after {
       content: '';
       position: absolute;
@@ -1015,9 +1018,6 @@
     .footnote-tooltip a { color: #d4b96a; }
     .footnote-tooltip p { margin: 0; }
     .footnote-tooltip p + p { margin-top: 0.3rem; }
-    sup[id^="fnref:"] {
-      position: relative;
-    }
 
     /* Responsive */
     @media (max-width: 768px) {
@@ -1426,10 +1426,6 @@
           tooltip.style.left = '50%';
           tooltip.style.transform = 'translateX(-50%)';
           tooltip.style.removeProperty('--arrow-offset');
-          // Clamp tooltip to viewport.
-          // document.documentElement.clientWidth is more reliable than window.innerWidth
-          // on Android browsers (e.g. EinkBro) which may return a pre-scaled layout
-          // viewport width for window.innerWidth rather than the CSS viewport width.
           var viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
           var rect = tooltip.getBoundingClientRect();
           var shift = 0;
@@ -1453,19 +1449,16 @@
         sup.addEventListener('mouseleave', hideTooltip);
 
         // Touch: first tap shows tooltip, second tap navigates
-        // Using touchend instead of click so no hover media query check is needed —
-        // touchend only fires on real touch, regardless of what (hover:none) reports.
         var linkTouchMoved = false;
         link.addEventListener('touchstart', function() { linkTouchMoved = false; }, { passive: true });
         link.addEventListener('touchmove', function() { linkTouchMoved = true; }, { passive: true });
         link.addEventListener('touchend', function(e) {
-          if (linkTouchMoved) return; // scroll, not a tap
+          if (linkTouchMoved) return;
           if (tooltip.parentNode === sup) {
             // Tooltip already showing — let the link navigate
             return;
           }
           e.preventDefault();
-          // Dismiss any other open tooltip
           document.querySelectorAll('.footnote-tooltip').forEach(function(t) {
             if (t.parentNode) t.parentNode.removeChild(t);
           });
@@ -1482,7 +1475,7 @@
           window.location.hash = fnHref;
         });
 
-        // Dismiss tooltip when tapping elsewhere
+        // Dismiss tooltip when clicking elsewhere
         document.addEventListener('click', function(e) {
           if (tooltip.parentNode === sup && !sup.contains(e.target)) {
             hideTooltip();

data/views/popup_assets.erb

@@ -0,0 +1,732 @@
+<style>
+  /* Bible Gateway citation links */
+  a[href*="biblegateway.com"] {
+    color: #7b3fa0;
+    font-weight: bold;
+    text-decoration: none;
+    border-bottom: 1px solid #b07fd4;
+  }
+  a[href*="biblegateway.com"]:hover { color: #5a2c78; border-bottom-color: #5a2c78; }
+
+  /* Left-click / tap link context popup */
+  .link-ctx-popup {
+    position: fixed;
+    z-index: 500;
+    width: 460px;
+    max-width: calc(100vw - 16px);
+    max-height: 60vh;
+    background: #faf8f4;
+    border: 1px solid #d4b96a;
+    border-radius: 6px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
+    cursor: auto;
+    min-width: 280px;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .link-ctx-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.9rem;
+    border-bottom: 1px solid #e0d8c8;
+    background: #faf8f4;
+    flex-shrink: 0;
+    cursor: grab;
+    touch-action: none;
+  }
+  .link-ctx-popup-header.is-dragging {
+    cursor: grabbing;
+    user-select: none;
+  }
+  .link-ctx-popup-title-wrap {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .link-ctx-popup-title {
+    font-family: Georgia, "Times New Roman", serif;
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: #3a3a3a;
+    min-width: 0;
+    word-break: break-word;
+    text-decoration: none;
+  }
+  a.link-ctx-popup-title:hover { color: #8b6914; }
+  .link-ctx-popup-close {
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    line-height: 1;
+    color: #888;
+    cursor: pointer;
+    padding: 0 0.2rem;
+    flex-shrink: 0;
+  }
+  .link-ctx-popup-close:hover { color: #2c2c2c; }
+  .link-ctx-popup-newtab {
+    color: #666;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 0 0.2rem;
+  }
+  .link-ctx-popup-newtab:hover { color: #8b6914; }
+  .link-ctx-popup-back {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    line-height: 1;
+    color: #888;
+    cursor: pointer;
+    padding: 0 0.3rem 0 0;
+    flex-shrink: 0;
+  }
+  .link-ctx-popup-back:hover { color: #2c2c2c; }
+  .link-ctx-popup-pin {
+    background: none;
+    border: none;
+    color: #bbb;
+    cursor: pointer;
+    padding: 0 0.2rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+  .link-ctx-popup-pin:hover { color: #2c2c2c; }
+  .link-ctx-popup-pin.pinned { color: #8b6914; }
+  .link-ctx-popup--pinned {
+    max-height: none;
+    min-height: 120px;
+  }
+  .link-ctx-popup--pinned .link-ctx-popup-header {
+    user-select: none;
+  }
+  .link-ctx-popup-body {
+    padding: 0.75rem 1rem;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .link-ctx-popup-resize {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 36px;
+    height: 36px;
+    cursor: nwse-resize;
+    touch-action: none;
+    border-bottom-right-radius: 5px;
+    background: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px);
+    z-index: 2;
+  }
+  .link-ctx-popup-url {
+    font-family: "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.75rem;
+    color: #555;
+    word-break: break-all;
+    background: #f0ece3;
+    padding: 0.35rem 0.6rem;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Shared popup content styles */
+  .link-ctx-popup-body {
+    font-family: Georgia, "Times New Roman", serif;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: #2c2c2c;
+  }
+  .link-ctx-popup-body h1, .link-ctx-popup-body h2, .link-ctx-popup-body h3,
+  .link-ctx-popup-body h4, .link-ctx-popup-body h5, .link-ctx-popup-body h6 {
+    margin: 0.7rem 0 0.3rem; color: #3a3a3a;
+  }
+  .link-ctx-popup-body h1 { font-size: 1.2rem; }
+  .link-ctx-popup-body h2 { font-size: 1.05rem; border-bottom: none; padding-bottom: 0; }
+  .link-ctx-popup-body h3 { font-size: 0.95rem; }
+  .link-ctx-popup-body p { margin: 0 0 0.5rem; }
+  .link-ctx-popup-body p:last-child { margin-bottom: 0; }
+  .link-ctx-popup-body a { color: #8b6914; text-decoration: none; border-bottom: 1px solid #d4b96a; }
+  .link-ctx-popup-body a.wiki-link { color: #6a8e3e; border-bottom-color: #6a8e3e; }
+  .link-ctx-popup-body code {
+    font-family: "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.82em;
+    background: #f0ece3;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+  }
+  .link-ctx-popup-body pre {
+    background: #2d2d2d;
+    color: #f0f0f0;
+    padding: 0.6rem 0.8rem;
+    border-radius: 4px;
+    font-size: 0.78rem;
+    line-height: 1.4;
+    overflow-x: auto;
+    margin: 0.4rem 0;
+  }
+  .link-ctx-popup-body pre code { background: none; padding: 0; font-size: 1em; color: inherit; }
+  .link-ctx-popup-body ul, .link-ctx-popup-body ol { padding-left: 1.4rem; margin: 0.3rem 0; }
+  .link-ctx-popup-body li { margin-bottom: 0.2rem; }
+  .link-ctx-popup-body blockquote {
+    border-left: 3px solid #d4b96a;
+    margin: 0.5rem 0;
+    padding: 0.3rem 0.8rem;
+    color: #4a4a4a;
+    font-style: italic;
+  }
+  .link-ctx-popup-body table { border-collapse: collapse; font-size: 0.8rem; margin: 0.5rem 0; }
+  .link-ctx-popup-body th, .link-ctx-popup-body td { border: 1px solid #ddd; padding: 0.3rem 0.5rem; }
+  .link-ctx-popup-body th { background: #f5f0e4; }
+
+  /* Blue Letter Bible popup tables */
+  .blb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 0.6rem; }
+  .blb-table th, .blb-table td { padding: 3px 7px; border: 1px solid #ddd; }
+  .blb-th { text-align: left; font-weight: normal; background: #f5f0e4; color: #555; width: 38%; }
+  .blb-right { text-align: right; }
+  .blb-nowrap { white-space: nowrap; vertical-align: top; }
+  .blb-match { color: #b33 !important; font-weight: 700 !important; font-style: italic !important; }
+  .blb-heading { font-size: 0.82rem; font-weight: 600; margin: 0.7rem 0 0.25rem; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }
+  .blb-usage { font-size: 0.85rem; }
+  .blb-usage ol { margin: 0.1rem 0 0.1rem 1.3rem; padding: 0; list-style-type: decimal; }
+  .blb-usage ol ol { list-style-type: lower-alpha; }
+  .blb-usage ol ol ol { list-style-type: lower-roman; }
+  .blb-usage ol ol ol ol { list-style-type: lower-alpha; }
+  .blb-usage li { margin-bottom: 0.15rem; }
+  .blb-usage p { margin: 0; }
+</style>
+<script>
+  // Left-click / tap popup for all links (standalone — no .md-content scope restriction)
+  (function() {
+    var cache = Object.create(null);
+    var popup = null;
+    var touchMoved = false;
+    var historyStack = [];
+    var pinnedPopups = [];
+    var popupDragging = false;
+    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;');
+    }
+
+    function findLink(el) {
+      while (el && el.tagName !== 'BODY') {
+        if (el.tagName === 'A' && el.getAttribute('href')) return el;
+        el = el.parentElement;
+      }
+      return null;
+    }
+
+    function isAnchorOnly(href) { return href.charAt(0) === '#'; }
+    function isLocalMd(href) {
+      if (/^https?:\/\//i.test(href)) return false;
+      return /\.md([?#]|$)/i.test(href);
+    }
+    function isExternal(href) { return /^https?:\/\//i.test(href); }
+
+    function previewPath(href) {
+      var resolved = new URL(href, location.href);
+      return '/preview/' + resolved.pathname.replace(/^\/browse\//, '');
+    }
+
+    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>';
+    var pinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg>';
+
+    function showPopup(x, y, title, bodyHtml, href, linkRect) {
+      if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
+      popup = null;
+      currentPopupPos = { x: x, y: y, linkRect: linkRect || null };
+
+      popup = document.createElement('div');
+      popup.className = 'link-ctx-popup';
+      var thisPopup = popup;
+      var backBtn = historyStack.length > 0 ? '<button class="link-ctx-popup-back" aria-label="Back">\u2190</button>' : '';
+      var titleHtml = href
+        ? '<div class="link-ctx-popup-title-wrap">' +
+            '<a class="link-ctx-popup-title" href="' + escHtml(href) + '"><span>' + escHtml(title) + '</span></a>' +
+            '<a class="link-ctx-popup-newtab" href="' + escHtml(href) + '" target="_blank" rel="noopener" title="Open in new tab">' + extLinkIcon + '</a>' +
+          '</div>'
+        : '<span class="link-ctx-popup-title-wrap"><span class="link-ctx-popup-title"><span>' + escHtml(title) + '</span></span></span>';
+      popup.innerHTML =
+        '<div class="link-ctx-popup-header">' +
+          backBtn + titleHtml +
+          '<button class="link-ctx-popup-pin" aria-label="Pin" title="Pin popup">' + pinIcon + '</button>' +
+          '<button class="link-ctx-popup-close" aria-label="Close">\u00d7</button>' +
+        '</div>' +
+        '<div class="link-ctx-popup-body">' + bodyHtml + '</div>' +
+        '<div class="link-ctx-popup-resize" aria-hidden="true"></div>';
+      document.body.appendChild(popup);
+
+      clearTimeout(mouseLeaveTimer);
+      popup.addEventListener('mouseleave', function() {
+        if (thisPopup.dataset.pinned || popupDragging) return;
+        mouseLeaveTimer = setTimeout(hidePopup, 150);
+      });
+      popup.addEventListener('mouseenter', function() {
+        if (thisPopup.dataset.pinned) return;
+        clearTimeout(mouseLeaveTimer);
+      });
+
+      repositionPopup();
+      makeDraggable(popup);
+      makeResizable(popup);
+
+      var backBtnEl = popup.querySelector('.link-ctx-popup-back');
+      if (backBtnEl) {
+        backBtnEl.addEventListener('click', function(e) {
+          e.stopPropagation();
+          var prev = historyStack.pop();
+          if (prev) {
+            showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href, prev.linkRect);
+            if (popup && prev.scrollTop) popup.scrollTop = prev.scrollTop;
+          }
+        });
+      }
+      popup.querySelector('.link-ctx-popup-close').addEventListener('click', hidePopup);
+      popup.querySelector('.link-ctx-popup-pin').addEventListener('click', function(e) {
+        e.stopPropagation();
+        if (!thisPopup.dataset.pinned) pinPopup(thisPopup);
+        else unpinPopup(thisPopup);
+      });
+      popup.addEventListener('click', function(e) { e.stopPropagation(); });
+
+      var body = popup.querySelector('.link-ctx-popup-body');
+      body.addEventListener('click', function(e) {
+        var anchor = findLink(e.target);
+        if (!anchor) return;
+        var linkHref = anchor.getAttribute('href');
+        if (!linkHref || isAnchorOnly(linkHref)) return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (thisPopup.dataset.pinned) { handleLink(anchor, e.clientX, e.clientY, false); return; }
+        var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
+        var titleEl = thisPopup.querySelector('.link-ctx-popup-title');
+        historyStack.push({
+          x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
+          title: titleEl ? titleEl.querySelector('span').textContent : '',
+          bodyHtml: body.innerHTML,
+          href: titleEl ? (titleEl.getAttribute('href') || '') : '',
+          scrollTop: thisPopup.scrollTop
+        });
+        handleLink(anchor, savedPos.x, savedPos.y, true);
+      });
+      body.addEventListener('touchend', function(e) {
+        if (touchMoved) return;
+        var anchor = findLink(e.target);
+        if (!anchor) return;
+        var linkHref = anchor.getAttribute('href');
+        if (!linkHref || isAnchorOnly(linkHref)) return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (thisPopup.dataset.pinned) { handleLink(anchor, e.clientX, e.clientY, false); return; }
+        var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
+        var titleEl = thisPopup.querySelector('.link-ctx-popup-title');
+        historyStack.push({
+          x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
+          title: titleEl ? titleEl.querySelector('span').textContent : '',
+          bodyHtml: body.innerHTML,
+          href: titleEl ? (titleEl.getAttribute('href') || '') : '',
+          scrollTop: thisPopup.scrollTop
+        });
+        handleLink(anchor, savedPos.x, savedPos.y, true);
+      }, { passive: false });
+
+      ['touchstart','touchmove','touchend'].forEach(function(ev) {
+        popup.addEventListener(ev, function(e) { e.stopPropagation(); }, { passive: true });
+      });
+    }
+
+    function pinPopup(el) {
+      clearTimeout(mouseLeaveTimer);
+      var ownHistory = historyStack.slice();
+      popup = null;
+      historyStack = [];
+      el.style.width = el.offsetWidth + 'px';
+      el.style.height = el.offsetHeight + 'px';
+      el.style.maxHeight = 'none';
+      el.dataset.pinned = '1';
+      el.classList.add('link-ctx-popup--pinned');
+      var pinBtn = el.querySelector('.link-ctx-popup-pin');
+      if (pinBtn) pinBtn.classList.add('pinned');
+      var backBtn = el.querySelector('.link-ctx-popup-back');
+      if (backBtn) {
+        var newBack = backBtn.cloneNode(true);
+        backBtn.parentNode.replaceChild(newBack, backBtn);
+        newBack.addEventListener('click', function(e) {
+          e.stopPropagation();
+          goBackInPinned(el, ownHistory);
+        });
+      }
+      var closeBtn = el.querySelector('.link-ctx-popup-close');
+      var newClose = closeBtn.cloneNode(true);
+      closeBtn.parentNode.replaceChild(newClose, closeBtn);
+      newClose.addEventListener('click', function(e) {
+        e.stopPropagation();
+        if (el.parentNode) el.parentNode.removeChild(el);
+        pinnedPopups = pinnedPopups.filter(function(p) { return p !== el; });
+      });
+      el._popupHistory = ownHistory;
+      pinnedPopups.push(el);
+    }
+
+    function unpinPopup(el) {
+      if (popup && popup !== el && popup.parentNode) popup.parentNode.removeChild(popup);
+      pinnedPopups = pinnedPopups.filter(function(p) { return p !== el; });
+      popup = el;
+      historyStack = el._popupHistory || [];
+      delete el._popupHistory;
+      delete el.dataset.pinned;
+      el.classList.remove('link-ctx-popup--pinned');
+      var pinBtn = el.querySelector('.link-ctx-popup-pin');
+      if (pinBtn) pinBtn.classList.remove('pinned');
+      var backBtn = el.querySelector('.link-ctx-popup-back');
+      if (backBtn) {
+        var newBack = backBtn.cloneNode(true);
+        backBtn.parentNode.replaceChild(newBack, backBtn);
+        newBack.addEventListener('click', function(e) {
+          e.stopPropagation();
+          var prev = historyStack.pop();
+          if (prev) {
+            showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href, prev.linkRect);
+            if (popup && prev.scrollTop) popup.scrollTop = prev.scrollTop;
+          }
+        });
+      }
+      var closeBtn = el.querySelector('.link-ctx-popup-close');
+      var newClose = closeBtn.cloneNode(true);
+      closeBtn.parentNode.replaceChild(newClose, closeBtn);
+      newClose.addEventListener('click', hidePopup);
+    }
+
+    function goBackInPinned(el, ownHistory) {
+      var prev = ownHistory.pop();
+      if (!prev) return;
+      var body = el.querySelector('.link-ctx-popup-body');
+      if (body) body.innerHTML = prev.bodyHtml;
+      var titleSpan = el.querySelector('.link-ctx-popup-title span');
+      if (titleSpan) titleSpan.textContent = prev.title;
+      var titleLink = el.querySelector('a.link-ctx-popup-title');
+      if (titleLink && prev.href) titleLink.href = prev.href;
+      var backBtnEl = el.querySelector('.link-ctx-popup-back');
+      if (backBtnEl) backBtnEl.style.display = ownHistory.length > 0 ? '' : 'none';
+      if (prev.scrollTop) el.scrollTop = prev.scrollTop;
+    }
+
+    function makeDraggable(el) {
+      var header = el.querySelector('.link-ctx-popup-header');
+      if (!header) return;
+      var startX, startY, startLeft, startTop;
+
+      function onDragStart(clientX, clientY) {
+        startX = clientX; startY = clientY;
+        startLeft = el.offsetLeft; startTop = el.offsetTop;
+        el.style.width = el.offsetWidth + 'px';
+        el.style.height = el.offsetHeight + 'px';
+        el.style.maxHeight = 'none';
+        popupDragging = true;
+        header.classList.add('is-dragging');
+      }
+      function onDragMove(clientX, clientY) {
+        el.style.left = (startLeft + clientX - startX) + 'px';
+        el.style.top  = (startTop  + clientY - startY) + 'px';
+      }
+      function onDragEnd() {
+        popupDragging = false;
+        header.classList.remove('is-dragging');
+      }
+
+      header.addEventListener('mousedown', function(e) {
+        if (e.target.closest('button') || e.target.closest('a')) return;
+        e.preventDefault();
+        onDragStart(e.clientX, e.clientY);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      });
+      function onMouseMove(e) { onDragMove(e.clientX, e.clientY); }
+      function onMouseUp() {
+        onDragEnd();
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      }
+
+      header.addEventListener('touchstart', function(e) {
+        if (e.target.closest('button') || e.target.closest('a')) return;
+        e.preventDefault();
+        var t = e.touches[0];
+        onDragStart(t.clientX, t.clientY);
+        document.addEventListener('touchmove', onTouchMove, { passive: false });
+        document.addEventListener('touchend', onTouchEnd);
+      }, { passive: false });
+      function onTouchMove(e) { e.preventDefault(); var t = e.touches[0]; onDragMove(t.clientX, t.clientY); }
+      function onTouchEnd() {
+        onDragEnd();
+        document.removeEventListener('touchmove', onTouchMove);
+        document.removeEventListener('touchend', onTouchEnd);
+      }
+    }
+
+    function makeResizable(el) {
+      var handle = el.querySelector('.link-ctx-popup-resize');
+      if (!handle) return;
+      var startX, startY, startW, startH;
+
+      function onResizeStart(clientX, clientY) {
+        startX = clientX; startY = clientY;
+        startW = el.offsetWidth; startH = el.offsetHeight;
+        el.style.width = startW + 'px';
+        el.style.height = startH + 'px';
+        el.style.maxHeight = 'none';
+      }
+      function onResizeMove(clientX, clientY) {
+        el.style.width  = Math.max(280, startW + clientX - startX) + 'px';
+        el.style.height = Math.max(80,  startH + clientY - startY) + 'px';
+      }
+
+      handle.addEventListener('mousedown', function(e) {
+        e.preventDefault(); e.stopPropagation();
+        onResizeStart(e.clientX, e.clientY);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      });
+      function onMouseMove(e) { onResizeMove(e.clientX, e.clientY); }
+      function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      }
+
+      handle.addEventListener('touchstart', function(e) {
+        e.preventDefault(); e.stopPropagation();
+        var t = e.touches[0];
+        onResizeStart(t.clientX, t.clientY);
+        document.addEventListener('touchmove', onTouchMove, { passive: false });
+        document.addEventListener('touchend', onTouchEnd);
+      }, { passive: false });
+      function onTouchMove(e) { e.preventDefault(); onResizeMove(e.touches[0].clientX, e.touches[0].clientY); }
+      function onTouchEnd() {
+        document.removeEventListener('touchmove', onTouchMove);
+        document.removeEventListener('touchend', onTouchEnd);
+      }
+    }
+
+    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 pw = popup.offsetWidth;
+      var ph = popup.offsetHeight;
+
+      var left = Math.min(x - 16, vw - pw - 8);
+      if (left < 8) left = 8;
+
+      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;
+        } else if (aboveTop >= 8) {
+          top = aboveTop;
+        } else {
+          top = Math.max(8, vh - ph - 8);
+        }
+      } 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';
+    }
+
+    function updatePopup(bodyHtml, title) {
+      if (!popup) return;
+      var body = popup.querySelector('.link-ctx-popup-body');
+      var titleTextEl = popup.querySelector('.link-ctx-popup-title span');
+      if (body) body.innerHTML = bodyHtml;
+      if (title && titleTextEl) titleTextEl.textContent = title;
+      repositionPopup();
+    }
+
+    function hidePopup() {
+      clearTimeout(mouseLeaveTimer);
+      if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
+      popup = null;
+      historyStack = [];
+    }
+
+    function applyPopupAnchor(hash) {
+      if (!hash || !popup) return;
+      var id = hash.replace(/^#/, '');
+      try {
+        var target = popup.querySelector('[id="' + id.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"]');
+        if (!target) return;
+        var header = popup.querySelector('.link-ctx-popup-header');
+        var headerHeight = header ? header.offsetHeight : 0;
+        var targetTop = target.getBoundingClientRect().top;
+        var popupTop = popup.getBoundingClientRect().top;
+        popup.scrollTop += targetTop - popupTop - headerHeight - 8;
+        if (/^H[1-6]$/.test(target.tagName)) {
+          var titleEl = popup.querySelector('.link-ctx-popup-title span');
+          if (titleEl) titleEl.textContent = titleEl.textContent + ' \u203a ' + target.textContent;
+        }
+      } catch(e) {}
+    }
+
+    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;
+      var linkRect = chained ? currentPopupPos.linkRect : anchor.getBoundingClientRect();
+      var linkHash = (function() { try { return new URL(href, location.href).hash; } catch(e) { return ''; } })();
+
+      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, linkRect);
+          applyPopupAnchor(linkHash);
+        } 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, linkRect);
+        } else {
+          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)
+              .then(function(r) { return r.ok ? r.json() : null; })
+              .then(function(data) {
+                if (!data) { cache[path] = false; updatePopup('<p style="margin:0;color:#c44;font-family:sans-serif;font-size:0.85rem">Preview unavailable.</p>'); return; }
+                var bodyHtml = data.html + (data.frontmatter_html || '');
+                cache[path] = { title: data.title, html: bodyHtml };
+                updatePopup(bodyHtml, data.title || label);
+                applyPopupAnchor(linkHash);
+              })
+              .catch(function() {
+                cache[path] = false;
+                updatePopup('<p style="margin:0;color:#c44;font-family:sans-serif;font-size:0.85rem">Preview unavailable.</p>');
+              });
+          }
+        }
+      } else if (isExternal(href)) {
+        var extKey = 'ext:' + href;
+        var extCached = cache[extKey];
+        if (extCached && typeof extCached === 'object') {
+          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, linkRect);
+        } else {
+          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))
+              .then(function(r) { return r.ok ? r.json() : null; })
+              .then(function(data) {
+                if (!data || data.error) {
+                  cache[extKey] = false;
+                  updatePopup(
+                    '<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>');
+                  return;
+                }
+                cache[extKey] = { title: data.title, html: data.html };
+                updatePopup(data.html, data.title || label);
+              })
+              .catch(function() {
+                cache[extKey] = false;
+                updatePopup(
+                  '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>' +
+                  '<p style="margin:0.5rem 0 0;color:#c44;font-family:sans-serif;font-size:0.82rem">Could not fetch page content.</p>');
+              });
+          }
+        }
+      } else {
+        showPopup(x, y, label, '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>', href, linkRect);
+      }
+    }
+
+    // Left-click on desktop
+    document.addEventListener('click', function(e) {
+      if (popup && popup.contains(e.target)) return;
+      var anchor = findLink(e.target);
+      if (!anchor) { hidePopup(); return; }
+      var href = anchor.getAttribute('href');
+      if (!href || isAnchorOnly(href)) { hidePopup(); return; }
+      if (!isLocalMd(href) && !isExternal(href)) { hidePopup(); return; }
+      e.preventDefault();
+      handleLink(anchor, e.clientX, e.clientY, false);
+    });
+
+    // Touch tracking
+    document.addEventListener('touchstart', function(e) {
+      if (e.touches.length !== 1) return;
+      touchMoved = false;
+    }, { passive: true });
+
+    document.addEventListener('touchmove', function() {
+      touchMoved = true;
+    }, { passive: true });
+
+    // Touch tap
+    document.addEventListener('touchend', function(e) {
+      if (touchMoved) return;
+      if (popup && popup.contains(e.target)) return;
+      var anchor = findLink(e.target);
+      if (!anchor) { hidePopup(); return; }
+      var href = anchor.getAttribute('href');
+      if (!href || isAnchorOnly(href)) { hidePopup(); return; }
+      if (!isLocalMd(href) && !isExternal(href)) { hidePopup(); return; }
+      e.preventDefault();
+      var touch = e.changedTouches[0];
+      handleLink(anchor, touch.clientX, touch.clientY, false);
+    }, { passive: false });
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && popup) hidePopup();
+    });
+
+    // Hover — per-link, triggered after a short delay when no popup is active
+    (function() {
+      var hoverTimer = null;
+      document.querySelectorAll('a').forEach(function(a) {
+        var href = a.getAttribute('href');
+        if (!href || isAnchorOnly(href)) return;
+        if (!isLocalMd(href) && !isExternal(href)) return;
+
+        a.addEventListener('mouseenter', function(e) {
+          clearTimeout(hoverTimer);
+          if (popup) return;
+          var x = e.clientX, y = e.clientY;
+          hoverTimer = setTimeout(function() {
+            if (!popup) handleLink(a, x, y, false);
+          }, 300);
+        });
+
+        a.addEventListener('mouseleave', function() {
+          clearTimeout(hoverTimer);
+          if (popup) mouseLeaveTimer = setTimeout(hidePopup, 150);
+        });
+      });
+    })();
+
+  })();
+</script>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markdownr
 version: !ruby/object:Gem::Version
-  version: 0.5.17
+  version: 0.5.19
 platform: ruby
 authors:
 - Brian Dunn
@@ -111,6 +111,7 @@ files:
 - views/directory.erb
 - views/layout.erb
 - views/markdown.erb
+- views/popup_assets.erb
 - views/raw.erb
 - views/search.erb
 - views/setup_info.erb