Improve TOC logic, reduce code duplication and add changelog entries

CHANGELOG.md

@@ -7,10 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.3.2...main)
 
+### Added
+
+- Add ability to enable inline table of contents in articles (#94 and #95).
+- Add ability to make table of contents use numbered lists (#95).
+- Add ability to open search by pressing the slash key.
+
 ### Changed
 
-- Allow opening search by pressing the slash key.
 - Focus search after opening it.
+- Move quick navigation buttons to the top on mobile.
 - Return some `-webkit-` prefixes for wider compatibility.
 
 ## [5.3.2](https://codeberg.org/daudix/duckquill/compare/v5.3.1...v5.3.2)

config.toml

@@ -129,6 +129,21 @@ show_share_button = true
 # Note: This will make your page significantly heavier.
 # Instead, consider enabling it per page/section.
 # katex = true
+#
+# Whether to render table of contents on all pages.
+# Will not be rendered if page doesn't have any headings.
+# Can be set per page/section.
+# toc = true
+#
+# Whether to render inline table of contents at the top of all pages,
+# in addition to floating quick navigation buttons.
+# Can be set per page/section.
+# toc_inline = true
+#
+# Whether to use numbered (ordered) list for table of contents.
+# Can be set per page/section.
+# toc_ordered = true
+#
 # Display outlines around all elements for debugging purposes
 # debug_layout = true
 
@@ -206,12 +221,3 @@ show_qr = true
 #
 # Your GoatCounter username
 user = "duckquill"
-
-# Table of Contents (TOC) configs
-[extra.toc]
-# whether to render inline static TOC at the top of the articles or not
-inline = true
-# where to show the TOC as a pop-up button
-popup = true
-# Show numbered TOC
-numbered = true

content/blog/the-quill-of-duck/index.md

@@ -9,6 +9,8 @@ tags = ["Demo", "Test"]
 [extra]
 banner = "banner.webp"
 toc = true
+toc_inline = true
+toc_ordered = true
 trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
 disclaimer = """
 - All tricks in this page are performed by the lab boys, don't try this at home.

sass/_article.scss

@@ -180,6 +180,7 @@
 				overflow: auto;
 			}
 
+			ol,
 			ul {
 				margin: 0;
 				padding-inline-start: 0.75rem;

sass/_footnotes-list.scss

@@ -19,9 +19,21 @@
 		color: transparent;
 		user-select: none;
 
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+
+			&:active {
+				transform: scaleX(-1) var(--active);
+			}
+		}
+
 		&:hover {
 			background-color: var(--accent-color);
 		}
+
+		&:active {
+			transform: var(--active);
+		}
 	}
 
 	a + a[href*="#fr-"],
@@ -32,10 +44,6 @@
 		&:hover {
 			opacity: 1;
 		}
-
-		&:active {
-			transform: var(--active);
-		}
 	}
 
 	li:target a[href*="#fr-"] {

templates/article.html

@@ -5,11 +5,11 @@
 {%- set date_locale = macros_translate::translate(key="date_locale", default="en_US", language_strings=language_strings) -%}
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
 
-{% if config.extra.toc.numbered %}
-	{% set list_element = "ol" %}
-{% else %}
-	{% set list_element = "ul" %}
-{% endif %}
+{%- if page.extra.toc_ordered or section.extra.toc_ordered or config.extra.toc_ordered -%}
+	{%- set list_element = "ol" -%}
+{%- else -%}
+	{%- set list_element = "ul" -%}
+{%- endif -%}
 
 <article>
 	{%- if page.extra.banner -%}
@@ -77,28 +77,28 @@
 	</div>
 
 	<div id="buttons-container">
-		{%- if page.extra.toc and config.extra.toc.popup -%}
+		{%- if page.extra.toc and page.toc | length > 0 -%}
 			<details id="toc" class="closable">
 				<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
 				<div id="toc-dropdown">
 					<strong>{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
 					<div>
-						<{{list_element}}>
+						<{{ list_element }}>
 							{%- for h1 in page.toc -%}
 								<li>
 									<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
 									{%- if h1.children -%}
-										<{{list_element}}>
+										<{{ list_element }}>
 											{%- for h2 in h1.children -%}
 												<li>
 													<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
 												</li>
 											{%- endfor -%}
-										</{{list_element}}>
+										</{{ list_element }}>
 									{%- endif -%}
 								</li>
 							{%- endfor -%}
-						</{{list_element}}>
+						</{{ list_element }}>
 					</div>
 				</div>
 			</details>
@@ -114,26 +114,10 @@
 
 	{%- include "partials/statements.html" -%}
 
-
-	{%- if page.extra.toc and config.extra.toc.inline-%}
-		<h2>{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</h2>
-
-		<{{list_element}} role="list">
-			{%- for h1 in page.toc -%}
-				<li>
-					<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-					{%- if h1.children -%}
-						<{{list_element}} role="list">
-							{%- for h2 in h1.children -%}
-								<li>
-									<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-								</li>
-							{%- endfor -%}
-						</{{list_element}}>
-					{%- endif -%}
-				</li>
-			{%- endfor -%}
-		</{{list_element}}>
+	{%- if page.extra.toc_inline -%}
+		{%- include "partials/toc.html" -%}
+	{%- elif config.extra.toc_inline -%}
+		{%- include "partials/toc.html" -%}
 	{%- endif -%}
 
 	{{ page.content | safe }}

templates/partials/toc.html

@@ -1,37 +1,33 @@
-{%- if page.extra.toc -%}
-	<h2>{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</h2>
-	<ul>
-		{%- for h1 in page.toc -%}
-			<li>
-				<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-				{%- if h1.children -%}
-					<ul>
-						{%- for h2 in h1.children -%}
-							<li>
-								<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-							</li>
-						{%- endfor -%}
-					</ul>
-				{%- endif -%}
-			</li>
-		{%- endfor -%}
-	</ul>
-{%- elif section.extra.toc -%}
-	<h2>{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</h2>
-	<ul>
-		{%- for h1 in section.toc -%}
-			<li>
-				<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-				{%- if h1.children -%}
-					<ul>
-						{%- for h2 in h1.children -%}
-							<li>
-								<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-							</li>
-						{%- endfor -%}
-					</ul>
-				{%- endif -%}
-			</li>
-		{%- endfor -%}
-	</ul>
+{%- if page.extra.toc_ordered or section.extra.toc_ordered or config.extra.toc_ordered -%}
+	{%- set list_element = "ol" -%}
+{%- else -%}
+	{%- set list_element = "ul" -%}
+{%- endif -%}
+
+{%- if page.toc -%}
+    {%- set toc = page.toc -%}
+{%- elif section.toc -%}
+    {%- set toc = section.toc -%}
+{%- endif -%}
+
+{%- if page.extra.toc or section.extra.toc -%}
+	{%- if toc | length > 0 -%}
+		<h2>{{ macros_translate::translate(key="toc", default="Table of Contents", language_strings=language_strings) }}</h2>
+		<{{ list_element }}>
+			{%- for h1 in toc -%}
+				<li>
+					<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+					{%- if h1.children -%}
+						<{{ list_element }}>
+							{%- for h2 in h1.children -%}
+								<li>
+									<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+								</li>
+							{%- endfor -%}
+						</{{ list_element }}>
+					{%- endif -%}
+				</li>
+			{%- endfor -%}
+		</{{ list_element }}>
+	{%- endif -%}
 {%- endif -%}