website supposedly works (but who knows, who knows...)

config.toml

@@ -1,194 +1,45 @@
-# The base URL of the site; the only required configuration variable.
-base_url = "https://notes.joostagterhoek.nl"
-
-# The site title and description; used in feeds by default.
-title = "Trying out a statically generated website"
-description = ""
-
-# The default language; used in feeds.
+base_url = "https://anemone.pages.dev"
+title = "anemone"
+description = "A minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas."
+compile_sass = false
+minify_html = true
+generate_feeds = true
 default_language = "en"
 
-# The site theme to use.
-theme = "anemone"
-
-# For overriding the default output directory `public`, set it to another value (e.g.: "docs")
-output_dir = "public"
-
-# Whether dotfiles at the root level of the output directory are preserved when (re)building the site.
-# Enabling this also prevents the deletion of the output folder itself on rebuilds.
-preserve_dotfiles_in_output = false
-
-# When set to "true", the Sass files in the `sass` directory in the site root are compiled.
-# Sass files in theme directories are always compiled.
-compile_sass = false
-
-# When set to "true", the generated HTML files are minified.
-minify_html = false
-
-# A list of glob patterns specifying asset files to ignore when the content
-# directory is processed. Defaults to none, which means that all asset files are
-# copied over to the `public` directory.
-# Example:
-#     ignored_content = ["*.{graphml,xlsx}", "temp.*", "**/build_folder"]
-ignored_content = []
-
-# Similar to ignored_content, a list of glob patterns specifying asset files to
-# ignore when the static directory is processed. Defaults to none, which means
-# that all asset files are copied over to the `public` directory
-ignored_static = []
-
-# When set to "true", a feed is automatically generated.
-generate_feeds = true
-
-# The filenames to use for the feeds. Used as the template filenames, too.
-# Defaults to ["atom.xml"], which has a built-in template that renders an Atom 1.0 feed.
-# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
-feed_filenames = [ "atom.xml" ]
-
-# The number of articles to include in the feed. All items are included if
-# this limit is not set (the default).
-# feed_limit = 20
-
-# When set to "true", files in the `static` directory are hard-linked. Useful for large
-# static files. Note that for this to work, both `static` and the
-# output directory need to be on the same filesystem. Note that the theme's `static`
-# files are always copied, regardless of this setting.
-hard_link_static = false
-
-# The default author for pages
-author = "Joost Agterhoek"
-
-# The taxonomies to be rendered for the site and their configuration of the default languages
-# Example:
-#     taxonomies = [
-#       {name = "tags", feed = true}, # each tag will have its own feed
-#       {name = "tags"}, # you can have taxonomies with the same name in multiple languages
-#       {name = "categories", paginate_by = 5},  # 5 items per page for a term
-#       {name = "authors"}, # Basic definition: no feed or pagination
-#     ]
-#
 taxonomies = [
     {name = "tags", feed = true},
-  ]
+]
 
-# When set to "true", a search index is built from the pages and section
-# content for `default_language`.
-build_search_index = false
+[languages.fr]
+weight = 2
+languageName = "Français"
+languageCode = "fr"
 
-# Configuration of the Markdown rendering
 [markdown]
-# When set to "true", all code blocks are highlighted.
-highlight_code = false
-
-# A list of directories used to search for additional `.sublime-syntax` and `.tmTheme` files.
-extra_syntaxes_and_themes = []
-
-# The theme to use for code highlighting.
-# See below for list of allowed values.
-highlight_theme = "dracula"
-
-# When set to "true", emoji aliases translated to their corresponding
-# Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
 render_emoji = true
+external_links_target_blank = true
+smart_punctuation = true
+highlight_code = false
+highlight_theme = "gruvbox-dark"
 
-# Whether external links are to be opened in a new tab
-# If this is true, a `rel="noopener"` will always automatically be added for security reasons
-external_links_target_blank = false
-
-# Whether to set rel="nofollow" for all external links
-external_links_no_follow = false
-
-# Whether to set rel="noreferrer" for all external links
-external_links_no_referrer = false
-
-# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
-# For example, `...` into `…`, `"quote"` into `“curly”` etc
-smart_punctuation = false
-
-# Whether to set decoding="async" and loading="lazy" for all images
-# When turned on, the alt text must be plain text.
-# For example, `![xx](...)` is ok but `![*x*x](...)` isn’t ok
-lazy_async_image = false
-
-# Configuration of the link checker.
-[link_checker]
-# Skip link checking for external URLs that start with these prefixes
-skip_prefixes = [
-    "http://[2001:db8::]/",
-]
-
-# Skip anchor checking for external URLs that start with these prefixes
-skip_anchor_prefixes = [
-    "https://caniuse.com/",
-]
-
-# Treat internal link problems as either "error" or "warn", default is "error"
-internal_level = "warn"
-
-# Treat external link problems as either "error" or "warn", default is "error"
-external_level = "error"
-
-# Various slugification strategies, see below for details
-# Defaults to everything being a slug
 [slugify]
 paths = "on"
 taxonomies = "on"
 anchors = "on"
-# Whether to remove date prefixes for page path slugs.
-# For example, content/posts/2016-10-08_a-post-with-dates.md => posts/a-post-with-dates
-# When true, content/posts/2016-10-08_a-post-with-dates.md => posts/2016-10-08-a-post-with-dates
-paths_keep_dates = false
 
-[search]
-# Whether to include the title of the page/section in the index
-include_title = true
-# Whether to include the description of the page/section in the index
-include_description = false
-# Whether to include the path of the page/section in the index
-include_path = false
-# Whether to include the rendered content of the page/section in the index
-include_content = true
-# At which character to truncate the content to. Useful if you have a lot of pages and the index would
-# become too big to load on the site. Defaults to not being set.
-# truncate_content_length = 100
+[link_checker]
+internal_level = "warn"
 
-# Wether to produce the search index as a javascript file or as a JSON file
-# Accepted value "elasticlunr_javascript" or "elasticlunr_json"
-index_format = "elasticlunr_javascript"
-
-# Optional translation object for the default language
-# Example:
-#     default_language = "fr"
-#
-#     [translations]
-#     title = "Un titre"
-#
-[translations]
-
-# Additional languages definition
-# You can define language specific config values and translations: 
-# title, description, generate_feed, feed_filename, taxonomies, build_search_index
-# as well as its own search configuration and translations (see above for details on those)
-[languages]
-# For example
-# [languages.fr]
-# title = "Mon blog"
-# generate_feed = true
-# taxonomies = [
-#    {name = "auteurs"},
-#    {name = "tags"},
-# ]
-# build_search_index = false
-
-# You can put any kind of data here. The data
-# will be accessible in all templates
-# Example:
-#     [extra]
-#     author = "Famous author"
-#
-# author value will be available using {{ config.extra.author }} in templates
-#
 [extra]
+author = "Speyll"
+display_author = true
+
+favicon = "favicon.ico"
+image = ""
+
+default_theme = "light"
+list_pages = false
+twitter_card = true
 
 header_nav = [
   { url = "/", name_en = "/home/", name_fr = "/accueil/" },
@@ -196,3 +47,7 @@ header_nav = [
   { url = "/journal", name_en = "/journal/", name_fr = "/journal/" },
   { url = "/blog", name_en = "/blog/", name_fr = "/blog/" }
 ]
+
+# Optional footer license text. It will only show, when using footer_content_license.
+#footer_content_license = "Creative Commons Attribution 4.0 International"
+#footer_content_license_link = "https://creativecommons.org/licenses/by/4.0/"

content/_index.md

@@ -1,13 +1,38 @@
 +++
-template = "index.html"
-title = "Test home page"
 +++
 
-Here you can find a website built with the static site generator [Zola](www.getzola.org). I want to try out a more direct workflow in writing/blogging and keeping up with projects than my [main website built with Grav](https://joostagterhoek.nl) can offer. Liking it so far! :star:
+## Overview
 
-## Blog posts
-- 🥇 [My first blog post here](./blog/my-first-post)
+anemone theme is designed to provide a nearly no-JavaScript, efficient, and minimalist experience for your website. Embracing simplicity, the theme focuses on content and readability, ensuring a seamless user experience without unnecessary distractions.
 
-## Projects
+> *"Useless blockquote"*
+
+## Blog Posts
+
+Explore our insightful blog posts on a variety of topics:
+
+- 🔥 [testing](./blog/testing)
+
+## Tags
+
+Browse our posts by tags:
+
+- [test](./tags/test)
+
+## Another List
+
+Discover additional content:
+
+- With Subitems
+  - With Subsubitems
+  - [Example Page](./about)
+- this list is just the content of `content/_index.md`, the tests are shamelessly stolen from [no style, please!](https://www.getzola.org/themes/no-style-please/)
+
+## Online Presence
+
+Stay connected with us:
+
+- Email: [mail@joostagterhoek.nl](mailto:mail@joostagterhoek.nl)
+- Code Repositories: [self-hosted Gitea](https://code.joostagterhoek.nl/joost)
+- Socials: [my Pleroma-instance](https://social.joostagterhoek.nl/joost)
  
-- (add gui-host-lookup)

content/about.md

@@ -1,5 +1,6 @@
 +++
 title = "About"
 +++
+This is an about page, nothing more nothing less `forget about it`.
 
-Hi there! I'm Joost Agterhoek and this is one of my websites. Currently not my main one, that would be [this lovely place](https://joostagterhoek.nl). This is still a work in progress.
+{{ youtube(id="pS6zJ7IsJkM" class="center") }}

content/blog/2024-08-26-test-again.md

@@ -0,0 +1,7 @@
++++
+title = "testing..again"
+[taxonomies]
+  tags = ["test"]
++++
+
+I just *keep* on testing...I guess I'm never happy 🧐  But! The end result will be just what I want.

content/blog/2024-08-27-testing.md

@@ -0,0 +1,11 @@
++++
+title = "testing"
+[taxonomies]
+  tags = ["test"]
++++
+
+testing! ♥️
+
+I guess the testing...worked? Essentially, it all worked out. I had some issues with `zola serve` not automatically rebuilding and reloading the page upon editing data. That was handled by replacing the root folder for this website to the root of my WSL (as found [here](https://github.com/getzola/zola/issues/1440). This is something of a problem, as it would be great to test out any edits locally and then (maybe with a git hook) push a commit ánd sync the updated files to my server. But of course, we can't have everything, can we!
+
+Another thing that bothers me is that I found a solution to a 'bug', but I don't understand the solution. After writing some initial posts, I started to wonder how the base HTML pages work together with these Markdown files to produce the actual statically generated website pages. The syntax looks similar to Jinja, which I am sort of used to using in one of my Python projects. But for the life of me, I couldn't get the actual HTML (which would show some metadata like a date and author above a post like this one), to show up. Then I started looking at the Github-folder for this theme and git cloned that repo and whaddayaknow: that clone **does** produce the expected HTML! I compared files, even diffed some, to understand what I was missing in my files or folder structure. In the end I couldn't find it, so I simply copy and pasted the files. And of course, it worked immediately. Sigh. Again: we can't have everything. But! We do have emojis. So. That's something!🪅🌟🤣😉🙃

content/blog/_index.md

@@ -2,6 +2,7 @@
 paginate_by = 15
 title = "All blog posts"
 sort_by = "date"
+page_template = "blog-page.html"
 +++
 
 > List of all *[tags](/tags)*

static/css/style.css

@@ -0,0 +1,105 @@
+#nav-bar {
+  padding: .625rem 0 0 0;
+  display: flex;
+  flex-direction: row;
+  gap: .25rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: flex-end
+}
+
+#footer-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.accent-data {
+  color: var(--accent);
+}
+
+.theme-transition {
+  transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+.tags-data {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+  align-content: flex-end
+}
+
+.title-list li {
+  margin-bottom: .375rem;
+}
+
+/* icons settings */
+.icons {
+  width: 1.3rem;
+  height: 1.3rem;
+  aspect-ratio: 1/1;
+  display: inline-block;
+  vertical-align: middle;
+  color: var(--text);
+  fill: var(--text);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.icons:hover {
+  background-color: transparent;
+  color: var(--accent);
+}
+
+/* footnotes */
+.footnote-definition {
+  margin: 0 0 0 .125rem;
+}
+
+.footnote-definition-label {
+  color: var(--accent);
+}
+
+.footnote-definition p {
+  display: inline;
+  margin: .625rem 0 0 .625rem;
+}
+
+/* general classes */
+.no-style {
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0
+}
+
+.no-style:hover {
+  background-color: transparent;
+  color: var(--accent);
+}
+
+.center {
+  text-align: center;
+}
+
+.center img {
+  display: block;
+  margin: 1rem auto;
+}
+
+.float-right {
+  float: right
+}
+
+.float-left {
+  float: left
+}
+
+/* shortcodes css */
+.webring {
+  margin: .375rem;
+}

static/icons.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
+  </symbol>
+
+  <symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/>
+  </symbol>
+
+  <symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15Zm0 2q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288ZM12 12Z"/>
+  </symbol>
+
+  <symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
+  </symbol>
+
+  <symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
+  </symbol>
+</svg>

static/js/script.js

@@ -0,0 +1,49 @@
+const toggleButton = document.getElementById('theme-toggle');
+const themeIcon = document.getElementById('theme-icon');
+const themeSound = document.getElementById('theme-sound');
+
+// Function to update the theme icon based on the current theme
+const updateThemeIcon = (isDarkMode) => {
+    const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
+    const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
+    themeIcon.querySelector('use').setAttribute('href', iconPath);
+};
+
+// Function to update the theme based on the current mode
+const updateTheme = (isDarkMode) => {
+    const theme = isDarkMode ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', theme);
+    updateThemeIcon(isDarkMode);
+};
+
+// Function to toggle the theme
+const toggleTheme = () => {
+    const isDarkMode = toggleButton.checked;
+    updateTheme(isDarkMode);
+    themeSound.play();
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+
+    // Add transition class to body for smooth transition
+    document.body.classList.add('theme-transition');
+    setTimeout(() => {
+        document.body.classList.remove('theme-transition');
+    }, 300);
+};
+
+// Event listener for theme toggle
+toggleButton.addEventListener('change', toggleTheme);
+
+// Function to initialize the theme based on the stored preference
+const initializeTheme = () => {
+    const storedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
+    toggleButton.checked = isDarkMode;
+    updateTheme(isDarkMode);
+};
+
+// Initialize the theme
+initializeTheme();
+
+// Listen for changes in system preference
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);

templates/base.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{% if page %}{{ page.lang }}{% else %}{{ config.default_language }}{% endif %}">
+<head>
+    {% include "head.html" %}
+</head>
+<body>
+      <header>
+          {% include "header.html" %}
+      </header>
+      <main>
+          {% block content %}
+          {% endblock content %}
+      </main>
+      <footer>
+          {% include "footer.html" %}
+      </footer>
+</body>
+</html>

templates/blog-page.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div><a href="..">..</a>/<span class="accent-data">{{ page.slug }}</span></div>
+<time datetime="{{ page.date }}">Published on: <span class="accent-data">{{ page.date }}</span></time>
+{% if config.extra.author and config.extra.display_author == true %}
+<address rel="author">By <span class="accent-data">{{config.extra.author}}</span></address>
+{% endif %}
+<h1>{{ page.title }}</h1>
+
+{% if page.toc and page.extra.toc %}
+<h2>Table of contents</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>
+        <ul>
+          {% for h3 in h2.children %}
+          <li>
+            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+          </li>
+          {% endfor %}
+        </ul>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}
+
+{{ page.content | safe }}
+
+<p class="tags-data">
+  {% if page.taxonomies.tags %}
+  {% for tag in page.taxonomies.tags %}
+  <a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>
+  {% endfor %}
+  {% endif %}
+</p>
+{% endblock content %}

templates/footer.html

@@ -0,0 +1,23 @@
+<hr>
+<div id="footer-container">
+  {% if config.extra.footer_content_license %}
+    <div>Except where otherwise noted, content on this site is licensed under a 
+    {% if config.extra.footer_content_license_link %}
+    <a target="_blank" rel="noopener noreferrer" href="{{config.extra.footer_content_license_link}}">{{config.extra.footer_content_license}}</a>
+    {% else %}
+    {{config.extra.footer_content_license}}
+    {% endif %}
+    license.</div>
+  {% endif %}
+  <div>
+    <p>Theme and color theme licensed under <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Licence_MIT">MIT</a>.<br>
+      Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme, <a target="_blank" rel="noopener noreferrer" href="https://speyll.github.io/suCSS/">suCSS</a> framework &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a>.<br>
+    </p>
+
+  </div>
+  {% if config.generate_feeds %}
+  <div>
+    <a class="no-style" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
+  </div>
+  {% endif %}
+</div>

templates/head.html

@@ -0,0 +1,98 @@
+<meta charset="UTF-8">
+<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
+<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<meta name="robots" content="index, follow">
+{% if page.title %}
+{% set title = page.title %}
+{% elif section.title %}
+{% set title = section.title %}
+{% elif config.title %}
+{% set title = config.title %}
+{% endif %}
+{% if page.extra.author %}
+{% set author = page.extra.author %}
+{% elif section.extra.author %}
+{% set author = section.extra.author %}
+{% elif config.extra.author %}
+{% set author = config.extra.author %}
+{% endif %}
+{% if page.description %}
+{% set description = page.description | truncate(length=150) %}
+{% elif section.description %}
+{% set description = section.description | truncate(length=150) %}
+{% elif config.description %}
+{% set description = config.description | truncate(length=150) %}
+{% endif %}
+{% if page.extra.image %}
+{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
+{% elif section.extra.image %}
+{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
+{% elif config.extra.favicon %}
+{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
+{% endif %}
+{% if page.permalink %}
+{% set url = page.permalink %}
+{% elif section.permalink %}
+{% set url = section.permalink %}
+{% elif config.base_url %}
+{% set url = config.base_url %}
+{% endif %}
+{% if title %}
+<title>{{ title }}</title>
+{% endif %}
+{% block metatags %}
+{% if title %}
+<meta name="title" content="{{ title }}">
+{% endif %}
+{% if author %}
+<meta name="author" content="{{ author }}">
+{% endif %}
+{% if description %}
+<meta name="description" content="{{ description }}">
+{% endif %}
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="og:site_name" content="{{ config.title }}">
+{% endif %}
+{% if title %}
+<meta property="og:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="og:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="og:image" content="{{ image }}">
+{% endif %}
+{% set twitter_card = config.extra.twitter_card | default(value=true) %}
+{% if twitter_card != false %}
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="twitter:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="twitter:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="twitter:image" content="{{ image }}">
+{% endif %}
+{% endif %}
+<link rel="canonical" href="{{ url | safe }}">
+{% if image %}
+<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
+{% endif %}
+{% endblock metatags %}
+{% if config.generate_feeds %}
+{% block feed %}
+<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}"> 
+{% endblock feed %}
+{% endif %}
+{% block css %}
+<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/reset-min.css"/>
+<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/suCSS-min.css"/>
+<link rel="stylesheet" type="text/css" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
+{% endblock css %}
+<script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>
+

templates/header.html

@@ -0,0 +1,23 @@
+{% set current_lang = config.default_language %}
+{% if page %}
+  {% set current_lang = page.lang %}
+{% elif section %}
+  {% set current_lang = section.lang %}
+{% endif %}
+{% if config.extra.header_nav %}
+  <nav id="nav-bar">
+    {% for nav_item in config.extra.header_nav %}
+      <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
+        {% set language_key = 'name_' ~ current_lang %}
+        {{ nav_item[language_key] }}
+      </a>
+    {% endfor %}
+    <div>
+      <input type="checkbox" id="theme-toggle" style="display: none;">
+      <label for="theme-toggle" id="theme-toggle-label"><svg id="theme-icon" class="icons"><use href="{{ get_url(path='/icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></label>
+      <audio id="theme-sound">
+        <source src="{{ get_url(path='click.ogg', trailing_slash=false) | safe }}" type="audio/ogg">
+      </audio>
+    </div>
+  </nav>
+{% endif %}

templates/index.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ section.content | safe }}
+
+{% if config.extra.list_pages %}
+
+{% if paginator %}
+{% set pages = paginator.pages %}
+{% else %}
+{% set pages = section.pages %}
+{% endif %}
+
+<ul class="titleList">
+{% for page in pages %}
+  <li>
+    <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+    <br />
+    {{ page.description }}
+  </li>
+{% endfor %}
+</ul>
+
+{% if paginator %}
+<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
+{% endif %}
+
+{% endif %}
+{% endblock content %}

templates/page.html

@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ page.title }}</h1>
+
+{% if page.toc and page.extra.toc %}
+<h2>Table of contents</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>
+          <ul>
+          {% for h3 in h2.children %}
+            <li>
+            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+            </li>
+          {% endfor %}
+          </ul>
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+  </li>
+{% endfor %}
+</ul>
+{% endif %}
+
+{{ page.content | safe }}
+
+<p class="tags-data">
+{% if page.taxonomies.tags %}
+{% for tag in page.taxonomies.tags %}
+<a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>
+{% endfor %}
+{% endif %}
+</p>
+{% endblock content %}

templates/section.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ section.title }}</h1>
+
+{{ section.content | safe }}
+
+{% if paginator %}
+{% set pages = paginator.pages %}
+{% else %}
+{% set pages = section.pages %}
+{% endif %}
+
+<ul class="title-list">
+{% for page in pages %}
+  <li>
+    <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+  </li>
+{% endfor %}
+</ul>
+
+{% if paginator %}
+<div class="accent-data">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
+{% endif %}
+{% endblock content %}

templates/shortcodes/img.html

@@ -0,0 +1,4 @@
+<div {% if class %}class="{{class}}"{% endif %}>
+  <img src="{{id}}" {% if alt %}alt="{{alt}}"{% endif %}>
+  {% if caption %}<div class="caption">{{caption}}</div>{% endif %}
+</div>

templates/shortcodes/mark.html

@@ -0,0 +1 @@
+<mark>{{content}}</mark>

templates/shortcodes/webring.html

@@ -0,0 +1,4 @@
+<span class="webring">
+<a class="no-style" href={{prev}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a> 
+<a href={{webring}}>{{webringName}}</a> 
+<a class="no-style" href={{next}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>

templates/shortcodes/youtube.html

@@ -0,0 +1,9 @@
+<div {% if class %}class="{{class}}"{% endif %}>
+    <iframe
+        src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
+        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen>
+    </iframe>
+</div>

templates/tags/list.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ taxonomy.name }}</h1>
+<p>
+{% for term in terms %}
+<a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]
+{% endfor %}
+</p>
+{% endblock content %}

templates/tags/single.html

@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ term.name }}</h1>
+{% if paginator %}
+{% set pages = paginator.pages %}
+{% else %}
+{% set pages = term.pages %}
+{% endif %}
+<ul>
+{% for page in pages %}
+  <li>
+    <a href="{{ page.permalink | safe }}">{% if page.date %}{{ page.date }} - {% endif %}{{ page.title }}</a>
+  </li>
+{% endfor %}
+</ul>
+{% if paginator %}
+<p>{% if paginator.previous %}<a href="{{ paginator.first }}">&lt;&lt; First</a> <a href="{{ paginator.previous }}">&lt; Previous</a>{% endif %} [{{ paginator.current_index }}/{{ paginator.number_pagers }}] {% if paginator.next %}<a href="{{ paginator.next }}">Next &gt;</a> <a href="{{ paginator.last }}">Last &gt;&gt;</a>{% endif %}</p>
+{% endif %}
+{% endblock content %}

theme.toml

@@ -0,0 +1,13 @@
+name = "anemone"
+description = "A minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas."
+license = "MIT"
+homepage = "https://github.com/Speyll/anemone"
+min_version = "0.4.0"
+demo = "https://anemone.pages.dev"
+
+[extra]
+
+
+[author]
+name = "Speyll"
+homepage = "https://speyllsite.pages.dev/"