Commits: 3
Display a table of contents on home page
Implement a table of contents component and shortcode
The shortcode uses a hack described here:
https://github.com/getzola/zola/issues/584
index 5c874d2..3efaddd 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -3,6 +3,8 @@
=
=Move away from big tech. Stay in control of your tools, your data, and your values.
=
+{\{ table_of_contents() \}}
+
=# Why make the switch?
=
=Most organisations rely on Google or Microsoft tools because they feel like the default.index f55bb0f..f612011 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -69,6 +69,8 @@
= --red: oklch(from var(--yellow) L C 29deg);
= --green: oklch(from var(--yellow) L C 142deg);
= --blue: oklch(from var(--yellow) L C 264deg);
+
+ scroll-behavior: smooth;
= }
=
=
@@ -159,7 +161,25 @@
= color: var(--dark-color);
= }
= }
+ }
+
+ /* Table of contents navigation */
+ nav.table-of-contents > ul {
+ display: flex;
+ justify-content: start;
+ flex-wrap: wrap;
+ gap: 1rem;
+ list-style: none;
+ padding: 0;
+
+ li {
+ font-weight: bold;
+ }
+
=
+ @media (max-width: 36rem) {
+ flex-direction: column;
+ }
= }
=
= hgroup h1 {index bb9e6d0..7d2a03f 100644
--- a/templates/components.html
+++ b/templates/components.html
@@ -211,3 +211,13 @@
= {\% endfor %}
= {\{ demoted | safe \}}
={\% endmacro table_of_contents %}
+
+{\% macro table_of_contents (toc) %}
+ <nav class="table-of-contents">
+ <ul title="Jump to section">
+ {\% for item in toc %}
+ <li><a href="#{\{ item.id \}}">{\{ item.title \}}</a></li>
+ {\% endfor %}
+ </ul>
+ </nav>
+{\% endmacro table_of_contents %}index 374bb55..bd9baf9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,10 @@
={\% extends "base.html" %}
=
+{\% import "components.html" as components %}
+
={\%- block main_content -%}
={\{- components::demote_headings (content=section.content)
+ | replace(from="<!-- table-of-contents -->", to=components::table_of_contents(toc=section.toc))
= | safe
=-\}}
={\%- endblock main_content -%}new file mode 100644
index 0000000..65027a4
--- /dev/null
+++ b/templates/shortcodes/table_of_contents.html
@@ -0,0 +1 @@
+<!-- table-of-contents -->Spread content on the home page vertically
Allow templates to set root class (set on the html element in base template). The home page set's it to "home". CSS contains a section to make home page vertically sparse, so that each section takes at least one screen height. Also fonts are bigger. All in all it has a bit of slideshow vibe.
I think it's better, because there is a lot of text on home page and to me it looks intimidating on first glance. Now sections are presented separately.
index f612011..32e3716 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,6 +3,10 @@
= fallback logic.
=#}
=
+{\% block variables %}
+{\% set root_class = "" %}
+{\% endblock variables %}
+
={\%- if not title -%}
= {\%- if section and section.title -%}
= {\%- set title = section.title ~ " - " ~ config.title -%}
@@ -24,7 +28,7 @@
={\%- endif -%}
=
=<!doctype html>
-<html class="no-js" lang="en">
+<html class="no-js {\{ root_class \}}" lang="en">
= <head>
= <meta charset="utf-8" />
= <meta http-equiv="x-ua-compatible" content="ie=edge" />
@@ -73,6 +77,31 @@
= scroll-behavior: smooth;
= }
=
+ /* Special treatment for landing page */
+ .home {
+
+ main {
+ font-size: 150%;
+ }
+
+ main h2 {
+ padding-top: 25vh;
+ margin-top: 25vh;
+ }
+
+ body > footer {
+ margin-top: 20vh;
+ }
+
+ main > p:first-of-type {
+ padding-top: 15vh;
+ font-size: 200%;
+ }
+
+ .table-of-contents {
+ font-size: initial;
+ }
+ }
=
= body {
= font-family: sans-serif;
@@ -127,7 +156,8 @@
= --accent-color: var(--blue)
= }
=
- nav > ul {
+ /* Main navigation */
+ body > header nav > ul {
= display: flex;
= justify-content: end;
= flex-wrap: wrap;index bd9baf9..da1c01c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,6 +2,11 @@
=
={\% import "components.html" as components %}
=
+{\% block variables %}
+{\{ super() \}}
+{\% set root_class = "home" %}
+{\% endblock variables %}
+
={\%- block main_content -%}
={\{- components::demote_headings (content=section.content)
= | replace(from="<!-- table-of-contents -->", to=components::table_of_contents(toc=section.toc))Separate debug component
So it can be re-used in macros and shortcodes.
index 32e3716..56e41c5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -427,12 +427,7 @@
= </p>
= <![endif]-->
=
- {\%- if config.mode == "serve" %}
- <details style="overflow: scroll">
- <summary>Rendering context</summary>
- <pre>{\{ __tera_context | escape | safe \}}</pre>
- </details>
- {\% endif -%}
+ {\% include "shortcodes/debug.html" %}
=
=
= <header>new file mode 100644
index 0000000..cef40cd
--- /dev/null
+++ b/templates/shortcodes/debug.html
@@ -0,0 +1,6 @@
+{\%- if config.mode == "serve" %}
+<details style="overflow: scroll">
+ <summary>Rendering context</summary>
+ <pre>{\{ __tera_context | escape | safe \}}</pre>
+</details>
+{\% endif -%}