markdownr 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb86e2f05b5c71f9365fba3fdcf497f1c53439e7b395d13efb674eb36947f3dc
-  data.tar.gz: 3c2d3da0044862746e47d76c386712b8ab8a0f6c1a7c60514e511953e2af5542
+  metadata.gz: aca98df210e2ff9be2ee3291855c8fbff33567421de36ac4f8ae384a72ba852e
+  data.tar.gz: bdf70db5b97981433249badd64f7203fda7abf701d5507661248d755683244c0
 SHA512:
-  metadata.gz: 1aa636326b55bbff250fa04e13f5befadda9791fbabdf175c7c774886d8df793ee4e1ecc93d59a3bc01428eaa26e2c104ab6b831dd0e1323666e970fd64be634
-  data.tar.gz: 1ad0d23592aa3874b519cfa3afbfc310bc0fd12c90c223a54bf4a530e1e7ca7da77d1c00a548210fde5a043ffad2f52460f40a2989cb30b2f900db666ad3fac1
+  metadata.gz: b4b70939c23cbc36194e4471f4f60e34b0110bfcca689542ced01df2c2f19ed3b928c84a9232f44180ff6e70b4c3d82317ec96d8dd2eb2202c7d1fcbbdd9eb14
+  data.tar.gz: 6cabae16ae4ca30e35e2a0e66f9d64794aa1c28a7afac14cead2d529ffac67c07ebf0b8016eb225a3ea5d09e8f16e3b303068be66153f74e856e36e80c1474dc

data/lib/markdown_server/app.rb

@@ -219,6 +219,19 @@ module MarkdownServer
       CONTEXT_LINES = 2  # lines before/after match to send
       MAX_LINE_DISPLAY = 200  # chars before truncating a line
 
+      def search_single_file(file_path, regexes)
+        base = File.realpath(root_dir)
+        content = File.binread(file_path, MAX_FILE_READ_BYTES) rescue return []
+        content.force_encoding("utf-8")
+        return [] unless content.valid_encoding?
+        return [] unless regexes.all? { |re| re.match?(content) }
+
+        relative = file_path.sub("#{base}/", "")
+        lines = content.lines
+        matches = collect_matching_lines(lines, regexes)
+        [{ path: relative, matches: matches }]
+      end
+
       def search_files(dir_path, regexes)
         results = []
         base = File.realpath(root_dir)
@@ -375,10 +388,12 @@ module MarkdownServer
       @query = params[:q].to_s.strip
 
       if requested.empty?
-        search_dir = File.realpath(root_dir)
+        search_path = File.realpath(root_dir)
+        @is_file_search = false
       else
-        search_dir = safe_path(requested)
-        halt 404 unless File.directory?(search_dir)
+        search_path = safe_path(requested)
+        @is_file_search = File.file?(search_path)
+        halt 404 unless @is_file_search || File.directory?(search_path)
       end
 
       @path = requested
@@ -391,7 +406,13 @@ module MarkdownServer
       unless @query.empty?
         begin
           @regexes = compile_regexes(@query)
-          @results = search_files(search_dir, @regexes) if @regexes
+          if @regexes
+            if @is_file_search
+              @results = search_single_file(search_path, @regexes)
+            else
+              @results = search_files(search_path, @regexes)
+            end
+          end
         rescue RegexpError => e
           @error = "Invalid regex: #{e.message}"
         end

data/lib/markdown_server/version.rb

@@ -1,3 +1,3 @@
 module MarkdownServer
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

data/views/directory.erb

@@ -19,7 +19,7 @@
   <h1 class="page-title"><%= h(@title) %></h1>
   <form class="search-form" action="<%= search_form_path(@path) %>" method="get">
     <input type="text" name="q" placeholder="Search files..." value="<%= h(params[:q].to_s) %>">
-    <button type="submit">Search</button>
+
   </form>
 </div>
 

data/views/layout.erb

@@ -29,8 +29,23 @@
     .breadcrumbs {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
       font-size: 0.85rem;
-      margin-bottom: 1.5rem;
       color: #888;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      background: #faf8f4;
+      padding: 0.5rem 2rem;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+      transform: translateY(0);
+      opacity: 1;
+      transition: transform 0.35s ease, opacity 0.35s ease;
+    }
+    .breadcrumbs.hidden {
+      transform: translateY(-100%);
+      opacity: 0;
+      pointer-events: none;
     }
     .breadcrumbs a {
       color: #8b6914;
@@ -39,6 +54,12 @@
     .breadcrumbs a:hover { text-decoration: underline; }
     .breadcrumbs .sep { margin: 0 0.4rem; color: #ccc; }
 
+    /* Spacer to prevent content jumping under fixed breadcrumbs */
+    .breadcrumb-spacer {
+      height: 2.2rem;
+      margin-bottom: 0.3rem;
+    }
+
     /* Page title */
     h1.page-title {
       font-size: 1.6rem;
@@ -416,6 +437,137 @@
     .toc-mobile .toc-h3 { padding-left: 0.8rem; }
     .toc-mobile .toc-h4 { padding-left: 1.4rem; }
 
+    /* TOC drawer (swipe-to-reveal on mobile) */
+    .toc-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 200;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    }
+    .toc-overlay.open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .toc-drawer {
+      display: none;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 280px;
+      max-width: 75vw;
+      background: #faf8f4;
+      z-index: 201;
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      font-size: 0.82rem;
+      line-height: 1.4;
+    }
+    .toc-drawer.open {
+      transform: translateX(0);
+    }
+    .toc-drawer-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.8rem 1rem;
+      border-bottom: 1px solid #e0d8c8;
+      position: sticky;
+      top: 0;
+      background: #faf8f4;
+    }
+    .toc-drawer-title {
+      font-weight: 600;
+      color: #8b6914;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .toc-drawer-close {
+      background: none;
+      border: none;
+      font-size: 1.4rem;
+      color: #888;
+      cursor: pointer;
+      padding: 0 0.2rem;
+      line-height: 1;
+    }
+    .toc-drawer-close:hover {
+      color: #2c2c2c;
+    }
+    .toc-drawer ul {
+      list-style: none;
+      padding: 0.5rem 0;
+      margin: 0;
+    }
+    .toc-drawer li {
+      margin: 0;
+    }
+    .toc-drawer a {
+      color: #666;
+      text-decoration: none;
+      display: block;
+      padding: 0.4rem 1rem;
+      border-left: 3px solid transparent;
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
+    }
+    .toc-drawer a:hover {
+      color: #8b6914;
+      background: #f5f0e4;
+    }
+    .toc-drawer a.active {
+      color: #8b6914;
+      border-left-color: #8b6914;
+      font-weight: 600;
+      background: #fdfcf6;
+    }
+    .toc-drawer .toc-h3 a { padding-left: 1.8rem; font-size: 0.78rem; }
+    .toc-drawer .toc-h4 a { padding-left: 2.6rem; font-size: 0.75rem; }
+
+    .toc-fab {
+      display: none;
+      position: fixed;
+      bottom: 1.2rem;
+      right: 1.2rem;
+      z-index: 199;
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: none;
+      background: #8b6914;
+      color: #fff;
+      font-size: 1.2rem;
+      line-height: 1;
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+      transition: background 0.15s, transform 0.15s;
+    }
+    .toc-fab:hover {
+      background: #6d5210;
+    }
+    .toc-fab:active {
+      transform: scale(0.95);
+    }
+    .toc-fab.hidden {
+      display: none !important;
+    }
+
+    @media (max-width: 768px) {
+      .toc-overlay, .toc-drawer { display: block; }
+      .toc-fab { display: block; }
+    }
+
     /* Title bar with search */
     .title-bar {
       display: flex;
@@ -441,7 +593,7 @@
       font-size: 0.82rem;
       padding: 0.3rem 0.6rem;
       border: 1px solid #d4b96a;
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px;
       background: #fdfcf9;
       color: #2c2c2c;
       width: 180px;
@@ -454,22 +606,6 @@
     .search-form input[type="text"]::placeholder {
       color: #bbb;
     }
-    .search-form button {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-      font-size: 0.82rem;
-      padding: 0.3rem 0.6rem;
-      border: 1px solid #d4b96a;
-      border-left: none;
-      border-radius: 0 4px 4px 0;
-      background: #f5f0e4;
-      color: #8b6914;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-    .search-form button:hover {
-      background: #e8dfc8;
-    }
-
     /* Search results */
     .search-summary {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
@@ -516,10 +652,20 @@
     }
     .search-context-group {
       padding: 0.4rem 0;
+      display: block;
     }
     .search-context-group + .search-context-group {
       border-top: 1px dashed #555;
     }
+    a.search-context-link {
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    a.search-context-link:hover {
+      background: rgba(212, 185, 106, 0.12);
+    }
     .search-line {
       display: flex;
       padding: 0 0.8rem;
@@ -601,7 +747,7 @@
 
     @media (max-width: 480px) {
       .container { padding: 0.8rem; }
-      .breadcrumbs { font-size: 0.8rem; }
+      .breadcrumbs { font-size: 0.8rem; padding: 0.5rem 0.8rem; }
       .md-content { font-size: 0.95rem; }
       .md-content table { font-size: 0.8rem; }
     }
@@ -614,18 +760,91 @@
         <% @crumbs.each_with_index do |crumb, i| %>
           <% if i > 0 %><span class="sep">/</span><% end %>
           <% if i == @crumbs.length - 1 %>
-            <%= h(crumb[:name]) %>
+            <% if @download_href %><a href="#"><%= h(crumb[:name]) %></a><% else %><%= h(crumb[:name]) %><% end %>
           <% else %>
             <a href="<%= crumb[:href] %>"><%= h(crumb[:name]) %></a>
           <% end %>
         <% end %>
       </nav>
+      <div class="breadcrumb-spacer"></div>
     <% end %>
 
     <%= yield %>
   </div>
 
   <script>
+    // Breadcrumb auto-hide: visible on load for 5s, hides on scroll down,
+    // shows for 5s on scroll up then hides again
+    (function() {
+      var bc = document.querySelector('.breadcrumbs');
+      if (!bc) return;
+
+      var hideTimer = null;
+      var hasScrolledDown = false;
+      var initialized = false;
+      var lastY = 0;
+
+      function show() {
+        bc.classList.remove('hidden');
+        clearTimeout(hideTimer);
+        hideTimer = setTimeout(function() {
+          if (hasScrolledDown) bc.classList.add('hidden');
+        }, 5000);
+      }
+
+      function hide() {
+        clearTimeout(hideTimer);
+        bc.classList.add('hidden');
+      }
+
+      function init() {
+        if (initialized) return;
+        initialized = true;
+        // Snapshot scroll position after any restore has happened
+        lastY = window.scrollY;
+        if (lastY > 0) {
+          hasScrolledDown = true;
+          show(); // visible for 5s then auto-hide
+        }
+        // If at top, breadcrumbs stay visible (no timer)
+      }
+
+      // Defer init so scroll-restore and _find settle first
+      setTimeout(init, 200);
+
+      window.addEventListener('scroll', function() {
+        if (!initialized) return;
+        var y = window.scrollY;
+        var delta = y - lastY;
+        lastY = y;
+
+        if (y <= 0) {
+          // At top of page — always show, no auto-hide
+          hasScrolledDown = false;
+          clearTimeout(hideTimer);
+          bc.classList.remove('hidden');
+          return;
+        }
+
+        if (delta > 0) {
+          // Scrolling down
+          hasScrolledDown = true;
+          hide();
+        } else if (delta < 0) {
+          // Scrolling up
+          show();
+        }
+      }, { passive: true });
+
+      // Show breadcrumbs when clicking/tapping non-interactive content
+      document.addEventListener('click', function(e) {
+        var tag = e.target.tagName;
+        if (e.target.closest('a, button, input, textarea, select, summary, .toc-sidebar, .toc-mobile')) return;
+        if (tag === 'A' || tag === 'BUTTON' || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+        if (hasScrolledDown) show();
+      });
+    })();
+
     // Wrap tables in scrollable containers
     document.querySelectorAll('.md-content table').forEach(function(table) {
       if (!table.parentElement.classList.contains('table-wrap')) {
@@ -636,33 +855,285 @@
       }
     });
 
-    // TOC scroll spy — highlight the nearest heading
+    // TOC scroll spy — highlight the nearest heading (sidebar + drawer)
     (function() {
-      var tocLinks = document.querySelectorAll('.toc-sidebar a');
-      if (!tocLinks.length) return;
+      var sidebarLinks = document.querySelectorAll('.toc-sidebar a');
+      var drawerLinks = document.querySelectorAll('.toc-drawer a');
+      if (!sidebarLinks.length && !drawerLinks.length) return;
 
+      var refLinks = sidebarLinks.length ? sidebarLinks : drawerLinks;
       var headings = [];
-      tocLinks.forEach(function(link) {
+      refLinks.forEach(function(link) {
         var id = link.getAttribute('href').slice(1);
         var el = document.getElementById(id);
-        if (el) headings.push({ el: el, link: link });
+        if (el) headings.push({ el: el, id: id });
       });
 
       function update() {
         var scrollY = window.scrollY + 80;
-        var current = null;
+        var currentId = null;
         for (var i = 0; i < headings.length; i++) {
           if (headings[i].el.offsetTop <= scrollY) {
-            current = headings[i];
+            currentId = headings[i].id;
+          }
+        }
+        [sidebarLinks, drawerLinks].forEach(function(links) {
+          links.forEach(function(l) {
+            if (l.getAttribute('href').slice(1) === currentId) {
+              l.classList.add('active');
+            } else {
+              l.classList.remove('active');
+            }
+          });
+        });
+        // Auto-scroll drawer to active link if drawer is open
+        var drawer = document.getElementById('toc-drawer');
+        if (drawer && drawer.classList.contains('open')) {
+          var activeLink = drawer.querySelector('a.active');
+          if (activeLink) {
+            activeLink.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
           }
         }
-        tocLinks.forEach(function(l) { l.classList.remove('active'); });
-        if (current) current.link.classList.add('active');
       }
 
       window.addEventListener('scroll', update, { passive: true });
       update();
+      window._tocScrollSpyUpdate = update;
     })();
+
+    // TOC drawer — swipe gestures and controls
+    (function() {
+      var drawer = document.getElementById('toc-drawer');
+      var overlay = document.getElementById('toc-overlay');
+      var fab = document.getElementById('toc-fab');
+      if (!drawer || !overlay) return;
+
+      var isOpen = false;
+      var touchStartX = 0;
+      var touchStartY = 0;
+      var touchCurrentX = 0;
+      var isDragging = false;
+
+      function openDrawer() {
+        if (isOpen) return;
+        isOpen = true;
+        overlay.style.display = 'block';
+        // Force reflow before adding class for transition
+        overlay.offsetHeight;
+        overlay.classList.add('open');
+        drawer.classList.add('open');
+        document.body.style.overflow = 'hidden';
+        if (fab) fab.classList.add('hidden');
+        if (window._tocScrollSpyUpdate) window._tocScrollSpyUpdate();
+        // Scroll drawer to active link
+        var activeLink = drawer.querySelector('a.active');
+        if (activeLink) {
+          setTimeout(function() {
+            activeLink.scrollIntoView({ block: 'center', behavior: 'smooth' });
+          }, 100);
+        }
+      }
+
+      function closeDrawer() {
+        if (!isOpen) return;
+        isOpen = false;
+        overlay.classList.remove('open');
+        drawer.classList.remove('open');
+        document.body.style.overflow = '';
+        if (fab) fab.classList.remove('hidden');
+        setTimeout(function() {
+          if (!isOpen) overlay.style.display = 'none';
+        }, 300);
+      }
+
+      // Close button
+      var closeBtn = document.getElementById('toc-drawer-close');
+      if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
+
+      // Overlay tap closes drawer
+      overlay.addEventListener('click', closeDrawer);
+
+      // FAB opens drawer
+      if (fab) fab.addEventListener('click', openDrawer);
+
+      // Heading links close drawer and navigate
+      drawer.querySelectorAll('a').forEach(function(link) {
+        link.addEventListener('click', function() {
+          closeDrawer();
+        });
+      });
+
+      // Swipe detection
+      document.addEventListener('touchstart', function(e) {
+        if (e.touches.length !== 1) return;
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+        touchCurrentX = touchStartX;
+        isDragging = false;
+      }, { passive: true });
+
+      document.addEventListener('touchmove', function(e) {
+        if (e.touches.length !== 1) return;
+        touchCurrentX = e.touches[0].clientX;
+        var dx = touchCurrentX - touchStartX;
+        var dy = e.touches[0].clientY - touchStartY;
+
+        // Only consider horizontal swipes
+        if (!isDragging && Math.abs(dx) > 10 && Math.abs(dy) < Math.abs(dx)) {
+          isDragging = true;
+        }
+
+        // Interactive drag on drawer when open
+        if (isDragging && isOpen && dx > 0) {
+          drawer.style.transition = 'none';
+          drawer.style.transform = 'translateX(' + Math.min(dx, drawer.offsetWidth) + 'px)';
+          var progress = Math.min(dx / drawer.offsetWidth, 1);
+          overlay.style.opacity = 1 - progress;
+        }
+      }, { passive: true });
+
+      document.addEventListener('touchend', function(e) {
+        var dx = touchCurrentX - touchStartX;
+        var dy = Math.abs(e.changedTouches[0].clientY - touchStartY);
+
+        // Reset any inline styles from dragging
+        drawer.style.transition = '';
+        drawer.style.transform = '';
+        overlay.style.opacity = '';
+
+        if (!isDragging) return;
+        isDragging = false;
+
+        var threshold = 50;
+        if (dy > 80) return; // Too vertical
+
+        if (!isOpen && dx < -threshold) {
+          // Swipe left — open drawer
+          openDrawer();
+        } else if (isOpen && dx > threshold) {
+          // Swipe right — close drawer
+          closeDrawer();
+        } else if (isOpen && dx > 0) {
+          // Didn't swipe far enough — snap back open
+          openDrawer();
+        }
+      }, { passive: true });
+    })();
+
+    // Jump to search match from _find query param
+    (function() {
+      var content = document.querySelector('.md-content');
+      if (!content) return;
+
+      var params = new URLSearchParams(location.search);
+      var findText = params.get('_find');
+      if (!findText) return;
+
+      // Mark that _find is active so scroll-restore doesn't override
+      window._findActive = true;
+
+      // Strip markdown syntax to get plain text words for matching
+      var stripped = findText
+        .replace(/^#{1,6}\s+/, '')       // heading markers
+        .replace(/\*{1,3}([^*]+)\*{1,3}/g, '$1')  // bold/italic
+        .replace(/_{1,3}([^_]+)_{1,3}/g, '$1')
+        .replace(/~~([^~]+)~~/g, '$1')   // strikethrough
+        .replace(/`([^`]+)`/g, '$1')     // inline code
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')  // links
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1') // images
+        .trim();
+
+      // Extract significant words (3+ chars) for fuzzy matching
+      var words = stripped.toLowerCase().split(/\s+/).filter(function(w) {
+        return w.replace(/[^a-z0-9]/g, '').length >= 3;
+      });
+
+      if (words.length === 0) {
+        // Fallback: use whatever non-whitespace we have
+        words = stripped.toLowerCase().split(/\s+/).filter(function(w) { return w.length > 0; });
+      }
+      if (words.length === 0) return;
+
+      // Walk block-level elements and score by how many words match
+      var blocks = content.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote, pre, dt, dd');
+      var bestEl = null;
+      var bestScore = 0;
+
+      for (var i = 0; i < blocks.length; i++) {
+        var text = blocks[i].textContent.toLowerCase();
+        var score = 0;
+        for (var j = 0; j < words.length; j++) {
+          if (text.indexOf(words[j]) !== -1) score++;
+        }
+        if (score > bestScore) {
+          bestScore = score;
+          bestEl = blocks[i];
+        }
+      }
+
+      if (bestEl) {
+        requestAnimationFrame(function() {
+          // Scroll with offset so a line or two above is visible
+          var rect = bestEl.getBoundingClientRect();
+          var offset = Math.max(0, window.scrollY + rect.top - 120);
+          window.scrollTo({ top: offset });
+
+          // Brief highlight flash
+          bestEl.style.transition = 'background 0.3s';
+          bestEl.style.background = 'rgba(212, 185, 106, 0.3)';
+          bestEl.style.borderRadius = '4px';
+          setTimeout(function() {
+            bestEl.style.background = '';
+            setTimeout(function() {
+              bestEl.style.transition = '';
+              bestEl.style.borderRadius = '';
+            }, 300);
+          }, 2000);
+        });
+      }
+    })();
+
+    // Remember scroll position by nearest heading, persist in localStorage
+    (function() {
+      var content = document.querySelector('.md-content');
+      if (!content) return;
+
+      var headings = content.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
+      if (!headings.length) return;
+
+      var key = 'scroll:' + location.pathname;
+
+      // Restore saved heading position on load (skip if _find is active)
+      var savedId = localStorage.getItem(key);
+      if (savedId && !window._findActive) {
+        var target = document.getElementById(savedId);
+        if (target) {
+          // Use requestAnimationFrame to ensure layout is settled
+          requestAnimationFrame(function() {
+            target.scrollIntoView();
+          });
+        }
+      }
+
+      // Save current heading on scroll (debounced)
+      var timer;
+      window.addEventListener('scroll', function() {
+        clearTimeout(timer);
+        timer = setTimeout(function() {
+          var scrollY = window.scrollY + 80;
+          var current = null;
+          for (var i = 0; i < headings.length; i++) {
+            if (headings[i].offsetTop <= scrollY) {
+              current = headings[i];
+            }
+          }
+          if (current && current.id) {
+            localStorage.setItem(key, current.id);
+          }
+        }, 200);
+      }, { passive: true });
+    })();
+
   </script>
 </body>
 </html>

data/views/markdown.erb

@@ -1,9 +1,8 @@
-<% _parent = parent_dir_path(@crumbs.map { |c| c[:name] }.drop(1).join("/")) %>
+<% _file_path = @crumbs.map { |c| c[:name] }.drop(1).join("/") %>
 <div class="title-bar">
   <h1 class="page-title"><%= h(@title) %></h1>
-  <form class="search-form" action="<%= search_form_path(_parent) %>" method="get">
-    <input type="text" name="q" placeholder="Search files..." value="">
-    <button type="submit">Search</button>
+  <form class="search-form" action="<%= search_form_path(_file_path) %>" method="get">
+    <input type="text" name="q" placeholder="Search this document..." value="">
   </form>
 </div>
 
@@ -22,6 +21,22 @@
       <% end %>
     </ul>
   </details>
+
+  <button class="toc-fab" id="toc-fab" aria-label="Table of Contents">&#9776;</button>
+  <div class="toc-overlay" id="toc-overlay"></div>
+  <nav class="toc-drawer" id="toc-drawer">
+    <div class="toc-drawer-header">
+      <span class="toc-drawer-title">Contents</span>
+      <button class="toc-drawer-close" id="toc-drawer-close" aria-label="Close">&times;</button>
+    </div>
+    <ul>
+      <% @toc.each do |entry| %>
+        <li class="toc-h<%= entry[:level] %>">
+          <a href="#<%= h(entry[:id]) %>"><%= h(entry[:text]) %></a>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
 <% end %>
 
 <div class="<%= @has_toc ? 'page-with-toc' : '' %>">

data/views/raw.erb

@@ -3,7 +3,7 @@
   <h1 class="page-title"><%= h(@title) %></h1>
   <form class="search-form" action="<%= search_form_path(_parent) %>" method="get">
     <input type="text" name="q" placeholder="Search files..." value="">
-    <button type="submit">Search</button>
+
   </form>
 </div>
 

data/views/search.erb

@@ -1,8 +1,8 @@
 <div class="title-bar">
   <h1 class="page-title">Search: <%= h(@title) %></h1>
   <form class="search-form" action="<%= search_form_path(@path) %>" method="get">
-    <input type="text" name="q" placeholder="Search files..." value="<%= h(@query) %>">
-    <button type="submit">Search</button>
+    <input type="text" name="q" placeholder="<%= @is_file_search ? 'Search this document...' : 'Search files...' %>" value="<%= h(@query) %>">
+
   </form>
 </div>
 
@@ -12,6 +12,8 @@
   <div class="search-summary">
     <% if @results.empty? %>
       No results for "<%= h(@query) %>"
+    <% elsif @is_file_search %>
+      <%= @results.first[:matches].length %> match<%= @results.first[:matches].length == 1 ? "" : "es" %> for "<%= h(@query) %>"
     <% else %>
       <%= @results.length %><%= @results.length >= 100 ? "+" : "" %> file<%= @results.length == 1 ? "" : "s" %> matching "<%= h(@query) %>"
     <% end %>
@@ -19,19 +21,27 @@
 <% end %>
 
 <% if @results.empty? && @error.nil? && !@query.empty? %>
-  <div class="search-no-results">No matching files found.</div>
+  <div class="search-no-results"><%= @is_file_search ? 'No matches found in this document.' : 'No matching files found.' %></div>
 <% end %>
 
 <% @results.each do |result| %>
   <div class="search-result">
-    <div class="search-result-path">
-      <span class="icon"><%= icon_for(File.basename(result[:path]), false) %></span>
-      <a href="/browse/<%= result[:path].split("/").map { |p| encode_path_component(p) }.join("/") %>"><%= h(result[:path]) %></a>
-    </div>
+    <% unless @is_file_search %>
+      <div class="search-result-path">
+        <span class="icon"><%= icon_for(File.basename(result[:path]), false) %></span>
+        <a href="/browse/<%= result[:path].split("/").map { |p| encode_path_component(p) }.join("/") %>"><%= h(result[:path]) %></a>
+      </div>
+    <% end %>
     <% unless result[:matches].empty? %>
+      <% browse_href = "/browse/" + result[:path].split("/").map { |p| encode_path_component(p) }.join("/") %>
       <div class="search-context">
         <% result[:matches].each do |group| %>
-          <div class="search-context-group">
+          <% match_line = group[:lines].find { |l| l[:distance] == 0 } %>
+          <% if match_line %>
+            <a class="search-context-group search-context-link" href="<%= browse_href %>?_find=<%= CGI.escape(match_line[:text]) %>">
+          <% else %>
+            <div class="search-context-group">
+          <% end %>
             <% group[:lines].each do |line| %>
               <% css_class = line[:distance] == 0 ? "search-line match-line" : "search-line ctx-#{line[:distance]}" %>
               <div class="<%= css_class %>">
@@ -39,7 +49,11 @@
                 <span class="search-line-text"><%= highlight_search_line(line[:text], @regexes, line[:distance] == 0) %></span>
               </div>
             <% end %>
-          </div>
+          <% if match_line %>
+            </a>
+          <% else %>
+            </div>
+          <% end %>
         <% end %>
       </div>
     <% end %>

metadata

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