[Feature] Add options for TOC: inline, popup, numbered (#95)

addressing this issue: https://codeberg.org/daudix/duckquill/issues/94

- You can now choose if you want to have and inline Table of Contents(TOC), a popup, or both!
- You can also choose between numbered and un-numbered TOC styles

note: please squash the commits
Reviewed-on: https://codeberg.org/daudix/duckquill/pulls/95
Co-authored-by: Alireza Alavi <alavialireza@protonmail.com>
Co-committed-by: Alireza Alavi <alavialireza@protonmail.com>

config.toml

@@ -206,3 +206,12 @@ 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

templates/article.html

@@ -4,6 +4,13 @@
 {%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}
 {%- 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 %}
+
 <article>
 	{%- if page.extra.banner -%}
 		<div id="banner-container">
@@ -70,28 +77,28 @@
 	</div>
 
 	<div id="buttons-container">
-		{%- if page.extra.toc -%}
+		{%- if page.extra.toc and config.extra.toc.popup -%}
 			<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>
-						<ul>
+						<{{list_element}}>
 							{%- for h1 in page.toc -%}
 								<li>
 									<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
 									{%- if h1.children -%}
-										<ul>
+										<{{list_element}}>
 											{%- for h2 in h1.children -%}
 												<li>
 													<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
 												</li>
 											{%- endfor -%}
-										</ul>
+										</{{list_element}}>
 									{%- endif -%}
 								</li>
 							{%- endfor -%}
-						</ul>
+						</{{list_element}}>
 					</div>
 				</div>
 			</details>
@@ -107,6 +114,28 @@
 
 	{%- 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}}>
+	{%- endif -%}
+
 	{{ page.content | safe }}
 </article>