3 files changed, 240 insertions, 0 deletions
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 %}