swedbank-pay-design-guide-jekyll-theme 1.8.1 → 1.9.4

data/_sass/sidebar.scss

@@ -6,14 +6,13 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            margin-bottom: 2.5rem;
             margin-top: 2rem;
             text-decoration: none;
             color: #512b2b;
 
             img {
-                width: 120px;
-                margin-top: -1rem;
+                margin-top: 1.5rem;
+                margin-bottom: 1.25rem;
             }
 
             span {
@@ -30,6 +29,37 @@
             }
         }
 
+        .search-container {
+            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
+            border-radius: 0.125rem;
+
+            &:focus-within {
+                outline: -webkit-focus-ring-color auto 0.5px;
+            }
+
+            .search-input {
+                color: $medium-brown;
+                font-size: 0.875rem;
+                border: none;
+                padding: 0.375rem;
+                
+                &:focus {
+                    color: $brown;
+                    outline: none
+                }
+            }
+
+            i {
+                display: block;
+                color: $brown;
+
+                &:hover {
+                    color: $turquoise-link;
+                }
+            }
+
+        }
+
         .main-nav-ul {
             .nav-group {
                 .nav-ul {

data/_sass/swedbank-pay-design-guide-theme.scss

@@ -1,6 +1,7 @@
 @import 'colors.scss';
 @import 'fonts.scss';
 @import 'variables.scss';
+@import 'breakpoints.scss';
 
 @import 'card.scss';
 @import 'code-view.scss';
@@ -17,6 +18,10 @@ img {
     max-width: 100%;
 }
 
+body {
+    font-size: 1.125rem;
+}
+
 .table {
 
     th,

data/_sass/title-header.scss

@@ -32,6 +32,9 @@
                 margin-right: 0.5rem;
             }
         }
+        a {
+            color: #43d0dd;
+        }
     }
 
 

data/_sass/variables.scss

@@ -1 +1 @@
-$max-width: 704px;
+$max-width: 880px;

data/assets/css/pygments-autumn.css

@@ -36,7 +36,7 @@
 .highlight .nf { color: #00aa00 } /* Name.Function */
 .highlight .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */
 .highlight .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #aa0000 } /* Name.Variable */
+.highlight .nv { color: #e07088 } /* Name.Variable */
 .highlight .ow { color: #0000aa } /* Operator.Word */
 .highlight .w { color: #bbbbbb } /* Text.Whitespace */
 .highlight .mb { color: #009999 } /* Literal.Number.Bin */

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '1.8.1'
+      '1.9.4'
     end
   end
 end

data/lib/safe_merge.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# The Hash class
+class Hash
+  # Safely merges the current Hash with an 'other' Hash.
+  def safe_merge(other)
+    all_keys = keys | other.keys
+    result_hash = {}
+
+    all_keys.each do |key|
+      hash_value = {}
+
+      if key? key
+        value = self[key]
+        hash_value = value unless value.nil?
+      end
+
+      if other.key? key
+        value = other[key]
+        hash_value = hash_value.merge(value) unless value.nil?
+      end
+
+      result_hash[key] = hash_value
+    end
+
+    result_hash
+  end
+end

data/lib/sanitized_filename.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# The String class
+class String
+  # Sanitizes a filename
+  def sanitized
+    match = match(/(?m)(?<=\b_site).*$/)
+    sanitized_filename = match ? match[0] : self
+    sanitized_filename = sanitized_filename.gsub('index.html', '')
+    sanitized_filename.gsub('.html', '')
+  end
+end

data/lib/sidebar.rb

@@ -3,211 +3,38 @@
 require 'jekyll'
 require 'nokogiri'
 require 'json'
+require_relative 'sidebar_page'
+require_relative 'sidebar_parser'
+require_relative 'sidebar_renderer'
+require_relative 'sidebar_tree_builder'
 
-module Jekyll
+module SwedbankPay
   # A nice sidebar
-  class Sidebar
-    attr_accessor :hash_pre_render
-    attr_accessor :filename_with_headers
-
-    def initialize
-      @hash_pre_render = {}
-      @filename_with_headers = {}
-    end
-
-    def pre_render(page)
-      menu_order = page['menu_order'].nil? ? 0 : page['menu_order']
-      hide_from_sidebar = page['hide_from_sidebar'].nil? ? false : page['hide_from_sidebar']
-      url = page['url'].gsub('index.html', '').gsub('.html', '')
-      @hash_pre_render[url] = {
-        title: page['title'],
-        url: page['url'].gsub('.html', ''),
-        name: page['name'],
-        menu_order: menu_order,
-        hide_from_sidebar: hide_from_sidebar
-      }
-    end
-
-    def post_write(site)
-      files = []
-      Dir.glob("#{site.config['destination']}/**/*.html") do |filename|
-        doc = File.open(filename) { |f| Nokogiri::HTML(f) }
-        files.push(doc)
-
-        headers = []
-        doc.xpath('//h2 ').each do |header|
-          next unless header['id']
-
-          child = header.last_element_child
-          header = {
-            id: header['id'],
-            title: header.content.strip,
-            hash: (child['href']).to_s
-          }
-          headers.push(header)
-        end
-        sanitized_filename = sanitize_filename(filename)
-        @filename_with_headers[sanitized_filename] = { headers: headers }
+  module Sidebar
+    class << self
+      attr_reader :pages
+
+      def pre_render(site)
+        Jekyll.logger.debug('           Sidebar: pre_render')
+        @parser = SidebarParser.new(site)
+        @pages = SidebarTreeBuilder.new(@parser.pages)
+        Jekyll.logger.debug("           Sidebar: #{@pages.inspect}")
       end
 
-      Dir.glob("#{site.config['destination']}/**/*.html") do |filename|
-        sanitized_filename = sanitize_filename(filename)
-        sidebar = render(sanitized_filename)
-        file = File.open(filename) { |f| Nokogiri::HTML(f) }
-        file.xpath('//*[@id="dx-sidebar-main-nav-ul"]').each do |location|
-          location.inner_html = sidebar
-        end
-        File.open(filename, 'w') { |f| f.write(file.to_html(encoding: 'UTF-8')) }
+      def post_write
+        @sidebar_renderer = SidebarRenderer.new(@pages)
+        @parser.parse(@pages)
+        Jekyll.logger.debug('           Sidebar: post_write')
+        @sidebar_renderer.render
       end
-
-      # File.open('_site/sidebar.html', 'w') { |f| f.write(sidebar) }
-    end
-
-    private
-
-    def sanitize_filename(filename)
-      sanitized_filename = filename.match(/(?m)(?<=\b_site).*$/)[0]
-      sanitized_filename = sanitized_filename.gsub('index.html', '')
-      sanitized_filename.gsub('.html', '')
-    end
-
-    def generateSubgroup(filename, key, value, all_subgroups, level)
-      title = value[:title].split('–').last
-      
-      subsubgroup_list = all_subgroups.select do |subsubgroup_key, _subsubgroup_value|
-        subsubgroup_key.include? key and subsubgroup_key != key and \
-          key.split('/').length > level
-      end
-
-      subgroup = ''
-      has_subgroups = !all_subgroups.empty?
-      if value[:headers].any? || !subsubgroup_list.empty?
-        if has_subgroups
-          url = value[:url]
-          active = active?(filename, url, true)
-          # puts "#{url}, #{filename}, #{key}" if active
-          item_class = active || (url.split('/').length > level && filename.start_with?(url)) ? 'nav-subgroup active' : 'nav-subgroup'
-          subgroup << "<li class=\"#{item_class}\">"
-          subgroup << "<div class=\"nav-subgroup-heading\"><i class=\"material-icons\">arrow_right</i><a href=\"#{url}\">#{title}</a></div>"
-          subgroup << '<ul class="nav-ul">'
-
-          if subsubgroup_list.empty?
-            value[:headers].each do |header|
-              subgroup << "<li class=\"nav-leaf\"><a href=\"#{value[:url]}#{header[:hash]}\">#{header[:title]}</a></li>"
-            end
-          else
-            subgroup_leaf_class = active ? 'nav-leaf nav-subgroup-leaf active' : 'nav-leaf nav-subgroup-leaf'
-            subgroup << "<li class=\"#{subgroup_leaf_class}\"><a href=\"#{value[:url]}\">#{title} overview</a></li>"
-
-            subsubgroup_list.each do |subsubgroup_key, subsubgroup_value|
-              subgroup << generateSubgroup(filename, subsubgroup_key, subsubgroup_value, subsubgroup_list, 3)
-            end
-          end
-
-          subgroup << '</ul>'
-          subgroup << '</li>'
-        else
-          value[:headers].each do |header|
-            subgroup << "<li class=\"nav-leaf\"><a href=\"#{value[:url]}#{header[:hash]}\">#{header[:title]}</a></li>"
-          end
-        end
-      else
-        subgroup << if has_subgroups
-                      "<li class=\"nav-leaf nav-subgroup-leaf\"><a href=\"#{value[:url]}\">#{title}</a></li>"
-                    else
-                      "<li class=\"nav-leaf\"><a href=\"#{value[:url]}\">#{title}</a></li>"
-                    end
-      end
-
-      subgroup
-    end
-
-    def render(filename)
-      sidebar = ''
-
-      merged = merge(@hash_pre_render, @filename_with_headers).sort_by { |_key, value| value[:menu_order] }
-      merged.select { |key, _value| key.split('/').length <= 2 }.each do |key, value|
-        next if value[:title].nil?
-        next if value[:hide_from_sidebar]
-
-        subgroups = merged.select { |subgroup_key, _subgroup_value| subgroup_key.include? key and subgroup_key != key and key != '/' }
-
-        active = active?(filename, key)
-        # puts "#{filename}, #{key}" if active
-        item_class = active ? 'nav-group active' : 'nav-group'
-
-        child = "<li class=\"#{item_class}\">"
-        child << "<div class=\"nav-group-heading\"><i class=\"material-icons\">arrow_right</i><span>#{value[:title].split('–').first}</span></div>"
-
-        child << '<ul class="nav-ul">'
-
-        subgroup = generateSubgroup(filename, key, value, subgroups, 2)
-
-        child << subgroup
-
-        if subgroups.any?
-          subgroups.select { |subgroup_key, _subgroup_value| subgroup_key.split('/').length <= 3 }.each do |subgroup_key, subgroup_value|
-            subgroup = generateSubgroup(filename, subgroup_key, subgroup_value, subgroups, 2)
-            child << subgroup
-          end
-        end
-
-        child << '</ul>'
-        child << '</li>'
-        sidebar << child
-      end
-
-      File.open('_site/sidebar.html', 'w') { |f| f.write(sidebar) }
-      sidebar
-    end
-
-    def active?(filename, url, exact = false)
-      if filename == '/' || url == '/'
-        if filename == '/' && url == '/'
-          return true
-        else
-          return false
-        end
-      end
-
-      exact ? filename == url : filename.start_with?(url)
-    end
-
-    def merge(hash1, hash2)
-      all_keys = hash1.keys | hash2.keys
-      result_hash = {}
-
-      all_keys.each do |key|
-        hash_value = {}
-
-        if hash1.key? key
-          value = hash1[key]
-
-          hash_value = value unless value.nil?
-        end
-
-        if hash2.key? key
-          value = hash2[key]
-
-          hash_value = hash_value.merge(value) unless value.nil?
-        end
-
-        result_hash[key] = hash_value
-      end
-
-      result_hash
     end
   end
 end
 
-sidebar = Jekyll::Sidebar.new
-
-Jekyll::Hooks.register :site, :pre_render do |site, _payload|
-  site.pages.each do |page|
-    sidebar.pre_render page
-  end
+Jekyll::Hooks.register :site, :pre_render do |site, _|
+  SwedbankPay::Sidebar.pre_render site
 end
 
-Jekyll::Hooks.register :site, :post_write do |site|
-  sidebar.post_write site
+Jekyll::Hooks.register :site, :post_write do
+  SwedbankPay::Sidebar.post_write
 end

data/lib/sidebar_html_builder.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: false
+
+require_relative 'sidebar_page'
+
+module SwedbankPay
+  # The builder of HTML for the Sidebar
+  class SidebarHTMLBuilder
+    def initialize(tree)
+      @tree = tree
+    end
+
+    def build(current_page)
+      raise ArgumentError, 'current_page cannot be nil' if current_page.nil?
+      raise ArgumentError, "#{current_page.class} is not a #{SidebarPage}" unless current_page.is_a? SidebarPage
+
+      build_markup(@tree, current_page)
+    end
+
+    private
+
+    def build_markup(pages, current_page)
+      return '' if pages.empty?
+
+      markup = ''
+
+      pages.each do |page|
+        current_page_name = current_page.respond_to?(:name) ? current_page.name : current_page.to_s
+
+        if page.hidden_for?(current_page)
+          Jekyll.logger.debug("           Sidebar: #{page.name} is hidden for #{current_page_name}")
+          next
+        elsif page.hidden?
+          Jekyll.logger.debug("           Sidebar: Hidden page #{page.name} is not hidden for #{current_page_name}")
+        end
+
+        sub_items_markup = sub_items_markup(page, current_page)
+        markup << item_markup(page, current_page, sub_items_markup, false)
+      end
+
+      markup
+    end
+
+    def item_markup(page, current_page, sub_items_markup, is_leaf)
+      # If we're rendering a leaf node, just set the level to a non-zero value
+      # to get the 'nav-subgroup' class and such.
+      level = is_leaf ? -1 : page.level
+      title_markup = title_markup(page, level, is_leaf)
+      item_class = item_class(page, current_page, level, is_leaf)
+      group_heading_class = group_heading_class(level)
+
+      "<li class=\"#{item_class}\">
+        <div class=\"#{group_heading_class}\">
+          <i class=\"material-icons\">arrow_right</i>
+          #{title_markup}
+        </div>
+        #{sub_items_markup}
+      </li>"
+    end
+
+    def item_class(page, current_page, level, is_leaf)
+      active = page.active?(current_page, is_leaf: is_leaf)
+      item_class = group_class(level)
+      item_class += ' active' if active
+      item_class
+    end
+
+    def group_class(level)
+      level.zero? ? 'nav-group' : 'nav-subgroup'
+    end
+
+    def group_heading_class(level)
+      group_class = group_class(level)
+      "#{group_class}-heading"
+    end
+
+    def title_markup(page, level, is_leaf)
+      lead_title = lead_title(page)
+      return "<span>#{lead_title}</span>" if level.zero?
+
+      main_title = main_title(page, is_leaf)
+
+      "<a href=\"#{page.path}\">#{main_title}</a>"
+    end
+
+    def sub_items_markup(page, current_page)
+      headers_markup = headers_markup(page, current_page)
+      child_markup = build_markup(page.children, current_page)
+
+      return '' if headers_markup.empty? && child_markup.empty?
+
+      "<ul class=\"nav-ul\">
+        #{headers_markup}
+        #{child_markup}
+      </ul>"
+    end
+
+    def headers_markup(page, current_page)
+      # If there's no page headers, only return a leaf item for the page itself.
+      main_title = page.title.nil? ? nil : page.title.main
+      return leaf_markup(page.path, main_title, page.level) unless page.headers?
+
+      # If there's no children, only return the headers as leaf node items.
+      return page.headers.map { |h| header_markup(page, h) }.join('') unless page.children?
+
+      headers_markup = page.headers.map { |h| header_markup(page, h) }.join('')
+      headers_markup = "<ul class=\"nav-ul\">#{headers_markup}</ul>"
+
+      item_markup(page, current_page, headers_markup, true)
+    end
+
+    def header_markup(page, header)
+      hash = header[:hash]
+      subtitle = header[:title]
+      href = "#{page.path}#{hash}"
+      leaf_markup(href, subtitle)
+    end
+
+    def leaf_markup(href, title, level = 0)
+      leaf_class = level.positive? ? 'nav-leaf nav-subgroup-leaf' : 'nav-leaf'
+      "<li class=\"#{leaf_class}\"><a href=\"#{href}\">#{title}</a></li>"
+    end
+
+    def lead_title(page)
+      return page.title.lead unless page.title.nil? || page.title.lead.nil?
+      return page.parent.title.to_s unless page.parent.nil? || page.parent.title.nil?
+
+      ''
+    end
+
+    def main_title(page, is_leaf)
+      unless page.nil? || page.title.nil?
+        lead_title = lead_title(page)
+        parent_lead_title = parent_lead_title(page)
+        main_title = page.title.main
+
+        # If the lead title is different to the parent's or we're not on a leaf
+        # node item, use the lead title as the main title. This causes 'section: Card'
+        # to be used as title for the Card item, but allows the nav-subgroup-heading
+        # 'Introduction' item to use the main title 'Introduction'.
+        main_title = lead_title unless lead_title == parent_lead_title || is_leaf
+
+        return main_title || page.title.to_s
+      end
+
+      ''
+    end
+
+    def parent_lead_title(page)
+      return page.parent.title.lead unless page.parent.nil? || page.parent.title.nil?
+
+      nil
+    end
+  end
+end