Class: Docco::Themes::Default

Inherits:
Docco::Theme show all
Defined in:
lib/docco/themes/default.rb

Constant Summary collapse

Styles = 
define(Pathname.new(File.join(__dir__, 'default.css')))
Layout = 
define "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><%= page.root.info.name %> - <%= page.root.info.description %></title>\n    <link rel=\"stylesheet\" href=\"<%= page.build('styles.css', Docco::Themes::Default::Styles) %>\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\">\n</head>\n<body>\n    <nav class=\"top-menu\">\n        <div class=\"top-menu-content\">\n            <div class=\"top-menu-brand\">\n              <span class=\"brand-name\"><%= page.root.info.name %></span>\n              <span class=\"brand-tagline\"><%= page.root.info.description %></span>\n            </div>\n              <a href=\"<%= page.root.info.repo_url %>\" target=\"_blank\" class=\"github-link\" aria-label=\"View on GitHub\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\n                </svg>\n                <span>GitHub</span>\n            </a>\n        </div>\n    </nav>\n    <div class=\"container\">\n        <nav class=\"sidebar\">\n            <div class=\"logo\">\n              <h2><%= page.root.info.name %></h2>\n              <p class=\"tagline\"><%= page.root.info.description %></p>\n            </div>\n            <%= Docco::Themes::Default::Menu.(page) %>\n        </nav>\n\n        <main class=\"content\">\n            <header class=\"page-header\">\n                <h1><%= page.root.info.name %></h1>\n                <p class=\"subtitle\"><%= page.root.info.summary %></p>\n            </header>\n\n            <%= slots[:main] %>\n        </main>\n    </div>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/ruby.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js\"></script>\n    <script>\n        document.querySelectorAll('pre > code.language-mermaid').forEach((code) => {\n            const pre = code.parentElement;\n            const container = document.createElement('pre');\n            container.className = 'mermaid';\n            container.textContent = code.textContent;\n            pre.replaceWith(container);\n        });\n        mermaid.initialize({ startOnLoad: false, theme: 'default' });\n        mermaid.run();\n        hljs.highlightAll();\n    </script>\n    <script>\n        // Active section highlighting\n        const observerOptions = {\n            root: null,\n            rootMargin: '-20% 0px -60% 0px',\n            threshold: 0\n        };\n\n        const sections = document.querySelectorAll('section, article[id]');\n        const navLinks = document.querySelectorAll('.nav-menu a');\n\n        // Create a map of href to link elements\n        const linkMap = new Map();\n        navLinks.forEach(link => {\n            const href = link.getAttribute('href');\n            if (href && href.startsWith('#')) {\n                linkMap.set(href, link);\n            }\n        });\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    const id = entry.target.getAttribute('id');\n                    const activeLink = linkMap.get(`\#${id}`);\n\n                    if (activeLink) {\n                        // Remove active class from all links\n                        navLinks.forEach(link => link.classList.remove('active'));\n                        // Add active class to current link\n                        activeLink.classList.add('active');\n\n                        // Update URL hash without scrolling\n                        if (history.replaceState) {\n                            history.replaceState(null, null, `\#${id}`);\n                        } else {\n                            window.location.hash = id;\n                        }\n                    }\n                }\n            });\n        }, observerOptions);\n\n        // Observe all sections\n        sections.forEach(section => {\n            if (section.id) {\n                observer.observe(section);\n            }\n        });\n    </script>\n</body>\n</html>\n"

Theme.define "<ul class=\"nav-menu\">\n  <% page.sections.each do |section| %>\n    <% section.sections.each do |section| %>\n      <li>\n        <a href=\"#<%= section.id %>\"><%= section.title %></a>\n        <% if section.sections.any? %>\n          <ul>\n            <% section.sections.each do |section| %>\n              <li class=\"nav-submenu\">\n                <a href=\"#<%= section.id %>\"><%= section.title %></a>\n              </li>\n            <% end %>\n          </ul>\n        <% end %>\n      </li>\n    <% end %>\n  <% end %>\n</ul>\n"
Section = 
Theme.define "<section id=\"<%= page.id %>\" class=\"section\">\n  <h2><%= page.title %></h2>\n  <% page.nodes.each do |node| %> \n    <% if node.section? %> \n      <article id=\"<%= node.id %>\" class=\"subsection\">\n        <h3><%= node.title %></h3>\n        <% node.nodes.each do |n| %>\n          <%= n.to_html %>\n        <% end %>\n      </article>\n    <% else %>\n      <%= node.to_html %>\n    <% end %>\n  <% end %>\n</section>\n"
HomePageTemplate = 
Layout.define "<% page.nodes.each do |node| %> \n  <% if node.section? %> \n    <% node.nodes.each do |node| %> \n      <% if node.section? %> \n        <%= Docco::Themes::Default::Section.(node) %>\n      <% else %>\n        <%= node.to_html %>\n      <% end %>\n    <% end %>\n  <% else %>\n    <%= node.to_html %>\n  <% end %>\n<% end %>\n"

Class Method Summary collapse

Methods inherited from Docco::Theme

#call, #define, define, #initialize

Constructor Details

This class inherits a constructor from Docco::Theme

Class Method Details

.call(node) ⇒ Object 



177
178
179
 
# File 'lib/docco/themes/default.rb', line 177

def self.call(node)
  HomePageTemplate.call(node)
end