asciidoctor-html 0.1.5 → 0.1.7

data/lib/asciidoctor/html/popovers.rb

@@ -5,45 +5,42 @@ module Asciidoctor
     # Configure the popovers for footnotes and citations.
     module Popovers
       POPOVERS = <<~JS
-        function initPopovers() {
-          document.querySelectorAll(".btn-po[data-contentid]").forEach(el => {
-            const id = el.dataset.contentid;
-            let content = document.getElementById(id);
-            if(content) {
-              if(content.tagName == "A") {
-                // This is an anchor of a bibitem
-                const listItem = content.parentElement.cloneNode(true)
-                listItem.removeChild(listItem.firstChild)
-                content = listItem
+        (function() {
+          const popovers = []
+          function initPopovers() {
+            document.querySelectorAll('.btn-po[data-contentid]').forEach(el => {
+              const id = el.dataset.contentid;
+              let content = document.getElementById(id);
+              if(content) {
+                if(content.tagName == 'A') {
+                  // This is an anchor of a bibitem
+                  const listItem = content.parentElement.cloneNode(true)
+                  listItem.removeChild(listItem.firstChild)
+                  content = listItem
+                }
+                popovers.push(new bootstrap.Popover(el, {
+                  content: content,
+                  html: true,
+                  sanitize: false
+                }));
               }
-              new bootstrap.Popover(el, {
-                trigger: "focus",
-                content: content,
-                html: true,
-                sanitize: false
-              });
-            }
-          });
-        }
-        MathJax = {
-          startup: {
-            pageReady: function() {
-              return MathJax.startup.defaultPageReady().then(initPopovers);
-            }
+            });
           }
-        };
-      JS
-
-      TOOLTIPS = <<~JS
-        // Only enable tooltips on images if not a touch screen device
-        if(!touch) {
-          document.querySelectorAll('img[data-bs-toggle="tooltip"]').forEach(el => {
-            bootstrap.Tooltip.getOrCreateInstance(el);
+          addEventListener('click', e => {
+            const match = e.target.closest('.btn-po[aria-describedby],.popover');
+            if(!match) {
+              popovers.forEach(po => po.hide());
+            }
+          })
+          MathJax.startup.promise.then(initPopovers);
+          addEventListener('load', function() {
+            // Enable tooltips on images
+            document.querySelectorAll('img[data-bs-toggle="tooltip"]').forEach(el => {
+              bootstrap.Tooltip.getOrCreateInstance(el);
+            });
           });
-        }
+        })();
       JS
-
-      INIT = "#{TOOLTIPS}\n#{POPOVERS}".freeze
     end
   end
 end

data/lib/asciidoctor/html/ref_tree_processor.rb

@@ -43,12 +43,14 @@ module Asciidoctor
         block.set_attr("showcaption", true) unless context == :stem
         assign_numeral! block, document, NUMBERED_CONTEXTS[context]
         relative_numeral = relative_numeral block, document
+
         reftext = if context == :stem
                     "(#{relative_numeral})"
                   else
                     "#{env.capitalize} #{relative_numeral}"
                   end
-        block.set_attr "reftext", reftext
+        block.set_attr "reftext", reftext unless block.reftext?
+        block.set_attr "title-prefix", reftext
       end
 
       def env(context, style)
@@ -91,15 +93,33 @@ module Asciidoctor
       end
 
       def ref_li_mark(mark, depth, style = nil)
-        return "[#{mark}]" if style == "bibliography"
+        return mark.to_s unless style
 
-        depth.even? ? mark.to_s : "(#{mark})"
+        case li_style depth, style
+        when "mark-square-brackets" then "[#{mark}]"
+        when "mark-round-brackets" then "(#{mark})"
+        else mark.to_s
+        end
+      end
+
+      def li_style(depth, list_style)
+        return "mark-square-brackets" if list_style == "bibliography"
+        return "mark-round-brackets" if list_style == "figlist"
+
+        case depth
+        when 1, 3 then "mark-round-brackets"
+        else "mark-dot"
+        end
       end
 
       def offset(list)
         list.attr?("start") ? (list.attr("start").to_i - 1) : 0
       end
 
+      def shift(list)
+        list.attr?("shift") ? list.attr("shift").to_i : 0
+      end
+
       # Finds an anchor at the start of item.text and updates
       # its reftext to that of item's if necessary.
       def register_reftext!(item, reftext)
@@ -121,11 +141,14 @@ module Asciidoctor
           block.set_attr("flat-style", true)
         else
           offset = offset block
+          shift = shift block
           style = block.style
+          d = (style == "figlist" ? 1 : depth) + shift
+          role = li_style d, style
           block.items.each_with_index do |item, idx|
-            d = style == "figlist" ? 1 : depth
             mark = li_mark(d, idx + offset)
             item.set_attr "mark", mark
+            item.role = role
             item_reftext = "#{parent_reftext}#{ref_li_mark mark, d, style}"
             register_reftext! item, item_reftext
           end
@@ -135,9 +158,10 @@ module Asciidoctor
       def process_colist!(block)
         block.set_attr "list-depth", 0
         block.items.each_with_index do |item, idx|
-          icon = %(<i class="bi bi-#{idx + 1}-circle"></i>)
+          icon_type = "#{idx + 1}-circle"
+          icon = %(<i class="bi bi-#{icon_type}"></i>)
           item.set_attr "mark", icon
-          register_reftext! item, icon
+          register_reftext! item, "bi:#{icon_type}[]"
         end
       end
 

data/lib/asciidoctor/html/sc_inline_macro.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require "asciidoctor"
+
+module Asciidoctor
+  module Html
+    # Convert text to small caps
+    class ScInlineMacro < Asciidoctor::Extensions::InlineMacroProcessor
+      use_dsl
+
+      named :sc
+      name_positional_attributes "text"
+      format :short
+
+      def process(parent, target, _attrs)
+        create_inline_pass parent, "[.smallcaps]##{target}#",
+                           attributes: { "subs" => :normal }
+      end
+    end
+  end
+end

data/lib/asciidoctor/html/scroll.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Due to mobile dynamic viewport heights, we need custom code for
+    # reliable anchor scrolling.
+    module Scroll
+      SCROLL = <<~JS
+        (function() {
+          const page = document.getElementById('page');
+          function scrollToElement(e) {
+            e.preventDefault();
+            const href = location.hash;
+            const id = href.substring(1);
+            const target = document.getElementById(id);
+            if(!target) return;
+
+            const rect = target.getBoundingClientRect()
+            page.scrollTo({
+              top: rect.top + page.scrollTop,
+              left: 0,
+              behavior: 'smooth'
+            });
+          }
+          addEventListener('hashchange', scrollToElement);
+        })();
+      JS
+    end
+  end
+end

data/lib/asciidoctor/html/sidebar.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Toggle behaviour of sidebar
+    module Sidebar
+      TOGGLE = <<~JS
+        (function() {
+          const page = document.getElementById('page');
+          const sidebar = document.getElementById('sidebar');
+          const dismissBtn = document.getElementById('sidebar-dismiss-btn');
+          function hideSidebar() {
+            sidebar && sidebar.classList.remove('shown');
+            page.classList.remove('noscroll');
+          }
+
+          // Sidebar should be hidden on any local link click
+          document.querySelectorAll('a[href^="#"]').forEach(el => {
+            el.addEventListener('click', hideSidebar);
+          });
+          addEventListener('resize', hideSidebar);
+          dismissBtn && dismissBtn.addEventListener('click', hideSidebar);
+
+          const menuBtn = document.getElementById('menu-btn');
+          if(!menuBtn) return;
+
+          // Nudge menuBtn in case there is a scrollbar
+          const main = document.getElementById('main');
+          const scrollbarWidth = page.offsetWidth - main.offsetWidth;
+          menuBtn.style.right = (scrollbarWidth + 12) + 'px';
+
+          // Add click listener to toggle sidebar
+          menuBtn.addEventListener('click', function() {
+            sidebar && sidebar.classList.toggle('shown');
+            if(scrollbarWidth > 0) page.classList.toggle('noscroll');
+          });
+        })();
+      JS
+    end
+  end
+end

data/lib/asciidoctor/html/table.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Helpers for the table conversion
+    module Table
+      def self.display_row(node, tsec, row)
+        result = ["<tr>"]
+        row.each do |cell|
+          cell_content = if tsec == :head
+                           cell.text
+                         elsif cell.style == :literal
+                           "<pre>#{cell.text}</pre>"
+                         else
+                           cell.content.join "\n"
+                         end
+          cell_tag_name = (tsec == :head || cell.style == :header ? "th" : "td")
+          cell_attrs = []
+          cell_attrs << %(halign-#{cell.attr "halign"}) unless node.attr?("halign")
+          cell_attrs << %(align-#{cell.attr "valign"}) unless node.attr?("valign")
+          cell_class_attribute = %( class="#{cell_attrs.join " "}") unless cell_attrs.empty?
+          cell_colspan_attribute = cell.colspan ? %( colspan="#{cell.colspan}") : ""
+          cell_rowspan_attribute = cell.rowspan ? %( rowspan="#{cell.rowspan}") : ""
+          cell_attributes = "#{cell_class_attribute}#{cell_colspan_attribute}#{cell_rowspan_attribute}"
+          result << %(<#{cell_tag_name}#{cell_attributes}>#{cell_content}</#{cell_tag_name}>)
+        end
+        result << "</tr>"
+        result.join "\n"
+      end
+
+      def self.display_rows(node)
+        node.rows.to_h.map do |tsec, rows|
+          next if rows.empty?
+
+          "<t#{tsec}>\n#{rows.map { |row| display_row(node, tsec, row) }.join("\n")}\n</t#{tsec}>"
+        end.join("\n")
+      end
+    end
+  end
+end

data/lib/asciidoctor/html/template.rb

@@ -3,11 +3,20 @@
 require "date"
 require_relative "highlightjs"
 require_relative "popovers"
+require_relative "sidebar"
+require_relative "scroll"
 
 module Asciidoctor
   module Html
     # The template for the book layout
     module Template
+      MENU_BTN = <<~HTML
+        <button type="button" id="menu-btn" class="btn menu"
+                aria-expanded="false" aria-controls="sidebar">
+          <i class="bi bi-list"></i>
+        </button>
+      HTML
+
       def self.nav_item(target, text, content = "", active: false)
         active_class = active ? %( class="active") : ""
         link = %(<a href="#{target}">#{text}</a>)
@@ -15,10 +24,10 @@ module Asciidoctor
         %(<li#{active_class}>#{link}#{subnav}</li>\n)
       end
 
-      def self.nav_text(chapnum, chaptitle)
-        return chaptitle if chapnum.empty?
+      def self.nav_text(chapprefix, chaptitle)
+        return chaptitle if chapprefix.empty?
 
-        %(<span class="title-mark">#{chapnum}</span>#{chaptitle})
+        %(<span class="title-mark">#{chapprefix}</span>#{chaptitle})
       end
 
       def self.appendix_title(chapname, numeral, doctitle, num_appendices)
@@ -28,62 +37,85 @@ module Asciidoctor
 
       def self.sidebar(nav_items)
         <<~HTML
-          <div id="sidebar" class="sidebar collapse collapse-horizontal">
-          <nav id="sidenav"><ul>
+          <div id="sidebar" class="sidebar">
+          <button id="sidebar-dismiss-btn" class="btn dismiss"><i class="bi bi-x-lg"></i></button>
+          <nav><ul>
           #{nav_items.join "\n"}
           </ul></nav>
           </div> <!-- .sidebar -->
         HTML
       end
 
-      def self.main(content, chapnum, chaptitle, author, year)
+      # opts:
+      # - chapheading: String
+      # - chapsubheading: String
+      # - content: String
+      # - author: String
+      # - date: Date
+      def self.main(opts)
         <<~HTML
-          <main class="main">
-          <div class="content-container">
-          <h2>#{nav_text chapnum, chaptitle}</h2>
-          #{content}
-          #{footer author, year}
+          <main id="main" class="main">
+          <div id="content-container" class="content-container">
+          #{%(<h1 class="chapheading">#{opts[:chapheading]}</h1>) if opts[:chapheading]}
+          <h1 class="chaptitle">#{opts[:chapsubheading]}</h1>
+          #{opts[:content]}
+          #{footer opts[:author], opts[:date].year}
           </div>
           </main>
         HTML
       end
 
-      def self.header(title, short_title, nav: true)
-        nav_btn = if nav
-                    <<~HTML
-                      <button type="button" class="btn menu"
-                              data-bs-toggle="collapse" data-bs-target="#sidebar"
-                              aria-expanded="false" aria-controls="sidebar">
-                        <i class="bi bi-list"></i>
-                      </button>
-                    HTML
-                  else
-                    ""
-                  end
+      def self.sitemap(entries)
+        <<~XML
+          <?xml version="1.0" encoding="UTF-8"?>
+          <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+          #{entries.join "\n"}
+          </urlset>
+        XML
+      end
+
+      def self.sitemap_entry(url)
+        <<~XML
+          <url>
+            <loc>#{url}</loc>
+          </url>
+        XML
+      end
+
+      def self.header(title, short_title)
         <<~HTML
           <header class="header">
             <a class="home d-none d-sm-block" href="./">#{title}</a>
             <a class="home d-block d-sm-none" href="./">#{short_title}</a>
-            #{nav_btn}
           </header>
         HTML
       end
 
       def self.footer(author, year)
-        %(<footer class="footer">&#169; #{year} #{author}</footer>\n)
+        <<~HTML
+          <footer class="footer">
+            <div class="footer-left">&#169; #{year} #{author}</div>
+            <div class="footer-right">Built with
+              <a href="https://github.com/ravirajani/asciidoctor-html">asciidoctor-html</a>
+            </div>
+          </footer>
+        HTML
       end
 
       def self.highlightjs(langs)
         langs.map do |lang|
-          %(<script src="#{Highlightjs::CDN_PATH}/languages/#{lang}.min.js"></script>)
+          %(<script defer src="#{Highlightjs::CDN_PATH}/languages/#{lang}.min.js"></script>)
         end.join("\n  ")
       end
 
-      def self.head(title, langs)
+      def self.head(title, description, author, langs)
         <<~HTML
           <head>
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1">
+            #{%(<meta name="description" content="#{description}">) if description}
+            #{%(<meta name="author" content="#{author}">) if author}
             <title>#{title}</title>
             <link rel="apple-touch-icon" sizes="180x180" href="#{FAVICON_PATH}/apple-touch-icon.png">
             <link rel="icon" type="image/png" sizes="32x32" href="#{FAVICON_PATH}/favicon-32x32.png">
@@ -91,9 +123,19 @@ module Asciidoctor
             <link rel="manifest" href="#{FAVICON_PATH}/site.webmanifest">
             <link rel="stylesheet" href="#{CSS_PATH}/styles.css">
             <link rel="stylesheet" href="#{Highlightjs::CDN_PATH}/styles/tomorrow-night-blue.min.css">
-            <script src="#{Highlightjs::CDN_PATH}/highlight.min.js"></script>
+            <script defer src="#{Highlightjs::CDN_PATH}/highlight.min.js"></script>
             #{highlightjs langs}
-            <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+            <script>
+              MathJax = {
+                tex: {
+                  inlineMath: {'[+]': [['$', '$']]}
+                }
+              };
+            </script>
+            <script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
+            <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
+                  integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
+                  crossorigin="anonymous"></script>
           </head>
         HTML
       end
@@ -102,39 +144,30 @@ module Asciidoctor
       # - title: String
       # - short_title: String
       # - author: String
+      # - description: String
       # - date: Date
-      # - nav: Boolean
-      # - chapnum: Int
+      # - chapheading: String
       # - chaptitle: String
       # - langs: Array[String]
       def self.html(content, nav_items, opts = {})
-        hash_listener = if opts[:nav]
-                          <<~JS
-                            addEventListener('hashchange', function() {
-                              collapse = bootstrap.Collapse.getInstance('#sidebar');
-                              if(collapse) collapse.hide();
-                            });
-                          JS
-                        else
-                          ""
-                        end
+        nav = (nav_items.size > 1)
         <<~HTML
           <!DOCTYPE html>
           <html lang="en">
-          #{head opts[:title], opts[:langs]}
+          #{head opts[:title], opts[:description], opts[:author], opts[:langs]}
           <body>
-          #{header opts[:title], opts[:short_title], nav: opts[:nav]}
-          #{sidebar(nav_items) if opts[:nav]}
-          #{main content, opts[:chapnum], opts[:chaptitle], opts[:author], opts[:date].year}
-          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
-                  integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
-                  crossorigin="anonymous"></script>
-          <script>
-          const touch = matchMedia('(hover: none)').matches;
+          #{sidebar(nav_items) if nav}
+          <div id="page" class="page">
+          #{MENU_BTN if nav}
+          #{header opts[:title], opts[:short_title]}
+          #{main content:, **opts}
+          </div> <!-- .page -->
+          <script type="module">
           #{Highlightjs::PLUGIN}
           hljs.highlightAll();
-          #{hash_listener}
           #{Popovers::POPOVERS}
+          #{Sidebar::TOGGLE if nav}
+          #{Scroll::SCROLL}
           </script>
           </body>
           </html>

data/lib/asciidoctor/html/utils.rb

@@ -31,14 +31,23 @@ module Asciidoctor
         node.attr?("showcaption") || node.title?
       end
 
-      def self.display_title(node, needs_prefix: true)
-        prefix = needs_prefix ? display_title_prefix(node) : ""
-        show_title?(node) ? %(<h6 class="block-title">#{prefix}#{node.title}</h6>\n) : ""
+      def self.display_title(node)
+        prefix = display_title_prefix node
+        suffix = display_title_suffix node
+        show_title?(node) ? %(<h6 class="block-title">#{prefix}#{node.title}#{suffix}</h6>\n) : ""
+      end
+
+      def self.display_title_suffix(node)
+        return "" unless node.attr?("title-suffix")
+
+        suffix = node.attr "title-suffix"
+        %(<span class="title-suffix">#{node.apply_subs suffix}</span>)
       end
 
       def self.display_title_prefix(node)
-        prefix = node.reftext? ? node.reftext : ""
-        node.title? && !node.title.empty? ? %(<span class="title-prefix">#{prefix}</span>) : prefix
+        prefix = node.attr?("title-prefix") ? node.attr("title-prefix") : ""
+        prefix = %(<span class="title-prefix">#{prefix}</span>) if node.title? && !node.title.empty? && !prefix.empty?
+        prefix
       end
 
       def self.wrap_id_classes(content, id, classes, tag_name = :div)
@@ -48,22 +57,18 @@ module Asciidoctor
 
       def self.wrap_node(content, node, tag_name = :div)
         base_class = node.context
-        mod = node.attr?("env") ? node.attr("env") : node.style
-        mod_class = if mod && mod != base_class.to_s
-                      "#{base_class}-#{mod}"
-                    else
-                      ""
-                    end
+        mod = node.style
+        mod_class = "#{base_class}-#{mod}" if mod && mod != base_class.to_s
         classes = [base_class, mod_class, node.role].compact.map(&:to_s).uniq.join(" ").strip
         wrap_id_classes content, node.id, classes, tag_name
       end
 
-      def self.wrap_node_with_title(content, node, tag_name = :div, needs_prefix: false)
-        show_title?(node) ? wrap_node(display_title(node, needs_prefix:) + content, node, tag_name) : content
+      def self.wrap_node_with_title(content, node, tag_name = :div)
+        show_title?(node) ? wrap_node(display_title(node) + content, node, tag_name) : content
       end
 
-      def self.wrap_id_classes_with_title(content, node, id, classes, needs_prefix: false)
-        show_title?(node) ? wrap_id_classes(display_title(node, needs_prefix:) + content, id, classes) : content
+      def self.wrap_id_classes_with_title(content, node, id, classes)
+        show_title?(node) ? wrap_id_classes(display_title(node) + content, id, classes) : content
       end
 
       def self.popover_button(content, content_id, classes = nil)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-html
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.7
 platform: ruby
 authors:
 - Ravi Rajani
@@ -98,8 +98,13 @@ files:
 - lib/asciidoctor/html/figure.rb
 - lib/asciidoctor/html/highlightjs.rb
 - lib/asciidoctor/html/list.rb
+- lib/asciidoctor/html/pagination.rb
 - lib/asciidoctor/html/popovers.rb
 - lib/asciidoctor/html/ref_tree_processor.rb
+- lib/asciidoctor/html/sc_inline_macro.rb
+- lib/asciidoctor/html/scroll.rb
+- lib/asciidoctor/html/sidebar.rb
+- lib/asciidoctor/html/table.rb
 - lib/asciidoctor/html/template.rb
 - lib/asciidoctor/html/tree_walker.rb
 - lib/asciidoctor/html/utils.rb