docyard 0.4.0 → 0.6.0

data/lib/docyard/templates/assets/js/components/heading-anchor.js

@@ -0,0 +1,90 @@
+/**
+ * HeadingAnchorManager handles anchor link interactions
+ * Provides copy-to-clipboard functionality with visual feedback
+ */
+class HeadingAnchorManager {
+  constructor() {
+    this.anchors = document.querySelectorAll('.heading-anchor');
+    this.init();
+  }
+
+  init() {
+    this.anchors.forEach(anchor => {
+      anchor.addEventListener('click', (e) => this.handleClick(e, anchor));
+    });
+  }
+
+  /**
+   * Handle anchor link click
+   * @param {Event} e - Click event
+   * @param {HTMLElement} anchor - Anchor element
+   */
+  handleClick(e, anchor) {
+    e.preventDefault();
+
+    const headingId = anchor.dataset.headingId;
+    const url = `${window.location.origin}${window.location.pathname}#${headingId}`;
+
+    this.copyToClipboard(url, anchor);
+
+    history.pushState(null, null, `#${headingId}`);
+
+    const heading = document.getElementById(headingId);
+    if (heading) {
+      heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+
+  /**
+   * Copy text to clipboard with visual feedback
+   * @param {string} text - Text to copy
+   * @param {HTMLElement} anchor - Anchor element for feedback
+   */
+  async copyToClipboard(text, anchor) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.showFeedback(anchor, true);
+    } catch (err) {
+      this.fallbackCopyToClipboard(text);
+      this.showFeedback(anchor, true);
+    }
+  }
+
+  /**
+   * Fallback copy method for older browsers
+   * @param {string} text - Text to copy
+   */
+  fallbackCopyToClipboard(text) {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+  }
+
+  /**
+   * Show visual feedback on copy
+   * @param {HTMLElement} anchor - Anchor element
+   * @param {boolean} success - Whether copy succeeded
+   */
+  showFeedback(anchor, success) {
+    const originalTitle = anchor.getAttribute('aria-label');
+    anchor.setAttribute('aria-label', success ? 'Link copied!' : 'Failed to copy');
+
+    anchor.style.color = success ? 'var(--color-success, #10b981)' : 'var(--color-danger, #ef4444)';
+
+    setTimeout(() => {
+      anchor.setAttribute('aria-label', originalTitle);
+      anchor.style.color = '';
+    }, 2000);
+  }
+}
+
+if (typeof window !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    new HeadingAnchorManager();
+  });
+}

data/lib/docyard/templates/assets/js/components/navigation.js

@@ -9,7 +9,9 @@
     const sidebar = document.querySelector('.sidebar');
     const overlay = document.querySelector('.mobile-overlay');
 
-    if (!toggle || !sidebar || !overlay) return;
+    if (!toggle || !sidebar || !overlay) {
+      return;
+    }
 
     function openMenu() {
       sidebar.classList.add('is-open');
@@ -33,7 +35,9 @@
       }
     }
 
-    toggle.addEventListener('click', toggleMenu);
+    toggle.addEventListener('click', function(e) {
+      toggleMenu();
+    });
     overlay.addEventListener('click', closeMenu);
 
     document.addEventListener('keydown', function(e) {

data/lib/docyard/templates/assets/js/components/table-of-contents.js

@@ -0,0 +1,301 @@
+/**
+ * TableOfContentsManager handles TOC interactions and scroll tracking
+ * Features: scroll spy, active highlighting, smooth scrolling, mobile toggle
+ */
+class TableOfContentsManager {
+  constructor() {
+    this.toc = document.querySelector('.docyard-toc');
+    if (!this.toc) return;
+
+    this.links = Array.from(this.toc.querySelectorAll('.docyard-toc__link'));
+    this.headings = this.getHeadings();
+    this.nav = this.toc.querySelector('.docyard-toc__nav');
+    this.activeLink = null;
+    this.observer = null;
+    this.ticking = false;
+
+    this.init();
+  }
+
+  init() {
+    if (this.headings.length === 0) return;
+
+    this.setupScrollSpy();
+    this.setupSmoothScrolling();
+    this.setupMobileToggle();
+    this.setupKeyboardNavigation();
+    this.handleInitialHash();
+  }
+
+  /**
+   * Check if viewport is mobile/tablet (TOC in secondary header)
+   * @returns {boolean}
+   */
+  isMobile() {
+    return window.innerWidth <= 1280;
+  }
+
+  /**
+   * Check if viewport is tablet (both headers visible)
+   * @returns {boolean}
+   */
+  isTablet() {
+    return window.innerWidth > 1024 && window.innerWidth <= 1280;
+  }
+
+  /**
+   * Get scroll offset based on viewport and header state
+   * @returns {number}
+   */
+  getScrollOffset() {
+    if (this.isTablet()) {
+      return 128;
+    }
+
+    if (window.innerWidth <= 1024) {
+      const header = document.querySelector('.header');
+      const isHeaderHidden = header && header.classList.contains('hide-on-scroll');
+      return isHeaderHidden ? 128 : 64;
+    }
+
+    return 100;
+  }
+
+  /**
+   * Get all headings referenced in TOC
+   * @returns {Array<HTMLElement>}
+   */
+  getHeadings() {
+    return this.links
+      .map(link => {
+        const id = link.dataset.headingId;
+        return document.getElementById(id);
+      })
+      .filter(Boolean);
+  }
+
+  /**
+   * Setup Intersection Observer for scroll spy
+   */
+  setupScrollSpy() {
+    const options = {
+      root: null,
+      rootMargin: '-80px 0px -80% 0px',
+      threshold: 0
+    };
+
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.setActiveLink(entry.target.id);
+        }
+      });
+    }, options);
+
+    this.headings.forEach(heading => {
+      this.observer.observe(heading);
+    });
+  }
+
+  /**
+   * Set active link in TOC
+   * @param {string} id - Heading ID
+   */
+  setActiveLink(id) {
+    const link = this.links.find(l => l.dataset.headingId === id);
+    if (!link || link === this.activeLink) return;
+
+    if (this.activeLink) {
+      this.activeLink.classList.remove('is-active');
+    }
+
+    link.classList.add('is-active');
+    this.activeLink = link;
+
+    this.scrollLinkIntoView(link);
+  }
+
+  /**
+   * Scroll TOC to keep active link visible
+   * @param {HTMLElement} link - Active link element
+   */
+  scrollLinkIntoView(link) {
+    if (this.isMobile()) return;
+
+    if (!this.ticking) {
+      requestAnimationFrame(() => {
+        const tocRect = this.toc.getBoundingClientRect();
+        const linkRect = link.getBoundingClientRect();
+
+        if (linkRect.top < tocRect.top || linkRect.bottom > tocRect.bottom) {
+          link.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+
+        this.ticking = false;
+      });
+      this.ticking = true;
+    }
+  }
+
+  /**
+   * Setup smooth scrolling for TOC links
+   */
+  setupSmoothScrolling() {
+    this.links.forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+
+        const id = link.dataset.headingId;
+        const heading = document.getElementById(id);
+
+        if (heading) {
+          const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
+
+          window.scrollTo({
+            top: offsetTop,
+            behavior: 'smooth'
+          });
+
+          history.pushState(null, null, `#${id}`);
+
+          heading.focus({ preventScroll: true });
+
+          // Close mobile menu after clicking a link
+          if (this.isMobile()) {
+            this.collapseMobile();
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Setup mobile toggle functionality
+   */
+  setupMobileToggle() {
+    const secondaryToggle = document.querySelector('.secondary-header-toc-toggle');
+
+    if (!secondaryToggle || !this.nav) {
+      return;
+    }
+
+    secondaryToggle.addEventListener('click', () => {
+      const isExpanded = secondaryToggle.getAttribute('aria-expanded') === 'true';
+      secondaryToggle.setAttribute('aria-expanded', !isExpanded);
+      this.nav.classList.toggle('is-expanded', !isExpanded);
+
+      if (!isExpanded) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = '';
+      }
+    });
+
+    // Close menu when clicking outside (mobile only)
+    document.addEventListener('click', (e) => {
+      if (!this.isMobile()) return;
+
+      const isExpanded = secondaryToggle.getAttribute('aria-expanded') === 'true';
+      if (!isExpanded) return;
+
+      const isClickInsideToc = this.nav.contains(e.target);
+      const isClickOnToggle = secondaryToggle.contains(e.target);
+
+      if (!isClickInsideToc && !isClickOnToggle) {
+        this.collapseMobile();
+      }
+    });
+  }
+
+  /**
+   * Collapse mobile TOC
+   */
+  collapseMobile() {
+    const secondaryToggle = document.querySelector('.secondary-header-toc-toggle');
+    if (secondaryToggle) {
+      secondaryToggle.setAttribute('aria-expanded', 'false');
+      if (this.nav) {
+        this.nav.classList.remove('is-expanded');
+      }
+      document.body.style.overflow = '';
+    }
+  }
+
+  /**
+   * Setup keyboard navigation
+   */
+  setupKeyboardNavigation() {
+    this.links.forEach((link, index) => {
+      link.addEventListener('keydown', (e) => {
+        let targetIndex = -1;
+
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            targetIndex = index + 1;
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            targetIndex = index - 1;
+            break;
+          case 'Home':
+            e.preventDefault();
+            targetIndex = 0;
+            break;
+          case 'End':
+            e.preventDefault();
+            targetIndex = this.links.length - 1;
+            break;
+          default:
+            return;
+        }
+
+        if (targetIndex >= 0 && targetIndex < this.links.length) {
+          this.links[targetIndex].focus();
+        }
+      });
+    });
+  }
+
+  /**
+   * Handle initial hash in URL on page load
+   */
+  handleInitialHash() {
+    const hash = window.location.hash.slice(1);
+    if (!hash) return;
+
+    const heading = document.getElementById(hash);
+    if (!heading) return;
+
+    setTimeout(() => {
+      this.setActiveLink(hash);
+
+      const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'auto'
+      });
+    }, 100);
+  }
+
+  /**
+   * Cleanup and destroy
+   */
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}
+
+if (typeof window !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    window.tocManager = new TableOfContentsManager();
+  });
+
+  window.addEventListener('beforeunload', () => {
+    if (window.tocManager) {
+      window.tocManager.destroy();
+    }
+  });
+}

data/lib/docyard/templates/layouts/default.html.erb

@@ -51,10 +51,12 @@
   <div class="secondary-header">
     <button class="secondary-header-menu" aria-label="Toggle navigation menu" aria-expanded="false">
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="18" height="18">
-        <path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,48H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm176,24H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm-48,40H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z"></path>
+        <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path>
       </svg>
       <span>Menu</span>
     </button>
+
+    <%= render_partial('_table_of_contents_toggle') %>
   </div>
 
   <!-- Mobile overlay -->
@@ -68,8 +70,14 @@
     <div class="layout-main">
       <main id="main-content" class="content">
         <%= @content %>
+
+        <!-- Previous/Next Navigation -->
+        <%= @prev_next_html %>
       </main>
     </div>
+
+    <!-- Table of contents -->
+    <%= render_partial('_table_of_contents') %>
   </div>
 
   <script src="/assets/js/theme.js"></script>

data/lib/docyard/templates/partials/_code_block.html.erb

@@ -1,6 +1,54 @@
-<div class="docyard-code-block">
-  <%= @code_block_html %>
+<% has_diff = @diff_lines&.any? %><% has_focus = @focus_lines&.any? %><% has_error = @error_lines&.any? %><% has_warning = @warning_lines&.any? %><% has_title = !@title.nil? && !@title.empty? %><div class="docyard-code-block<%= ' docyard-code-block--line-numbers' if @show_line_numbers %><%= ' docyard-code-block--highlighted' if @highlights&.any? %><%= ' docyard-code-block--diff' if has_diff %><%= ' docyard-code-block--has-focus' if has_focus %><%= ' docyard-code-block--has-error' if has_error %><%= ' docyard-code-block--has-warning' if has_warning %><%= ' docyard-code-block--titled' if has_title %>">
+  <% if has_title %>
+  <div class="docyard-code-block__header">
+    <% if @icon %>
+    <span class="docyard-code-block__icon"><% if @icon_source == "file-extension" %><%= Docyard::Icons.render_file_extension(@icon) %><% elsif @icon_source == "phosphor" %><%= Docyard::Icons.render(@icon) %><% end %></span>
+    <% end %>
+    <span class="docyard-code-block__title" title="<%= @title %>"><%= @title %></span>
+    <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">
+      <%= @copy_icon %>
+    </button>
+  </div>
+  <% end %>
+  <div class="docyard-code-block__body">
+  <% if @show_line_numbers %>
+  <div class="docyard-code-block__lines" aria-hidden="true">
+    <% @line_numbers.each_with_index do |num, index| %>
+<%
+  source_line = index + 1
+  diff_type = @diff_lines&.dig(source_line)
+  is_error = @error_lines&.dig(source_line)
+  is_warning = @warning_lines&.dig(source_line)
+  line_class = case diff_type
+               when :addition then "docyard-code-block__line--diff-add"
+               when :deletion then "docyard-code-block__line--diff-remove"
+               else
+                 if is_error
+                   "docyard-code-block__line--error"
+                 elsif is_warning
+                   "docyard-code-block__line--warning"
+                 elsif @highlights&.include?(num)
+                   "docyard-code-block__line--highlighted"
+                 end
+               end
+  prefix = case diff_type
+           when :addition then "+"
+           when :deletion then "-"
+           else ""
+           end
+%><% if line_class %><span class="<%= line_class %>"><%= prefix %><%= num %></span><% else %><span><%= num %></span><% end %>
+    <% end %>
+  </div>
+  <% elsif has_diff %>
+  <div class="docyard-code-block__diff-gutter" aria-hidden="true"><% line_count = @code_block_html.scan(/<span class="docyard-code-line/).count %><% line_count = 1 if line_count.zero? %><% (1..line_count).each do |num| %><% diff_type = @diff_lines&.dig(num) %><% gutter_class = diff_type == :addition ? "docyard-code-block__diff-indicator--add" : (diff_type == :deletion ? "docyard-code-block__diff-indicator--remove" : nil) %><% indicator = diff_type == :addition ? "+" : (diff_type == :deletion ? "-" : "") %><% if gutter_class %><span class="<%= gutter_class %>"><%= indicator %></span><% else %><span>&nbsp;</span><% end %><% end %></div>
+  <% end %>
+  <div class="docyard-code-block__content">
+    <%= @code_block_html %>
+  </div>
+  <% unless has_title %>
   <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">
     <%= @copy_icon %>
   </button>
+  <% end %>
+  </div>
 </div>

data/lib/docyard/templates/partials/_heading_anchor.html.erb

@@ -0,0 +1 @@
+<a href="#<%= @id %>" class="heading-anchor" aria-label="Link to this section" data-heading-id="<%= @id %>">#</a>

data/lib/docyard/templates/partials/_prev_next.html.erb

@@ -0,0 +1,23 @@
+<% if @prev || @next %>
+<footer class="doc-footer">
+  <nav class="pager" aria-labelledby="doc-footer-aria-label">
+    <span id="doc-footer-aria-label" class="visually-hidden">Pager</span>
+
+    <% if @prev %>
+    <a href="<%= link_path(@prev[:path]) %>" class="pager-link prev" title="<%= @prev[:title] %>">
+      <span class="pager-label"><%= @prev_text %></span>
+      <span class="pager-title"><%= @prev[:title] %></span>
+    </a>
+    <% else %>
+    <span></span>
+    <% end %>
+
+    <% if @next %>
+    <a href="<%= link_path(@next[:path]) %>" class="pager-link next" title="<%= @next[:title] %>">
+      <span class="pager-label"><%= @next_text %></span>
+      <span class="pager-title"><%= @next[:title] %></span>
+    </a>
+    <% end %>
+  </nav>
+</footer>
+<% end %>

data/lib/docyard/templates/partials/_table_of_contents.html.erb

@@ -0,0 +1,45 @@
+<% unless @toc.empty? %>
+  <aside class="docyard-toc" aria-label="Table of contents">
+    <div class="docyard-toc__header">
+      <h2 class="docyard-toc__title">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+          <path d="M88,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H96A8,8,0,0,1,88,64Zm128,56H96a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H96a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM56,56H40a8,8,0,0,0,0,16H56a8,8,0,0,0,0-16Zm0,64H40a8,8,0,0,0,0,16H56a8,8,0,0,0,0-16Zm0,64H40a8,8,0,0,0,0,16H56a8,8,0,0,0,0-16Z"/>
+        </svg>
+        On this page
+      </h2>
+    </div>
+    <nav id="toc-content" class="docyard-toc__nav">
+      <ul class="docyard-toc__list">
+        <% @toc.each do |heading| %>
+          <li class="docyard-toc__item docyard-toc__item--level-<%= heading[:level] %>">
+            <a href="#<%= heading[:id] %>" class="docyard-toc__link" data-heading-id="<%= heading[:id] %>" title="<%= heading[:text] %>">
+              <%= heading[:text] %>
+            </a>
+            <% unless heading[:children].empty? %>
+              <ul class="docyard-toc__list">
+                <% heading[:children].each do |child| %>
+                  <li class="docyard-toc__item docyard-toc__item--level-<%= child[:level] %>">
+                    <a href="#<%= child[:id] %>" class="docyard-toc__link" data-heading-id="<%= child[:id] %>" title="<%= child[:text] %>">
+                      <%= child[:text] %>
+                    </a>
+                    <% unless child[:children].empty? %>
+                      <ul class="docyard-toc__list">
+                        <% child[:children].each do |grandchild| %>
+                          <li class="docyard-toc__item docyard-toc__item--level-<%= grandchild[:level] %>">
+                            <a href="#<%= grandchild[:id] %>" class="docyard-toc__link" data-heading-id="<%= grandchild[:id] %>" title="<%= grandchild[:text] %>">
+                              <%= grandchild[:text] %>
+                            </a>
+                          </li>
+                        <% end %>
+                      </ul>
+                    <% end %>
+                  </li>
+                <% end %>
+              </ul>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    </nav>
+  </aside>
+<% end %>

data/lib/docyard/templates/partials/_table_of_contents_toggle.html.erb

@@ -0,0 +1,8 @@
+<% unless @toc.empty? %>
+  <button class="secondary-header-toc-toggle" aria-expanded="false" aria-controls="toc-content" aria-label="Toggle table of contents">
+    <span>On this page</span>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+    </svg>
+  </button>
+<% end %>

data/lib/docyard/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Docyard
-  VERSION = "0.4.0"
+  VERSION = "0.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: docyard
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Sanif Himani
@@ -192,14 +192,26 @@ files:
 - lib/docyard/cli.rb
 - lib/docyard/components/base_processor.rb
 - lib/docyard/components/callout_processor.rb
+- lib/docyard/components/code_block_diff_preprocessor.rb
+- lib/docyard/components/code_block_feature_extractor.rb
+- lib/docyard/components/code_block_focus_preprocessor.rb
+- lib/docyard/components/code_block_icon_detector.rb
+- lib/docyard/components/code_block_line_wrapper.rb
+- lib/docyard/components/code_block_options_preprocessor.rb
+- lib/docyard/components/code_block_patterns.rb
 - lib/docyard/components/code_block_processor.rb
 - lib/docyard/components/code_detector.rb
+- lib/docyard/components/code_line_parser.rb
+- lib/docyard/components/code_snippet_import_preprocessor.rb
+- lib/docyard/components/heading_anchor_processor.rb
 - lib/docyard/components/icon_detector.rb
 - lib/docyard/components/icon_processor.rb
 - lib/docyard/components/registry.rb
+- lib/docyard/components/table_of_contents_processor.rb
 - lib/docyard/components/table_wrapper_processor.rb
 - lib/docyard/components/tabs_parser.rb
 - lib/docyard/components/tabs_processor.rb
+- lib/docyard/components/tabs_range_finder.rb
 - lib/docyard/config.rb
 - lib/docyard/config/validator.rb
 - lib/docyard/constants.rb
@@ -213,6 +225,7 @@ files:
 - lib/docyard/language_mapping.rb
 - lib/docyard/logging.rb
 - lib/docyard/markdown.rb
+- lib/docyard/prev_next_builder.rb
 - lib/docyard/preview_server.rb
 - lib/docyard/rack_application.rb
 - lib/docyard/renderer.rb
@@ -229,9 +242,12 @@ files:
 - lib/docyard/templates/assets/css/code.css
 - lib/docyard/templates/assets/css/components/callout.css
 - lib/docyard/templates/assets/css/components/code-block.css
+- lib/docyard/templates/assets/css/components/heading-anchor.css
 - lib/docyard/templates/assets/css/components/icon.css
 - lib/docyard/templates/assets/css/components/logo.css
 - lib/docyard/templates/assets/css/components/navigation.css
+- lib/docyard/templates/assets/css/components/prev-next.css
+- lib/docyard/templates/assets/css/components/table-of-contents.css
 - lib/docyard/templates/assets/css/components/tabs.css
 - lib/docyard/templates/assets/css/components/theme-toggle.css
 - lib/docyard/templates/assets/css/layout.css
@@ -242,7 +258,9 @@ files:
 - lib/docyard/templates/assets/css/variables.css
 - lib/docyard/templates/assets/favicon.svg
 - lib/docyard/templates/assets/js/components/code-block.js
+- lib/docyard/templates/assets/js/components/heading-anchor.js
 - lib/docyard/templates/assets/js/components/navigation.js
+- lib/docyard/templates/assets/js/components/table-of-contents.js
 - lib/docyard/templates/assets/js/components/tabs.js
 - lib/docyard/templates/assets/js/reload.js
 - lib/docyard/templates/assets/js/theme.js
@@ -258,6 +276,7 @@ files:
 - lib/docyard/templates/markdown/index.md.erb
 - lib/docyard/templates/partials/_callout.html.erb
 - lib/docyard/templates/partials/_code_block.html.erb
+- lib/docyard/templates/partials/_heading_anchor.html.erb
 - lib/docyard/templates/partials/_icon.html.erb
 - lib/docyard/templates/partials/_icon_file_extension.html.erb
 - lib/docyard/templates/partials/_nav_group.html.erb
@@ -265,8 +284,11 @@ files:
 - lib/docyard/templates/partials/_nav_leaf.html.erb
 - lib/docyard/templates/partials/_nav_list.html.erb
 - lib/docyard/templates/partials/_nav_section.html.erb
+- lib/docyard/templates/partials/_prev_next.html.erb
 - lib/docyard/templates/partials/_sidebar.html.erb
 - lib/docyard/templates/partials/_sidebar_footer.html.erb
+- lib/docyard/templates/partials/_table_of_contents.html.erb
+- lib/docyard/templates/partials/_table_of_contents_toggle.html.erb
 - lib/docyard/templates/partials/_tabs.html.erb
 - lib/docyard/templates/partials/_theme_toggle.html.erb
 - lib/docyard/utils/path_resolver.rb