diff options
Diffstat (limited to 'src/themes/serene/templates')
21 files changed, 970 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..d1f2d48 --- /dev/null +++ b/src/themes/serene/templates/_base.html @@ -0,0 +1,39 @@ +{% set color_scheme = config.extra.color_scheme if config.extra.color_scheme is defined else "auto" %} +<!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 color_scheme == "dark" %} dark{% endif %}"> + {% if color_scheme == "auto" %} + <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="giallo-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/_components/collection.html b/src/themes/serene/templates/_components/collection.html new file mode 100644 index 0000000..70a1d31 --- /dev/null +++ b/src/themes/serene/templates/_components/collection.html @@ -0,0 +1,129 @@ +{# + This component is used inside markdown content, which is rendered as a Tera + template first and *then* processed as markdown (zola >= 0.23). Its HTML + output must therefore stay markdown-safe: no blank lines in the middle of + an HTML block, and no lines indented by 4+ spaces. + + Collection file schema: + layout = "card" | "row" | "tile" | "gallery" (default "card") + flow = "stack" | "inline" | "grid" (default: card/gallery -> "stack", row/tile -> "inline") + [[item]] + title / subtitle / content / icon / image / link / badge / tags / featured / rotate +#} + +{% component collection(file: string, section) -%} +{%- set data = load_data(path="content" ~ section.path ~ file, format="toml") -%} +{%- set layout = data.layout if data.layout is defined else "card" -%} +{%- if layout not in ["card", "row", "tile", "gallery"] -%} +{%- set layout = "card" -%} +{%- endif -%} +{%- if data.flow is defined and data.flow in ["stack", "inline", "grid"] -%} +{%- set flow = data.flow -%} +{%- elif layout == "row" or layout == "tile" -%} +{%- set flow = "inline" -%} +{%- else -%} +{%- set flow = "stack" -%} +{%- endif -%} +{%- if layout == "card" and flow == "inline" -%} +{%- set flow = "grid" -%} +{%- endif -%} +<div class="collection layout-{{ layout }} flow-{{ flow }}"> +{%- for item in data.item -%} +{%- set img_src = "" -%} +{%- if item.image is defined -%} +{%- if item.image is starting_with(pat="http") or item.image is starting_with(pat="/") or item.image is starting_with(pat="data:") -%} +{%- set img_src = item.image -%} +{%- else -%} +{%- set img_src = get_url(path=section.colocated_path ~ item.image) -%} +{%- endif -%} +{%- endif -%} +{%- set icon_src = "" -%} +{%- if item.icon is defined -%} +{%- if item.icon is starting_with(pat="http") or item.icon is starting_with(pat="/") or item.icon is starting_with(pat="data:") -%} +{%- set icon_src = item.icon -%} +{%- else -%} +{%- set icon_src = get_url(path=section.colocated_path ~ item.icon) -%} +{%- endif -%} +{%- endif -%} +{%- set external = item.link is defined and not item.link is starting_with(pat="/") -%} +{%- if layout == "card" -%} +<div class="item{% if item.featured %} featured{% endif %}"> +{%- if img_src -%}<div class="image"><img src="{{ img_src }}" alt="{{ item.title }}"></div>{%- endif -%} +<div class="body"> +<div class="meta"> +{%- if icon_src -%}<span class="icon"><img class="no-lightense" src="{{ icon_src }}" alt="" width="16" height="16"></span>{%- endif -%} +{%- if item.link -%} +<a class="title" href="{{ item.link }}"{% if external %} target="_blank" rel="noreferrer noopener"{% endif %}><span>{{ item.title }}</span></a> +{%- else -%} +<span class="title">{{ item.title }}</span> +{%- endif -%} +{%- if item.badge -%}<span class="badge">{{ item.badge }}</span>{%- endif -%} +</div> +{%- if item.subtitle -%} +<div class="subtitle">{{ item.subtitle | trim | markdown(inline=true) | trim | safe }}</div> +{%- endif -%} +{%- if item.content -%} +<div class="content"> +{{ item.content | trim | markdown | trim | safe }} +</div> +{%- endif -%} +{%- if item.tags -%} +<div class="tags"> +{%- for tag in item.tags -%} +<span class="tag"><span>#</span>{{ tag }}</span> +{%- endfor -%} +</div> +{%- endif -%} +</div> +</div> +{%- elif layout == "row" -%} +<span class="item{% if item.featured %} featured{% endif %}"> +<span class="main"> +{%- if icon_src -%}<span class="icon"><img class="no-lightense" src="{{ icon_src }}" alt="" width="16" height="16"></span>{%- endif -%} +{%- if item.link -%} +<a class="title" href="{{ item.link }}"{% if external %} target="_blank" rel="noreferrer noopener"{% endif %}><span>{{ item.title }}</span></a> +{%- else -%} +<span class="title">{{ item.title }}</span> +{%- endif -%} +</span> +{%- if item.subtitle -%}<span class="subtitle">{{ item.subtitle | trim | markdown(inline=true) | trim | safe }}</span>{%- endif -%} +{%- if item.badge -%}<span class="badge">{{ item.badge }}</span>{%- endif -%} +</span> +{%- elif layout == "tile" -%} +{%- if item.link -%} +<a class="item" href="{{ item.link }}"{% if external %} target="_blank" rel="noreferrer noopener"{% endif %}> +{%- else -%} +<span class="item"> +{%- endif -%} +<span class="text"> +<span class="title">{{ item.title }}</span> +{%- if item.subtitle -%}<span class="subtitle">{{ item.subtitle | trim | markdown(inline=true) | trim | safe }}</span>{%- endif -%} +</span> +{%- if img_src -%} +<img class="no-lightense{% if item.rotate %} rotate{% endif %}" src="{{ img_src }}" alt="{{ item.title }}" width="48" height="48"> +{%- else -%} +<span class="placehold"></span> +{%- endif -%} +{%- if item.link -%}</a>{%- else -%}</span>{%- endif -%} +{%- elif layout == "gallery" -%} +<div class="item"> +{%- if img_src -%}<div class="image"><img src="{{ img_src }}" alt="{{ item.title }}"></div>{%- endif -%} +<div class="text"> +{%- if item.link -%} +<a class="title" href="{{ item.link }}"{% if external %} target="_blank" rel="noreferrer noopener"{% endif %}><span>{{ item.title }}</span></a> +{%- else -%} +<span class="title">{{ item.title }}</span> +{%- endif -%} +{%- if item.subtitle -%}<span class="subtitle">{{ item.subtitle | trim | markdown(inline=true) | trim | safe }}</span>{%- endif -%} +{%- if item.content -%} +<div class="content"> +{{ item.content | trim | markdown | trim | safe }} +</div> +{%- endif -%} +{%- if item.badge -%}<span class="badge">{{ item.badge }}</span>{%- endif -%} +</div> +</div> +{%- endif -%} +{%- endfor -%} +</div> +{%- endcomponent collection %} diff --git a/src/themes/serene/templates/_components/prose.html b/src/themes/serene/templates/_components/prose.html new file mode 100644 index 0000000..c478a58 --- /dev/null +++ b/src/themes/serene/templates/_components/prose.html @@ -0,0 +1,72 @@ +{# + Components in this file are used inside markdown content, which is rendered + as a Tera template first and *then* processed as markdown (zola >= 0.23). + Their HTML output must therefore stay markdown-safe: no blank lines in the + middle of an HTML block, and no lines indented by 4+ spaces. +#} + +{% component back_link(path: string, config) %} +<header> + <nav> + <a id="back-link" href="{{ path }}">← {{ config.extra.back_link_text }}</a> + </nav> +</header> +{% endcomponent back_link %} + + +{% component quote(cite: string = "") -%} +{%- set icon = load_data(path="icon/quote.svg") -%} +<blockquote class="quote"> +<div class="icon" style="display: none;">{{ icon | trim | safe }}</div> +<div class="content"> +{{ body | markdown | trim | safe }} +</div> +{%- if cite -%} +{%- set from_text = "— " ~ cite -%} +<div class="from"> +{{ from_text | markdown | trim | safe }} +</div> +{%- endif -%} +</blockquote> +{%- endcomponent quote %} + + +{% component detail(title: string = "", default_open: bool = false) -%} +<details{% if default_open %} open{% endif %}> +<summary><span>{{ title }}</span></summary> +{{ body | markdown | trim | safe }} +</details> +{%- endcomponent detail %} + + +{% component figure(src: string, alt: string = "", caption: string = "", width: string = "", height: string = "", page = {}, section = {}) -%} +{%- if src is starting_with(pat="/") or src is starting_with(pat="http://") or src is starting_with(pat="https://") or src is starting_with(pat="//") or src is starting_with(pat="data:") -%} +{%- set image_src = src -%} +{%- elif page?.colocated_path -%} +{%- set image_src = get_url(path=page.colocated_path ~ src) -%} +{%- elif section?.colocated_path -%} +{%- set image_src = get_url(path=section.colocated_path ~ src) -%} +{%- else -%} +{%- set image_src = src -%} +{%- endif -%} +<figure> +<img src="{{ image_src }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if height %} height="{{ height }}"{% endif %}{% if width %} width="{{ width }}"{% endif %}> +{%- if caption -%} +<figcaption>{{ caption | trim | markdown | trim | safe }}</figcaption> +{%- endif -%} +</figure> +{%- endcomponent figure %} + + +{% component mermaid() -%} +<pre class="mermaid"> +{{ body }} +</pre> +{%- endcomponent mermaid %} + + +{% component youtube(id: string, autoplay: bool = false) -%} +<div class="youtube"> +<iframe src="https://www.youtube.com/embed/{{ id }}{% if autoplay %}?autoplay=1&mute=1{% endif %}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> +</div> +{%- endcomponent youtube %} diff --git a/src/themes/serene/templates/_components/seo.html b/src/themes/serene/templates/_components/seo.html new file mode 100644 index 0000000..361d7d2 --- /dev/null +++ b/src/themes/serene/templates/_components/seo.html @@ -0,0 +1,39 @@ +{% component seo(title, desc, config, url = "", page_type = "website", image = "", colocated_path = "", published = "", updated = "", tags = [], lang = "") %} +{%- set og_image = "" -%} +{%- if image -%} + {%- if image is starting_with(pat="http://") or image is starting_with(pat="https://") or image is starting_with(pat="//") -%} + {%- set og_image = image -%} + {%- elif image is starting_with(pat="/") -%} + {%- set og_image = get_url(path=image) -%} + {%- elif colocated_path -%} + {%- set og_image = get_url(path=colocated_path ~ image) -%} + {%- else -%} + {%- set og_image = get_url(path=image) -%} + {%- endif -%} +{%- elif config.extra.og_image -%} + {%- if config.extra.og_image is starting_with(pat="http://") or config.extra.og_image is starting_with(pat="https://") or config.extra.og_image is starting_with(pat="//") -%} + {%- set og_image = config.extra.og_image -%} + {%- else -%} + {%- set og_image = get_url(path=config.extra.og_image) -%} + {%- endif -%} +{%- endif -%} +<meta name="description" content="{{ desc | striptags | trim }}"> +{% if url %}<link rel="canonical" href="{{ url | safe }}">{% endif %} +<meta property="og:site_name" content="{{ config.title }}"> +<meta property="og:type" content="{{ page_type }}"> +<meta property="og:title" content="{{ title }}"> +<meta property="og:description" content="{{ desc | striptags | trim }}"> +{% if url %}<meta property="og:url" content="{{ url | safe }}">{% endif %} +{% if lang %}<meta property="og:locale" content="{{ lang | replace(from="-", to="_") }}">{% endif %} +{% if og_image %}<meta property="og:image" content="{{ og_image | safe }}">{% endif %} +{% if page_type == "article" %} +{% if published %}<meta property="article:published_time" content="{{ published }}">{% endif %} +{% if updated %}<meta property="article:modified_time" content="{{ updated }}">{% endif %} +{% if tags %}{% for tag in tags %}<meta property="article:tag" content="{{ tag }}"> +{% endfor %}{% endif %} +{% endif %} +<meta name="twitter:card" content="{% if og_image %}summary_large_image{% else %}summary{% endif %}"> +<meta name="twitter:title" content="{{ title }}"> +<meta name="twitter:description" content="{{ desc | striptags | trim }}"> +{% if og_image %}<meta name="twitter:image" content="{{ og_image | safe }}">{% endif %} +{% endcomponent seo %} 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..78d62c8 --- /dev/null +++ b/src/themes/serene/templates/_footer.html @@ -0,0 +1,48 @@ +{% set show_rss = false %} +{% if section is defined and section.generate_feeds %} + {% set rss_path = section.path ~ config.feed_filenames[0] %} + {% set show_rss = true %} +{% elif config.generate_feeds %} + {% set rss_path = "/" ~ config.feed_filenames[0] %} + {% set show_rss = true %} +{% 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 show_rss %} + <a id="rss-btn" href="{{ get_url(path=rss_path) }}">RSS</a> + {% endif %} + + {% if color_scheme == "auto" %} + {% 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 show_rss %} +{% 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 %} 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/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..00aebe5 --- /dev/null +++ b/src/themes/serene/templates/feed.xml @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="UTF-8"?> +<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ lang }}"> + <title>{% if section is defined and section.title %}{{ section.title }}{% else %}{{ config.title }}{% endif %}</title> + {%- if section is defined and section.description %} + <subtitle>{{ section.description }}</subtitle> + {%- elif config.description %} + <subtitle>{{ config.description }}</subtitle> + {%- endif %} + <link rel="self" type="application/atom+xml" href="{{ feed_url | safe }}"/> + <link rel="alternate" type="text/html" href=" + {%- if section is defined -%} + {{ section.permalink | escape_xml | safe }} + {%- else -%} + {{ config.base_url | escape_xml | safe }} + {%- endif -%} + "/> + {% if last_updated is defined %} + <updated>{{ last_updated | date(format="%Y-%m-%dT%H:%M:%S%:z") }}</updated> + {% endif %} + <id>{{ feed_url | safe }}</id> + {%- for page in pages %} + <entry xml:lang="{{ page.lang }}"> + <title>{{ page.title }}</title> + <published>{{ page.date | date(format="%Y-%m-%dT%H:%M:%S%:z") }}</published> + <updated>{{ (page.updated or page.date) | date(format="%Y-%m-%dT%H:%M:%S%:z") }}</updated> + <link rel="alternate" type="text/html" href="{{ page.permalink | safe }}"/> + <id>{{ page.permalink | safe }}</id> + {% if page.summary %} + <summary>{{ page.summary }}</summary> + {% endif %} + <content type="html" xml:base="{{ page.permalink | escape_xml | safe }}">{{ page.content }}</content> + </entry> + {%- endfor %} +</feed> diff --git a/src/themes/serene/templates/home.html b/src/themes/serene/templates/home.html new file mode 100644 index 0000000..e074268 --- /dev/null +++ b/src/themes/serene/templates/home.html @@ -0,0 +1,130 @@ +{% 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 %} + {%- if section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = section.lang %}{% endif -%} + {{ <seo config + title={config.title} + desc={config.description} + url={get_url(path="/")} + lang={og_lang} /> }} +{% endblock desc %} + +{% block head %} +{% if config.markdown.highlighting.style == "class" %} + {% if color_scheme == "dark" %} + <link id="hl" rel="stylesheet" type="text/css" href="{{ get_url(path='giallo-dark.css') }}" /> + {% else %} + <link id="hl" rel="stylesheet" type="text/css" href="{{ get_url(path='giallo-light.css') }}" /> + {% endif %} +{% endif %} +{% set enable_math = section.extra.math if section.extra.math is defined else (config.extra.math if config.extra.math is defined else false) %} +{% if enable_math %} +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.css" integrity="sha384-M59ezskvvpvT+a+C1x088YJ3DVmK+wZdX0UkVKalOI4Qi5Nwv0WrvpqHcfa2HQqB" crossorigin="anonymous"> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.js" integrity="sha384-7jGyG5zFwmEamqNWdCbpsPn+GTWEis3lnV7X/jXHyhFpJG7ExABLyMapabg8F4+p" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/copy-tex.min.js" integrity="sha384-Pe2JWbaShhSRT0SESJ9XLPeAsi4yrNi7r/CiH0Coq7giBjK5a6Ae7XcybE8rNlQP" 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 config.extra.avatar %} + <img src="{{ get_url(path=config.extra.avatar) }}" alt="avatar"> + {% endif %} + <div id="text"> + <div> + <span id="name">{{ config.extra.name }}</span> + {% if config.extra.handle %} + <span id="id">@{{ config.extra.handle }}</span> + {% endif %} + </div> + {% if config.extra.bio %} + <div id="bio"> {{ config.extra.bio }} </div> + {% endif %} + </div> + </section> + <section id="links"> + <div id="left"> + {% for item in config.extra.nav %} + {% if item.path is starting_with(pat="/") and item.path is not starting_with(pat="//") %} + <a href="{{ get_url(path=item.path) }}" class="instant">{{ item.name }}</a> + {% else %} + <a href="{{ item.path }}" class="external" target="_blank" rel='noreferrer noopener'>{{ item.name }}</a> + {% endif %} + {% endfor %} + </div> + <div id="right"> + {% for link in config.extra.links %} + <a href="{{ link.url }}" aria-label="{{ link.name }}" target="_blank" rel='noreferrer noopener{% if link.rel_me%} me{% endif %}'> + {% set icon_path = "icon/" ~ link.icon ~ ".svg" %} + {% set icon = load_data(path=icon_path) %} + {{ icon | safe }} + </a> + {% endfor %} + {% if not section.extra.footer and color_scheme == "auto" %} + {% 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(pat="/") %} + {% set section_md_path = blog_section_path ~ "/_index.md" %} + {% set blog_section = get_section(path=section_md_path) %} + {% set date_format = section.extra.date_format if section.extra.date_format is defined else (config.extra.date_format if config.extra.date_format is defined else "%b %-d, %Y") %} + <section class="layout-list"> + <div class="post-list"> + {% for post in blog_section.pages[:section.extra.recent_max] %} + <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}"> + <span>{{ post.title }}</span> + <span class="date">{{ post.date | date(format=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> +{% set enable_mermaid = section.extra.mermaid if section.extra.mermaid is defined else (config.extra.mermaid if config.extra.mermaid is defined else false) %} +{% if enable_mermaid %} +<script type="module"> + import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.esm.min.mjs'; + mermaid.initialize({ startOnLoad: true }); +</script> +{% endif %} +{% endblock script %} diff --git a/src/themes/serene/templates/post.html b/src/themes/serene/templates/post.html new file mode 100644 index 0000000..07f9782 --- /dev/null +++ b/src/themes/serene/templates/post.html @@ -0,0 +1,164 @@ +{% extends "_base.html" %} + +{% block page %}post{% endblock page %} +{% block lang -%} +{%- set section = get_section(path=page.ancestors | last, 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 %} + {%- set section = get_section(path=page.ancestors | last, metadata_only=true) -%} + {% 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 %} + {%- if page.extra.lang %}{% set og_lang = page.extra.lang %}{% elif section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = page.lang %}{% endif -%} + {{ <seo config + title={page.title} + desc={desc} + url={page.permalink} + page_type="article" + image={page.extra?.og_image or ""} + colocated_path={page.colocated_path or ""} + published={page.date or ""} + updated={page.updated or ""} + tags={page.taxonomies?.tags or []} + lang={og_lang} /> }} +{% endblock desc %} + +{% block head %} +{% if config.markdown.highlighting.style == "class" %} +<link id="hl" rel="stylesheet" type="text/css" href="/giallo-{% if color_scheme == "dark" %}dark{% else %}light{% endif %}.css" /> +{% endif %} +{% set enable_math = page.extra.math if page.extra.math is defined else (section.extra.math if section.extra.math is defined else (config.extra.math if config.extra.math is defined else false)) %} +{% if enable_math %} +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.css" integrity="sha384-M59ezskvvpvT+a+C1x088YJ3DVmK+wZdX0UkVKalOI4Qi5Nwv0WrvpqHcfa2HQqB" crossorigin="anonymous"> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.js" integrity="sha384-7jGyG5zFwmEamqNWdCbpsPn+GTWEis3lnV7X/jXHyhFpJG7ExABLyMapabg8F4+p" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/copy-tex.min.js" integrity="sha384-Pe2JWbaShhSRT0SESJ9XLPeAsi4yrNi7r/CiH0Coq7giBjK5a6Ae7XcybE8rNlQP" 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> + {% set show_toc = page.extra.toc if page.extra.toc is defined else (section.extra.toc if section.extra.toc is defined else (config.extra.toc if config.extra.toc is defined else false)) %} + {% 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> + {{ <back_link path={get_url(path=section.path)} config /> }} + + <div> + {% set allow_copy = page.extra.code_copy if page.extra.code_copy is defined else (section.extra.code_copy if section.extra.code_copy is defined else (config.extra.code_copy if config.extra.code_copy is defined else false)) %} + {% 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> + {% set date_format = section.extra.date_format if section.extra.date_format is defined else (config.extra.date_format if config.extra.date_format is defined else "%b %-d, %Y") %} + <div id="post-info"> + <div id="date"> + <span id="publish">{{ page.date | date(format=date_format) }}</span> + {% if page.updated and page.updated != page.date -%} + <span>Updated on <span id="updated">{{ page.updated | date(format=date_format) }}</span></span> + {% endif -%} + </div> + + {% if page.taxonomies.tags is defined %} + <div id="tags"> + {% for tag in page.taxonomies.tags -%} + <a class="instant" href="{{ get_taxonomy_url(kind="tags", term=tag) }}"><span>#</span>{{ tag }}</a> + {%- endfor %} + </div> + {% endif %} + </div> + + {% set show_outdated_alert = page.extra.outdated_alert if page.extra.outdated_alert is defined else (section.extra.outdated_alert if section.extra.outdated_alert is defined else (config.extra.outdated_alert if config.extra.outdated_alert is defined else false)) %} + {% set outdated_alert_days = page.extra.outdated_alert_days if page.extra.outdated_alert_days is defined else (section.extra.outdated_alert_days if section.extra.outdated_alert_days is defined else (config.extra.outdated_alert_days if config.extra.outdated_alert_days is defined else 120)) %} + + {% if show_outdated_alert -%} + {% set outdated_alert_text_before = section.extra.outdated_alert_text_before if section.extra.outdated_alert_text_before is defined else (config.extra.outdated_alert_text_before if config.extra.outdated_alert_text_before is defined else "") %} + {% set outdated_alert_text_after = section.extra.outdated_alert_text_after if section.extra.outdated_alert_text_after is defined else (config.extra.outdated_alert_text_after if config.extra.outdated_alert_text_after is defined else "") %} + <blockquote id="outdate_alert" class="markdown-alert-caution hidden" data-days="{{ outdated_alert_days }}" + data-alert-text-before="{{ outdated_alert_text_before }}" + data-alert-text-after="{{ outdated_alert_text_after }}"> + <div class="content"></div> + </blockquote> + {% endif %} + + {{ page.content | safe }} + </article> + + {% set show_reaction = page.extra.reaction if page.extra.reaction is defined else (section.extra.reaction if section.extra.reaction is defined else (config.extra.reaction if config.extra.reaction is defined else false)) %} + {% if show_reaction %} + <div class="reaction {{ config.extra.reaction_align }}" data-endpoint="{{ config.extra.reaction_endpoint }}"></div> + {% endif %} + + {% set show_comment = page.extra.comment if page.extra.comment is defined else (section.extra.comment if section.extra.comment is defined else (config.extra.comment if config.extra.comment is defined else false)) %} + {% 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> +{% set enable_mermaid = page.extra.mermaid if page.extra.mermaid is defined else (section.extra.mermaid if section.extra.mermaid is defined else (config.extra.mermaid if config.extra.mermaid is defined else false)) %} +{% if enable_mermaid %} +<script type="module"> + import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.esm.min.mjs'; + mermaid.initialize({ startOnLoad: true }); +</script> +{% endif %} +{% endblock script %} diff --git a/src/themes/serene/templates/posts.html b/src/themes/serene/templates/posts.html new file mode 100644 index 0000000..9b3dec1 --- /dev/null +++ b/src/themes/serene/templates/posts.html @@ -0,0 +1,58 @@ +{% 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 %} + {%- if section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = section.lang %}{% endif -%} + {{ <seo config + title={section.title} + desc={desc} + url={section.permalink} + lang={og_lang} /> }} +{% endblock desc %} + +{% block content %} +<div id="wrapper"> + {{ <back_link path={get_url(path="/")} config /> }} + {% include "_section_title.html" %} + <main class="layout-list"> + {% set date_format = section.extra.date_format if section.extra.date_format is defined else (config.extra.date_format if config.extra.date_format is defined else "%b %-d, %Y") %} + {% if section.extra.categorized %} + {% set categorized_posts = [post for post in section.pages if post.taxonomies?.categories] %} + {% set categories = [post.taxonomies.categories[0] for post in categorized_posts] | unique | sort %} + {% for category in categories %} + {% set posts = [post for post in categorized_posts if post.taxonomies.categories[0] == category] %} + {% set category_name = category %} + {% if category is matching(pat="^__[0-9]{2}__") %} + {% set category_name = category[6:] %} + {% 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=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=date_format) }}</span> + </a> + {% endfor %} + </div> + {% endif %} + </main> + {% include "_footer.html" %} +</div> +{% endblock content %} diff --git a/src/themes/serene/templates/prose.html b/src/themes/serene/templates/prose.html new file mode 100644 index 0000000..114ff16 --- /dev/null +++ b/src/themes/serene/templates/prose.html @@ -0,0 +1,90 @@ +{% 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 %} + {%- if section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = section.lang %}{% endif -%} + {{ <seo config + title={section.title} + desc={desc} + url={section.permalink} + lang={og_lang} /> }} +{% endblock desc %} + +{% block head %} +{% if config.markdown.highlighting.style == "class" %} +<link id="hl" rel="stylesheet" type="text/css" href="/giallo-{% if color_scheme == "dark" %}dark{% else %}light{% endif %}.css" /> +{% endif %} +{% set enable_math = section.extra.math if section.extra.math is defined else (config.extra.math if config.extra.math is defined else false) %} +{% if enable_math %} +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.css" integrity="sha384-M59ezskvvpvT+a+C1x088YJ3DVmK+wZdX0UkVKalOI4Qi5Nwv0WrvpqHcfa2HQqB" crossorigin="anonymous"> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/katex.min.js" integrity="sha384-7jGyG5zFwmEamqNWdCbpsPn+GTWEis3lnV7X/jXHyhFpJG7ExABLyMapabg8F4+p" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.6/dist/contrib/copy-tex.min.js" integrity="sha384-Pe2JWbaShhSRT0SESJ9XLPeAsi4yrNi7r/CiH0Coq7giBjK5a6Ae7XcybE8rNlQP" 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> + {{ <back_link path={get_url(path="/")} config /> }} + {% include "_section_title.html" %} + <div> + {% set allow_copy = section.extra.code_copy if section.extra.code_copy is defined else (config.extra.code_copy if config.extra.code_copy is defined else false) %} + {% 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"> + {{ section.content | safe }} + </article> + + {% set show_reaction = section.extra.reaction if section.extra.reaction is defined else (config.extra.reaction if config.extra.reaction is defined else false) %} + {% if show_reaction %} + <div class="reaction {{ config.extra.reaction_align }}" data-endpoint="{{ config.extra.reaction_endpoint }}"></div> + {% endif %} + + {% set show_comment = section.extra.comment if section.extra.comment is defined else (config.extra.comment if config.extra.comment is defined else false) %} + {% 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> +{% set enable_mermaid = section.extra.mermaid if section.extra.mermaid is defined else (config.extra.mermaid if config.extra.mermaid is defined else false) %} +{% if enable_mermaid %} +<script type="module"> + import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.esm.min.mjs'; + mermaid.initialize({ startOnLoad: true }); +</script> +{% endif %} +{% endblock script %} diff --git a/src/themes/serene/templates/tags/list.html b/src/themes/serene/templates/tags/list.html new file mode 100644 index 0000000..e2d48d7 --- /dev/null +++ b/src/themes/serene/templates/tags/list.html @@ -0,0 +1,35 @@ +{% extends "_base.html" %} + +{% block page %}tag-list{% endblock page%} +{% block lang -%} +{% set blog_section_path = config.extra.blog_section_path | trim_start(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 %} + {%- set blog_section_path = config.extra.blog_section_path | trim_start(pat="/") -%} + {%- set section = get_section(path=blog_section_path ~ "/_index.md", metadata_only=true) -%} + {%- if section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = lang %}{% endif -%} + {{ <seo config + title="Tags" + desc="Tags" + url={current_url or ""} + lang={og_lang} /> }} +{% endblock desc %} + +{% block content %} +<div id="wrapper"> + {{ <back_link path={get_url(path="/")} config /> }} + <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..ea9f360 --- /dev/null +++ b/src/themes/serene/templates/tags/single.html @@ -0,0 +1,42 @@ +{% extends "_base.html" %} + +{% block page %}tag-single{% endblock page %} +{% block lang -%} +{% set blog_section_path = config.extra.blog_section_path | trim_start(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 %} + {%- set blog_section_path = config.extra.blog_section_path | trim_start(pat="/") -%} + {%- set section = get_section(path=blog_section_path ~ "/_index.md", metadata_only=true) -%} + {%- if section.extra.lang %}{% set og_lang = section.extra.lang %}{% else %}{% set og_lang = lang %}{% endif -%} + {{ <seo config + title={section.title} + desc={term.name} + url={term.permalink} + lang={og_lang} /> }} +{% endblock desc %} + +{% block content %} +<div id="wrapper"> + {% set tags_taxonomy = get_taxonomy(kind="tags") %} + {{ <back_link path={tags_taxonomy.permalink} config /> }} + <main class="layout-list"> + <div class="title"> + <span># {{ term.name }}</span> + </div> + <div class="post-list"> + {% set date_format = section.extra.date_format if section.extra.date_format is defined else (config.extra.date_format if config.extra.date_format is defined else "%b %-d, %Y") %} + {% 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=date_format) }}</span> + </a> + {% endfor %} + </div> + </main> + {% include "_footer.html" %} +</div> +{% endblock content %} |