asciidoctor-html 0.1.2 → 0.1.4

data/lib/asciidoctor/html/figure.rb

@@ -1,30 +1,30 @@
 # frozen_string_literal: true
 
-require_relative "olist"
-
 module Asciidoctor
   module Html
     # Helper functions for the image/figure conversion.
     # Mixed into the Converter class.
     module Figure
-      def display_image(node, target, attrs)
+      def display_image(node, target, title_attr: false)
+        attrs = image_attrs(node, title_attr:)
         %(<img src="#{node.image_uri target}" #{attrs}#{@void_element_slash}>)
       end
 
-      def image_attrs(node)
+      def image_attrs(node, title_attr: false)
         width = node.attr?("width") ? %( width="#{node.attr "width"}") : ""
         height = node.attr?("height") ? %( height="#{node.attr "height"}") : ""
+        title = encode_attribute_value node.attr("title") if node.attr?("title") && title_attr
+        title = title ? %( data-bs-toggle="tooltip" data-bs-title="#{title}") : ""
         alt = encode_attribute_value node.alt
-        %(alt="#{alt}"#{width}#{height})
+        %(alt="#{alt}"#{width}#{height}#{title})
       end
 
       def display_figure(node)
         target = node.attr "target"
         title = node.title? ? node.title : ""
-        attrs = image_attrs node
-        image = display_image node, target, attrs
-        caption = %(<figcaption>#{Utils.display_title_prefix node}#{title}</figcaption>)
-        %(<figure>\n    #{image}\n    #{caption}\n</figure>)
+        image = display_image node, target
+        caption = %(    <figcaption>#{Utils.display_title_prefix node}#{title}</figcaption>)
+        %(<figure>\n    #{image}\n#{caption}\n</figure>)
       end
 
       def convert_figlist(node)
@@ -32,7 +32,7 @@ module Asciidoctor
           %(<li#{Utils.id_class_attr_str item.id}><figure>\n#{item.text}\n</figure></li>)
         end
         content = Utils.wrap_id_classes result.join("\n"), nil, "figlist loweralpha", :ol
-        title = Utils.display_title node
+        title = %(<div class="figlist-title">#{Utils.display_title_prefix(node)}#{node.title}</div>)
         classes = ["figlist-wrapper", node.role].compact.join(" ")
         Utils.wrap_id_classes %(#{content}#{title}), node.id, classes
       end

data/lib/asciidoctor/html/highlightjs.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Constants for the highlightjs syntax highlighting library
+    module Highlightjs
+      CDN_PATH = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build"
+
+      INCLUDED_LANGS = {
+        "bash" => true,
+        "c" => true,
+        "cpp" => true,
+        "csharp" => true,
+        "css" => true,
+        "diff" => true,
+        "go" => true,
+        "graphql" => true,
+        "ini" => true,
+        "java" => true,
+        "javascript" => true,
+        "json" => true,
+        "kotlin" => true,
+        "less" => true,
+        "lua" => true,
+        "makefile" => true,
+        "markdown" => true,
+        "objectivec" => true,
+        "perl" => true,
+        "php" => true,
+        "php-template" => true,
+        "plaintext" => true,
+        "python" => true,
+        "python-repl" => true,
+        "r" => true,
+        "ruby" => true,
+        "rust" => true,
+        "scss" => true,
+        "shell" => true,
+        "sql" => true,
+        "swift" => true,
+        "typescript" => true,
+        "vbnet" => true,
+        "wasm" => true,
+        "xml" => true,
+        "yaml" => true
+      }.freeze
+
+      PLUGIN = <<~JS
+        function toggleCopyIcon(copyIcon) {
+          copyIcon.classList.toggle("bi-clipboard");
+          copyIcon.classList.toggle("bi-clipboard-check");
+        }
+        hljs.addPlugin({
+          "after:highlightElement": function({ el, result, text }) {
+            const wrapper = el.parentElement; // pre element
+            if(wrapper == null) { return; }
+
+            const overlay = document.createElement("div");
+            overlay.classList.add("copy-button");
+            overlay.textContent = result.language.toUpperCase() + ' ';
+
+            const copyButton = document.createElement("button");
+            copyButton.classList.add("btn");
+            copyButton.setAttribute("type", "button");
+            copyButton.setAttribute("data-bs-toggle", "tooltip");
+            copyButton.setAttribute("data-bs-title", "Copy to clipboard");
+            if(!touch) {bootstrap.Tooltip.getOrCreateInstance(copyButton);}
+
+            const copyIcon = document.createElement("i");
+            copyIcon.classList.add("bi", "bi-clipboard");
+
+            copyButton.append(copyIcon);
+            overlay.append(copyButton);
+
+            copyButton.onclick = function() {
+              navigator.clipboard.writeText(text);
+              if(!copyIcon.classList.contains("bi-clipboard-check")) {
+                toggleCopyIcon(copyIcon);
+                setTimeout(() => { toggleCopyIcon(copyIcon); }, 1500);
+              }
+            };
+
+            // Append the copy button to the wrapper
+            wrapper.appendChild(overlay);
+
+            // Find and replace inline callouts
+            const rgx = /[\u2460-\u2468]/gu;
+            if(text.match(rgx)) {
+              text = text.replaceAll(rgx, "");
+              el.innerHTML = el.innerHTML.replaceAll(rgx, (match) => {
+                return '<i class="bi bi-' + (match.charCodeAt() - 9311) + '-circle"></i>';
+              });
+            }
+          }
+        });
+      JS
+    end
+  end
+end

data/lib/asciidoctor/html/list.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Helper functions for the list conversion.
+    module List
+      def self.convert(node, tag_name = :ol)
+        depth = node.attr "list-depth"
+        flat = node.attr? "flat-style"
+        level = depth + 1
+        classes = [
+          "list",
+          "list-#{node.context}",
+          "level-#{level}",
+          flat ? "pseudocode" : node.style,
+          node.role
+        ].compact
+        classes << "checklist" if node.option?("checklist")
+        result = [%(<#{tag_name}#{Utils.dyn_id_class_attr_str node, classes.join(" ")}>)]
+        node.items.each do |item|
+          result << display_list_item(item)
+        end
+        result << %(</#{tag_name}> <!-- .level-#{level} -->\n)
+        Utils.wrap_id_classes_with_title result.join("\n"), node, node.id, "list-wrapper"
+      end
+
+      def self.display_list_item(item)
+        result = []
+        result << %(<li#{Utils.id_class_attr_str item.id,
+                                                 item.role}><div class="li-mark">#{item.attr "mark"}</div>)
+        result << %(<div class="li-content"><p>#{item.text}</p>)
+        result << "\n#{item.content}" if item.blocks?
+        result << %(</div></li>#{Utils.id_class_sel_comment item.id, item.role})
+        result.join "\n"
+      end
+    end
+  end
+end

data/lib/asciidoctor/html/popovers.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # 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
+              }
+              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);
+          });
+        }
+      JS
+
+      INIT = "#{TOOLTIPS}\n#{POPOVERS}".freeze
+    end
+  end
+end

data/lib/asciidoctor/html/ref_tree_processor.rb

@@ -1,71 +1,99 @@
 # frozen_string_literal: true
 
+require "asciidoctor"
 require "roman-numerals"
 require_relative "tree_walker"
+require_relative "highlightjs"
 
 module Asciidoctor
   module Html
-    # Traverses the document tree and attaches a correct reftext to
-    # numbered nodes.
+    # Traverses the document tree and:
+    # - attaches a correct reftext to numbered nodes;
+    # - populates the text (= reftext for inline nodes) of anchors at
+    #   the beginning of a list item for an ordered list;
+    # - registers every encountered source code language not included
+    #   in the default highlightjs build.
     class RefTreeProcessor < Asciidoctor::Extensions::TreeProcessor
       NUMBERED_CONTEXTS = {
         example: "thm-number",
         table: "tbl-number",
-        image: "fig-number"
+        image: "fig-number",
+        stem: "eqn-number",
+        listing: "ltg-number"
       }.freeze
 
-      def number_within(document)
-        return :chapter if document.attr? "chapnum"
-        return :section if document.attr? "sectnums"
-
-        :document
-      end
-
       def assign_numeral!(node, document, counter_name)
         document.counters[counter_name] ||= 0
         node.numeral = (document.counters[counter_name] += 1)
       end
 
-      def relative_numeral(node, document, sectnum)
-        if node.numeral
-          prefix_number = (document.attr("chapnum") || sectnum).to_i
-          prefix_number.positive? ? "#{prefix_number}.#{node.numeral}" : node.numeral.to_s
-        else
-          ""
-        end
+      def relative_numeral(node, document)
+        return "" unless node.numeral
+
+        chapnum = document.attr "chapnum"
+        has_prefix = chapnum && !chapnum.empty? && chapnum != "0"
+        has_prefix ? "#{chapnum}.#{node.numeral}" : node.numeral.to_s
       end
 
-      def process_numbered_block!(block, document, sectnum)
+      def process_numbered_block!(block, document)
         context = block.context
-        env = (block.style || context).to_s
-        env = "figure" if context == :image || env == "figlist"
-        block.set_attr "showcaption", true
+        style = block.style
+        context = :image if style == "figlist"
+        env = env context, style
+        block.set_attr("showcaption", true) unless context == :stem
         assign_numeral! block, document, NUMBERED_CONTEXTS[context]
-        title_prefix = "#{env.capitalize} #{relative_numeral block, document, sectnum}"
-        block.set_attr "reftext", title_prefix
+        relative_numeral = relative_numeral block, document
+        reftext = if context == :stem
+                    "(#{relative_numeral})"
+                  else
+                    "#{env.capitalize} #{relative_numeral}"
+                  end
+        block.set_attr "reftext", reftext
+      end
+
+      def env(context, style)
+        case context
+        when :image then "figure"
+        when :stem then "equation"
+        when :listing then "listing"
+        else style || context.to_s
+        end
       end
 
       def process_numbered_block?(block)
-        NUMBERED_CONTEXTS.key?(block.context) || block.style == "figlist"
+        context = block.context
+        case context
+        when :olist
+          block.style == "figlist"
+        when :stem, :listing
+          block.option? "numbered"
+        else
+          NUMBERED_CONTEXTS.include? context
+        end
       end
 
       def li_mark(depth, idx)
         case depth
-        when 0
-          idx + 1
-        when 1
-          ("a".."z").to_a[idx]
-        when 2
-          RomanNumerals.to_roman(idx + 1).downcase
-        when 3
-          ("a".."z").to_a[idx].upcase
+        when 1 then ("a".."z").to_a[idx]
+        when 2 then RomanNumerals.to_roman(idx + 1).downcase
+        when 3 then ("a".."z").to_a[idx].upcase
+        else idx + 1
         end
       end
 
-      def ref_li_mark(mark, depth)
-        return mark.to_s if depth.even?
+      def bullet(depth)
+        case depth
+        when 1 then "&#8208;"
+        when 2 then "&#11089;"
+        when 3 then "&#9702;"
+        else "&#8226;"
+        end
+      end
+
+      def ref_li_mark(mark, depth, style = nil)
+        return "[#{mark}]" if style == "bibliography"
 
-        "(#{mark})"
+        depth.even? ? mark.to_s : "(#{mark})"
       end
 
       def offset(list)
@@ -76,7 +104,7 @@ module Asciidoctor
       # its reftext to that of item's if necessary.
       def register_reftext!(item, reftext)
         item.set_attr "reftext", reftext
-        /^<a id="(?<anchor_id>.+?)"/ =~ item.text
+        /\A<a id="(?<anchor_id>.+?)"/ =~ item.text
         node = item.document.catalog[:refs][anchor_id]
         node&.text ||= reftext
       end
@@ -93,57 +121,106 @@ module Asciidoctor
           block.set_attr("flat-style", true)
         else
           offset = offset block
+          style = block.style
           block.items.each_with_index do |item, idx|
-            d = block.style == "figlist" ? 1 : depth
+            d = style == "figlist" ? 1 : depth
             mark = li_mark(d, idx + offset)
             item.set_attr "mark", mark
-            item_reftext = "#{parent_reftext}#{ref_li_mark mark, d}"
+            item_reftext = "#{parent_reftext}#{ref_li_mark mark, d, style}"
             register_reftext! item, item_reftext
           end
         end
       end
 
+      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>)
+          item.set_attr "mark", icon
+          register_reftext! item, icon
+        end
+      end
+
+      def process_ulist!(block, depth)
+        block.set_attr "list-depth", depth
+        block.items.each do |item|
+          is_checkbox = item.attr? "checkbox"
+          icon_class = item.attr?("checked") ? "check-" : ""
+          icon = %(<i class="bi bi-#{icon_class}square"></i>)
+          mark = is_checkbox ? icon : bullet(depth)
+          item.role = "checked" if is_checkbox
+          item.set_attr "mark", mark
+        end
+      end
+
       def process_flat_item!(item, idx)
         mark = li_mark(0, idx)
         item.set_attr "mark", mark
         register_reftext! item, ref_li_mark(mark, 0)
       end
 
-      def reset_counters!(document)
-        counters = document.counters
-        NUMBERED_CONTEXTS.each_value do |counter_name|
-          counters[counter_name] = 0
-        end
+      def process_source_code!(document, lang)
+        document.set_attr("source-langs", {}) unless document.attr?("source-langs")
+        langs = document.attr "source-langs"
+        langs[lang] = true unless Highlightjs::INCLUDED_LANGS.include?(lang)
+      end
+
+      def olist_item?(node)
+        node.context == :list_item && node.parent.context == :olist
+      end
+
+      def ulist_item?(node)
+        node.context == :list_item && node.parent.context == :ulist
+      end
+
+      def ulist?(node)
+        node.context == :ulist
+      end
+
+      def olist?(node)
+        node.context == :olist
+      end
+
+      def colist?(node)
+        node.context == :colist
+      end
+
+      def source_code?(node)
+        node.context == :listing && node.style == "source" && node.attr?("language")
       end
 
       def process(document)
-        sectnum = 0
         listdepth = 0
+        bulletdepth = 0
         flat_style = false
         flat_idx = 0 # flat index for (pseudocode) list
-        tw = TreeWalker.new(document)
+        tw = TreeWalker.new document
         while (block = tw.next_block)
-          context = block.context
           unless block.attr? "refprocessed"
-            process_numbered_block!(block, document, sectnum) if process_numbered_block?(block)
-            if context == :section && block.level == 1 && number_within(document) == :section
-              sectnum += 1
-              reset_counters! document
-            elsif context == :olist
+            process_numbered_block!(block, document) if process_numbered_block?(block)
+            if colist? block
+              process_colist! block
+            elsif olist? block
               if listdepth.zero?
                 flat_style = (block.style == "pseudocode")
-                flat_idx = offset block
+                flat_idx = offset block # rubocop:disable Lint/UselessAssignment
               end
-              process_olist!(block, listdepth, flat_style:)
-            elsif context == :list_item && flat_style
-              process_flat_item!(block, flat_idx)
+              process_olist! block, listdepth, flat_style:
+            elsif olist_item?(block) && flat_style
+              process_flat_item! block, flat_idx
               flat_idx += 1
+            elsif source_code? block
+              process_source_code! document, block.attr("language")
+            elsif ulist? block
+              process_ulist! block, bulletdepth
             end
             block.set_attr "refprocessed", true
           end
           tw.walk do |move|
-            listdepth += 1 if context == :olist && move == :explore
-            listdepth -= 1 if context == :list_item && move == :retreat
+            listdepth += 1 if olist?(block) && move == :explore
+            listdepth -= 1 if olist_item?(block) && move == :retreat
+            bulletdepth += 1 if ulist?(block) && move == :explore
+            bulletdepth -= 1 if ulist_item?(block) && move == :retreat
           end
         end
       end

data/lib/asciidoctor/html/template.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+require "date"
+require_relative "highlightjs"
+require_relative "popovers"
+
+module Asciidoctor
+  module Html
+    # The template for the book layout
+    module Template
+      def self.nav_item(target, text, content = "", active: false)
+        active_class = active ? %( class="active") : ""
+        link = %(<a href="#{target}">#{text}</a>)
+        subnav = content.empty? ? content : "\n#{content}\n"
+        %(<li#{active_class}>#{link}#{subnav}</li>\n)
+      end
+
+      def self.nav_text(chapnum, chaptitle)
+        return chaptitle if chapnum.empty?
+
+        %(<span class="title-mark">#{chapnum}</span>#{chaptitle})
+      end
+
+      def self.appendix_title(chapname, numeral, doctitle, num_appendices)
+        numeral = num_appendices == 1 ? "" : " #{numeral}"
+        %(<span class="title-prefix">#{chapname}#{numeral}</span>#{doctitle})
+      end
+
+      def self.sidebar(nav_items)
+        <<~HTML
+          <div id="sidebar" class="sidebar collapse collapse-horizontal">
+          <nav id="sidenav"><ul>
+          #{nav_items.join "\n"}
+          </ul></nav>
+          </div> <!-- .sidebar -->
+        HTML
+      end
+
+      def self.main(content, chapnum, chaptitle, author, year)
+        <<~HTML
+          <main class="main">
+          <div class="content-container">
+          <h2>#{nav_text chapnum, chaptitle}</h2>
+          #{content}
+          #{footer author, 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
+        <<~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)
+      end
+
+      def self.highlightjs(langs)
+        langs.map do |lang|
+          %(<script src="#{Highlightjs::CDN_PATH}/languages/#{lang}.min.js"></script>)
+        end.join("\n  ")
+      end
+
+      def self.head(title, langs)
+        <<~HTML
+          <head>
+            <meta charset="utf-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <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">
+            <link rel="icon" type="image/png" sizes="16x16" href="#{FAVICON_PATH}/favicon-16x16.png">
+            <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>
+            #{highlightjs langs}
+            <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+          </head>
+        HTML
+      end
+
+      # opts:
+      # - title: String
+      # - short_title: String
+      # - author: String
+      # - date: Date
+      # - nav: Boolean
+      # - chapnum: Int
+      # - 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
+        <<~HTML
+          <!DOCTYPE html>
+          <html lang="en">
+          #{head opts[:title], 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;
+          #{Highlightjs::PLUGIN}
+          hljs.highlightAll();
+          #{hash_listener}
+          #{Popovers::POPOVERS}
+          </script>
+          </body>
+          </html>
+        HTML
+      end
+    end
+  end
+end

data/lib/asciidoctor/html/tree_walker.rb

@@ -23,7 +23,9 @@ module Asciidoctor
 
         if block.blocks? && @level < @max_levels && @idx[@level + 1] < block.blocks.size
           @level += 1
-          @path.push(block.blocks[@idx[@level]])
+          el = block.blocks[@idx[@level]]
+          el = el.last if el.is_a?(Array) # Get the <dd> from an array of <dt>'s followed by <dd>
+          @path.push(el)
           callback.call(:explore)
         else
           @idx[@level + 1] = 0 if @level < @max_levels

data/lib/asciidoctor/html/utils.rb

@@ -65,6 +65,12 @@ module Asciidoctor
       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
       end
+
+      def self.popover_button(content, content_id, classes = nil)
+        extra_classes = classes ? " #{classes}" : ""
+        attrs = %( tabindex="0" role="button" class="btn-po#{extra_classes}" data-contentid="#{content_id}")
+        %(<a#{attrs}>#{content}</a>)
+      end
     end
   end
 end