Magic trick to remove title duplication in TOC

_data/toc.yml

@@ -0,0 +1,18 @@
+Getting Started:
+  - docs/README.md
+  - docs/hello-world.md
+  - docs/development.md
+  - docs/webhooks.md
+  - docs/github-api.md
+Advanced:
+  - docs/http.md
+  - docs/simulating-webhooks.md
+  - docs/testing.md
+  - docs/pagination.md
+  - docs/deployment.md
+  - docs/best-practices.md
+Reference:
+  - title: robot
+    url: "https://probot.github.io/probot/latest/Robot.htm"
+  - title: context
+    url: "https://probot.github.io/probot/latest/Contex.html"

_includes/toc.md

@@ -1,21 +0,0 @@
-#### Getting Started
-
-- [Introduction](/docs/)
-- [Hello World](/docs/hello-world/)
-- [Developing a plugin](/docs/development/)
-- [Receiving webhooks](/docs/webhooks/)
-- [Interacting with GitHub](/docs/github-api/)
-
-#### Advanced
-
-- [HTTP Routes](/docs/http/)
-- [Simulating webhooks](/docs/simulating-webhooks/)
-- [Testing](/docs/testing/)
-- [Pagination](/docs/pagination/)
-- [Deployment](/docs/deployment/)
-- [Best Practices](/docs/best-practices/)
-
-#### Reference
-
-- [`robot`](https://probot.github.io/probot/latest/Robot.html)
-- [`context`](https://probot.github.io/probot/latest/Context.html)

_layouts/docs.html

@@ -7,8 +7,34 @@ layout: default
 <div class="container-lg px-3 py-6">
   <div class="d-flex flex-row gutter-spacious">
     <div id="toc" class="col-3 py-6">
-      {% capture toc %}{% include toc.md %}{% endcapture %}
-      {{ toc | markdownify }}
+      {% for section in site.data.toc %}
+        <h2 class="alt-h4">{{ section[0] }}</h2>
+
+        <ul class="mt-2 mb-4 list-style-none">
+          {% for item in section[1] %}
+            <li>
+              {% if item.url %}
+                {% assign link = item %}
+              {% else %}
+                {% for doc in site.pages %}
+                  {% if doc.path == item %}
+                    {% assign link = doc %}
+                    {% break %}
+                  {% endif %}
+                {% endfor %}
+              {% endif %}
+
+              {% if page.url == link.url %}
+                {% assign classes = "text-brand-red" %}
+              {% else %}
+                {% assign classes = "text-gray-light" %}
+              {% endif %}
+
+              <a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endfor %}
     </div>
     <div class="col-9 markdown-body p-6">
       {{ content }}
@@ -16,10 +42,12 @@ layout: default
       {% for doc in site.pages %}
         {% if page.next == doc.path %}
           {% assign next = doc %}
+          {% break %}
         {% endif %}
 
         {% if doc.next == page.path %}
           {% assign previous = doc %}
+          {% break %}
         {% endif %}
       {% endfor %}
 

assets/css/index.scss

@@ -26,15 +26,3 @@ img {
 code {
   font-size: 14px;
 }
-
-#toc {
-  h4 {
-    @extend .alt-h4, .text-gray;
-    margin-bottom: $spacer-2;
-  }
-
-  ul {
-    margin-bottom: $spacer-4;
-    list-style: none;
-  }
-}