diff options
| author | Benedikt Peetz <benedikt.peetz@b-peetz.de> | 2025-04-25 12:09:21 +0200 |
|---|---|---|
| committer | Benedikt Peetz <benedikt.peetz@b-peetz.de> | 2025-04-25 12:09:21 +0200 |
| commit | 6acf4ab874c58ee14f35da671029e56972745ce6 (patch) | |
| tree | bc6dfe4f3661332e8c1fc6ff4ca657185db488e4 /src/themes/serene/templates | |
| parent | fix(flake): Ensure that the `dead-trees` directory exists (diff) | |
| download | b-peetz.de-6acf4ab874c58ee14f35da671029e56972745ce6.zip | |
feat(treewide): Migrate to zola
Diffstat (limited to 'src/themes/serene/templates')
30 files changed, 920 insertions, 0 deletions
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 --- /dev/null +++ b/src/themes/serene/templates/_custom_font.html 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 --- /dev/null +++ b/src/themes/serene/templates/_giscus_script.html 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 --- /dev/null +++ b/src/themes/serene/templates/_head_extend.html 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 %} |