Add an optional Table of Contents

Fixes #8

Usus the awesome `jekyll-toc` from
https://github.com/allejo/jekyll-toc

README.md

@@ -1,3 +1,7 @@
+---
+toc: true
+---
+
 # City of Amsterdam Jekyll theme
 
 A jekyll theme for the set up of quick generic static sites and for use with GitHub pages and/or Jekyll in the [webdesign of the City of Amsterdam](https://patternlab-amsterdam.infoprojects.nl/).

_includes/toc.liquid

@@ -0,0 +1,85 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.4
+          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 for each list item; has support for '%level%' placeholder, which is the current heading level
+
+        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 %}
+
+    {% 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 %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{% 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 = '' %}{{ my_toc | markdownify | strip }}

_layouts/default.liquid

@@ -2,6 +2,12 @@
 layout: wrapper
 ---
 
+{% if page.toc != false and site.toc == true or page.toc == true %}
+  {% include toc.liquid html=content h_min=2 sanitize=true class="table-of-contents" %}
+{% endif %}
+
 <article class="markdown-body">
   {{content}}
 </article>
+
+

assets/style.css

@@ -101,13 +101,13 @@ main>article.markdown-body {
   padding: 2em 0 4em;
 }
 
-main>aside {
+main>aside, main>ul.table-of-contents {
   padding: 0 0 4em 0;
 }
 @media screen and (min-width: 1050px) {
-  main>aside {
+  main>aside, main>ul.table-of-contents {
     display: inline-block;
-    padding: 4.6em 0 4em 6em;   
+    padding: 4.5em 2em 4em 0;   
     max-width: 25%; 
     vertical-align: top;
   }
@@ -121,9 +121,26 @@ main>aside span.score {
   height: 1.5em;
   text-align: center;
 }
-main>aside ul {
+
+main>aside ul, main>ul.table-of-contents ul {
   list-style: none;
-  padding: 0.75rem;
+  padding: 0.5rem;
+}
+
+ul.table-of-contents {
+  font-size: 1.125em;
+  list-style-type: none;
+}
+ul.table-of-contents li {
+  padding: 0.25rem 0;
+}
+
+ul.table-of-contents li li li {
+  font-size: 1rem;
+}
+
+ a:link {
+  font-weight: normal;
 }
 
 /* The cards section in Projects and Guides */