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
-build_search_index = true
+weight = 2
+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]
-generate_feeds = true
+# Language
+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.

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.

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.

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.

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 🔧

static/css/style.css

@@ -1,12 +1,15 @@
+:root {
+    --icon-size: 1.3rem;
+    --icon-color: var(--text);
+}
+
 #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
+    padding: 0.625rem 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    justify-content: flex-end;
+    align-items: center;
 }
 
 #footer-container {
@@ -38,21 +41,37 @@
 }
 
 /* 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;
+.icon {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display: inline-block;
+    vertical-align: middle;
+    color: var(--icon-color);
+    fill: currentColor;
+    transition: color 0.3s ease;
+    cursor: pointer;
 }
 
-.icons:hover {
-  background-color: transparent;
-  color: var(--accent);
+.icon:hover {
+    --icon-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;
-  margin: 0;
-  border: none;
-  border-radius: 0
+    all: unset;
+    background: none !important;
+    border: none !important;
 }
 
 .no-style:hover {
-  background-color: transparent;
-  color: var(--accent);
+    background: transparent;
+    color: inherit;
+}
+
+/* Modern float replacement */
+.float-right {
+    margin-inline-start: auto;
+}
+
+.float-left {
+    margin-inline-end: auto;
 }
 
 .center {
@@ -91,14 +119,6 @@
   margin: 1rem auto;
 }
 
-.float-right {
-  float: right
-}
-
-.float-left {
-  float: left
-}
-
 /* shortcodes css */
 .webring {
   margin: .375rem;

static/js/script.js

@@ -1,49 +1,64 @@
-const toggleButton = document.getElementById('theme-toggle');
-const themeIcon = document.getElementById('theme-icon');
-const themeSound = document.getElementById('theme-sound');
+class ThemeManager {
+    constructor() {
+        // 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
-const updateThemeIcon = (isDarkMode) => {
-    const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
-    const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
-    themeIcon.querySelector('use').setAttribute('href', iconPath);
-};
+        // Get data attributes once
+        const { iconBase, iconDark, iconLight, soundSrc } = this.toggle.dataset;
+        this.iconBase = iconBase;
+        this.iconDark = iconDark;
+        this.iconLight = iconLight;
 
-// 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);
-};
+        // Create audio element only when needed
+        this.sound = new Audio(soundSrc);
 
-// Function to toggle the theme
-const toggleTheme = () => {
-    const isDarkMode = toggleButton.checked;
-    updateTheme(isDarkMode);
-    themeSound.play();
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+        this.init();
+    }
 
-    // Add transition class to body for smooth transition
-    document.body.classList.add('theme-transition');
-    setTimeout(() => {
-        document.body.classList.remove('theme-transition');
-    }, 300);
-};
+    init() {
+        this.setInitialTheme();
+        this.toggle.addEventListener('click', () => this.toggleTheme());
+    }
 
-// Event listener for theme toggle
-toggleButton.addEventListener('change', toggleTheme);
+    setInitialTheme() {
+        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
-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);
-};
+        document.documentElement.setAttribute('data-theme', initialTheme);
+        this.updateIcon(initialTheme === 'dark');
+    }
 
-// Initialize the theme
-initializeTheme();
+    toggleTheme() {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const newTheme = isDark ? 'light' : 'dark';
 
-// Listen for changes in system preference
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
+        document.body.classList.add('theme-transition');
+        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>
-    {% include "head.html" %}
-</head>
-<body>
-      <header>
-          {% include "header.html" %}
-      </header>
-      <main>
-          {% block content %}
-          {% endblock content %}
-      </main>
-      <footer>
-          {% include "footer.html" %}
-      </footer>
-</body>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="robots" content="index, follow">
+        {% block rss %}
+        <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
+        {% endblock %}
+        <title>{{ config.title }}{% if page.title %} | {{ page.title }}{% endif %}</title>
+
+        <link rel="preload" href="{{ get_url(path='css/style.css') }}" as="style">
+        <link rel="stylesheet" href="https://raw.githack.com/Speyll/suCSS/main/reset-min.css" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://raw.githack.com/Speyll/suCSS/main/suCSS-min.css" crossorigin="anonymous">
+        <link rel="stylesheet" href="{{ get_url(path='css/style.css') }}">
+        <link rel="stylesheet" href="{{ get_url(path='css/custom.css') }}">
+
+        <!-- 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 %}
-    <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 %}
+    <p>Made using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> Zola theme</p>
 </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 %}
-{% 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 %}
+    {% if paginator %}
+        {% include "partials/pagination.html" %}
+    {% endif %}
+{% endblock %}

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 %}
-<h2>Table of contents</h2>
-<ul>
-{% for h1 in page.toc %}
-  <li>
-  <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-  {% if h1.children %}
+        {% 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 h2 in h1.children %}
+        {% for h1 in page.toc %}
         <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>
+            <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 %}
+        {% endfor %}
     </ul>
-  {% endif %}
-  </li>
-{% endfor %}
-</ul>
+</div>
 {% endif %}
 
-{{ page.content | safe }}
+    <div class="post-content">
+        {{ page.content | safe }}
+    </div>
 
-<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 %}
+    {% if page.taxonomies.tags %}
+    <div class="post-tags">
+        {% for tag in page.taxonomies.tags %}
+        <a href="/tags/{{ tag | slugify }}" class="tag">#{{ tag }} </a>
+        {% endfor %}
+    </div>
+    {% endif %}
+</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 %}
-{% 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 %}
+    {% if paginator %}
+        {% include "partials/pagination.html" %}
+    {% endif %}
+</section>
+{% endblock %}

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,7 +1,8 @@
 <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"
+        frameborder="0" 
+        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
         webkitallowfullscreen
         mozallowfullscreen
         allowfullscreen>

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>
-<p>
-{% for term in terms %}
-<a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]
+<h1>All Tags</h1>
+<ul>
+{% for tag in terms %}
+    <li>
+        <a href="{{ tag.permalink }}">#{{ tag.name }}</a>
+        ({{ tag.pages | length }} posts)
+    </li>
 {% endfor %}
-</p>
-{% endblock content %}
+</ul>
+{% endblock %}

templates/tags/single.html

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