swedbank-pay-design-guide-jekyll-theme 1.9.0 → 1.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4baacc614edb524f53a8b0a23788382fba5ec477f10f08888adf08fcbde24998
-  data.tar.gz: 0cb1ef91541ba25c94708789ab05379ea92fc94ea0a7a62c336182f108a62544
+  metadata.gz: e647f0131f3c08e0a12439a2c614440abf1490e8daddad219fb7d07abf2a20ec
+  data.tar.gz: 9a662eb6a96daca6040b5bd41077a956d79cac4dacfce609d46eb574efaab328
 SHA512:
-  metadata.gz: 0bf78e21de260346ee939876981e7cfeb2558e74a2d492217a07c4a23bde14018eb746225e7ad5f23420cacf89c2c82e07dc8c008a2ed588e7a5a9934ea2862f
-  data.tar.gz: bba4b0c952ee13e087c0e6f38c738d3999874e0670a3881e053b2b7fc58ae5e39ec748af3d64e3548c45efe79e9984539f193340ebaf73263e10ebddcdbe74e4
+  metadata.gz: 8c68104d9e39d320d6f7d02ce71ae26bb8f413fc85ebcfc3af07573a46fff395a8ef1b6764e9ef9cb6358e5eab593e4143788038f5353e68c05b16d362fae89a
+  data.tar.gz: c076139876f3d855ee1ee9b0d483c78979f6fd2f241c0ae932fe2572e73170a0527688fe48c12e6c6bd0bddd606350f25be541b4215ed32776c95174d223b8dd

data/_includes/title-header.html

@@ -0,0 +1,32 @@
+{% assign lead_title = page.lead_title %}
+{% assign main_title = page.main_title | default: page.title %}
+{% assign description = page.description %}
+{% assign estimated_read = page.estimated_read %}
+{% capture max_width_class %}
+    {% if page.card_overview %}
+        max-width-card-overview
+    {% else %}
+        max-width
+    {% endif %}
+{% endcapture %}
+
+<div class="title-header">
+    <div class="title-header-container {{ max_width_class | strip }}">
+        {% if lead_title != nil %}
+            <h4>{{ lead_title }}</h4>
+        {% endif %}
+
+        <h1>{{ main_title }}</h1>
+
+        {% if estimated_read %}
+            <div class="title-header-estimated-read">
+                <i class="material-icons">schedule</i>
+                {{ estimated_read }} min read
+            </div>
+        {% endif %}
+
+        {% if description %}
+            <p>{{ description | markdownify }}</p>
+        {% endif %}
+    </div>
+</div>

data/_layouts/default.html

@@ -80,30 +80,7 @@
 
                     <main class="doc-view col-xxl-10 col-lg-9">
                         {% if page.layout != 'front-page' %}
-                        {% assign title_lead = title | split: '–' | first %}
-                        {% assign title_main = title | split: '–' | last %}
-                        {% assign description = page.description %}
-                        {% assign estimated_read = page.estimated_read %}
-                        <div class="title-header">
-                            <div class="title-header-container
-                                    {% if page.card_overview %} max-width-card-overview
-                                    {% else %} max-width
-                                    {% endif %}">
-                                {% if title_lead != title_main %}
-                                <h4>{{ title_lead }}</h4>
-                                {% endif %}
-                                <h1>{{ title_main }}</h1>
-                                {% if estimated_read %}
-                                <div class="title-header-estimated-read">
-                                    <i class="material-icons">schedule</i>
-                                    {{ estimated_read }} min read
-                                </div>
-                                {% endif %}
-                                {% if description %}
-                                <p>{{ description | markdownify }}</p>
-                                {% endif %}
-                            </div>
-                        </div>
+                            {% include title-header.html %}
                         {% endif %}
                         <div class="doc-container{% if page.layout == 'front-page' %} no-padding
                             {% elsif page.card_overview %} normal-padding max-width-card-overview

data/_layouts/front-page.html

@@ -9,20 +9,20 @@ layout: default
 {% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
 
 <div class="front-page">
-    <div class="front-page-container">
-        <div class="front-page-top">
-            <div class="front-page-hero">
-                <h3>{{ front_page_hero }}</h3>
-                <div class="front-page-hero-name">
-                    {<span>{{ front_page_title }}</span>}
-                </div>
-                <p>{{ front_page_ingress }}</p>
-            </div>
-            <div class="front-page-intro-cards">
-                <h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
-                {% contentblock start %}
+    <div class="front-page-top">
+        <div class="front-page-hero">
+            <h3>{{ front_page_hero }}</h3>
+            <div class="front-page-hero-name">
+                {<span>{{ front_page_title }}</span>}
             </div>
+            <p>{{ front_page_ingress }}</p>
         </div>
+        <div class="front-page-intro-cards">
+            <h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
+            {% contentblock start %}
+        </div>
+    </div>
+    <div class="front-page-container">
         {% if show_merchants_bar == true %}
         <div class="front-page-merchants">
             <h6>Trusted by</h6>
@@ -54,9 +54,9 @@ layout: default
     {% endif %}
     <a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="front-page-demoshop">
         <span class="front-page-demoshop-text">
-            <span class="h2">Try our Demoshop<span>.</span></span>
+            <span class="h2">Try our Demoshop</span>
             <span class="demoshop-text-description">
-                Unsure about how it all works? See how our checkout and payment methods are used
+                See how our checkout and payment methods are used
                 in practice!
             </span>
         </span>
@@ -64,11 +64,11 @@ layout: default
             <span class="h3">Go to the demoshop</span>
             <i class="material-icons">arrow_forward</i>
             <span class="demoshop-link-img">
-                <img class="demoshop-link-img-mobile d-md-none d-lg-flex d-xl-none d-xxl-flex"
+                <img class="demoshop-link-img-mobile d-none d-md-flex"
                     src="/assets/img/demoshop-mobile.svg" alt="demoshop-mobile" />
-                <img class="demoshop-link-img-mobile d-none d-md-none d-lg-flex d-xl-none"
+                <img class="demoshop-link-img-mobile d-none d-xl-flex d-xxl-none"
                     src="/assets/img/demoshop-mobile2.svg" alt="demoshop-mobile2" />
-                <img class="demoshop-link-img-web d-none d-sm-none d-md-flex d-lg-none d-xl-flex"
+                <img class="demoshop-link-img-web d-none d-xxl-flex"
                     src="/assets/img/demoshop-web.svg" alt="demoshop-web" />
             </span>
         </span>

data/_sass/breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1600px;

data/_sass/card.scss

@@ -59,6 +59,7 @@
         display: flex;
         flex-direction: column;
         margin-bottom: 1.25rem;
+        font-size: 1rem;
 
         .h4 {
             margin-top: 0;

data/_sass/front-page.scss

@@ -1,8 +1,9 @@
 @import 'colors.scss';
 @import 'fonts.scss';
+@import 'breakpoints.scss';
 
 $front-page-padding: 0 4rem;
-$front-page-max-width: 1280px;
+$front-page-max-width: 1312px;
 
 @mixin row-cards {
     >[class*='col-'] {
@@ -49,77 +50,88 @@ $front-page-max-width: 1280px;
 }
 
 .front-page {
+    margin: 3rem 2rem 0;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
+    
+    .front-page-top {
+        position: relative;
+        padding: 4rem 4rem 2rem;
+        width: 100%;
+        margin-bottom: 3rem;
+        max-width: 1432px;
+        background-color: $dark-brown;
+        z-index: 0;
+        border-radius: 1rem;
+        min-height: 33rem;
 
-    .front-page-container {
-        max-width: $front-page-max-width;
-        margin: $front-page-padding;
-
-        .front-page-top {
-            padding-top: 4rem;
-            width: 100%;
+        .front-page-hero {
+            position: relative;
+            max-width: 38rem;
             margin-bottom: 3rem;
+            z-index: 1;
 
-            &:before {
-                content: "";
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                background-color: $dark-brown;
-                width: 100%;
-                height: 34rem;
-                z-index: 0;
+            h3 {
+                color: $yellow;
+                font-family: $headline;
+                margin-bottom: 0;
             }
 
-            .front-page-hero {
-                position: relative;
-                max-width: 35rem;
-                margin-bottom: 3.5rem;
-                z-index: 1;
+            p {
+                color: $white;
+                font-size: 1.125rem;
+            }
 
-                h3 {
-                    color: $yellow;
-                    font-family: $headline;
-                    margin-bottom: 0;
-                }
+            .front-page-hero-name {
+                font-family: $mono;
+                font-weight: bold;
+                font-size: 2rem;
+                color: $yellow;
+                margin-bottom: 1rem;
 
-                p {
+                span {
                     color: $white;
-                    font-size: 1.125rem;
                 }
+            }
 
-                .front-page-hero-name {
-                    font-family: $mono;
-                    font-weight: bold;
-                    font-size: 2rem;
-                    color: $yellow;
-                    margin-bottom: 1rem;
+        }
 
-                    span {
-                        color: $white;
-                    }
+        .front-page-intro-cards {
+            h2 {
+                color: $white;
+
+                .header-anchor {
+                    display: none;
                 }
+            }
 
+            .row {
+                @include row-cards();
             }
+        }
 
+        @media screen and (min-width: $breakpoint-xxl) {
+            margin-bottom: 9rem;
+            
             .front-page-intro-cards {
-                h2 {
-                    color: $white;
-
-                    .header-anchor {
-                        display: none;
-                    }
-                }
-
-                .row {
-                    @include row-cards();
-                }
+                position: absolute;
+                bottom: -7rem;
+                left: 0;
+                width: 100%;
+                padding: 0 4rem;
             }
         }
+    }
+    .front-page-container {
+        max-width: $front-page-max-width;
+        margin: $front-page-padding;
+        position: relative;
+
+        @media screen and (max-width: $breakpoint-md) {
+            margin: 0;
+        }
 
         .front-page-merchants {
             margin-bottom: 3.75rem;
@@ -221,6 +233,7 @@ $front-page-max-width: 1280px;
         height: 22.5rem;
         background-color: $dark-brown;
         text-decoration: none;
+        border-radius: 1rem;
 
         &:hover,
         &:focus {
@@ -249,17 +262,29 @@ $front-page-max-width: 1280px;
 
             .h2 {
                 color: $white;
-
-                span {
-                    color: $yellow;
-                }
             }
 
             .demoshop-text-description {
                 color: $white;
-                width: 45%;
-                height: 4.5rem;
+                width: 40%;
+                min-height: 4.5rem;
+                font-size: 1rem;
+
+            }
+            
+        }
+
+        @media screen and (max-width: $breakpoint-md) {
+            padding-top: 3rem;
+            height: 18rem;
+
+            .front-page-demoshop-text {
+                .demoshop-text-description {
+                    width: 100%;
+                    min-height: 2.25rem;
+                }
             }
+
         }
 
         .front-page-demoshop-link {
@@ -297,8 +322,6 @@ $front-page-max-width: 1280px;
                 }
             }
 
-
-
             .h3 {
                 color: $white;
                 padding-right: 1rem;
@@ -306,6 +329,18 @@ $front-page-max-width: 1280px;
                 margin: 0;
             }
         }
+
+        @media screen and (min-width: $breakpoint-xxl) {
+            .front-page-demoshop-text {
+                margin-bottom: 1rem;
+            }
+
+            .front-page-demoshop-link {
+                .demoshop-link-img {
+                    bottom: -2rem;
+                }
+            }
+        }
     }
 
 

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/variables.scss

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

data/lib/gem_version.rb

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

data/lib/sidebar.rb

@@ -14,35 +14,26 @@ module SwedbankPay
     class << self
       attr_reader :pages
 
-      def init
-        @pages_hash = {}
-      end
-
-      def pre_render(jekyll_page)
-        sidebar_page = SidebarPage.new(jekyll_page)
-        @pages_hash[sidebar_page.path] = sidebar_page
-      end
-
-      def post_write(site)
+      def pre_render(site)
         parser = SidebarParser.new(site)
-        pages = parser.parse(@pages_hash)
+        pages = parser.parse
         @pages = SidebarTreeBuilder.new(pages)
         Jekyll.logger.debug("           Sidebar: #{@pages.inspect}")
-        renderer = SidebarRenderer.new
-        renderer.render(@pages)
+        @sidebar_renderer = SidebarRenderer.new(@pages)
+        @sidebar_renderer.enrich_jekyll
+      end
+
+      def post_write
+        @sidebar_renderer.render
       end
     end
   end
 end
 
-SwedbankPay::Sidebar.init
-
 Jekyll::Hooks.register :site, :pre_render do |site, _|
-  site.pages.each do |page|
-    SwedbankPay::Sidebar.pre_render page
-  end
+  SwedbankPay::Sidebar.pre_render site
 end
 
-Jekyll::Hooks.register :site, :post_write do |site|
-  SwedbankPay::Sidebar.post_write site
+Jekyll::Hooks.register :site, :post_write do |_|
+  SwedbankPay::Sidebar.post_write
 end

data/lib/sidebar_html_builder.rb

@@ -21,36 +21,28 @@ module SwedbankPay
     def build_markup(pages, current_page)
       return '' if pages.empty?
 
-      current_path = current_path(current_page)
       markup = ''
 
       pages.each do |page|
-        next if page.ignore?
-
-        sub_items_markup = sub_items_markup(page, current_path)
-        markup << item_markup(page, current_path, page.level, sub_items_markup)
+        if page.hidden_for?(current_page)
+          name = current_page.respond_to?(:name) ? current_page.name : current_page.to_s
+          Jekyll.logger.debug("           Sidebar: #{page.name} is hidden for #{name}")
+          next
+        end
+
+        sub_items_markup = sub_items_markup(page, current_page)
+        markup << item_markup(page, current_page, sub_items_markup, false)
       end
 
       markup
     end
 
-    def current_path(current_page)
-      if current_page.nil?
-        Jekyll.logger.warn('           Sidebar: Nil current_page')
-        return ''
-      end
-
-      return current_page if current_page.is_a? String
-      return current_page.path if current_page.respond_to?(:path)
-
-      Jekyll.logger.warn("           Sidebar: #{current_page.class} ('#{current_page}') does not respond to :path.")
-
-      ''
-    end
-
-    def item_markup(page, current_path, level, sub_items_markup)
+    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)
-      item_class = item_class(page, current_path, level)
+      item_class = item_class(page, current_page, level, is_leaf)
       group_heading_class = group_heading_class(level)
 
       "<li class=\"#{item_class}\">
@@ -62,8 +54,8 @@ module SwedbankPay
       </li>"
     end
 
-    def item_class(page, current_path, level)
-      active = active?(page, current_path, level)
+    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
@@ -79,16 +71,16 @@ module SwedbankPay
     end
 
     def title_markup(page, level)
-      section_title = section_title(page)
-      return "<span>#{section_title}</span>" if level.zero?
+      lead_title = lead_title(page)
+      return "<span>#{lead_title}</span>" if level.zero?
 
-      item_title = item_title(page)
-      "<a href=\"#{page.path}\">#{item_title}</a>"
+      main_title = main_title(page)
+      "<a href=\"#{page.path}\">#{main_title}</a>"
     end
 
-    def sub_items_markup(page, current_path)
-      headers_markup = headers_markup(page, current_path)
-      child_markup = build_markup(page.children, current_path)
+    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?
 
@@ -98,9 +90,10 @@ module SwedbankPay
       </ul>"
     end
 
-    def headers_markup(page, current_path)
+    def headers_markup(page, current_page)
       # If there's no page headers, only return a leaf item for the page itself.
-      return leaf_markup(page.path, page.title.item, page.level) unless page.headers?
+      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('') if page.children.empty?
@@ -108,7 +101,7 @@ module SwedbankPay
       headers_markup = page.headers.map { |h| header_markup(page, h) }.join('')
       headers_markup = "<ul class=\"nav-ul\">#{headers_markup}</ul>"
 
-      item_markup(page, current_path, page.level + 1, headers_markup)
+      item_markup(page, current_page, headers_markup, true)
     end
 
     def header_markup(page, header)
@@ -123,19 +116,21 @@ module SwedbankPay
       "<li class=\"#{leaf_class}\"><a href=\"#{href}\">#{title}</a></li>"
     end
 
-    def active?(page, current_path, level)
-      level.zero? ? page.active?(current_path) : page.path == current_path
-    end
-
-    def section_title(page)
-      return page.title.section unless page.title.section.nil?
+    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 item_title(page)
-      page.title.item
+    def main_title(page)
+      unless page.nil? || page.title.nil?
+        main = page.title.main
+
+        return main || page.title.to_s
+      end
+
+      ''
     end
   end
 end

data/lib/sidebar_page.rb

@@ -7,44 +7,71 @@ require_relative 'sidebar_page_collection'
 require_relative 'sidebar_text_builder'
 
 module SwedbankPay
-  # Represents a page in the Sidebar
+  # Represents a jekyll_page in the Sidebar
   class SidebarPage
     FIXNUM_MAX = (2**(0.size * 8 - 2) - 1)
 
     attr_reader :path, :title, :level, :order, :children, :name
     attr_accessor :headers, :filename, :doc, :sidebar_container, :number, :parent
 
-    def initialize(page)
-      raise ArgumentError, 'Page must be a Jekyll::Page' unless page.is_a? Jekyll::Page
+    def initialize(jekyll_page)
+      raise ArgumentError, 'jekyll_page cannot be nil' if jekyll_page.nil?
+      raise ArgumentError, 'jekyll_page must be a Jekyll::Page' unless jekyll_page.is_a? Jekyll::Page
 
-      sidebar_path = SidebarPath.new(page['url'])
+      @jekyll_page = jekyll_page
+      sidebar_path = SidebarPath.new(jekyll_page['url'])
       @path = sidebar_path.to_s
       @parent = sidebar_path.parent
       @level = sidebar_path.level
       @name = sidebar_path.name
-      @hide_from_sidebar = page['hide_from_sidebar'].nil? ? false : page['hide_from_sidebar']
-      @title = page_title(page)
-      @order = menu_order(page)
+      @hide_from_sidebar = jekyll_page['hide_from_sidebar'].nil? ? false : jekyll_page['hide_from_sidebar']
+      @title = SidebarPageTitle.parse(jekyll_page, self)
+      @order = menu_order(jekyll_page)
       @children = SidebarPageCollection.new(self)
     end
 
-    def active?(current_path)
+    def active?(current, is_leaf: false)
+      current_path = find_path(current)
+
       return true if @path == current_path
 
-      @children.each do |child|
-        return true if child.active?(current_path)
+      # If we're on a leaf node item, such as when rendering the first header
+      # item of a sub-group, its children's active state must be disregarded.
+      unless is_leaf
+        @children.each do |child|
+          return true if child.active?(current_path, is_leaf: is_leaf)
+        end
       end
 
       false
     end
 
-    def ignore?
+    def hidden?
       return true if @title.nil?
       return true if @hide_from_sidebar
 
       false
     end
 
+    def hidden_for?(other_page)
+      # The current page should be hidden for the other page unless the
+      # other page is also hidden.
+      #
+      # TODO: Make it so that hiddden pages within a section are visible
+      #       for each other, but not for other sections, regardless if
+      #       they are hidden or not.
+      hidden = hidden?
+
+      if other_page.nil? || !other_page.is_a?(SidebarPage)
+        Jekyll.logger.debug("           Sidebar: Other page '#{other_page}' is nil or not a SidebarPage")
+        return hidden
+      end
+
+      return false if other_page.hidden?
+
+      hidden
+    end
+
     def children=(children)
       @children = SidebarPageCollection.new(self, children)
     end
@@ -71,6 +98,19 @@ module SwedbankPay
       @order <=> other.order
     end
 
+    def enrich_jekyll
+      if @title.nil?
+        Jekyll.logger.debug("           Sidebar: No title for #{@name}")
+        return
+      end
+
+      Jekyll.logger.debug("           Sidebar: #{@name}.lead_title '#{@title.lead}'")
+      Jekyll.logger.debug("           Sidebar: #{@name}.main_title '#{@title.main}'")
+
+      @jekyll_page.data['lead_title'] = @title.lead
+      @jekyll_page.data['main_title'] = @title.main
+    end
+
     def save
       Jekyll.logger.debug("   Writing Sidebar: #{filename}")
 
@@ -92,15 +132,8 @@ module SwedbankPay
 
     private
 
-    def page_title(page)
-      title = page['title']
-      return nil if title.nil?
-
-      SidebarPageTitle.new(title)
-    end
-
-    def menu_order(page)
-      order = page['menu_order']
+    def menu_order(jekyll_page)
+      order = jekyll_page['menu_order']
       return FIXNUM_MAX if order.nil? || order.to_s.empty?
 
       order.to_i
@@ -113,5 +146,19 @@ module SwedbankPay
     def child_of?(path)
       @path.split('/').length > @level && path.start_with?(@path)
     end
+
+    def find_path(current)
+      if current.nil?
+        Jekyll.logger.warn('           Sidebar: Nil current_page')
+        return ''
+      end
+
+      return current if current.is_a? String
+      return current.path if current.respond_to?(:path)
+
+      Jekyll.logger.warn("           Sidebar: #{current.class} ('#{current}') does not respond to :path.")
+
+      ''
+    end
   end
 end

data/lib/sidebar_page_title.rb

@@ -1,15 +1,31 @@
 # frozen_string_literal: true
 
+require 'jekyll'
+require_relative 'sidebar_page'
+
 module SwedbankPay
   # Represents the title of a SidebarPage
   class SidebarPageTitle
-    attr_reader :section, :item
+    attr_reader :main, :section
 
-    def initialize(title)
-      @title = title
-      parts = title.split('–')
-      @section = parts.first.strip
-      @item = parts.last.strip
+    def self.parse(jekyll_page, sidebar_page)
+      raise ArgumentError, 'jekyll_page cannot be nil' if jekyll_page.nil?
+      raise ArgumentError, 'jekyll_page must be a Jekyll::Page' unless jekyll_page.is_a? Jekyll::Page
+      raise ArgumentError, 'sidebar_page cannot be nil' if sidebar_page.nil?
+      raise ArgumentError, 'sidebar_page must be a SidebarPage' unless sidebar_page.is_a? SidebarPage
+
+      title = jekyll_page['title']
+      section = jekyll_page['section']
+      return nil if title.nil?
+
+      SidebarPageTitle.new(title, section, sidebar_page)
+    end
+
+    def lead
+      section = find_section(@page)
+      return section unless section.nil?
+
+      @lead
     end
 
     def to_s
@@ -25,5 +41,31 @@ module SwedbankPay
 
       @title <=> other.to_s
     end
+
+    private
+
+    def initialize(title, section, page)
+      raise ArgumentError, 'title cannot be nil' if title.nil?
+      raise ArgumentError, 'title must be a String' unless title.is_a? String
+      raise ArgumentError, 'page cannot be nil' if page.nil?
+      raise ArgumentError, 'page must be a SidebarPage' unless page.is_a? SidebarPage
+
+      @page = page
+      @title = title
+      parts = title.split('–')
+      @section = section
+      @lead = parts.first.strip
+      @main = parts.last.strip
+    end
+
+    def find_section(page)
+      # Return the 'section' front matter if it can be found on the current page.
+      return page.title.section unless page.nil? || page.title.nil? || page.title.section.nil? || page.title.section.empty?
+
+      # Recurse upwards to the root (until there is no parent).
+      return find_section(page.parent) unless page.nil? || page.parent.nil?
+
+      nil
+    end
   end
 end

data/lib/sidebar_parser.rb

@@ -1,15 +1,21 @@
 # frozen_string_literal: true
 
+require 'jekyll'
 require_relative 'sidebar_path'
 
 module SwedbankPay
   # The Sidebar renderer
   class SidebarParser
     def initialize(site)
+      raise ArgumentError, 'Site cannot be nil' if site.nil?
+      raise ArgumentError, 'Site must be a Jekyll::Site' unless site.is_a? Jekyll::Site
+
       @site = site
     end
 
-    def parse(pages)
+    def parse
+      pages = build_pages_hash
+
       destination = @site.config['destination']
 
       Dir.glob("#{destination}/**/*.html") do |filename|
@@ -17,7 +23,10 @@ module SwedbankPay
         path = SidebarPath.new(filename).to_s
         page = pages[path]
 
-        raise ArgumentError, "No page found for '#{path}'." if page.nil?
+        if page.nil?
+          Jekyll.logger.debug("           Sidebar: No page found for <#{path}>.")
+          next
+        end
 
         page.doc = doc
         page.filename = filename
@@ -30,6 +39,17 @@ module SwedbankPay
 
     private
 
+    def build_pages_hash
+      pages_hash = {}
+
+      @site.pages.each do |jekyll_page|
+        sidebar_page = SidebarPage.new(jekyll_page)
+        pages_hash[sidebar_page.path] = sidebar_page
+      end
+
+      pages_hash
+    end
+
     def find_headers(doc)
       headers = []
 

data/lib/sidebar_renderer.rb

@@ -5,15 +5,33 @@ require_relative 'sidebar_html_builder'
 module SwedbankPay
   # Renders the Sidebar
   class SidebarRenderer
-    def render(tree)
+    def initialize(tree)
+      raise ArgumentError, 'pages cannot be nil' if tree.nil?
       raise ArgumentError, 'pages must be an SidebarTreeBuilder' unless tree.is_a? SidebarTreeBuilder
 
       @tree = tree
-      render_pages(tree)
+    end
+
+    def enrich_jekyll
+      enrich_jekyll_pages(@tree)
+    end
+
+    def render
+      render_pages(@tree)
     end
 
     private
 
+    def enrich_jekyll_pages(pages)
+      return if pages.empty?
+
+      pages.each do |page|
+        page.enrich_jekyll
+
+        enrich_jekyll_pages(page.children)
+      end
+    end
+
     def render_pages(pages)
       return if pages.empty?
 
@@ -40,7 +58,8 @@ module SwedbankPay
 
         File.open('_site/sidebar.html', 'w') { |f| f.write(sidebar_html) }
       rescue StandardError => e
-        Jekyll.logger.error("           Sidebar: Unable to render sidebar for '#{page.filename}'.")
+        name = page.filename || page.name
+        Jekyll.logger.error("           Sidebar: Unable to render sidebar for '#{name}'.")
         Jekyll.logger.debug("           Sidebar: #{e.message}. #{e.backtrace.inspect}")
         return nil
       end

data/lib/sidebar_text_builder.rb

@@ -13,7 +13,7 @@ module SwedbankPay
 
     def to_s
       name = @page.name == '/' ? '/' : "/#{@page.name}"
-      title = @page.title.nil? ? '?' : @page.title.item
+      title = @page.title.nil? ? '?' : @page.title.main
       s = "#{indent} #{name}: #{title} (#{@page.coordinate})\n"
 
       unless @page.children.empty?
@@ -34,7 +34,7 @@ module SwedbankPay
 
       increment = @page.level > 1 ? @page.level + 1 : @page.level
 
-      "┝╾#{('─' * increment)}"
+      "┝╾#{'─' * increment}"
     end
 
     def todo

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.9.0
+  version: 1.9.1
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-22 00:00:00.000000000 Z
+date: 2020-10-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -239,10 +239,12 @@ files:
 - _includes/paragraph-highlight.html
 - _includes/release_notes.html
 - _includes/sidebar.html
+- _includes/title-header.html
 - _includes/toc.html
 - _layouts/default.html
 - _layouts/front-page.html
 - _plugins/sidebar.rb
+- _sass/breakpoints.scss
 - _sass/card.scss
 - _sass/code-view.scss
 - _sass/colors.scss
@@ -300,7 +302,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Swedbank Pay Design Guide theme for Jekyll