Move table of contents jumpbox into article body, make toggleable

content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/index.md

@@ -7,6 +7,7 @@ categories = ["guide", "blog"]
 tags = ["windows", "terminal", "linux"]
 
 [extra]
+toc = true
 zenn_applause = true
 comments = [
     {url = "https://news.ycombinator.com/item?id=20383725", name = "Hacker News"},

content/blog/2019-07-16_dark-mode-toggle-on-static-website/index.md

@@ -7,6 +7,7 @@ categories = ["guide", "blog"]
 tags = ["web", "css", "javascript", "theme", "website"]
 
 [extra]
+toc = true
 zenn_applause = true
 +++
 

content/blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/index.md

@@ -7,6 +7,7 @@ categories = ["blog"]
 tags = ["hack", "web", "xss", "javascript"]
 
 [extra]
+toc = true
 zenn_applause = true
 comments = [
     {url = "https://news.ycombinator.com/item?id=21371201", name = "Hacker News"},

content/blog/2020-05-04_elegant-bash-conditionals/index.md

@@ -10,6 +10,7 @@ categories = ["blog"]
 tags = ["bash", "shell"]
 
 [extra]
+toc = true
 zenn_applause = true
 +++
 

content/blog/2021-02-27_solving-aoc-2020-in-under-a-second/index.md

@@ -7,6 +7,7 @@ categories = ["blog"]
 tags = ["rust", "performance", "aoc"]
 
 [extra]
+toc = true
 zenn_applause = true
 comments = [
     {url = "https://news.ycombinator.com/item?id=26286781", name = "Hacker News"},

themes/zenn/sass/_components.scss

@@ -111,6 +111,32 @@ content {
         padding-left: 1em;
         transition: border 0.2s ease;
     }
+
+    #toc-container {
+        margin-top: 1em;
+        padding: 1em;
+        box-sizing: border-box;
+        background-color: $color-main-bg-alt;
+        border-radius: 4px;
+        transition: background-color 0.2s ease,
+            border 0.2s ease;
+
+        h4 {
+            margin: 0 0 0.5em 0;
+        }
+
+        select#toc-select {
+            width: 100%;
+            padding: 0.5em;
+            color: $color-text;
+            background: $color-main-bg;
+            border: 1px solid $color-main-border;
+            border-radius: 4px;
+            transition: background-color 0.2s ease,
+                border-color 0.2s ease,
+                color 0.2s ease;
+        }
+    }
 }
 
 /**

themes/zenn/templates/page.html

@@ -13,6 +13,45 @@
         </header>
         #}
 
+        {# Table of contents #}
+        {% if page.extra.toc -%}
+            <div id="toc-container">
+                <h4>Table of contents</h4>
+                <select id="toc-select">
+                    {# Post title #}
+                    <option value="{{ current_url }}#">{{ page.title }}</option>
+                    <option disabled>──────────</option>
+
+                    {# Post headers, with children #}
+                    {% for h1 in page.toc %}
+                        <option value="{{ h1.permalink | safe }}">{{ loop.index }}. {{ h1.title }}</option>
+                        {% if h1.children %}
+                            {% for h2 in h1.children %}
+                                <option value="{{h2.permalink |
+                                safe}}">&nbsp;&nbsp;&nbsp;&nbsp;{{ loop.index }}. {{ h2.title }}</option>
+                            {% endfor %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {# Comments link #}
+                    {% if page.extra.comments %}
+                        <option disabled>──────────</option>
+                        <option value="{{ current_url }}#comments">Comments</option>
+                    {% endif %}
+                </select>
+
+                <script>
+                    let select = document.getElementById("toc-select");
+                    select.addEventListener('change', function(event) {
+                        let target = event.target.value;
+                        if(target != null && target != undefined && target != '') {
+                            window.location.href = target;
+                        }
+                    });
+                </script>
+            </div>
+        {%- endif %}
+
         <div itemprop="articleBody">
             {{ page.content | safe }}
         </div>

themes/zenn/templates/site.html

@@ -170,35 +170,6 @@
                     {% block page_footer %}{% endblock page_footer %}
                 </content>
                 <sidebar>
-                    {# Table of contents #}
-                    {% if page.toc -%}
-                        <section>
-                            <h1>On this page</h1>
-                            <ul>
-                                <li><a href="{{ current_url }}#" title="{{ page.title }}">{{ page.title }}</a></li>
-                                {% for h1 in page.toc %}
-                                    <li>
-                                        <a href="{{ h1.permalink | safe }}" title="{{ h1.title }}">{{ loop.index }}. {{ h1.title }}</a>
-                                        {% if h1.children %}
-                                            {# <ul> #}
-                                            {% for h2 in h1.children %}
-                                                <li class="sub">
-                                                    <a href="{{h2.permalink | safe}}" title="{{ h1.title }}">{{ loop.index }}. {{ h2.title }}</a>
-                                                </li>
-                                            {% endfor %}
-                                            {# </ul> #}
-                                        {% endif %}
-                                    </li>
-                                {% endfor %}
-
-                                {# Comments link #}
-                                {% if page.extra.comments %}
-                                    <li><a href="#comments" title="Comments">Comments</a></li>
-                                {% endif %}
-                            </ul>
-                        </section>
-                    {%- endif %}
-
                     {# Categories #}
                     {% set categories = get_taxonomy(kind="categories") %}
                     {% if categories.items | length > 0 -%}