big overhaul

README.md

@@ -28,7 +28,18 @@ theme = "anemone"
 
 ## Release Notes
 
-#### 02-03-2024
+#### 2025-04-09
+
+This release introduces a **complete rewrite** of the project: simplified, improved, and optimized across the board.
+
+**If you are updating from an older release:**
+1. Open your `config.toml` file and update it as needed (compare with the latest release for reference).
+2. Remove the following line from `content/blog/_index.md`:
+   ```toml
+   page_template = "blog-page.html"
+   ```
+
+#### 2024-03-02
 This release brings several improvements and enhancements, focusing mainly on optimizing performance and user experience. Here's a summary of the key changes:
 
 - **suCSS Integration:** The core CSS now leverages the lightweight [suCSS framework](https://speyll.github.io/suCSS/) made by yours truly, providing better maintainability, robustness, and scalability. With suCSS, the theme should maintain consistent appearance across different browsers.
@@ -70,8 +81,10 @@ The theme has a built-in feature that allows you to use multiple languages. For
 
 ```toml
 [languages.fr]
-generate_feeds = true
+weight = 2
-build_search_index = true
+title = "anemone"
+languageName = "Français"
+languageCode = "fr"
 ```
 #### Multilanguage-Ready Navigation Bar
 

config.toml

@@ -1,18 +1,27 @@
+# General
 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"
+generate_sitemap = true
 
+# Taxonomies
 taxonomies = [
-    {name = "tags", feed = true},
+    {name = "tags", feed = true, paginate_by = 10},
 ]
 
-[languages.fr]
+# Language
-generate_feeds = true
+default_language = "en"
+
+[languages.en]
 build_search_index = true
+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."
+
+[languages.fr]
+build_search_index = true
+title = "anemone"
+description = "Un thème Zola minimaliste qui privilégie un CSS épuré et évite le JavaScript lourd. Profitez d'une expérience utilisateur fluide avec des temps de chargement ultra-rapides. Mettez votre contenu en valeur grâce à un design épuré et élégant qui améliore la lisibilité. Réactif et efficace, Anémone met en valeur vos idées."
 
 [markdown]
 render_emoji = true
@@ -29,24 +38,18 @@ anchors = "on"
 [link_checker]
 internal_level = "warn"
 
+# Extra
 [extra]
 author = "Speyll"
-display_author = true
-
 favicon = "favicon.ico"
-image = ""
-
-default_theme = "light"
 list_pages = false
 twitter_card = true
+enable_search = true
 
+## Navigation
 header_nav = [
   { url = "/", name_en = "/home/", name_fr = "/accueil/" },
   { url = "/about", name_en = "/about/", name_fr = "/concernant/" },
   { 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/blog/2020-07-07-overview-post.fr.md

@@ -1,5 +1,7 @@
 +++
 title = "Article de Présentation"
+[extra]
+display_published = false 
 +++
 
 Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit. Pellentesque vel lacinia neque. Praesent nulla quam, ullamcorper in sollicitudin ac, molestie sed justo. Cras aliquam, sapien id consectetur accumsan, augue magna faucibus ex, ut ultricies turpis tortor vel ante. In at rutrum tellus.
@@ -75,4 +77,4 @@ image aléatoire d'un chien[^4]
 
 [^3]: ceci est une autre note de bas de page.
 
-[^4]: ceci est une note de bas de page très très longue pour tester si une note de bas de page très très longue pose problème ou non. J'espère vivement qu'il n'y a pas de problèmes, mais vous savez parfois les problèmes surgissent de nulle part.
+[^4]: ceci est une note de bas de page très très longue pour tester si une note de bas de page très très longue pose problème ou non. J'espère vivement qu'il n'y a pas de problèmes, mais vous savez parfois les problèmes surgissent de nulle part.

content/blog/2020-07-07-overview-post.md

@@ -1,5 +1,8 @@
 +++
 title = "Overview Post"
+[extra]
+display_published = false
+toc = false
 +++
 
 Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit. Pellentesque vel lacinia neque. Praesent nulla quam, ullamcorper in sollicitudin ac, molestie sed justo. Cras aliquam, sapien id consectetur accumsan, augue magna faucibus ex, ut ultricies turpis tortor vel ante. In at rutrum tellus.
@@ -75,4 +78,4 @@ random image of a dog[^4]
 
 [^3]: this is another footnote.
 
-[^4]: this is a very very long footnote to test if a very very long footnote brings some problems or not. I strongly hope that there are no problems but you know sometimes problems arise from nowhere.
+[^4]: this is a very very long footnote to test if a very very long footnote brings some problems or not. I strongly hope that there are no problems but you know sometimes problems arise from nowhere.

content/blog/2020-07-08-language-tests.md

@@ -2,6 +2,9 @@
 title = "Language Tests"
 [taxonomies]
   tags = ["example"]
+[extra]
+display_published = true 
+author = "Speyll"
 +++
 
 Note: I took this test post from [moving](https://github.com/huangyz0918/moving), which is another Jekyll theme which is better that this one so I should not have linked it because now you will decide to use it instead of mine.
@@ -49,4 +52,4 @@ From [亂數假文產生器 - Chinese Lorem Ipsum.](http://www.richyli.com/tool/
 
 因林可相儿应满军，热影省条律因资再，整肃赤心将届。 局广写两量备验还，南教事争工民的，备进研上布。 素身电活非直，速这区交示从，百层达。 资量那毛什京身，白这快。 半打容三手开常价或，手严量般象式效，名可重芽门适。 来设什一我么，光界美么或，住身式准。 造酸改表委验众办地百养，商物战众本列听度名院，制压录丽快与千机内。 住需当四议决得命南然照按民置，当住命形金决否矿单外。 气象理离开新集增际，三划方工义很年关，拉许准孝口。 构片出干计由备美打养，持育总指承入无己。
 
-From [假文生成器， lorem ipsum Chinese](http://www.cancms.com/content/dummytext)
+From [假文生成器， lorem ipsum Chinese](http://www.cancms.com/content/dummytext)

content/blog/2020-07-08-very-very-very-long-title-and-very-very-very-short-content.md

@@ -1,5 +1,10 @@
 +++
 title = "Very Very Very Long Title And Very Very Very Short Content"
+date = 2024-01-01
+
+[extra]
+display_published = true 
+author = "Speyll"
 +++
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel lacinia neque. Praesent nulla quam, ullamcorper in sollicitudin ac, molestie sed justo. Cras aliquam, sapien id consectetur accumsan, augue magna faucibus ex, ut ultricies turpis tortor vel ante. In at rutrum tellus. Nullam vestibulum metus eu purus malesuada, volutpat mattis leo facilisis.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel lacinia neque. Praesent nulla quam, ullamcorper in sollicitudin ac, molestie sed justo. Cras aliquam, sapien id consectetur accumsan, augue magna faucibus ex, ut ultricies turpis tortor vel ante. In at rutrum tellus. Nullam vestibulum metus eu purus malesuada, volutpat mattis leo facilisis.

content/blog/2020-07-09-post-example-with-headings-and-toc.md

@@ -1,9 +1,13 @@
 +++
 title = "Post Example With Headings And Toc"
+date = 2024-01-01
+draft = false
 [taxonomies]
-  tags = ["example"]
+tags = ["example"]
 [extra]
-  toc = true
+toc = true
+display_published = true 
+author = "Speyll"
 +++
 
 Mauris viverra dictum ultricies. Vestibulum quis ipsum euismod, facilisis metus sed, varius ipsum. Donec scelerisque lacus libero, eu dignissim sem venenatis at. Nunc a egestas tortor, sed feugiat leo.

content/blog/_index.md

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

content/journal.md

@@ -2,6 +2,9 @@
 title = "Personal journal"
 date = 2019-10-05
 draft = false
+
+[extra]
+display_published = false
 +++
 
 ## 2023-06-29 🔧
@@ -23,4 +26,4 @@ Vivamus molestie, ipsum id ullamcorper facilisis, velit neque elementum metus, q
 vel mollis varius. Aenean non bibendum dui, eget facilisis turpis. Cras eleifend mi vel leo malesuada, ac vestibulum est condimentum. Aenean accumsan felis elit, sed porttitor nulla volutpat nec. In leo purus, condimentum ut augue sed, imperdiet dapibus sapien. Proin id ullamcorper nisi. 
 
 ## 2022-10-27 💢
-facilisis sapien, quis faucibus leo urna ut diam. Etiam eu dolor vestibulum, cursus odio at, aliquam nibh. Donec molestie metus non purus facilisis euismod. In interdum luctus libero, in mollis est tincidunt at. Nam congue, nibh nec tempus elementum, nunc sapien placerat felis, id dignissim sapien tellus a libero. Nunc at elementum tortor, eget scelerisque elit. Donec ultricies mi at accumsan semper. Pellentesque vehicula leo sed urna dapibus, quis feugiat arcu auctor. 
+facilisis sapien, quis faucibus leo urna ut diam. Etiam eu dolor vestibulum, cursus odio at, aliquam nibh. Donec molestie metus non purus facilisis euismod. In interdum luctus libero, in mollis est tincidunt at. Nam congue, nibh nec tempus elementum, nunc sapien placerat felis, id dignissim sapien tellus a libero. Nunc at elementum tortor, eget scelerisque elit. Donec ultricies mi at accumsan semper. Pellentesque vehicula leo sed urna dapibus, quis feugiat arcu auctor. 

static/css/style.css

@@ -1,12 +1,15 @@
+:root {
+    --icon-size: 1.3rem;
+    --icon-color: var(--text);
+}
+
 #nav-bar {
-  padding: .625rem 0 0 0;
+    padding: 0.625rem 0 0;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-wrap: wrap;
-  gap: .25rem;
+    gap: 0.25rem;
-  flex-wrap: wrap;
+    justify-content: flex-end;
-  justify-content: flex-end;
+    align-items: center;
-  align-items: center;
-  align-content: flex-end
 }
 
 #footer-container {
@@ -38,21 +41,37 @@
 }
 
 /* icons settings */
-.icons {
+.icon {
-  width: 1.3rem;
+    width: var(--icon-size);
-  height: 1.3rem;
+    height: var(--icon-size);
-  aspect-ratio: 1/1;
+    display: inline-block;
-  display: inline-block;
+    vertical-align: middle;
-  vertical-align: middle;
+    color: var(--icon-color);
-  color: var(--text);
+    fill: currentColor;
-  fill: var(--text);
+    transition: color 0.3s ease;
-  background-color: transparent;
+    cursor: pointer;
-  cursor: pointer;
 }
 
-.icons:hover {
+.icon:hover {
-  background-color: transparent;
+    --icon-color: var(--accent);
-  color: var(--accent);
+}
+
+/* Theme toggle specific styles */
+.theme-toggle {
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    display: inline-flex;
+}
+
+.theme-toggle:hover .icon {
+    --icon-color: var(--accent);
+}
+
+.theme-toggle:active {
+    transform: scale(0.95);
 }
 
 /* footnotes */
@@ -70,16 +89,25 @@
 }
 
 /* general classes */
+/* Cleaned no-style class */
 .no-style {
-  padding: 0;
+    all: unset;
-  margin: 0;
+    background: none !important;
-  border: none;
+    border: none !important;
-  border-radius: 0
 }
 
 .no-style:hover {
-  background-color: transparent;
+    background: transparent;
-  color: var(--accent);
+    color: inherit;
+}
+
+/* Modern float replacement */
+.float-right {
+    margin-inline-start: auto;
+}
+
+.float-left {
+    margin-inline-end: auto;
 }
 
 .center {
@@ -91,15 +119,7 @@
   margin: 1rem auto;
 }
 
-.float-right {
-  float: right
-}
-
-.float-left {
-  float: left
-}
-
 /* shortcodes css */
 .webring {
   margin: .375rem;
-}
+}

static/icons.svg

@@ -18,4 +18,4 @@
   <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>
+</svg>

static/js/script.js

@@ -1,49 +1,64 @@
-const toggleButton = document.getElementById('theme-toggle');
+class ThemeManager {
-const themeIcon = document.getElementById('theme-icon');
+    constructor() {
-const themeSound = document.getElementById('theme-sound');
+        // Cache DOM elements once
+        this.toggle = document.getElementById('theme-toggle');
+        this.icon = document.getElementById('theme-icon');
 
-// Function to update the theme icon based on the current theme
+        // Get data attributes once
-const updateThemeIcon = (isDarkMode) => {
+        const { iconBase, iconDark, iconLight, soundSrc } = this.toggle.dataset;
-    const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
+        this.iconBase = iconBase;
-    const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
+        this.iconDark = iconDark;
-    themeIcon.querySelector('use').setAttribute('href', iconPath);
+        this.iconLight = iconLight;
-};
 
-// Function to update the theme based on the current mode
+        // Create audio element only when needed
-const updateTheme = (isDarkMode) => {
+        this.sound = new Audio(soundSrc);
-    const theme = isDarkMode ? 'dark' : 'light';
-    document.documentElement.setAttribute('data-theme', theme);
-    updateThemeIcon(isDarkMode);
-};
 
-// Function to toggle the theme
+        this.init();
-const toggleTheme = () => {
+    }
-    const isDarkMode = toggleButton.checked;
-    updateTheme(isDarkMode);
-    themeSound.play();
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
 
-    // Add transition class to body for smooth transition
+    init() {
-    document.body.classList.add('theme-transition');
+        this.setInitialTheme();
-    setTimeout(() => {
+        this.toggle.addEventListener('click', () => this.toggleTheme());
-        document.body.classList.remove('theme-transition');
+    }
-    }, 300);
-};
 
-// Event listener for theme toggle
+    setInitialTheme() {
-toggleButton.addEventListener('change', toggleTheme);
+        const savedTheme = localStorage.getItem('theme');
+        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const initialTheme = savedTheme || (systemDark ? 'dark' : 'light');
 
-// Function to initialize the theme based on the stored preference
+        document.documentElement.setAttribute('data-theme', initialTheme);
-const initializeTheme = () => {
+        this.updateIcon(initialTheme === 'dark');
-    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
+    toggleTheme() {
-initializeTheme();
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const newTheme = isDark ? 'light' : 'dark';
 
-// Listen for changes in system preference
+        document.body.classList.add('theme-transition');
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
+        document.documentElement.setAttribute('data-theme', newTheme);
+
+        // Use the inverse to update the icon to match the new theme
+        this.updateIcon(!isDark);
+
+        localStorage.setItem('theme', newTheme);
+
+        // Use requestAnimationFrame for better performance on transition
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                document.body.classList.remove('theme-transition');
+            }, 300);
+        });
+
+        this.sound.play().catch(() => {});
+    }
+
+
+    // Extracted common functionality
+    updateIcon(isDark) {
+        this.icon.setAttribute('href', 
+            `${this.iconBase}${isDark ? this.iconDark : this.iconLight}`);
+    }
+}
+
+// Use modern syntax
+document.addEventListener('DOMContentLoaded', () => new ThemeManager());

templates/404.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<article class="center">
+    <h1>404 - Not Found</h1>
+    <p>The page you're looking for doesn't exist.</p>
+    <a href="/" class="no-style">← Return home</a>
+</article>
+{% endblock %}

templates/atom.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+    <title>{{ config.title }}</title>
+    <link href="{{ get_url(path="atom.xml", trailing_slash=false) }}" rel="self"/>
+    <link href="{{ config.base_url }}"/>
+    <updated>{{ now() | date(format="%Y-%m-%dT%H:%M:%S%z") }}</updated>
+    <id>{{ config.base_url }}</id>
+
+    {% set root = get_section(path="_index.md") %}
+    
+    {# Process pages with valid dates #}
+    {% for page in root.pages %}
+        {% if page.date %}
+        <entry>
+            <title>{{ page.title }}</title>
+            <link href="{{ page.permalink }}"/>
+            <updated>{{ page.date | date(format="%Y-%m-%dT%H:%M:%S%z") }}</updated>
+            <id>{{ page.permalink }}</id>
+            <content type="html">{{ page.content | escape }}</content>
+        </entry>
+        {% endif %}
+    {% endfor %}
+    
+    {% for subsection in root.subsections %}
+        {% set sub = get_section(path=subsection) %}
+        {% for page in sub.pages %}
+            {% if page.date %}
+            <entry>
+                <title>{{ page.title }}</title>
+                <link href="{{ page.permalink }}"/>
+                <updated>{{ page.date | date(format="%Y-%m-%dT%H:%M:%S%z") }}</updated>
+                <id>{{ page.permalink }}</id>
+                <content type="html">{{ page.content | escape }}</content>
+            </entry>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+</feed>

templates/base.html

@@ -1,18 +1,58 @@
 <!DOCTYPE html>
 <html lang="{% if page %}{{ page.lang }}{% else %}{{ config.default_language }}{% endif %}">
-<head>
+    <head>
-    {% include "head.html" %}
+        <meta charset="UTF-8">
-</head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<body>
+        <meta name="robots" content="index, follow">
-      <header>
+        {% block rss %}
-          {% include "header.html" %}
+        <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
-      </header>
+        {% endblock %}
-      <main>
+        <title>{{ config.title }}{% if page.title %} | {{ page.title }}{% endif %}</title>
-          {% block content %}
+
-          {% endblock content %}
+        <link rel="preload" href="{{ get_url(path='css/style.css') }}" as="style">
-      </main>
+        <link rel="stylesheet" href="https://raw.githack.com/Speyll/suCSS/main/reset-min.css" crossorigin="anonymous">
-      <footer>
+        <link rel="stylesheet" href="https://raw.githack.com/Speyll/suCSS/main/suCSS-min.css" crossorigin="anonymous">
-          {% include "footer.html" %}
+        <link rel="stylesheet" href="{{ get_url(path='css/style.css') }}">
-      </footer>
+        <link rel="stylesheet" href="{{ get_url(path='css/custom.css') }}">
-</body>
+
-</html>
+        <!-- Add favicon with appropriate sizes -->
+        <link rel="icon" href="{{ config.extra.favicon | default(value='/favicon.ico') }}">
+    </head>
+    <body>
+        {% set current_lang = config.default_language %}
+        {% if page %}
+        {% set current_lang = page.lang %}
+        {% elif section %}
+        {% set current_lang = section.lang %}
+        {% endif %}
+        <nav id="nav-bar">
+            {% for nav_item in config.extra.header_nav %}
+            <a href="{{ nav_item.url }}" class="{% if current_url is defined and nav_item.url == current_url %}active{% endif %}">
+                {% set language_key = 'name_' ~ current_lang %}
+                {{ nav_item[language_key] }}
+            </a>
+            {% endfor %}
+
+            <div class="theme-toggle" id="theme-toggle" role="button" tabindex="0" aria-label="Toggle theme"
+                data-icon-base="{{ get_url(path='icons.svg') }}"
+                data-icon-dark="#darkMode"
+                data-icon-light="#lightMode"
+                data-sound-src="{{ get_url(path='click.ogg') }}">
+                <svg class="icon">
+                    <use id="theme-icon"></use>
+                </svg>
+            </div>
+        </nav>
+
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+
+        <footer>
+            {% include "footer.html" %}
+        </footer>
+
+        <!-- Move JS to end of body and add defer -->
+        <script src="{{ get_url(path='js/script.js') }}" defer></script>
+    </body>
+</html>

templates/blog-page.html

@@ -1,47 +0,0 @@
-{% 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/blog/page.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block head %}
+{{ super() }}
+{% include "partials/schema-article.html" %}
+{% endblock %}
+
+{% block content %}
+<article class="post">
+    <header class="post-header">
+        {% if page.date and page.extra.display_published | default(value=true) %}
+        <time datetime="{{ page.date }}">Published on:
+            <span class="accent-data">{{ page.date | date(format="%Y-%m-%d") }}</span>
+        </time>
+        {% endif %}
+
+        {% if page.extra.author %}
+        <address rel="author">By
+            <span class="accent-data">{{ page.extra.author }}</span>
+        </address>
+        {% endif %}
+
+        <h1>{{ page.title }}</h1>
+    </header>
+
+{% if page.extra.toc and page.toc %}
+<div class="toc-container">
+    <h2>Table of content</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>
+</div>
+{% endif %}
+
+    <div class="post-content">
+        {{ page.content | safe }}
+    </div>
+
+    {% if page.taxonomies.tags %}
+    <footer class="post-tags">
+        {% for tag in page.taxonomies.tags %}
+        <a href="/tags/{{ tag | slugify }}" class="tag">#{{ tag }}</a>
+        {% endfor %}
+    </footer>
+    {% endif %}
+</article>
+{% endblock %}

templates/blog/section.html

@@ -0,0 +1,15 @@
+{# templates/section.html #}
+{% extends "base.html" %}
+
+{% block content %}
+<section class="content-section">
+    <h1>{{ section.title }}</h1>
+    {{ section.content | safe }}
+
+    <ul class="content-list">
+        {% for page in section.pages %}
+            {% include "partials/content-listing-item.html" %}
+        {% endfor %}
+    </ul>
+</section>
+{% endblock %}

templates/footer.html

@@ -1,23 +1,4 @@
 <hr>
 <div id="footer-container">
-  {% if config.extra.footer_content_license %}
+    <p>Made using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> Zola theme</p>
-    <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

@@ -1,98 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-{% 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

@@ -1,29 +1,20 @@
 {% extends "base.html" %}
 
 {% block content %}
-{{ section.content | safe }}
+    {{ section.content | safe }}
 
-{% if config.extra.list_pages %}
+    {% if config.extra.list_pages %}
+    <ul class="posts">
+        {% for page in section.pages %}
+        <li>
+            <a href="{{ page.permalink }}">{{ page.title }}</a>
+            <span class="date">{{ page.date | date(format="%Y-%m-%d") }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+    {% endif %}
 
-{% if paginator %}
+    {% if paginator %}
-{% set pages = paginator.pages %}
+        {% include "partials/pagination.html" %}
-{% else %}
+    {% endif %}
-{% set pages = section.pages %}
+{% endblock %}
-{% 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

@@ -1,42 +1,58 @@
 {% extends "base.html" %}
 
+{% block head %}
+{{ super() }}
+{% include "partials/schema-article.html" %}
+{% endblock %}
+
 {% block content %}
-<h1>{{ page.title }}</h1>
+<article class="post">
+    <header class="post-header">
+        {% if page.date and page.extra.display_published | default(value=true) %}
+        <time datetime="{{ page.date }}">Published on:
+            <span class="accent-data">{{ page.date | date(format="%Y-%m-%d") }}</span>
+        </time>
+        {% endif %}
 
-{% if page.toc and page.extra.toc %}
+        {% if page.extra.author %}
-<h2>Table of contents</h2>
+        <address rel="author">By
-<ul>
+            <span class="accent-data">{{ page.extra.author }}</span>
-{% for h1 in page.toc %}
+        </address>
-  <li>
+        {% endif %}
-  <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+
-  {% if h1.children %}
+        <h1>{{ page.title }}</h1>
+    </header>
+
+{% if page.extra.toc and page.toc %}
+<div class="toc-container">
+    <h2>Table of content</h2>
     <ul>
-      {% for h2 in h1.children %}
+        {% for h1 in page.toc %}
         <li>
-        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-          <ul>
+            {% if h1.children %}
-          {% for h3 in h2.children %}
+            <ul>
-            <li>
+                {% for h2 in h1.children %}
-            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+                <li><a href="{{ h2.permalink | safe }}">{{ h2.title }}</a></li>
-            </li>
+                {% endfor %}
-          {% endfor %}
+            </ul>
-          </ul>
+            {% endif %}
         </li>
-      {% endfor %}
+        {% endfor %}
     </ul>
-  {% endif %}
+</div>
-  </li>
-{% endfor %}
-</ul>
 {% endif %}
 
-{{ page.content | safe }}
+    <div class="post-content">
+        {{ page.content | safe }}
+    </div>
 
-<p class="tags-data">
+    {% if page.taxonomies.tags %}
-{% if page.taxonomies.tags %}
+    <div class="post-tags">
-{% for tag in page.taxonomies.tags %}
+        {% for tag in page.taxonomies.tags %}
-<a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>
+        <a href="/tags/{{ tag | slugify }}" class="tag">#{{ tag }} </a>
-{% endfor %}
+        {% endfor %}
-{% endif %}
+    </div>
-</p>
+    {% endif %}
-{% endblock content %}
+</article>
+{% endblock %}

templates/partials/content-listing-item.html

@@ -0,0 +1,8 @@
+<li class="title-list">
+    {% if page.date %}
+    <time class="content-meta">{{ page.date | date(format="%Y-%m-%d") }}</time>
+    {% endif %}
+    <a href="{{ page.permalink }}" class="content-link">
+        {{ page.title }}
+    </a>
+</li>

templates/partials/pagination.html

@@ -0,0 +1,17 @@
+<nav class="pagination" aria-label="Pagination">
+    <div class="pagination-inner">
+        {% if paginator.previous %}
+            <a href="{{ paginator.previous }}" class="page-item" aria-label="Previous page">
+                <svg class="icon"><use href="{{ get_url(path='icons.svg#chevronLeft') }}"></use></svg>
+            </a>
+        {% endif %}
+
+        <span class="page-current accent-data">{{ paginator.current_index }} of {{ paginator.number_pagers }}</span>
+
+        {% if paginator.next %}
+            <a href="{{ paginator.next }}" class="page-item" aria-label="Next page">
+                <svg class="icon"><use href="{{ get_url(path='icons.svg#chevronRight') }}"></use></svg>
+            </a>
+        {% endif %}
+    </div>
+</nav>

templates/partials/schema-article.html

@@ -0,0 +1,21 @@
+<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "{{ page.title }}",
+    {% if config.extra.author %}
+    "author": {
+        "@type": "Person",
+        "name": "{{ config.extra.author }}"
+    },
+    {% endif %}
+    {% if page.date %}
+    "datePublished": "{{ page.date }}",
+    {% endif %}
+    "description": "{{ page.description | default(value=config.description) }}",
+    "publisher": {
+        "@type": "Organization",
+        "name": "{{ config.title }}"
+    }
+}
+</script>

templates/section.html

@@ -1,25 +1,19 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>{{ section.title }}</h1>
+<section class="content-section">
+    <h1>{{ section.title }}</h1>
+    {{ section.content | safe }}
 
-{{ section.content | safe }}
+    <ul class="content-list">
+        {# Use paginator if it exists, else regular pages #}
+        {% for page in paginator.pages | default(value=section.pages) %}
+            {% include "partials/content-listing-item.html" %}
+        {% endfor %}
+    </ul>
 
-{% if paginator %}
+    {% if paginator %}
-{% set pages = paginator.pages %}
+        {% include "partials/pagination.html" %}
-{% else %}
+    {% endif %}
-{% set pages = section.pages %}
+</section>
-{% endif %}
+{% endblock %}
-
-<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/webring.html

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

templates/shortcodes/youtube.html

@@ -1,9 +1,10 @@
 <div {% if class %}class="{{class}}"{% endif %}>
-    <iframe
+    <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"
+        frameborder="0" 
+        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
         webkitallowfullscreen
         mozallowfullscreen
         allowfullscreen>
     </iframe>
-</div>
+</div>

templates/sitemap.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    {% set root = get_section(path="_index.md") %}
+    {% for page in root.pages %}
+        <url>
+            <loc>{{ page.permalink | safe }}</loc>
+            {% if page.date %}<lastmod>{{ page.date | date(format="%Y-%m-%d") }}</lastmod>{% endif %}
+        </url>
+    {% endfor %}
+    
+    {% for subsection in root.subsections %}
+        {% set sub = get_section(path=subsection) %}
+        {% for page in sub.pages %}
+            <url>
+                <loc>{{ page.permalink | safe }}</loc>
+                {% if page.date %}<lastmod>{{ page.date | date(format="%Y-%m-%d") }}</lastmod>{% endif %}
+            </url>
+        {% endfor %}
+    {% endfor %}
+</urlset>

templates/tags/list.html

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

templates/tags/single.html

@@ -1,20 +1,13 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>{{ term.name }}</h1>
+<h1>Posts tagged: {{ term.name }}</h1>
-{% if paginator %}
-{% set pages = paginator.pages %}
-{% else %}
-{% set pages = term.pages %}
-{% endif %}
 <ul>
-{% for page in pages %}
+{% for page in term.pages %}
-  <li>
+    <li>
-    <a href="{{ page.permalink | safe }}">{% if page.date %}{{ page.date }} - {% endif %}{{ page.title }}</a>
+        <a href="{{ page.permalink }}">{{ page.title }}</a>
-  </li>
+        <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+    </li>
 {% endfor %}
 </ul>
-{% if paginator %}
+{% endblock %}
-<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 %}