asciidoctor-html 1.1.13 → 2.0.1

data/lib/asciidoctor/html/book.rb

@@ -2,14 +2,14 @@
 
 require "pathname"
 require "erb"
-require "date"
 require "asciidoctor"
 require_relative "converter"
 require_relative "ref_tree_processor"
 require_relative "cref_inline_macro"
 require_relative "bi_inline_macro"
 require_relative "text_inline_macro"
-require_relative "template"
+require_relative "subnav_block_macro"
+require_relative "book_template"
 require_relative "pagination"
 require_relative "search"
 require_relative "utils"
@@ -26,6 +26,7 @@ module Asciidoctor
         inline_macro CrefInlineMacro
         inline_macro TextInlineMacro
         inline_macro BiInlineMacro
+        block_macro SubnavBlockMacro
       end
 
       DOCATTRS = {
@@ -35,7 +36,8 @@ module Asciidoctor
         "source-highlighter" => "highlight.js",
         "imagesdir" => IMG_PATH,
         "dollar" => "$",
-        "parskip" => %(<span class="parskip"></span><br>)
+        "parskip" => %(<span class="parskip"></span><br>),
+        "notitle" => %(<span class="notitle">&nbsp;</span>)
       }.freeze
 
       DEFAULT_OPTS = {
@@ -96,10 +98,10 @@ module Asciidoctor
           filename = "#{name}.html"
           File.write("#{outdir}/#{filename}", html)
           build_index(name, html) unless omit_search?
-          entries << Template.sitemap_entry("#{@base_url}#{filename}") if needs_sitemap
+          entries << BookTemplate.sitemap_entry("#{@base_url}#{filename}") if needs_sitemap
         end
         File.write "#{outdir}/#{SEARCH_PAGE}", search_page unless omit_search?
-        File.write("#{outdir}/sitemap.xml", Template.sitemap(entries)) if needs_sitemap
+        File.write("#{outdir}/sitemap.xml", BookTemplate.sitemap(entries)) if needs_sitemap
       end
 
       private
@@ -147,7 +149,7 @@ module Asciidoctor
         chapref = num_appendices == 1 ? chapname : chapref_default(chapname, chapnum)
         tdata = TData.new(
           chapprefix: "",
-          chaptitle: Template.appendix_title(chapname, chapnum, chapsubheading, num_appendices),
+          chaptitle: BookTemplate.appendix_title(chapname, chapnum, chapsubheading, num_appendices),
           chapheading: chapref,
           chapsubheading:,
           index:
@@ -201,17 +203,21 @@ module Asciidoctor
       end
 
       def outline(doc)
+        return doc.attr("outline") if doc.attr?("outline")
+
         items = []
         doc.sections.each do |section|
           next unless section.id && section.level == 1
 
           prefix = Utils.display_sectnum(section) if section.numbered
-          items << Template.nav_item("##{section.id}", "#{prefix}#{section.title}")
+          items << BookTemplate.nav_item("##{section.id}", "#{prefix}#{section.title}")
         end
         return "" unless items.size > 1
 
         doc.set_attr("has-subnav", true)
-        "<ul>#{items.join "\n"}</ul>"
+        outline = "<ul>#{items.join "\n"}</ul>"
+        doc.set_attr("outline", outline)
+        outline
       end
 
       def html(docs)
@@ -230,12 +236,12 @@ module Asciidoctor
         items = @templates.map do |k, td|
           active = (k == active_key)
           subnav = active && doc ? outline(doc) : ""
-          navtext = Template.nav_text td.chapprefix, td.chaptitle
-          Template.nav_item "#{k}.html", navtext, subnav, active:
+          navtext = BookTemplate.nav_text td.chapprefix, td.chaptitle
+          BookTemplate.nav_item "#{k}.html", navtext, subnav, active:
         end
         return items if omit_search?
 
-        items.unshift(Template.nav_item(
+        items.unshift(BookTemplate.nav_item(
                         SEARCH_PAGE,
                         %(<i class="bi bi-search"></i> Search),
                         active: (active_key == -1)
@@ -245,11 +251,13 @@ module Asciidoctor
       def build_template(key, doc)
         tdata = @templates[key]
         nav_items = nav_items key, doc
-        content = "#{ERB.new(doc.convert).result(binding)}\n#{pagination key}"
-        Template.html(
+        has_subnav = doc.attr?("has-subnav")
+        subnav = has_subnav ? outline(doc) : ""
+        content = ERB.new(doc.convert).result(binding)
+        BookTemplate.html(
           content,
           nav_items,
-          has_subnav: doc.attr?("has-subnav"),
+          has_subnav:,
           title: @title,
           short_title: @short_title,
           authors: display_authors(doc),
@@ -258,7 +266,8 @@ module Asciidoctor
           chapheading: tdata.chapheading,
           chapsubheading: tdata.chapsubheading,
           langs: langs(doc),
-          multipage: doc.attr("pagestyle") == "multi"
+          paginator: pagination(key),
+          pagestyle: doc.attr?("pagestyle") ? doc.attr("pagestyle").to_sym : :single
         )
       end
     end

data/lib/asciidoctor/html/{template.rb → book_template.rb}

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require "date"
 require_relative "highlightjs"
 require_relative "popovers"
 require_relative "sidebar"
@@ -10,7 +9,7 @@ require_relative "flip"
 module Asciidoctor
   module Html
     # The template for the book layout
-    module Template
+    module BookTemplate
       MENU_BTN = <<~HTML
         <button type="button" id="menu-btn" class="btn menu"
                 aria-expanded="false" aria-controls="sidebar">
@@ -47,11 +46,29 @@ module Asciidoctor
         HTML
       end
 
-      def self.toggle_button(multipage)
-        toggle_text = multipage ? "single page" : "multiple pages"
+      def self.toggle_button(pagestyle)
+        states = {
+          single: "single page view",
+          multi: "multipage view",
+          presentation: "presentation view (ESC to exit)"
+        }
+        alternate_states = states.map do |key, value|
+          <<~HTML
+            <li>
+            <a class="dropdown-item#{" active" if pagestyle == key}" href="#page" data-viewmode="#{key}">#{value}</a>
+            </li>
+          HTML
+        end
         <<~HTML
           <div class="layout-toggle">
-            <label for="btn-layout">View as</label> <button id="btn-layout" type="button" class="btn btn-link">#{toggle_text}</button>
+            <div class="dropdown">
+              <button class="btn btn-link dropdown-toggle" id="btn-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                #{states[pagestyle]}
+              </button>
+              <ul id="viewmode-actions" class="dropdown-menu">
+                #{alternate_states.join "\n"}
+              </ul>
+            </div>
           </div>
         HTML
       end
@@ -78,20 +95,22 @@ module Asciidoctor
       # - has_subnav: Boolean
       # - authors: String
       # - date: Date
-      # - multipage: Boolean|Null
+      # - pagestyle: Symbol
       def self.main(opts)
         <<~HTML
           <main id="main" class="main">
-          <div id="content-container" class="content-container dynamic-width">
+          <div id="content-container" class="content-container dynamic-width"  tabindex="0">
           #{chapheader opts[:chapheading], opts[:chapsubheading]}
           <div class="chaphead d-block">
-            #{toggle_button opts[:multipage] if opts[:has_subnav]}
+            #{toggle_button opts[:pagestyle] if opts[:has_subnav]}
             #{chapheading opts[:chapheading]}
             <h1 class="chaptitle">#{opts[:chapsubheading]}</h1>
+            <p class="lead chapauthors#{%( d-block) if opts[:pagestyle] == :presentation}">#{opts[:authors]}</p>
           </div>
           #{opts[:content]}
-          #{footer opts[:authors]}
           </div>
+          #{opts[:paginator]}
+          #{footer opts[:authors]}
           </main>
         HTML
       end
@@ -114,13 +133,17 @@ module Asciidoctor
         XML
       end
 
-      def self.header(title, short_title, has_subnav)
+      def self.header(title, short_title, chapheading, has_subnav)
+        sublink = <<~HTML
+          <span id="header-chapheading" class="home-sublink"><a class="home" href="#page">#{chapheading}</a></span>
+        HTML
         <<~HTML
           <header class="header#{" with-margin" unless has_subnav}">
             <div class="dynamic-width">
               <div class="home-container">
                 <a class="home d-none d-sm-block" href="./">#{title}</a>
                 <a class="home d-block d-sm-none" href="./">#{short_title}</a>
+                #{sublink if chapheading}
               </div>
             </div>
           </header>
@@ -129,7 +152,7 @@ module Asciidoctor
 
       def self.footer(authors)
         <<~HTML
-          <footer class="footer">
+          <footer class="footer dynamic-width">
             <div class="footer-left">&#169; <span id="cr-year"></span> #{authors}</div>
             <div class="footer-right">Built with
               <a href="https://github.com/ravirajani/asciidoctor-html">asciidoctor-html</a>
@@ -188,9 +211,14 @@ module Asciidoctor
       # - langs: Array[String]
       # - at_head_end: String
       # - at_body_end: String
-      # - multipage: Boolean|Null
+      # - paginator: String
+      # - pagestyle: Symbol(single|multi|presentation)
       def self.html(content, nav_items, opts = {})
         nav = !nav_items.empty? && (nav_items.size > 1 || opts[:has_subnav])
+        page_classes = ["page"]
+        page_classes << "multi" unless opts[:pagestyle] == :single
+        page_classes << "presentation" if opts[:pagestyle] == :presentation
+        page_classname = page_classes.join " "
         <<~HTML
           <!DOCTYPE html>
           <html lang="en">
@@ -200,9 +228,9 @@ module Asciidoctor
           </head>
           <body>
           #{sidebar(nav_items) if nav}
-          <div id="page" class="page#{" multi" if opts[:multipage]}">
+          <div id="page" class="#{page_classname}">
           #{MENU_BTN if nav}
-          #{header opts[:title], opts[:short_title], opts[:has_subnav]}
+          #{header opts[:title], opts[:short_title], opts[:chapheading], opts[:has_subnav]}
           #{main content:, **opts}
           </div> <!-- .page -->
           <script>document.getElementById("cr-year").textContent = (new Date()).getFullYear();</script>

data/lib/asciidoctor/html/converter.rb

@@ -72,7 +72,8 @@ module Asciidoctor
         icon = %(<div class="icon"><i class="bi bi-#{icon_class}"></i></div>)
         content = node.blocks? ? node.content : "<p>#{node.content}</p>"
         content = %(#{icon}\n#{Utils.display_title node}#{content})
-        Utils.wrap_id_classes content, node.id, "admonition admonition-#{name}"
+        classes = %(admonition admonition-#{name}#{" #{node.role}" if node.role})
+        Utils.wrap_id_classes content, node.id, classes
       end
 
       def convert_sidebar(node)

data/lib/asciidoctor/html/flip.rb

@@ -2,7 +2,7 @@
 
 module Asciidoctor
   module Html
-    # Flip when pagestyle=multipage
+    # Flip when pagestyle is multi or presentation
     module Flip
       FLIP = <<~JS
         (function() {
@@ -17,6 +17,8 @@ module Asciidoctor
           const sectsById = { "page": []};
 
           const page = document.getElementById('page');
+          const focusEl = document.getElementById('content-container');
+          const searchForm = document.getElementById('search-form');
           const chapheading = page.querySelector('.chapheading');
           const chaptitle = page.querySelector('.chaptitle');
 
@@ -41,6 +43,16 @@ module Asciidoctor
             el.dataset.withSect = currentId;
           });
 
+          for(const sects of Object.values(sectsById)) {
+            sects[sects.length - 1].classList.add('last-section-multipage');
+          }
+
+          function focusOnLoad() {
+            if(searchForm) return;
+
+            focusEl.focus({preventScroll: true});
+          }
+
           function updatePaginator(prev, next) {
             const paginator = document.querySelector('.paginator');
             if(!paginator) return;
@@ -64,7 +76,8 @@ module Asciidoctor
               const prevH = prev.querySelector(':scope > h2');
               const prevSectitle = prevH && (prevH.innerHTML + ' ');
               const prevLink = document.createElement('a');
-              let prevSectText = (prevSectitle || chapheading && chapheading.textContent + '<br>');
+              let prevSectText = prevSectitle || chapheading &&
+                ('<span class="title-prefix">' + chapheading.textContent + '</span><br>');
               if(!prevH) prevSectText += chaptitle.textContent;
               prevLink.href = '#' + (prev.id ? prev.id : 'page');
               prevLink.innerHTML = `
@@ -80,7 +93,10 @@ module Asciidoctor
           }
 
           function flip(e) {
-            if(!page.classList.contains('multi')) return;
+            if(!page.classList.contains('multi')) {
+              focusOnLoad();
+              return;
+            }
 
             e && e.preventDefault();
 
@@ -90,7 +106,9 @@ module Asciidoctor
 
             if(!target) id = 'page';
 
-            document.querySelector('.breadcrumb').classList.toggle('d-block', id != 'page');
+            const isPresentation = page.classList.contains('presentation');
+            document.querySelector('.breadcrumb').classList.toggle('d-block', id != 'page' && !isPresentation);
+            document.querySelector('.chapauthors').classList.toggle('d-block', isPresentation);
 
             let section = target && target.closest(sectSelector);
             if(section) {
@@ -130,23 +148,65 @@ module Asciidoctor
                 left: 0
               });
             }
+
+            focusOnLoad();
           }
           flip();
-          addEventListener('hashchange', flip);
 
-          const layoutButton = document.getElementById('btn-layout');
-          layoutButton && layoutButton.addEventListener('click', function(){
-            const multi = page.classList.contains('multi');
-            layoutButton.textContent = (multi ? 'multiple pages' : 'single page');
-            page.classList.toggle('multi');
-            if(multi) {
-              // We have switched to Single Page
+          const dropdownItems = document.querySelectorAll('#viewmode-actions .dropdown-item');
+          const dropdownToggle = document.getElementById('btn-toggle');
+          function changeViewmode(viewmode) {
+            page.classList.toggle('multi', viewmode == 'multi' || viewmode == 'presentation');
+            page.classList.toggle('presentation', viewmode == 'presentation');
+            if(viewmode == 'single') {
               ADHT.nudgeMenuBtn();
               updatePaginator();
             } else {
               flip();
             }
+            dropdownItems.forEach(el => {
+              const isActive = (el.dataset.viewmode == viewmode);
+              el.classList.toggle('active', isActive);
+              if(isActive) dropdownToggle.textContent = el.textContent;
+            });
+          }
+          function move(direction) {
+              const activeTopLevelLi = document.querySelector('#sidebar nav > ul > li.active');
+              if(!activeTopLevelLi) return;
+
+              const activeSubLi = activeTopLevelLi.querySelector('ul > li.active');
+              let href = '#page';
+              if(direction == 'left') {
+                const prevLi = activeSubLi && activeSubLi.previousElementSibling ||
+                  !activeSubLi && activeTopLevelLi.previousElementSibling;
+                if(prevLi) href = prevLi.firstElementChild.href;
+              } else if(direction == 'right') {
+                const nextLi = !activeSubLi &&
+                  (page.classList.contains('multi') && activeTopLevelLi.querySelector('ul > li') ||
+                    activeTopLevelLi.nextElementSibling) ||
+                  activeSubLi &&
+                  (activeSubLi.nextElementSibling || activeTopLevelLi.nextElementSibling) ||
+                  activeSubLi || activeTopLevelLi;
+                href = nextLi.firstElementChild.href;
+              }
+              navigation.navigate(href);
+          }
+          addEventListener('hashchange', flip);
+          addEventListener('keyup', function(e) {
+            switch(e.key) {
+              case 'ArrowLeft': move('left'); break;
+              case 'ArrowRight': move('right'); break;
+              case 'e':
+              case 'Escape':
+                page.classList.contains('presentation') && changeViewmode('multi');
+            }
           });
+
+          dropdownItems && dropdownItems.forEach(link => link.addEventListener('click', function(e){
+            e.preventDefault();
+            const viewmode = link.dataset.viewmode;
+            changeViewmode(viewmode);
+          }));
         })();
       JS
     end

data/lib/asciidoctor/html/pagination.rb

@@ -10,7 +10,7 @@ module Asciidoctor
       def display_paginator(prv, nxt)
         blank = %(<span class="blank">&nbsp;</span>)
         html = [<<~HTML
-          <div class="paginator-wrapper">
+          <div class="paginator-wrapper dynamic-width">
           <div class="paginator">
         HTML
         ]
@@ -18,7 +18,7 @@ module Asciidoctor
                   <<~HTML
                     <a href="#{prv.url}">
                       <div><i class="bi bi-chevron-compact-left"></i></div>
-                      <div>#{"#{prv.title}<br>" if prv.title}#{prv.text}</div>
+                      <div>#{%(<span class="title-prefix">#{prv.title}</span><br>) if prv.title}#{prv.text}</div>
                     </a>
                   HTML
                 else
@@ -27,7 +27,7 @@ module Asciidoctor
         html << if nxt
                   <<~HTML
                     <a href="#{nxt.url}">
-                      <div>#{"#{nxt.title}<br>" if nxt.title}#{nxt.text}</div>
+                      <div>#{%(<span class="title-prefix">#{nxt.title}</span><br>) if nxt.title}#{nxt.text}</div>
                       <div><i class="bi bi-chevron-compact-right"></i></div>
                     </a>
                   HTML

data/lib/asciidoctor/html/search.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "nokogiri"
+require_relative "book_template"
 
 module Asciidoctor
   module Html
@@ -26,7 +27,7 @@ module Asciidoctor
           <ul id="search-results" class="search-results list-group list-group-flush"></ul>
           </div>
         HTML
-        Template.html(
+        BookTemplate.html(
           content,
           nav_items,
           title: @title,

data/lib/asciidoctor/html/sidebar.rb

@@ -8,15 +8,23 @@ module Asciidoctor
         ADHT.nudgeMenuBtn = function() {
           const menuBtn = document.getElementById('menu-btn');
           if(!menuBtn) return;
+
+          const isPresentation = page.classList.contains('presentation')
+          if(isPresentation) {
+            menuBtn.getAnimations().forEach(anim => anim.cancel());
+            return menuBtn;
+          }
+
+          const scrollbarWidth = page.offsetWidth - page.clientWidth;
+
           // Nudge menuBtn in case there is a scrollbar
-          const main = document.getElementById('main');
-          const scrollbarWidth = page.offsetWidth - main.offsetWidth;
           menuBtn.animate(
             { transform: 'translateX(' + (-scrollbarWidth) + 'px)' },
             { fill: 'forwards', duration: 150 }
           );
+
           // Cache scrollbar width
-          ADHT.scrollbarWidth = scrollbarWidth
+          ADHT.scrollbarWidth = scrollbarWidth;
           return menuBtn;
         };
         (function() {
@@ -35,7 +43,7 @@ module Asciidoctor
           addEventListener('resize', hideSidebar);
           dismissBtn && dismissBtn.addEventListener('click', hideSidebar);
 
-          const menuBtn = ADHT.nudgeMenuBtn()
+          const menuBtn = ADHT.nudgeMenuBtn();
           if(!menuBtn) return;
           // Add click listener to toggle sidebar
           menuBtn.addEventListener('click', function() {

data/lib/asciidoctor/html/subnav_block_macro.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "asciidoctor"
+
+module Asciidoctor
+  module Html
+    # Inserts a subnav for current chapter
+    class SubnavBlockMacro < Asciidoctor::Extensions::BlockMacroProcessor
+      use_dsl
+
+      named :subnav
+      name_positional_attributes "title"
+
+      def process(parent, _target, attrs)
+        title = %(<h5 class="block-title">#{attrs["title"]}</h5>) if attrs.include?("title")
+        bordered_class = " bordered" if attrs.include?("border")
+        border_width = attrs["border"].to_i if bordered_class
+        style = %( style="border-top-width: #{border_width}px; border-bottom-width: #{border_width}px;") if border_width
+        roles = attrs["role"] if attrs.include?("role")
+        roles = attrs["roles"] if attrs.include?("roles")
+        role = " #{roles.tr ",", " "}" if roles
+        content = <<~HTML
+          <div class="subnav#{bordered_class}#{role}"#{style}>
+            #{title}
+            <nav>
+            <%= subnav %>
+            </nav>
+          </div>
+        HTML
+        create_pass_block parent, content, attrs, subs: nil
+      end
+    end
+  end
+end

data/lib/asciidoctor/html/table.rb

@@ -11,6 +11,8 @@ module Asciidoctor
                            cell.text
                          elsif cell.style == :literal
                            "<pre>#{cell.text}</pre>"
+                         elsif cell.style == :asciidoc
+                           cell.content
                          else
                            cell.content.join "\n"
                          end

data/lib/asciidoctor/html/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Html
-    VERSION = "1.1.13"
+    VERSION = "2.0.1"
   end
 end

data/lib/minitest/html_plugin.rb

@@ -55,7 +55,7 @@ module Minitest
       Pathname(TESTS_DIR).children.reject { |f| f.file? || f.basename.to_s.start_with?("_") }.sort.each do |pn|
         report_files results, pn
       end
-      adoc = %(= Test Results\nRavi Rajani\n#{time}\n#{results.join "\n"})
+      adoc = %(= Test Results\n:pagestyle: multi\n\n#{time}\n\nsubnav::[border=1]\n\n#{results.join "\n"})
       File.write("#{DOCS_DIR}/tests.adoc", adoc)
       Asciidoctor::Html::CLI.run({ "config-file": CONFIG_FILE, watch: false })
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-html
 version: !ruby/object:Gem::Version
-  version: 1.1.13
+  version: 2.0.1
 platform: ruby
 authors:
 - Ravi Rajani
@@ -106,6 +106,7 @@ files:
 - lib/asciidoctor/html.rb
 - lib/asciidoctor/html/bi_inline_macro.rb
 - lib/asciidoctor/html/book.rb
+- lib/asciidoctor/html/book_template.rb
 - lib/asciidoctor/html/cli.rb
 - lib/asciidoctor/html/converter.rb
 - lib/asciidoctor/html/cref_inline_macro.rb
@@ -119,8 +120,8 @@ files:
 - lib/asciidoctor/html/scroll.rb
 - lib/asciidoctor/html/search.rb
 - lib/asciidoctor/html/sidebar.rb
+- lib/asciidoctor/html/subnav_block_macro.rb
 - lib/asciidoctor/html/table.rb
-- lib/asciidoctor/html/template.rb
 - lib/asciidoctor/html/text_inline_macro.rb
 - lib/asciidoctor/html/tree_walker.rb
 - lib/asciidoctor/html/utils.rb