rdoc 6.17.0 → 7.0.3

data/lib/rdoc/generator/template/aliki/_header.rhtml

@@ -7,13 +7,13 @@
   <div class="navbar-search navbar-search-desktop" role="search">
     <form action="#" method="get" accept-charset="utf-8">
       <input id="search-field" role="combobox" aria-label="Search"
-             aria-autocomplete="list" aria-controls="search-results"
+             aria-autocomplete="list" aria-controls="search-results-desktop"
              type="text" name="search" placeholder="Search (/) for a class, method..."
              spellcheck="false" autocomplete="off"
              title="Type to search, Up and Down to navigate, Enter to load">
-      <ul id="search-results" aria-label="Search Results"
+      <ul id="search-results-desktop" aria-label="Search Results"
           aria-busy="false" aria-expanded="false"
-          aria-atomic="false" class="initially-hidden"></ul>
+          aria-atomic="false" class="initially-hidden search-results"></ul>
     </form>
   </div>
 
@@ -47,7 +47,7 @@
     <div class="search-modal-body">
       <ul id="search-results-mobile" aria-label="Search Results"
           aria-busy="false" aria-expanded="false"
-          aria-atomic="false" class="search-modal-results initially-hidden"></ul>
+          aria-atomic="false" class="search-results search-modal-results initially-hidden"></ul>
       <div class="search-modal-empty">
         <p>No recent searches</p>
       </div>

data/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml

@@ -35,7 +35,7 @@
                 <%= h f.page_name %>
               </a>
             </li>
-            <%- next %>
+            <%- next -%>
           <%- end %>
 
           <li>

data/lib/rdoc/generator/template/aliki/_sidebar_search.rhtml

@@ -2,14 +2,14 @@
   <form action="#" method="get" accept-charset="utf-8">
     <div id="search-field-wrapper">
       <input id="search-field" role="combobox" aria-label="Search"
-             aria-autocomplete="list" aria-controls="search-results"
+             aria-autocomplete="list" aria-controls="search-results-desktop"
              type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"
              autocomplete="off"
              title="Type to search, Up and Down to navigate, Enter to load">
     </div>
 
-    <ul id="search-results" aria-label="Search Results"
+    <ul id="search-results-desktop" aria-label="Search Results"
         aria-busy="false" aria-expanded="false"
-        aria-atomic="false" class="initially-hidden"></ul>
+        aria-atomic="false" class="initially-hidden search-results"></ul>
   </form>
 </div>

data/lib/rdoc/generator/template/aliki/class.rhtml

@@ -3,7 +3,7 @@
 <%= render '_header.rhtml' %>
 <%= render '_sidebar_toggle.rhtml' %>
 
-<nav id="navigation" role="navigation">
+<nav id="navigation" role="navigation" hidden>
   <%= render '_sidebar_pages.rhtml' %>
   <%= render '_sidebar_sections.rhtml' %>
   <%= render '_sidebar_ancestors.rhtml' %>
@@ -110,10 +110,10 @@
     </section>
     <%- end %>
 
-    <%- klass.methods_by_type(section).each do |type, visibilities|
-       next if visibilities.empty?
-       visibilities.each do |visibility, methods|
-         next if methods.empty? %>
+    <%- klass.methods_by_type(section).each do |type, visibilities| %>
+    <%- next if visibilities.empty? %>
+    <%- visibilities.each do |visibility, methods| %>
+    <%- next if methods.empty? %>
      <section id="<%= visibility %>-<%= type %>-<%= section.aref %>-method-details" class="method-section anchor-link">
        <header>
          <h3 id="<%= visibility %>-<%= type %>-methods"><a href="#<%= visibility %>-<%= type %>-methods"><%= visibility.to_s.capitalize %> <%= type.capitalize %> Methods</a></h3>
@@ -156,15 +156,13 @@
               <summary>Source</summary>
             </details>
           </div>
+          <div class="method-source-code" id="<%= method.html_name %>-source">
+            <pre class="<%= method.source_language %>" data-language="<%= method.source_language %>"><%= method.markup_code %></pre>
+          </div>
         <%- end %>
 
         <%- unless method.skip_description? then %>
         <div class="method-description">
-          <%- if method.token_stream then %>
-          <div class="method-source-code" id="<%= method.html_name %>-source">
-            <pre class="<%= method.source_language %>" data-language="<%= method.source_language %>"><%= method.markup_code %></pre>
-          </div>
-          <%- end %>
           <%- if method.mixin_from then %>
             <div class="mixin-from">
               <%= method.singleton ? "Extended" : "Included" %> from <a href="<%= klass.aref_to(method.mixin_from.path) %>"><%= method.mixin_from.full_name %></a>
@@ -208,8 +206,8 @@
 
     <%- end %>
     </section>
-  <%- end
-     end %>
+  <%- end %>
+  <%- end %>
   </section>
 <%- end %>
 </main>

data/lib/rdoc/generator/template/aliki/css/rdoc.css

@@ -85,6 +85,16 @@
   --color-th-background: var(--color-neutral-100);
   --color-td-background: var(--color-neutral-50);
 
+  /* Search Type Badge Colors */
+  --color-search-type-class-bg: #e6f0ff;
+  --color-search-type-class-text: #0050a0;
+  --color-search-type-module-bg: #e6ffe6;
+  --color-search-type-module-text: #060;
+  --color-search-type-constant-bg: #fff0e6;
+  --color-search-type-constant-text: #995200;
+  --color-search-type-method-bg: #f0e6ff;
+  --color-search-type-method-text: #5200a0;
+
   /* RGBA Colors (theme-agnostic) */
   --color-overlay: rgb(0 0 0 / 50%);
   --color-emphasis-bg: rgb(255 111 97 / 10%);
@@ -142,6 +152,7 @@
 
   /* Shadows */
   --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --shadow-md: 0 2px 8px rgb(0 0 0 / 10%);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
 
@@ -158,6 +169,13 @@
   /* Transitions */
   --transition-fast: 150ms ease-in-out;
   --transition-base: 200ms ease-in-out;
+  --transition-slow: 350ms ease-in-out;
+  --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Animation Durations */
+  --duration-fast: 250ms;
+  --duration-base: 300ms;
+  --duration-medium: 350ms;
 
   /* Z-Index Scale */
   --z-fixed: 300;
@@ -202,6 +220,7 @@
   --color-accent-primary: var(--color-primary-500);
   --color-accent-hover: var(--color-primary-400);
   --color-accent-subtle: rgb(235 84 79 / 10%);
+  --color-accent-subtle-hover: rgb(235 84 79 / 20%);
   --color-code-bg: var(--color-neutral-800);
   --color-code-border: var(--color-neutral-700);
   --color-nav-bg: var(--color-neutral-900);
@@ -209,8 +228,19 @@
   --color-th-background: var(--color-background-tertiary);
   --color-td-background: var(--color-background-secondary);
 
+  /* Search Type Badge Colors - Dark Theme */
+  --color-search-type-class-bg: #1e3a5f;
+  --color-search-type-class-text: #93c5fd;
+  --color-search-type-module-bg: #14532d;
+  --color-search-type-module-text: #86efac;
+  --color-search-type-constant-bg: #451a03;
+  --color-search-type-constant-text: #fcd34d;
+  --color-search-type-method-bg: #3b0764;
+  --color-search-type-method-text: #d8b4fe;
+
   /* Dark theme shadows (slightly more subtle) */
   --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
+  --shadow-md: 0 2px 8px rgb(0 0 0 / 40%);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 40%), 0 8px 10px -6px rgb(0 0 0 / 40%);
 
@@ -291,7 +321,12 @@ pre {
   border-radius: var(--radius-sm);
   cursor: pointer;
   opacity: 0.6;
-  transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
+  transition:
+    opacity var(--transition-fast),
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -305,10 +340,18 @@ pre {
   opacity: 1;
   background: var(--color-background-tertiary);
   border-color: var(--color-border-emphasis);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.copy-code-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
 }
 
 .copy-code-button:active {
-  transform: scale(0.95);
+  transform: scale(0.92);
+  box-shadow: none;
 }
 
 .copy-code-button svg {
@@ -320,7 +363,7 @@ pre {
   stroke-linecap: round;
   stroke-linejoin: round;
   color: var(--color-text-secondary);
-  transition: color var(--transition-fast);
+  transition: color var(--transition-fast), transform var(--transition-base);
 }
 
 .copy-code-button:hover svg {
@@ -457,7 +500,11 @@ header.top-navbar .navbar-search form {
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    transform var(--transition-fast);
   font-size: var(--font-size-lg);
   line-height: 1;
   width: 2.5rem;
@@ -468,6 +515,7 @@ header.top-navbar .navbar-search form {
   background: var(--color-background-secondary);
   border-color: var(--color-accent-primary);
   color: var(--color-accent-primary);
+  transform: scale(1.05);
 }
 
 .theme-toggle:focus {
@@ -476,13 +524,17 @@ header.top-navbar .navbar-search form {
   box-shadow: 0 0 0 3px var(--color-accent-subtle);
 }
 
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
 .theme-toggle-icon {
   display: inline-block;
-  transition: transform var(--transition-base);
+  transition: transform var(--duration-base) var(--ease-out-smooth);
 }
 
 .theme-toggle:hover .theme-toggle-icon {
-  transform: rotate(20deg);
+  transform: rotate(15deg) scale(1.1);
 }
 
 /* Mobile navbar */
@@ -537,11 +589,33 @@ nav {
   background: var(--color-nav-bg);
   color: var(--color-nav-text);
   overflow: hidden auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   position: sticky;
   top: var(--layout-header-height);
   height: calc(100vh - var(--layout-header-height));
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+/* Custom scrollbar for WebKit browsers */
+nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+nav::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+}
+
+nav::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-emphasis);
 }
 
 /* Mobile navigation */
@@ -615,6 +689,17 @@ nav ul li {
   line-height: var(--line-height-relaxed);
 }
 
+nav ul li a {
+  transition:
+    color var(--transition-fast),
+    transform var(--transition-fast),
+    padding var(--transition-fast);
+}
+
+nav ul li a:hover {
+  padding-left: var(--space-1);
+}
+
 nav ul ul {
   padding-left: var(--space-5);
   margin-top: var(--space-2);
@@ -632,6 +717,17 @@ nav a {
   text-decoration: none;
 }
 
+/* Truncation for direct nav links (not links inside code tags) */
+nav .nav-list > li > a,
+nav .nav-section > ul > li > a,
+nav .nav-section > dl > dd > a {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 nav footer {
   padding: var(--space-4);
   border-top: 1px solid var(--color-border-default);
@@ -735,6 +831,11 @@ nav .nav-section-title {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: inherit;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 nav .nav-section-chevron {
@@ -1113,19 +1214,54 @@ main .anchor-link:target {
 main .method-source-code {
   visibility: hidden;
   max-height: 0;
-  overflow: auto;
-  transition: max-height var(--transition-base), visibility var(--transition-base);
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition:
+    max-height var(--duration-medium) var(--ease-out-smooth),
+    visibility var(--duration-medium),
+    opacity var(--duration-fast) ease-out,
+    transform var(--duration-fast) ease-out;
 }
 
 main .method-source-code pre {
   border-color: var(--color-accent-hover);
+  border-left: 3px solid var(--color-accent-primary);
   width: 100%;
   box-sizing: border-box;
+  transition: border-color var(--transition-fast);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+main .method-source-code pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+main .method-source-code pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+main .method-source-code pre::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-sm);
+}
+
+main .method-source-code pre::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-emphasis);
+}
+
+main .method-source-code pre::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 main .method-source-code.active-menu {
   visibility: visible;
   max-height: 100vh;
+  overflow: auto;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 main .method-description .method-calls-super {
@@ -1165,10 +1301,47 @@ main .method-heading .method-args {
 }
 
 main .method-controls {
-  line-height: 20px;
   float: right;
-  color: var(--color-accent-hover);
+}
+
+main .method-controls summary {
+  display: inline-block;
+  line-height: 20px;
+  color: var(--color-accent-primary);
   cursor: pointer;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background: var(--color-accent-subtle);
+  border: 1px solid transparent;
+  transition:
+    color var(--transition-fast),
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast);
+  user-select: none;
+  -webkit-user-select: none;
+  list-style: none;
+}
+
+main .method-controls summary::-webkit-details-marker {
+  display: none;
+}
+
+main .method-controls summary:hover {
+  background: var(--color-primary-100);
+  border-color: var(--color-primary-300);
+  transform: translateY(-1px);
+}
+
+main .method-controls summary:active {
+  transform: scale(0.96);
+}
+
+[data-theme="dark"] main .method-controls summary:hover {
+  background: var(--color-accent-subtle-hover);
+  border-color: var(--color-primary-500);
 }
 
 main .method-description,
@@ -1637,55 +1810,88 @@ footer.site-footer .footer-bottom:first-child {
 }
 
 /* Search Results */
-#search-results {
+.search-results {
   font-family: var(--font-primary);
   font-weight: 300;
 }
 
-#search-results a {
+.search-results a {
   color: var(--color-text-primary);
 }
 
-#search-results a:hover {
+.search-results a:hover {
   color: var(--color-accent-primary);
 }
 
-#search-results .search-match {
+.search-results .search-match {
   font-family: var(--font-heading);
   font-weight: normal;
 }
 
-#search-results .search-selected {
+.search-results .search-selected {
   background: var(--color-code-bg);
   border-bottom: 1px solid transparent;
 }
 
-#search-results li {
+.search-results li {
   list-style: none;
   border-bottom: 1px solid var(--color-border-default);
   margin-bottom: 0.5em;
 }
 
-#search-results li:last-child {
+.search-results li:last-child {
   border-bottom: none;
   margin-bottom: 0;
 }
 
-#search-results li p {
+.search-results li p {
   padding: 0;
   margin: 0.5em;
 }
 
-#search-results .search-namespace {
+.search-results .search-namespace {
   font-weight: bold;
 }
 
-#search-results li em {
+.search-results .search-type {
+  display: inline-block;
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  vertical-align: middle;
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.search-results .search-type-class {
+  background: var(--color-search-type-class-bg);
+  color: var(--color-search-type-class-text);
+}
+
+.search-results .search-type-module {
+  background: var(--color-search-type-module-bg);
+  color: var(--color-search-type-module-text);
+}
+
+.search-results .search-type-constant {
+  background: var(--color-search-type-constant-bg);
+  color: var(--color-search-type-constant-text);
+}
+
+.search-results .search-type-instance-method,
+.search-results .search-type-class-method {
+  background: var(--color-search-type-method-bg);
+  color: var(--color-search-type-method-text);
+}
+
+.search-results li em {
   background-color: var(--color-search-highlight-bg);
   font-style: normal;
 }
 
-#search-results pre {
+.search-results pre {
   margin: 0.5em;
   font-family: var(--font-code);
 }
@@ -1712,7 +1918,7 @@ header.top-navbar #search-field::placeholder {
 }
 
 /* Search results dropdown in navbar */
-header.top-navbar #search-results {
+header.top-navbar #search-results-desktop {
   position: absolute;
   top: calc(100% + var(--space-2));
   left: 0;
@@ -1728,10 +1934,10 @@ header.top-navbar #search-results {
   padding: 0;
 }
 
-header.top-navbar #search-results.initially-hidden {
+header.top-navbar #search-results-desktop.initially-hidden {
   display: none;
 }
 
-header.top-navbar #search-results[aria-expanded="false"] {
+header.top-navbar #search-results-desktop[aria-expanded="false"] {
   display: none;
 }

data/lib/rdoc/generator/template/aliki/index.rhtml

@@ -3,7 +3,7 @@
 <%= render '_header.rhtml' %>
 <%= render '_sidebar_toggle.rhtml' %>
 
-<nav id="navigation" role="navigation">
+<nav id="navigation" role="navigation" hidden>
   <%= render '_sidebar_pages.rhtml' %>
   <%= render '_sidebar_classes.rhtml' %>
 </nav>

data/lib/rdoc/generator/template/aliki/js/aliki.js

@@ -28,7 +28,7 @@ function createSearchInstance(input, result) {
 
   result.classList.remove("initially-hidden");
 
-  const search = new Search(search_data, input, result);
+  const search = new SearchController(search_data, input, result);
 
   search.renderItem = function(result) {
     const li = document.createElement('li');
@@ -40,8 +40,12 @@ function createSearchInstance(input, result) {
       html += `<span class="params">${result.params}</span>`;
     html += '</a>';
 
-    if (result.namespace)
-      html += `<p class="search-namespace">${this.hlt(result.namespace)}`;
+    // Add type indicator
+    if (result.type) {
+      const typeLabel = this.formatType(result.type);
+      const typeClass = result.type.replace(/_/g, '-');
+      html += `<span class="search-type search-type-${this.escapeHTML(typeClass)}">${typeLabel}</span>`;
+    }
 
     if (result.snippet)
       html += `<div class="search-snippet">${result.snippet}</div>`;
@@ -51,16 +55,19 @@ function createSearchInstance(input, result) {
     return li;
   }
 
+  search.formatType = function(type) {
+    const typeLabels = {
+      'class': 'class',
+      'module': 'module',
+      'constant': 'const',
+      'instance_method': 'method',
+      'class_method': 'method'
+    };
+    return typeLabels[type] || type;
+  }
+
   search.select = function(result) {
-    let href = result.firstChild.firstChild.href;
-    const query = this.input.value;
-    if (query) {
-      const url = new URL(href, window.location.origin);
-      url.searchParams.set('q', query);
-      url.searchParams.set('nav', '0');
-      href = url.toString();
-    }
-    window.location.href = href;
+    window.location.href = result.firstChild.firstChild.href;
   }
 
   search.scrollIntoView = search.scrollInWindow;
@@ -70,7 +77,7 @@ function createSearchInstance(input, result) {
 
 function hookSearch() {
   const input  = document.querySelector('#search-field');
-  const result = document.querySelector('#search-results');
+  const result = document.querySelector('#search-results-desktop');
 
   if (!input || !result) return; // Exit if search elements not found
 
@@ -82,15 +89,27 @@ function hookSearch() {
   const search = createSearchInstance(input, result);
   if (!search) return;
 
+  // Hide search results when clicking outside the search area
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.navbar-search-desktop')) {
+      search.hide();
+    }
+  });
+
+  // Show search results when focusing on input (if there's a query)
+  input.addEventListener('focus', () => {
+    if (input.value.trim()) {
+      search.show();
+    }
+  });
+
   // Check for ?q= URL parameter and trigger search automatically
   if (typeof URLSearchParams !== 'undefined') {
     const urlParams = new URLSearchParams(window.location.search);
     const queryParam = urlParams.get('q');
     if (queryParam) {
-      const navParam = urlParams.get('nav');
-      const autoSelect = navParam !== '0';
       input.value = queryParam;
-      search.search(queryParam, autoSelect);
+      search.search(queryParam, false);
     }
   }
 }
@@ -143,9 +162,12 @@ function hookSidebar() {
   });
 
   const isSmallViewport = window.matchMedia("(max-width: 1023px)").matches;
-  if (isSmallViewport) {
-    closeNav();
 
+  // The sidebar is hidden by default with the `hidden` attribute
+  // On large viewports, we display the sidebar with JavaScript
+  // This is better than the opposite approach of hiding it with JavaScript
+  // because it avoids flickering the sidebar when the page is loaded, especially on mobile devices
+  if (isSmallViewport) {
     // Close nav when clicking links inside it
     document.addEventListener('click', (e) => {
       if (e.target.closest('#navigation a')) {
@@ -161,6 +183,8 @@ function hookSidebar() {
         closeNav();
       }
     });
+  } else {
+    openNav();
   }
 }
 
@@ -363,9 +387,7 @@ function hookSearchModal() {
     if (queryParam && isSmallViewport) {
       openSearchModal();
       searchInput.value = queryParam;
-      const navParam = urlParams.get('nav');
-      const autoSelect = navParam !== '0';
-      mobileSearch.search(queryParam, autoSelect);
+      mobileSearch.search(queryParam, false);
     }
   }
 }