data8/_includes/onthispage.html

<!-- Shamelessly copied from minimal mistakes -->
{% capture tocWorkspace %}
    {%- comment -%}
        Version 1.0.2

        "...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

        Output:
            An 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 minHeader = include.h_min | default: 1 %}
    {% assign maxHeader = include.h_max | default: 6 %}
    {% assign nodes = include.html | split: '<h' %}
    {% assign firstHeader = true %}

    {% 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 | add: 1 %}
        {% assign _workspace = node | split: '</h' %}

        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
        {% assign html_id = _idWorkspace[0] %}

        {% 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 %}

        {% capture my_toc %}{{ my_toc }}
{{ space }}- [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}](#{{ html_id }}){% 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 = '' %}

<!-- TOC will only show up if it has at least one item -->
{% assign toc_items = my_toc | split: '#' %}
{% if toc_items.size > 1 %}
  <aside class="sidebar__right">
    <nav class="onthispage">
      <header><h4 class="nav__title"><i class="fa fa-list"></i> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
      {{ my_toc | markdownify | strip }}
    </nav>
  </aside>
{% endif %}