From 099ff20d2c0b17c575ebde9053596a0a6eaf17e9 Mon Sep 17 00:00:00 2001
From: Jonas Duri <jonas.duri@gmail.com>
Date: Sun, 3 Feb 2019 08:49:10 +0100
Subject: [PATCH] Add TOC component

---
 lib/terminal.css                  | 25 +++++++++++++++++++++++++
 src/partials/components/lists.ejs |  9 +++++++++
 2 files changed, 34 insertions(+)

diff --git a/lib/terminal.css b/lib/terminal.css
index 5ef166f..49f4b50 100644
--- a/lib/terminal.css
+++ b/lib/terminal.css
@@ -236,6 +236,31 @@ ol li:nth-child(n+10):after {
     left: -7px;
 }
 
+ol.terminal-toc li {
+    border-bottom: 1px dotted var(--secondary-color);
+    padding: 0;
+    margin-bottom: 15px
+}
+
+
+ol.terminal-toc li::before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+    position: absolute;
+    right: 0;
+    background: white;
+    padding: 4px 0 4px 4px;
+    bottom: -8px
+}
+
+ol.terminal-toc li a {
+    margin: 4px 4px 4px 0;
+    background: var(--background-color);
+    position: relative;
+    top: 6px;
+    text-align: left;
+    padding-right: 4px;
+}
 blockquote {
     position: relative;
     padding-left: calc(var(--global-space) * 2);
diff --git a/src/partials/components/lists.ejs b/src/partials/components/lists.ejs
index 75a1640..ade13a0 100644
--- a/src/partials/components/lists.ejs
+++ b/src/partials/components/lists.ejs
@@ -36,4 +36,13 @@
     <dd>Description list description 02</dd>
     <dd>Description list description 03</dd>
   </dl>
+  <p>A <strong>Table of content</strong> which can be used as an index for a blog archive.</p>
+  <p>Unlike regular lists, The TOC <em>only supports a single depth level.</em></p>
+  <ol class="terminal-toc">
+    <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+    <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+     <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
+    <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+    <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
+  </ol>
 </section>