swedbank-pay-design-guide-jekyll-theme 1.5.1.pre.article.pre.no.pre.main0001

data/_includes/toc.html

@@ -0,0 +1,100 @@
+{% capture tocWorkspace %}
+{% comment %}
+Version 1.0.8
+https://github.com/allejo/jekyll-toc
+
+"...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+
+Usage:
+{% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+
+Parameters:
+* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+Optional Parameters:
+* sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC
+* class (string) : '' - a CSS class assigned to the TOC
+* id (string) : '' - an ID to assigned to the TOC
+* h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored
+* h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored
+* ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list
+* item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is
+the current heading level
+* baseurl (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content
+* anchor_class (string) : '' - add custom class(es) for each anchor element
+
+Output:
+An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
+generate the table of contents and will NOT output the markdown given to it
+{% endcomment %}
+
+{% capture my_toc %}{% endcapture %}
+{% assign orderedList = include.ordered | default: false %}
+{% assign minHeader = include.h_min | default: 1 %}
+{% assign maxHeader = include.h_max | default: 6 %}
+{% assign nodes = include.html | split: '<h' %}
+{% assign firstHeader = true %}
+
+{% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+{{ include.ordered }}
+
+{% for node in nodes %}
+{% if node == "" %}
+{% continue %}
+{% endif %}
+
+{% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+{% if headerLevel < minHeader or headerLevel > maxHeader %}
+{% continue %}
+{% endif %}
+
+{% if firstHeader %}
+{% assign firstHeader = false %}
+{% assign minHeader = headerLevel %}
+{% endif %}
+
+{% assign indentAmount = headerLevel | minus: minHeader %}
+{% assign _workspace = node | split: '</h' %}
+
+{% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+{% assign html_id = _idWorkspace[0] %}
+
+{% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+{% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+{% assign html_class = _classWorkspace[0] %}
+
+{% if html_class contains "no_toc" %}
+{% continue %}
+{% endif %}
+
+{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+{% assign space = '' %}
+{% for i in (1..indentAmount) %}
+{% assign space = space | prepend: '    ' %}
+{% endfor %}
+
+{% unless include.item_class == blank %}
+{% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+{% endunless %}
+
+{% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
+{% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }}
+[{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+{% endfor %}
+
+{% if include.class %}
+{% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+{% endif %}
+
+{% if include.id %}
+{% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+{% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

data/_layouts/default.html

@@ -0,0 +1,145 @@
+{%- assign title = page.title | default: "PayEx Design Guide theme for Jekyll" -%}
+{%- assign front_page = page.front_page | default: false -%}
+{%- assign description = page.opengraph.description | default: site.opengraph.description -%}
+{%- assign image = page.opengraph.image | default: site.opengraph.image -%}
+{%- assign github_branch = site.github.branch | default : "develop" -%}
+{%- assign design_guide_base_url = site.design_guide.base_url | default: 'https://design.swedbankpay.com' -%}
+{%- assign design_guide_version = site.design_guide.version | default: '4.7.0' -%}
+{%- assign design_guide_url = design_guide_base_url | append: '/v/' | append: design_guide_version -%}
+{%- if page.sidebar.navigation == nil -%}
+{%- unless page.name contains "index"  -%}
+{%- assign dirname = page.dir | split: "/" | last | remove: "/" | capitalize -%}
+{%- unless dirname == "" -%}
+{%- assign title = dirname | append: " – " | append: title -%}
+{%- endunless -%}
+{%- endunless -%}
+{%- endif -%}
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="theme-color" content="#000">
+        <meta name="application-name" content="{{ page.title }}">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+        <meta name="apple-mobile-web-app-title"
+            content="{{ page.title | default: 'PayEx Design Guide theme for Jekyll' }}">
+        <meta name="msapplication-TileColor" content="#000">
+        <meta name="msapplication-TileImage" content="{{ design_guide_version_url }}/icons/mstile-144x144.png">
+        <meta property="og:type" value="website" />
+        {%- if page.url != nil %}
+        <meta property="og:url" value="{{ page.url | absolute_url }}" />{% endif %}
+        <meta property="og:title" value="{{ title }}" />
+        <meta name="title" content="{{ title }}" />
+        {%- if description != nil %}
+        <meta property="og:description" value="{{ description }}" />
+        <meta name="description" content="{{ description }}" />{% endif %}
+        {%- if image != nil %}
+        <meta property="og:image" value="{{ image }}" />{% endif %}
+        <title>{{ title }}</title>
+        <link rel="stylesheet" href="{{ design_guide_url }}/styles/dg-style.css" />
+        {% css_asset_tag theme %}
+        - /_assets/scss/card.scss
+        - /_assets/scss/code-view.scss
+        - /_assets/scss/colors.scss
+        - /_assets/scss/fonts.scss
+        - /_assets/scss/front-page.scss
+        - /_assets/scss/heading.scss
+        - /_assets/scss/paragraph-highlight.scss
+        - /_assets/scss/sidebar.scss
+        - /_assets/scss/swedbank-pay-design-guide-theme.scss
+        - /_assets/scss/title-header.scss
+        - /_assets/scss/variables.scss
+        - /_assets/css/pygments-autumn.css
+        {% endcss_asset_tag %}
+        <link rel="shortcut icon" href="{{ design_guide_url }}/icons/favicon.ico">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ design_guide_url }}/icons/favicon-16x16.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ design_guide_url }}/icons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="228x228" href="{{ design_guide_url }}/icons/coast-228x228.png">
+        <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
+        {%- include apple-mobile-headers.html design_guide_url=design_guide_url -%}
+        <script src="{{ '/assets/js/mermaid.min.js' | relative_url }}"></script>
+        {%- if site.search.enabled == true %}
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script src="{{ "/assets/tipuesearch/tipuesearch_content.js" | relative_url }}"></script>
+        <script src="{{ "/assets/tipuesearch/tipuesearch_set.js" | relative_url }}"></script>
+        <script src="{{ "/assets/tipuesearch/tipuesearch.min.js" | relative_url }}"></script>
+        {%- endif %}
+    </head>
+
+    <body>
+        <div id="designguide">
+            <div class="documentation">
+                <div class="row">
+                    <div class="col-xxl-2 col-lg-3 pr-0">
+                        <div class="sidebar dg-sidebar">
+                            <nav class="sidebar-nav">
+                                <a href="/" class="sidebar-header">
+                                    <img src="{{ design_guide_url }}/img/swedbankpay-logo-v.svg"
+                                        alt="Swedbank Pay vertical logo" />
+                                    <div class="sidebar-header-text">
+                                        <span>{</span>developer portal<span>}</span>
+                                    </div>
+                                </a>
+
+                                <ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+
+                    <main class="doc-view col-xxl-10 col-lg-9">
+                        {% if front_page != true %}
+                        {% 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>
+                        {% endif %}
+                        <div class="doc-container{% if front_page == true %} no-padding
+                            {% elsif page.card_overview%} normal-padding max-width-card-overview
+                            {% else %} normal-padding max-width
+                            {% endif %}">
+                            <article>
+                                {% include anchor_headings.html html=content anchorClass='header-anchor' %}
+                            </article>
+                        </div>
+                    </main>
+                </div>
+            </div>
+
+            <footer class="page-footer">
+                <p class="page-footer-rights">© Swedbank Pay</p>
+            </footer>
+        </div>
+
+        <script src="{{ design_guide_url }}/scripts/dg.js"></script>
+        <script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
+        {%- if site.google_analytics.tracking_id %}
+        {% include google_analytics.html %}
+        {%- endif %}
+    </body>
+
+</html>

data/_plugins/jekyll_asset_pipeline.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require 'jekyll_asset_pipeline'
+
+module JekyllAssetPipeline
+  # Converts .scss files to CSS.
+  class SassConverter < JekyllAssetPipeline::Converter
+    require 'sass'
+
+    def self.filetype
+      '.scss'
+    end
+
+    def convert
+      dir = File.join(__dir__, '..', '_assets', 'scss')
+      Sass::Engine.new(@content, syntax: :scss, load_paths: [dir]).render
+    end
+  end
+end

data/_plugins/sidebar.rb

@@ -0,0 +1,211 @@
+# frozen_string_literal: false
+
+require 'jekyll'
+require 'nokogiri'
+require 'json'
+
+module Jekyll
+  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 }
+      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')) }
+      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
+end
+
+Jekyll::Hooks.register :site, :post_write do |site|
+  sidebar.post_write site
+end