✨feat(quick-navigation): add ToC button (#115)

sass/main.scss

@@ -13,6 +13,7 @@
 @use 'parts/_multilingual_quote.scss';
 @use 'parts/_pagination.scss';
 @use 'parts/_posts_list.scss';
+@use 'parts/_quick_navigation_buttons.scss';
 @use 'parts/_spoiler.scss';
 @use 'parts/_table.scss';
 @use 'parts/_tags.scss';

sass/parts/_header.scss

@@ -82,11 +82,6 @@ header {
     }
 }
 
-.card-meta {
-    color: var(--meta-color);
-    font-size: 0.92rem;
-}
-
 .language-switcher {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
@@ -108,7 +103,7 @@ header {
 .dropdown {
     display: inline-block;
     position: relative;
-    z-index: 99;
+    z-index: 1;
     font-size: 0.8rem;
 }
 
@@ -117,7 +112,7 @@ header {
     position: absolute;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
-    z-index: 99;
+    z-index: 1;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;

sass/parts/_misc.scss

@@ -151,49 +151,3 @@ hr {
     border-radius: 10px;
     text-align: center;
 }
-
-#button-container {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-
-    #comments-button, #top-button {
-        background-color: var(--bg-1);
-        padding: 0.4rem;
-        height: 1rem;
-        width: 1rem;
-        text-align: center;
-        border-radius: 50%;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:hover {
-            background-color: var(--bg-3);
-
-            svg {
-                fill: var(--primary-color);
-            }
-
-            &::before {
-                background-color: transparent;
-            }
-        }
-
-        svg {
-            width: 1rem;
-            height: 1rem;
-            fill: var(--text-color);
-        }
-    }
-
-    @media (max-width: 700px) {
-        #comments-button, #top-button {
-            display: none;
-        }
-    }
-}

sass/parts/_quick_navigation_buttons.scss

@@ -0,0 +1,119 @@
+#button-container {
+    display: flex;
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    flex-direction: column;
+    gap: 0.6rem;
+    z-index: 2; // Above "copy-code" buttons. Important for the ToC.
+
+    #toc-button,
+    #comments-button,
+    #top-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+        cursor: pointer;
+        border: none;
+        border-radius: 50%;
+        background-color: var(--bg-1);
+        padding: 0.4rem;
+        width: 1rem;
+        height: 1rem;
+        text-align: center;
+
+        &:hover {
+            background-color: var(--bg-3);
+
+            svg {
+                fill: var(--primary-color);
+            }
+
+            &::before {
+                background-color: transparent;
+            }
+        }
+
+        svg {
+            fill: var(--text-color);
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    #toc-floating-container {
+
+        $padding-vertical: 0.7rem;
+        $padding-horizontal: 1rem;
+
+        #toc-button {
+            position: relative;
+            z-index: 2;
+        }
+
+        .toc-container {
+            margin: 0;
+            margin-top: $padding-vertical;
+        }
+
+        .toc-content {
+            display: none;
+            position: absolute;
+            right: 0;
+            bottom: 100%;
+            z-index: 2;
+            margin-bottom: $padding-vertical;
+            box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+            border: 1px solid var(--divider-color);
+            border-radius: 5px;
+            background-color: var(--background-color);
+            padding-right: $padding-horizontal;
+            max-height: 80vh;
+            overflow-y: auto;
+            font-size: 0.8rem;
+            text-align: left;
+            white-space: nowrap; // Prevents wrapping, allowing content to define width.
+
+            ul {
+                padding-left: $padding-horizontal;
+                list-style: none;
+            }
+        }
+
+        .toggle {
+            display: none;
+
+            &:checked {
+
+                + .overlay,
+                + .overlay + #toc-button + .toc-content {
+                    display: block;
+                }
+
+                + .overlay + #toc-button svg {
+                    fill: var(--primary-color); // Show the ToC icon as toggled.
+                }
+            }
+        }
+
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 40%;
+            z-index: 1; // Lower than the Table of Contents
+            background: var(--background-color);
+        }
+
+    }
+}
+
+@media (max-width: 700px) {
+    #button-container {
+        display: none !important;
+    }
+}

templates/macros/content.html

@@ -101,16 +101,32 @@
 
 {% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %}
     <div id="button-container">
-    {% if comment_system %}
+        {# Button to go show a floating Table of Contents #}
-        <a href="#comments" id="comments-button">
+        {% if page.toc %}
-            <svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
+            <div id="toc-floating-container">
-        </a>
+                <input type="checkbox" id="toc-toggle" class="toggle"/>
-    {% endif %}
+                <label for="toc-toggle" class="overlay"></label>
+                <label for="toc-toggle" id="toc-button" class="button" title="Toggle Table of Contents" aria-label="toggle Table of Contents">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg>
+                </label>
+                <div class="toc-content">
+                    {{ macros_toc::toc(page=page, header=false) }}
+                </div>
+            </div>
+        {% endif %}
 
-    <a href="#" id="top-button">
+        {# Button to go to the comment section #}
-        <svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
+        {% if comment_system %}
-    </a>
+            <a href="#comments" id="comments-button" title="Go to comment section">
-</div>
+                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
+            </a>
+        {% endif %}
+
+        {# Button to go to the top of the page #}
+        <a href="#" id="top-button" title="Go to top of page">
+            <svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
+        </a>
+    </div>
 {% endif %}
 
 {% endmacro content %}