asciidoctor-html 0.1.6 → 0.1.7

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)
@@ -156,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

@@ -4,7 +4,7 @@ module Asciidoctor
   module Html
     # Helpers for the table conversion
     module Table
-      def self.display_row(tsec, row)
+      def self.display_row(node, tsec, row)
         result = ["<tr>"]
         row.each do |cell|
           cell_content = if tsec == :head
@@ -14,8 +14,11 @@ module Asciidoctor
                          else
                            cell.content.join "\n"
                          end
-          cell_tag_name = (tsec == :head || cell.style == :header ? %(th scope="col") : "td")
-          cell_class_attribute = %( class="halign-#{cell.attr "halign"} align-#{cell.attr "valign"}")
+          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}"
@@ -29,7 +32,7 @@ module Asciidoctor
         node.rows.to_h.map do |tsec, rows|
           next if rows.empty?
 
-          "<t#{tsec}>\n#{rows.map { |row| display_row(tsec, row) }.join("\n")}\n</t#{tsec}>"
+          "<t#{tsec}>\n#{rows.map { |row| display_row(node, tsec, row) }.join("\n")}\n</t#{tsec}>"
         end.join("\n")
       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,21 +37,29 @@ 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">
-          <h1>#{nav_text chapnum, chaptitle}</h1>
-          #{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
@@ -66,23 +83,11 @@ module Asciidoctor
         XML
       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.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
@@ -100,7 +105,7 @@ module Asciidoctor
 
       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
 
@@ -118,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
@@ -131,38 +146,28 @@ module Asciidoctor
       # - author: String
       # - description: String
       # - date: Date
-      # - chapnum: Int
+      # - chapheading: String
       # - chaptitle: String
       # - langs: Array[String]
       def self.html(content, nav_items, opts = {})
         nav = (nav_items.size > 1)
-        hash_listener = if nav
-                          <<~JS
-                            addEventListener('hashchange', function() {
-                              collapse = bootstrap.Collapse.getInstance('#sidebar');
-                              if(collapse) collapse.hide();
-                            });
-                          JS
-                        else
-                          ""
-                        end
         <<~HTML
           <!DOCTYPE html>
           <html lang="en">
           #{head opts[:title], opts[:description], opts[:author], opts[:langs]}
           <body>
-          #{header opts[:title], opts[:short_title], nav:}
           #{sidebar(nav_items) if 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;
+          <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)
@@ -54,12 +63,12 @@ module Asciidoctor
         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.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Ravi Rajani
@@ -98,8 +98,12 @@ 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