From 6acf4ab874c58ee14f35da671029e56972745ce6 Mon Sep 17 00:00:00 2001
From: Benedikt Peetz <benedikt.peetz@b-peetz.de>
Date: Fri, 25 Apr 2025 12:09:21 +0200
Subject: feat(treewide): Migrate to zola

---
 src/themes/serene/templates/404.html               |  14 ++
 src/themes/serene/templates/_base.html             |  38 +++++
 src/themes/serene/templates/_custom_css.html       |  59 ++++++++
 src/themes/serene/templates/_custom_font.html      |   0
 src/themes/serene/templates/_footer.html           |  52 +++++++
 src/themes/serene/templates/_giscus_script.html    |   0
 src/themes/serene/templates/_head_extend.html      |   0
 src/themes/serene/templates/_section_title.html    |  10 ++
 src/themes/serene/templates/anchor-link.html       |   1 +
 src/themes/serene/templates/blog.html              |  50 +++++++
 src/themes/serene/templates/categories/list.html   |   3 +
 src/themes/serene/templates/categories/single.html |   3 +
 src/themes/serene/templates/feed.xml               |  32 +++++
 src/themes/serene/templates/home.html              | 119 ++++++++++++++++
 src/themes/serene/templates/macros/collection.html | 153 +++++++++++++++++++++
 src/themes/serene/templates/macros/prose.html      |  32 +++++
 src/themes/serene/templates/post.html              | 151 ++++++++++++++++++++
 src/themes/serene/templates/prose.html             |  82 +++++++++++
 .../serene/templates/shortcodes/caution.html       |   2 +
 .../serene/templates/shortcodes/collection.html    |  23 ++++
 src/themes/serene/templates/shortcodes/detail.html |   4 +
 src/themes/serene/templates/shortcodes/figure.html |   8 ++
 .../serene/templates/shortcodes/important.html     |   2 +
 .../serene/templates/shortcodes/mermaid.html       |   3 +
 src/themes/serene/templates/shortcodes/note.html   |   2 +
 src/themes/serene/templates/shortcodes/quote.html  |  10 ++
 src/themes/serene/templates/shortcodes/tip.html    |   2 +
 .../serene/templates/shortcodes/warning.html       |   2 +
 src/themes/serene/templates/tags/list.html         |  29 ++++
 src/themes/serene/templates/tags/single.html       |  34 +++++
 30 files changed, 920 insertions(+)
 create mode 100644 src/themes/serene/templates/404.html
 create mode 100644 src/themes/serene/templates/_base.html
 create mode 100644 src/themes/serene/templates/_custom_css.html
 create mode 100644 src/themes/serene/templates/_custom_font.html
 create mode 100644 src/themes/serene/templates/_footer.html
 create mode 100644 src/themes/serene/templates/_giscus_script.html
 create mode 100644 src/themes/serene/templates/_head_extend.html
 create mode 100644 src/themes/serene/templates/_section_title.html
 create mode 100644 src/themes/serene/templates/anchor-link.html
 create mode 100644 src/themes/serene/templates/blog.html
 create mode 100644 src/themes/serene/templates/categories/list.html
 create mode 100644 src/themes/serene/templates/categories/single.html
 create mode 100644 src/themes/serene/templates/feed.xml
 create mode 100644 src/themes/serene/templates/home.html
 create mode 100644 src/themes/serene/templates/macros/collection.html
 create mode 100644 src/themes/serene/templates/macros/prose.html
 create mode 100644 src/themes/serene/templates/post.html
 create mode 100644 src/themes/serene/templates/prose.html
 create mode 100644 src/themes/serene/templates/shortcodes/caution.html
 create mode 100644 src/themes/serene/templates/shortcodes/collection.html
 create mode 100644 src/themes/serene/templates/shortcodes/detail.html
 create mode 100644 src/themes/serene/templates/shortcodes/figure.html
 create mode 100644 src/themes/serene/templates/shortcodes/important.html
 create mode 100644 src/themes/serene/templates/shortcodes/mermaid.html
 create mode 100644 src/themes/serene/templates/shortcodes/note.html
 create mode 100644 src/themes/serene/templates/shortcodes/quote.html
 create mode 100644 src/themes/serene/templates/shortcodes/tip.html
 create mode 100644 src/themes/serene/templates/shortcodes/warning.html
 create mode 100644 src/themes/serene/templates/tags/list.html
 create mode 100644 src/themes/serene/templates/tags/single.html

(limited to 'src/themes/serene/templates')

diff --git a/src/themes/serene/templates/404.html b/src/themes/serene/templates/404.html
new file mode 100644
index 0000000..1e924de
--- /dev/null
+++ b/src/themes/serene/templates/404.html
@@ -0,0 +1,14 @@
+{% extends "_base.html" %}
+
+{% block page %}not-found{% endblock page%}
+{% block lang %}{{ config.default_language }}{% endblock lang %}
+{% block title %}404{% endblock title %}
+
+{% block content %}
+<div class="wrapper">
+  <p class="error">
+    {{ config.extra.not_found_error_text }}
+  </p>
+  <a class="instant" href="{{ get_url(path='/') }}">{{ config.extra.not_found_recover_text }}</a>
+</div>
+{% endblock %}
diff --git a/src/themes/serene/templates/_base.html b/src/themes/serene/templates/_base.html
new file mode 100644
index 0000000..0bd7b3b
--- /dev/null
+++ b/src/themes/serene/templates/_base.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+<html lang="{% block lang %}{% endblock lang %}">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  {% block desc %}{% endblock desc %}
+  <title>{% block title %}{% endblock title %}</title>
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path='img/favicon-32x32.png') }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path='img/favicon-16x16.png') }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path='img/apple-touch-icon.png') }}">
+  {% include "_custom_font.html" %}
+  {% include "_custom_css.html" %}
+  <link rel="stylesheet" href="{{ get_url(path='main.css') }}">
+  {% block head %}{% endblock head %}
+  {% include "_head_extend.html" %}
+</head>
+
+<body class="{% block page %}{% endblock page%}{% if config.extra.force_theme == "dark" %} dark{% endif %}">
+  {% if not config.extra.force_theme %}
+  <script>
+    const theme = sessionStorage.getItem('theme');
+    const match = window.matchMedia("(prefers-color-scheme: dark)").matches
+    if ((theme && theme == 'dark') || (!theme && match)) {
+      document.body.classList.add('dark');
+      const hl = document.querySelector('link#hl');
+      if (hl) hl.href = '{{ get_url(path="hl-dark.css") }}';
+    }
+  </script>
+  {% endif %}
+  {% block content %}{% endblock content %}
+  {% block script %}{% endblock script %}
+  <script src="{{ get_url(path='js/main.js') }}"></script>
+</body>
+
+</html>
diff --git a/src/themes/serene/templates/_custom_css.html b/src/themes/serene/templates/_custom_css.html
new file mode 100644
index 0000000..f767a33
--- /dev/null
+++ b/src/themes/serene/templates/_custom_css.html
@@ -0,0 +1,59 @@
+<style>
+
+  /* light mode colors */
+  body {
+    --primary-color: #5871a2;
+    --primary-pale-color: #5871a233;
+    --primary-decoration-color: #5871a210;
+    --bg-color: #ffffff;
+    --text-color: #2f3030;
+    --text-pale-color: #767676;
+    --text-decoration-color: #a9a9a9;
+    --highlight-mark-color: #5f75b020;
+
+    --callout-note-color: #5871a2;
+    --callout-tip-color: #268556;
+    --callout-important-color: #885fc9;
+    --callout-warning-color: #ab6632;
+    --callout-caution-color: #c64e4e;
+  }
+
+  /* dark mode colors */
+  body.dark {
+    --primary-color: #6f8fd1;
+    --primary-pale-color: #6f8fd166;
+    --primary-decoration-color: #6f8fd112;
+    --bg-color: #1c1c1c;
+    --text-color: #c1c1c1;
+    --text-pale-color: #848484;
+    --text-decoration-color: #5f5f5f;
+    --highlight-mark-color: #8296cb3b;
+
+    --callout-note-color: #6f8fd1;
+    --callout-tip-color: #47976f;
+    --callout-important-color: #9776cd;
+    --callout-warning-color: #ad7a52;
+    --callout-caution-color: #d06161;
+  }
+
+  /* typography */
+  body {
+    --main-font: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --homepage-max-width: 768px;
+    --main-max-width: 768px;
+    --avatar-size: 60px;
+    --font-size: 16px;
+    --line-height: 1.75;
+    --img-border-radius: 0px;
+    --detail-border-radius: 0px;
+    --dark-mode-img-brightness: 0.75;
+    --dark-mode-chart-brightness: 0.75;
+    --inline-code-border-radius: 2px;
+    --inline-code-bg-color: var(--primary-decoration-color);
+    --block-code-border-radius: 0px;
+    --block-code-border-color: var(--primary-color);
+    --detail-border-color: var(--primary-color);
+  }
+
+</style>
diff --git a/src/themes/serene/templates/_custom_font.html b/src/themes/serene/templates/_custom_font.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/themes/serene/templates/_footer.html b/src/themes/serene/templates/_footer.html
new file mode 100644
index 0000000..e9c1dd1
--- /dev/null
+++ b/src/themes/serene/templates/_footer.html
@@ -0,0 +1,52 @@
+{% if config.extra.blog_section_path is defined %}
+{% set blog_section_path = config.extra.blog_section_path %}
+{% endif %}
+<footer>
+  <div class="left">
+    <div class="copyright">
+      {{ config.extra.footer_copyright }}
+      {% if config.extra.footer_credits %}
+      <span>|</span>
+      Built with <a href="https://www.getzola.org" rel="noreferrer" target="_blank">zola</a> and <a href="https://github.com/isunjn/serene" rel="noreferrer" target="_blank">serene</a>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="right">
+    {% if blog_section_path is defined and section.path is starting_with(blog_section_path) %}
+    {% if section.generate_feeds %}
+      {% set_global rss_path = blog_section_path ~ "/" ~ config.feed_filenames.0 %}
+    {% elif config.generate_feeds %}
+      {% set_global rss_path = "/" ~ config.feed_filenames.0 %}
+    {% endif %}
+    {% if section.generate_feeds or config.generate_feeds %}
+    <a id="rss-btn" href="{{ get_url(path=rss_path) }}">RSS</a>
+    {% endif %}
+    {% endif %}
+
+    {% if not config.extra.force_theme %}
+    {% set moon_icon = load_data(path="icon/moon.svg") %}
+    {% set sun_icon = load_data(path="icon/sun.svg") %}
+    <button id="theme-toggle" aria-label="theme switch">
+      <span class="moon-icon">{{ moon_icon | safe }}</span>
+      <span class="sun-icon">{{ sun_icon | safe }}</span>
+    </button>
+    {% endif %}
+  </div>
+</footer>
+
+{% if blog_section_path is defined and section.path is starting_with(blog_section_path) %}
+{% if section.generate_feeds or config.generate_feeds %}
+{% set link = get_url(path=rss_path) %}
+<dialog id="rss-mask">
+  <div>
+    <a href="{{ link }}">{{ link }}</a>
+    {% set copy_icon = load_data(path="icon/copy.svg") %}
+    {% set check_icon = load_data(path="icon/check.svg") %}
+    <button autofocus aria-label="copy" data-link="{{ link }}" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}" >
+      {{ copy_icon | safe }}
+    </button>
+  </div>
+</dialog>
+{% endif %}
+{% endif %}
diff --git a/src/themes/serene/templates/_giscus_script.html b/src/themes/serene/templates/_giscus_script.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/themes/serene/templates/_head_extend.html b/src/themes/serene/templates/_head_extend.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/themes/serene/templates/_section_title.html b/src/themes/serene/templates/_section_title.html
new file mode 100644
index 0000000..191e079
--- /dev/null
+++ b/src/themes/serene/templates/_section_title.html
@@ -0,0 +1,10 @@
+{% if section.extra.title or section.extra.subtitle %}
+<div class="section-title">
+  {% if section.extra.title %}
+  <h1>{{ section.extra.title }}</h1>
+  {% endif %}
+  {% if section.extra.subtitle %}
+  <p>{{ section.extra.subtitle }}</p>
+  {% endif %}
+</div>
+{% endif %}
diff --git a/src/themes/serene/templates/anchor-link.html b/src/themes/serene/templates/anchor-link.html
new file mode 100644
index 0000000..91e875b
--- /dev/null
+++ b/src/themes/serene/templates/anchor-link.html
@@ -0,0 +1 @@
+<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}" style="visibility: hidden;"></a>
diff --git a/src/themes/serene/templates/blog.html b/src/themes/serene/templates/blog.html
new file mode 100644
index 0000000..c654e86
--- /dev/null
+++ b/src/themes/serene/templates/blog.html
@@ -0,0 +1,50 @@
+{% import "macros/prose.html" as macros %}
+{% extends "_base.html" %}
+
+{% block page %}blog{% endblock page%}
+{% block lang %}{% if section.extra.lang %}{{ section.extra.lang }}{% else %}{{ section.lang }}{% endif %}{% endblock lang %}
+{% block title %}{{ section.title }}{% endblock title %}
+{% block desc %}
+  {% if section.description %}
+    {% set desc = section.description %}
+  {% else %}
+    {% set desc = config.description %}
+  {% endif %}
+  <meta name="description" content="{{ desc }}">
+{% endblock desc %}
+
+{% block content %}
+<div id="wrapper">
+  {{ macros::back_link(path = get_url(path="/")) }}
+  {% include "_section_title.html" %}
+  <main class="layout-list">
+    {% if section.extra.categorized %}
+    {% for category,posts in section.pages | sort(attribute="taxonomies.categories.0") | group_by(attribute="taxonomies.categories.0") %}
+    {% set category_name = category %}
+    {% if category is matching("^__[0-9]{2}__") %}
+      {% set category_name = category | split(pat="") | slice(start=7) | join(sep="") %}
+    {% endif %}
+    <h2 class="category">{{ category_name }}</h2>
+    <div class="post-list categorized">
+      {% for post in posts %}
+      <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
+        <span>{{ post.title }}</span>
+        <span class="date">{{ post.date | date(format=section.extra.date_format) }}</span>
+      </a>
+      {% endfor %}
+    </div>
+    {% endfor %}
+    {% else %}
+    <div class="post-list">
+      {% for post in section.pages %}
+      <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
+        <span>{{ post.title }}</span>
+        <span class="date">{{ post.date | date(format=section.extra.date_format) }}</span>
+      </a>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </main>
+  {% include "_footer.html" %}
+</div>
+{% endblock content %}
diff --git a/src/themes/serene/templates/categories/list.html b/src/themes/serene/templates/categories/list.html
new file mode 100644
index 0000000..9069f6b
--- /dev/null
+++ b/src/themes/serene/templates/categories/list.html
@@ -0,0 +1,3 @@
+<script>
+  window.location.assign('{{ get_url(path="/") }}');
+</script>
diff --git a/src/themes/serene/templates/categories/single.html b/src/themes/serene/templates/categories/single.html
new file mode 100644
index 0000000..9069f6b
--- /dev/null
+++ b/src/themes/serene/templates/categories/single.html
@@ -0,0 +1,3 @@
+<script>
+  window.location.assign('{{ get_url(path="/") }}');
+</script>
diff --git a/src/themes/serene/templates/feed.xml b/src/themes/serene/templates/feed.xml
new file mode 100644
index 0000000..fe1f139
--- /dev/null
+++ b/src/themes/serene/templates/feed.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ lang }}">
+	<title>{% if section.title %}{{ section.title }}{% else %}{{ config.title }}{% endif %}</title>
+	{%- if section.description %}
+	<subtitle>{{ section.description }}</subtitle>
+    {%- elif config.description %}
+	<subtitle>{{ config.description }}</subtitle>
+	{%- endif %}
+	<link href="{{ feed_url | safe }}" rel="self" type="application/atom+xml"/>
+    <link href="
+      {%- if section -%}
+        {{ section.permalink | escape_xml | safe }}
+      {%- else -%}
+        {{ config.base_url | escape_xml | safe }}
+      {%- endif -%}
+    "/>
+	<updated>{{ last_updated | date(format="%+") }}</updated>
+	<id>{{ feed_url | safe }}</id>
+	{%- for page in pages %}
+	<entry xml:lang="{{ page.lang }}">
+		<title>{{ page.title }}</title>
+		<published>{{ page.date | date(format="%+") }}</published>
+		<updated>{{ page.updated | default(value=page.date) | date(format="%+") }}</updated>
+        {%- if page.summary %}
+        <summary>{{ page.summary }}</summary>
+        {%- endif %}
+		<link href="{{ page.permalink | safe }}" type="text/html"/>
+		<id>{{ page.permalink | safe }}</id>
+		<content type="html">{{ page.content }}</content>
+	</entry>
+	{%- endfor %}
+</feed>
\ No newline at end of file
diff --git a/src/themes/serene/templates/home.html b/src/themes/serene/templates/home.html
new file mode 100644
index 0000000..6f4c3ac
--- /dev/null
+++ b/src/themes/serene/templates/home.html
@@ -0,0 +1,119 @@
+{% extends "_base.html" %}
+
+{% block page %}homepage{% endblock page%}
+{% block lang %}{% if section.extra.lang %}{{ section.extra.lang }}{% else %}{{ section.lang }}{% endif %}{% endblock lang %}
+{% block title %}{{ config.title }}{% endblock title %}
+{% block desc %}
+  <meta name="description" content="{{ config.description }}">
+{% endblock desc %}
+
+{% block head %}
+{% if config.markdown.highlight_theme == "css" %}
+  {% if config.extra.force_theme == "dark" %}
+    <link id="hl" rel="stylesheet" type="text/css" href="{{ get_url(path='hl-dark.css') }}" />
+  {% else %}
+    <link id="hl" rel="stylesheet" type="text/css" href="{{ get_url(path='hl-light.css') }}" />
+  {% endif %}
+{% endif %}
+{% if section.extra.math %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/copy-tex.min.js" integrity="sha384-HORx6nWi8j5/mYA+y57/9/CZc5z8HnEw4WUZWy5yOn9ToKBv1l58vJaufFAn9Zzi" crossorigin="anonymous"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        renderMathInElement(document.body, {
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$', right: '$', display: false },
+                { left: '\\(', right: '\\)', display: false },
+                { left: '\\[', right: '\\]', display: true }
+            ],
+            throwOnError: false
+        });
+    });
+</script>
+{% endif %}
+{% endblock head %}
+
+{% block content %}
+<div id="wrapper">
+  <main>
+    <section id="info">
+      {% if section.extra.avatar %}
+      <img src="{{ get_url(path=section.extra.avatar) }}" alt="avatar">
+      {% endif %}
+      <div id="text">
+        <div>
+          <span id="name">{{ section.extra.name }}</span>
+          {% if section.extra.id %}
+          <span id="id">@{{ section.extra.id }}</span>
+          {% endif %}
+        </div>
+        {% if section.extra.bio %}
+        <div id="bio"> {{ section.extra.bio }} </div>
+        {% endif %}
+      </div>
+    </section>
+    <section id="links">
+      <div id="left">
+        {% for section in config.extra.sections %}
+        <a {% if section.is_external %}href="{{ section.path }}" target="_blank" rel='noreferrer noopener'{% else %}href="{{ get_url(path=section.path) }}" class="instant"{% endif %}>{{ section.name }}</a>
+        {% endfor %}
+      </div>
+      <div id="right">
+        {% for link in section.extra.links %}
+        <a href="{{ link.url }}" aria-label="{{ link.name }}" target="_blank" rel='noreferrer noopener'>
+          {% set icon_path = "icon/" ~ link.icon ~ ".svg" %}
+          {% set icon = load_data(path=icon_path) %}
+          {{ icon | safe }}
+        </a>
+        {% endfor %}
+        {% if not section.extra.footer and not config.extra.force_theme %}
+        {% set moon_icon = load_data(path="icon/moon.svg") %}
+        {% set sun_icon = load_data(path="icon/sun.svg") %}
+        <button id="theme-toggle" aria-label="theme switch">
+          <span class="moon-icon">{{ moon_icon | safe }}</span>
+          <span class="sun-icon">{{ sun_icon | safe }}</span>
+        </button>
+        {% endif %}
+      </div>
+    </section>
+    <section id="brief" class="prose">
+      {{ section.content | trim | safe }}
+    </section>
+    {% if section.extra.recent %}
+    {% set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") %}
+    {% set section_md_path = blog_section_path ~ "/_index.md" %}
+    {% set blog_section = get_section(path=section_md_path) %}
+    <section class="layout-list">
+      <div class="post-list">
+        {% for post in blog_section.pages | slice(end=section.extra.recent_max) %}
+        <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
+          <span>{{ post.title }}</span>
+          <span class="line"></span>
+          <span class="date">{{ post.date | date(format=section.extra.date_format) }}</span>
+        </a>
+        {% endfor %}
+      </div>
+      <div class="read-more">
+        <a class="instant" href="{{ config.extra.blog_section_path }}">{{ section.extra.recent_more_text }}</a>
+      </div>
+    </section>
+  {% endif %}
+  </main>
+  {% if section.extra.footer %}
+    {% include "_footer.html" %}
+  {% endif %}
+</div>
+{% endblock content %}
+
+{% block script %}
+<script src="{{ get_url(path='js/lightense.min.js') }}"></script>
+{% if section.extra.mermaid %}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+{% endif %}
+{% endblock script %}
diff --git a/src/themes/serene/templates/macros/collection.html b/src/themes/serene/templates/macros/collection.html
new file mode 100644
index 0000000..796eae1
--- /dev/null
+++ b/src/themes/serene/templates/macros/collection.html
@@ -0,0 +1,153 @@
+{% macro card(item) %}
+<blockquote class="collection card{% if item.featured %} featured{% endif %}">
+  <div class="meta">
+    {% if item.icon %}
+    <div class="icon-wrapper">
+      <img class="icon no-lightense" src="{{ item.icon }}" alt="icon" width="16" height="16">
+    </div>
+    {% endif %}
+    {% if item.link %}
+    <a class="title" href="{{ item.link }}" target="_blank" rel="noreferrer noopener">{{ item.title }}</a>
+    {% else %}
+    <div class="title">{{ item.title }}</div>
+    {% endif %}
+    {% if item.date %}
+    <div class="date">{{ item.date }}</div>
+    {% endif %}
+  </div>
+  {% if item.subtitle %}
+    <div class="subtitle">{{ item.subtitle }}</div>
+  {% endif %}
+  <div class="content">{{ item.content | trim | markdown | safe }}</div>
+  {% if item.tags %}
+  <div class="tags">
+    {% for tag in item.tags %}
+    <div><span>#</span>{{ tag }}</div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</blockquote>
+{% endmacro %}
+
+
+{% macro card_simple(item) %}
+<blockquote class="collection card-simple{% if item.featured %} featured{% endif %}">
+  <div class="meta">
+    {% if item.icon %}
+    <div class="icon-wrapper">
+      <img class="icon no-lightense" src="{{ item.icon }}" alt="icon" width="16" height="16">
+    </div>
+    {% endif %}
+    {% if item.link %}
+    <a class="title" href="{{ item.link }}" target="_blank" rel="noreferrer noopener">{{ item.title }}</a>
+    {% else %}
+    <div class="title">{{ item.title }}</div>
+    {% endif %}
+    <div class="content">{{ item.content | trim | markdown | safe }}</div>
+    {% if item.date %}
+    <div class="date">{{ item.date }}</div>
+    {% endif %}
+  </div>
+  <div class="content-narrow">{{ item.content | trim | markdown | safe }}</div>
+</blockquote>
+{% endmacro %}
+
+
+{% macro entry(item) %}
+{% if item.link %}
+<a href="{{ item.link }}" target="_blank" rel="noreferrer noopener" class="collection entry">
+{% else %}
+<blockquote class="collection entry">
+{% endif %}
+  {% if item.icon %}
+  <div class="icon-wrapper">
+    <img class="icon no-lightense" src="{{ item.icon }}" alt="icon" width="16" height="16" />
+  </div>
+  {% endif %}
+  {% if item.title or item.subtitle %}
+  <div class="text">
+    {% if item.title %}
+    <div class="title">{{ item.title }}</div>
+    {% endif %}
+    {% if item.subtitle %}
+    <div class="subtitle">{{ item.subtitle }}</div>
+    {% endif %}
+  </div>
+  {% endif %}
+{% if item.link %}
+</a>
+{% else %}
+</blockquote>
+{% endif %}
+{% endmacro %}
+
+
+{% macro box(item) %}
+<div class="collection-box-wrapper">
+{% if item.link %}
+<a href="{{ item.link }}" target="_blank" rel="noreferrer noopener" class="collection box">
+{% else %}
+<blockquote class="collection box">
+{% endif %}
+  <div class="text">
+    <div class="title">{{ item.title }}</div>
+    {% if item.subtitle %}
+    <div class="subtitle">{{ item.subtitle }}</div>
+    {% endif %}
+  </div>
+  {% if item.img %}
+    <img class="no-lightense{% if item.rotate %} rotate{% endif %}" src="{{ item.img }}" alt="{{ item.title }}" width="48" height="48" />
+    {% else %}
+    <div class="placehold"></div>
+    {% endif %}
+{% if item.link %}
+</a>
+{% else %}
+</blockquote>
+{% endif %}
+</div>
+{% endmacro %}
+
+
+{% macro art(item) %}
+<blockquote class="collection art">
+  <div class="img-wrapper">
+    <img src="{{ item.img }}" alt="{{ item.title }}" height="175">
+  </div>
+  <div class="text">
+    {% if item.link %}
+    <a class="title" href="{{ item.link }}" target="_blank" rel="noreferrer noopener" >{{ item.title }}</a>
+    {% else %}
+    <div class="title">{{ item.title }}</div>
+    {% endif %}
+    {% if item.subtitle %}
+    <div class="subtitle">{{ item.subtitle }}</div>
+    {% endif %}
+    {% if item.content %}
+    <div class="content">{{ item.content }}</div>
+    {% endif %}
+    {% if item.footer %}
+    <div class="footer">{{ item.footer }}</div>
+    {% endif %}
+  </div>
+</blockquote>
+{% endmacro %}
+
+
+{% macro art_simple(item) %}
+<blockquote class="collection art-simple">
+  <div class="img-wrapper">
+    <img src="{{ item.img }}" alt="{{ item.title }}" height="175">
+  </div>
+  <div class="text">
+    {% if item.link %}
+    <a class="title" href="{{ item.link }}" target="_blank" rel="noreferrer noopener" >{{ item.title }}</a>
+    {% else %}
+    <div class="title">{{ item.title }}</div>
+    {% endif %}
+    {% if item.subtitle %}
+      <div class="subtitle">{{ item.subtitle }}</div>
+    {% endif %}
+  </div>
+</blockquote>
+{% endmacro %}
diff --git a/src/themes/serene/templates/macros/prose.html b/src/themes/serene/templates/macros/prose.html
new file mode 100644
index 0000000..bd9a894
--- /dev/null
+++ b/src/themes/serene/templates/macros/prose.html
@@ -0,0 +1,32 @@
+{% macro back_link(path) %}
+<header>
+  <nav>
+    <a href="{{ path }}">← {{ config.extra.back_link_text }}</a>
+  </nav>
+</header>
+{% endmacro %}
+
+
+{% macro callout(name) %}
+<blockquote class="callout {{ name }} {% if title %}has-title{% else %}no-title{% endif %}">
+  {% set icon = load_data(path="icon/" ~ name ~ ".svg") %}
+  {% if title %}
+  <p class="title">
+    <span class="icon">
+      {{ icon | safe }}
+    </span>
+    <strong>{{ title }}</strong>
+  </p>
+  <div class="content">
+    {{ body | markdown | safe }}
+  </div>
+  {% else %}
+  <div class="icon">
+    {{ icon | safe }}
+  </div>
+  <div class="content">
+    {{ body | markdown | safe }}
+  </div>
+  {% endif %}
+</blockquote>
+{% endmacro %}
diff --git a/src/themes/serene/templates/post.html b/src/themes/serene/templates/post.html
new file mode 100644
index 0000000..f31810a
--- /dev/null
+++ b/src/themes/serene/templates/post.html
@@ -0,0 +1,151 @@
+{% import "macros/prose.html" as macros %}
+{% extends "_base.html" %}
+
+{% block page %}post{% endblock page %}
+{% block lang -%}
+{%- set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") -%}
+{%- set section_md_path = blog_section_path ~ "/_index.md" -%}
+{%- set section = get_section(path=section_md_path, metadata_only=true) -%}
+{%- if page.extra.lang %}{{page.extra.lang}}{% elif section.extra.lang %}{{section.extra.lang}}{% else %}{{page.lang}}{% endif -%}
+{%- endblock lang %}
+{% block title %}{{ page.title }}{% endblock title %}
+{% block desc %}
+  {% if page.summary %}
+    {% set desc = page.summary %}
+  {% elif page.description %}
+    {% set desc = page.description %}
+  {% elif section.description %}
+    {% set desc = section.description %}
+  {% else %}
+    {% set desc = config.description %}
+  {% endif %}
+  <meta name="description" content="{{ desc }}">
+{% endblock desc %}
+
+{% block head %}
+{% if config.markdown.highlight_theme == "css" %}
+<link id="hl" rel="stylesheet" type="text/css" href="/hl-{% if config.extra.force_theme == "dark" %}dark{% else %}light{% endif %}.css" />
+{% endif %}
+{% if page.extra.math %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/copy-tex.min.js" integrity="sha384-HORx6nWi8j5/mYA+y57/9/CZc5z8HnEw4WUZWy5yOn9ToKBv1l58vJaufFAn9Zzi" crossorigin="anonymous"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        renderMathInElement(document.body, {
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$', right: '$', display: false },
+                { left: '\\(', right: '\\)', display: false },
+                { left: '\\[', right: '\\]', display: true }
+            ],
+            throwOnError: false
+        });
+    });
+</script>
+{% endif %}
+{% endblock head %}
+
+{% block content %}
+<div id="wrapper">
+  <div id="blank"></div>
+  <aside>
+    {% if page.extra.toc is defined %}{% set show_toc = page.extra.toc %}{% else %}{% set show_toc = section.extra.toc %}{% endif %}
+    {% if show_toc and page.toc %}
+    <nav>
+      <ul>
+        {% for h2 in page.toc %}
+        <li>
+          <a class="h2" href="#{{ h2.id | safe }}">{{ h2.title }}</a>
+          {% if h2.children %}
+          <ul>
+            {% for h3 in h2.children %}
+            <li>
+              <a class="h3" href="#{{ h3.id | safe }}">{{ h3.title }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+    </nav>
+    {% endif %}
+    {% if section.extra.back_to_top %}
+    <button id="back-to-top" aria-label="back to top">
+      {% set icon = load_data(path="icon/arrow-up.svg") %}
+      {{ icon | safe }}
+    </button>
+    {% endif %}
+  </aside>
+  <main>
+    {{ macros::back_link(path = get_url(path=section.path)) }}
+
+    <div>
+      {% if page.extra.copy is defined %}{% set allow_copy = page.extra.copy %}{% else %}{% set allow_copy = section.extra.copy %}{% endif %}
+      {% if allow_copy %}
+      {% set copy_icon = load_data(path="icon/copy.svg") %}
+      {% set check_icon = load_data(path="icon/check.svg") %}
+      <div id="copy-cfg" style="display: none;" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}"></div>
+      {% endif %}
+      <article class="prose">
+        <h1>{{ page.title }}</h1>
+        <div id="post-info">
+          <div id="date">
+            <span id="publish">{{ page.date | date(format=section.extra.date_format) }}</span>
+            {% if page.updated and page.updated != page.date -%}
+            <span>Updated on <span id="updated">{{ page.updated | date(format=section.extra.date_format) }}</span></span>
+            {% endif -%}
+          </div>
+
+          {% if page.taxonomies.tags is defined %}
+          <div id="tags">
+            {% for tag in page.taxonomies.tags -%}
+            {% set tag_slugify = tag | slugify -%}
+            <a class="instant" href="{{ config.base_url ~ '/tags/' ~ tag_slugify }}"><span>#</span>{{ tag }}</a>
+            {%- endfor %}
+          </div>
+          {% endif %}
+        </div>
+
+        {% if page.extra.outdate_alert is defined %}{% set show_outdate_alert = page.extra.outdate_alert %}{% else %}{% set show_outdate_alert = section.extra.outdate_alert %}{% endif %}
+        {% if page.extra.outdate_alert_days is defined %}{% set outdate_alert_days = page.extra.outdate_alert_days %}{% else %}{% set outdate_alert_days = section.extra.outdate_alert_days %}{% endif %}
+
+        {% if show_outdate_alert -%}
+        <blockquote id="outdate_alert" class="callout caution hidden" data-days="{{ outdate_alert_days }}"
+          data-alert-text-before="{{ section.extra.outdate_alert_text_before }}"
+          data-alert-text-after="{{ section.extra.outdate_alert_text_after }}">
+          <div class="content"></div>
+        </blockquote>
+        {% endif %}
+
+        {{ page.content | safe }}
+      </article>
+
+      {% if page.extra.reaction is defined %}{% set show_reaction = page.extra.reaction %}{% else %}{% set show_reaction = config.extra.reaction %}{% endif %}
+      {% if show_reaction %}
+      <div class="reaction {{ config.extra.reaction_align }}" data-endpoint="{{ config.extra.reaction_endpoint }}"></div>
+      {% endif %}
+
+      {% if page.extra.comment is defined %}{% set show_comment = page.extra.comment %}{% else %}{% set show_comment = section.extra.comment %}{% endif %}
+      {% if show_comment %}
+      <div class="giscus"></div>
+      {% include "_giscus_script.html" %}
+      {% endif %}
+    </div>
+
+    {% include "_footer.html" %}
+  </main>
+</div>
+{% endblock content %}
+
+{% block script %}
+<script src="/js/lightense.min.js"></script>
+{% if page.extra.mermaid %}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+{% endif %}
+{% endblock script %}
diff --git a/src/themes/serene/templates/prose.html b/src/themes/serene/templates/prose.html
new file mode 100644
index 0000000..661c408
--- /dev/null
+++ b/src/themes/serene/templates/prose.html
@@ -0,0 +1,82 @@
+{% import "macros/prose.html" as macros %}
+{% extends "_base.html" %}
+
+{% block page %}prose-page{% endblock page %}
+{% block lang -%}
+{%- if section.extra.lang %}{{section.extra.lang}}{% else %}{{section.lang}}{% endif -%}
+{%- endblock lang %}
+{% block title %}{{ section.title }}{% endblock title %}
+{% block desc %}
+  {% if section.description %}
+    {% set desc = section.description %}
+  {% else %}
+    {% set desc = config.description %}
+  {% endif %}
+  <meta name="description" content="{{ desc }}">
+{% endblock desc %}
+
+{% block head %}
+{% if config.markdown.highlight_theme == "css" %}
+<link id="hl" rel="stylesheet" type="text/css" href="/hl-{% if config.extra.force_theme == "dark" %}dark{% else %}light{% endif %}.css" />
+{% endif %}
+{% if section.extra.math %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/copy-tex.min.js" integrity="sha384-HORx6nWi8j5/mYA+y57/9/CZc5z8HnEw4WUZWy5yOn9ToKBv1l58vJaufFAn9Zzi" crossorigin="anonymous"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        renderMathInElement(document.body, {
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$', right: '$', display: false },
+                { left: '\\(', right: '\\)', display: false },
+                { left: '\\[', right: '\\]', display: true }
+            ],
+            throwOnError: false
+        });
+    });
+</script>
+{% endif %}
+{% endblock head %}
+
+{% block content %}
+<div id="wrapper">
+  <main>
+    {{ macros::back_link(path = get_url(path="/")) }}
+    {% include "_section_title.html" %}
+    <div>
+      {% if section.extra.copy %}
+      {% set copy_icon = load_data(path="icon/copy.svg") %}
+      {% set check_icon = load_data(path="icon/check.svg") %}
+      <div id="copy-cfg" style="display: none;" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}"></div>
+      {% endif %}
+      <article class="prose">
+        {{ section.content | safe }}
+      </article>
+
+      {% if section.extra.reaction is defined %}{% set show_reaction = section.extra.reaction %}{% else %}{% set show_reaction = config.extra.reaction %}{% endif %}
+      {% if show_reaction %}
+      <div class="reaction {{ config.extra.reaction_align }}" data-endpoint="{{ config.extra.reaction_endpoint }}"></div>
+      {% endif %}
+
+      {% if section.extra.comment %}
+      <div class="giscus"></div>
+      {% include "_giscus_script.html" %}
+      {% endif %}
+    </div>
+
+    {% include "_footer.html" %}
+  </main>
+</div>
+{% endblock content %}
+
+{% block script %}
+<script src="/js/lightense.min.js"></script>
+{% if section.extra.mermaid %}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+{% endif %}
+{% endblock script %}
diff --git a/src/themes/serene/templates/shortcodes/caution.html b/src/themes/serene/templates/shortcodes/caution.html
new file mode 100644
index 0000000..7d1797f
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/caution.html
@@ -0,0 +1,2 @@
+{% import "macros/prose.html" as macros %}
+{{ macros::callout(name="caution") }}
diff --git a/src/themes/serene/templates/shortcodes/collection.html b/src/themes/serene/templates/shortcodes/collection.html
new file mode 100644
index 0000000..c217a0c
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/collection.html
@@ -0,0 +1,23 @@
+{% import 'macros/collection.html' as marcos -%}
+
+{% set data = load_data(path="content" ~ section.path ~ file, format="toml") %}
+
+<section class="collection-wrapper">
+{% for item in data.collection %}
+  {% if item.type == "card" %}
+    {{ marcos::card(item=item) }}
+  {% elif item.type == "card_simple" %}
+    {{ marcos::card_simple(item=item) }}
+  {% elif item.type == "entry" %}
+    {{ marcos::entry(item=item) }}
+  {% elif item.type == "box" %}
+    {{ marcos::box(item=item) }}
+  {% elif item.type == "art" %}
+    {{ marcos::art(item=item) }}
+  {% elif item.type == "art_simple" %}
+    {{ marcos::art_simple(item=item) }}
+  {% elif item.type == "br" %}
+    <br />
+  {% endif %}
+{% endfor %}
+</section>
diff --git a/src/themes/serene/templates/shortcodes/detail.html b/src/themes/serene/templates/shortcodes/detail.html
new file mode 100644
index 0000000..0d34a74
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/detail.html
@@ -0,0 +1,4 @@
+<details {% if default_open %}open{% endif %}>
+  <summary><span>{{ title }}</span></summary>
+  {{ body | markdown | safe }}
+</details>
diff --git a/src/themes/serene/templates/shortcodes/figure.html b/src/themes/serene/templates/shortcodes/figure.html
new file mode 100644
index 0000000..8a4123f
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/figure.html
@@ -0,0 +1,8 @@
+<figure>
+    <img src="{{ src }}" {% if alt %} alt="{{ alt }}"{% endif %}>
+    {% if via %}
+    <figcaption><a href="{{via}}">via</a></figcaption>
+    {% else %}
+    <figcaption>{{ caption }}</figcaption>
+    {% endif %}
+</figure>
\ No newline at end of file
diff --git a/src/themes/serene/templates/shortcodes/important.html b/src/themes/serene/templates/shortcodes/important.html
new file mode 100644
index 0000000..451c141
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/important.html
@@ -0,0 +1,2 @@
+{% import "macros/prose.html" as macros %}
+{{ macros::callout(name="important") }}
diff --git a/src/themes/serene/templates/shortcodes/mermaid.html b/src/themes/serene/templates/shortcodes/mermaid.html
new file mode 100644
index 0000000..3d3725d
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<pre class="mermaid">
+  {{ body }}
+</pre>
\ No newline at end of file
diff --git a/src/themes/serene/templates/shortcodes/note.html b/src/themes/serene/templates/shortcodes/note.html
new file mode 100644
index 0000000..b16657b
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/note.html
@@ -0,0 +1,2 @@
+{% import "macros/prose.html" as macros %}
+{{ macros::callout(name="note") }}
diff --git a/src/themes/serene/templates/shortcodes/quote.html b/src/themes/serene/templates/shortcodes/quote.html
new file mode 100644
index 0000000..c7e3c37
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/quote.html
@@ -0,0 +1,10 @@
+<blockquote class="quote">
+  {% set icon = load_data(path="icon/quote.svg") %}
+  <div class="icon" style="display: none;">{{ icon | safe }}</div>
+  <div class="content">{{ body | markdown | safe }}</div>
+  {% if cite %}
+  <div class="from">
+    {{ "— " ~ cite | markdown | safe }}
+  </div>
+  {% endif %}
+</blockquote>
\ No newline at end of file
diff --git a/src/themes/serene/templates/shortcodes/tip.html b/src/themes/serene/templates/shortcodes/tip.html
new file mode 100644
index 0000000..8904437
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/tip.html
@@ -0,0 +1,2 @@
+{% import "macros/prose.html" as macros %}
+{{ macros::callout(name="tip") }}
diff --git a/src/themes/serene/templates/shortcodes/warning.html b/src/themes/serene/templates/shortcodes/warning.html
new file mode 100644
index 0000000..0964b15
--- /dev/null
+++ b/src/themes/serene/templates/shortcodes/warning.html
@@ -0,0 +1,2 @@
+{% import "macros/prose.html" as macros %}
+{{ macros::callout(name="warning") }}
diff --git a/src/themes/serene/templates/tags/list.html b/src/themes/serene/templates/tags/list.html
new file mode 100644
index 0000000..ff41838
--- /dev/null
+++ b/src/themes/serene/templates/tags/list.html
@@ -0,0 +1,29 @@
+{% import "macros/prose.html" as macros %}
+{% extends "_base.html" %}
+
+{% block page %}tag-list{% endblock page%}
+{% block lang -%}
+{% set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") %}
+{% set section_md_path = blog_section_path ~ "/_index.md"%}
+{% set section = get_section(path=section_md_path, metadata_only=true) %}
+{%- if section.extra.lang %}{{ section.extra.lang }}{% else %}{{ lang }}{% endif -%}
+{%- endblock lang %}
+{% block title %}Tags{% endblock title %}
+{% block desc %}
+  <meta name="description" content="Tags">
+{% endblock desc %}
+
+{% block content %}
+<div id="wrapper">
+  {{ macros::back_link(path = get_url(path="/")) }}
+  <main>
+    <h1 class="title">Tags</h1>
+    <div class="tags">
+      {% for tag in terms -%}
+      <a class="instant" href="{{ tag.permalink }}"># {{ tag.name | lower }}</a>
+      {% endfor %}
+    </div>
+  </main>
+  {% include "_footer.html" %}
+</div>
+{% endblock content %}
diff --git a/src/themes/serene/templates/tags/single.html b/src/themes/serene/templates/tags/single.html
new file mode 100644
index 0000000..f8b9fc4
--- /dev/null
+++ b/src/themes/serene/templates/tags/single.html
@@ -0,0 +1,34 @@
+{% import "macros/prose.html" as macros %}
+{% extends "_base.html" %}
+
+{% block page %}tag-single{% endblock page %}
+{% block lang -%}
+{% set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") %}
+{% set section_md_path = blog_section_path ~ "/_index.md"%}
+{% set section = get_section(path=section_md_path, metadata_only=true) %}
+{%- if section.extra.lang %}{{ section.extra.lang }}{% else %}{{ lang }}{% endif -%}
+{%- endblock lang %}
+{% block title %}{{section.title}}{% endblock title %}
+{% block desc %}
+  <meta name="description" content="{{ term.name }}">
+{% endblock desc %}
+
+{% block content %}
+<div id="wrapper">
+  {{ macros::back_link(path = get_url(path="/tags")) }}
+  <main class="layout-list">
+    <div class="title">
+      <span># {{ term.name }}</span>
+    </div>
+    <div class="post-list">
+      {% for post in term.pages %}
+      <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
+        <span>{{ post.title }}</span>
+        <span class="date">{{ post.date | date(format=section.extra.date_format) }}</span>
+      </a>
+      {% endfor %}
+    </div>
+  </main>
+  {% include "_footer.html" %}
+</div>
+{% endblock content %}
-- 
cgit 1.4.1