From a2ea06d513a5802964f8f0ef5795cec7e548ed7b Mon Sep 17 00:00:00 2001
From: Alejandro Soto <alejandro@34project.org>
Date: Sat, 13 Sep 2025 14:55:15 -0600
Subject: Squashed 'themes/tabi-lean/' content from commit 95c8796

git-subtree-dir: themes/tabi-lean
git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c
---
 templates/shortcodes/add_src_to_code_block.html |  1 +
 templates/shortcodes/admonition.html            | 12 ++++++
 templates/shortcodes/aside.html                 |  5 +++
 templates/shortcodes/dimmable_image.html        | 31 ++++++++++++++
 templates/shortcodes/dual_theme_image.html      | 45 +++++++++++++++++++
 templates/shortcodes/force_text_direction.html  |  5 +++
 templates/shortcodes/full_width_image.html      | 22 ++++++++++
 templates/shortcodes/iine.html                  |  5 +++
 templates/shortcodes/image_hover.html           | 50 ++++++++++++++++++++++
 templates/shortcodes/image_toggler.html         | 57 +++++++++++++++++++++++++
 templates/shortcodes/invertible_image.html      | 32 ++++++++++++++
 templates/shortcodes/mermaid.html               |  8 ++++
 templates/shortcodes/multilingual_quote.html    | 37 ++++++++++++++++
 templates/shortcodes/references.html            |  3 ++
 templates/shortcodes/remote_text.html           | 30 +++++++++++++
 templates/shortcodes/spoiler.html               | 13 ++++++
 templates/shortcodes/toc.html                   |  2 +
 templates/shortcodes/wide_container.html        |  3 ++
 18 files changed, 361 insertions(+)
 create mode 100644 templates/shortcodes/add_src_to_code_block.html
 create mode 100644 templates/shortcodes/admonition.html
 create mode 100644 templates/shortcodes/aside.html
 create mode 100644 templates/shortcodes/dimmable_image.html
 create mode 100644 templates/shortcodes/dual_theme_image.html
 create mode 100644 templates/shortcodes/force_text_direction.html
 create mode 100644 templates/shortcodes/full_width_image.html
 create mode 100644 templates/shortcodes/iine.html
 create mode 100644 templates/shortcodes/image_hover.html
 create mode 100644 templates/shortcodes/image_toggler.html
 create mode 100644 templates/shortcodes/invertible_image.html
 create mode 100644 templates/shortcodes/mermaid.html
 create mode 100644 templates/shortcodes/multilingual_quote.html
 create mode 100644 templates/shortcodes/references.html
 create mode 100644 templates/shortcodes/remote_text.html
 create mode 100644 templates/shortcodes/spoiler.html
 create mode 100644 templates/shortcodes/toc.html
 create mode 100644 templates/shortcodes/wide_container.html

(limited to 'templates/shortcodes')

diff --git a/templates/shortcodes/add_src_to_code_block.html b/templates/shortcodes/add_src_to_code_block.html
new file mode 100644
index 0000000..907e092
--- /dev/null
+++ b/templates/shortcodes/add_src_to_code_block.html
@@ -0,0 +1 @@
+<span class="code-source hidden" data-source="{{ src | safe }}"></span>
diff --git a/templates/shortcodes/admonition.html b/templates/shortcodes/admonition.html
new file mode 100644
index 0000000..3519527
--- /dev/null
+++ b/templates/shortcodes/admonition.html
@@ -0,0 +1,12 @@
+{%- set type = type | default(value="info") -%}
+{%- set title = title | default(value=type | upper) -%}
+{%- set icon = icon | default(value=type) -%}
+{%- set text = text | default(value=body) -%}
+
+<div class="admonition {{ type }}">
+    <div class="admonition-icon admonition-icon-{{ icon }}"></div>
+    <div class="admonition-content">
+        <strong class="admonition-title">{{ title | safe }}</strong>
+        {{ text | markdown | safe }}
+    </div>
+</div>
diff --git a/templates/shortcodes/aside.html b/templates/shortcodes/aside.html
new file mode 100644
index 0000000..ca337f9
--- /dev/null
+++ b/templates/shortcodes/aside.html
@@ -0,0 +1,5 @@
+{%- set text = text | default(value=body) -%}
+
+<aside {% if position %}data-position="{{ position }}"{% endif %}>
+    {{ text | markdown | safe }}
+</aside>
diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html
new file mode 100644
index 0000000..a72720c
--- /dev/null
+++ b/templates/shortcodes/dimmable_image.html
@@ -0,0 +1,31 @@
+{#- Determine image path based on whether the src is remote or local -#}
+{%- if src is starting_with("http") or raw_path -%}
+    {%- set image_url = src -%}
+{%- else -%}
+    {%- set colocated_path = page.colocated_path | default(value="") -%}
+    {%- set relative_path = colocated_path ~ src -%}
+    {%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%}
+
+    {#- Fallback to absolute path if relative path doesn't work -#}
+    {%- if not meta -%}
+        {%- set meta = get_image_metadata(path=src, allow_missing=true) -%}
+        {%- set image_url = get_url(path=src, cachebust=true) -%}
+    {%- else -%}
+        {%- set image_url = get_url(path=relative_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+
+{%- set class_list = "dimmable-image" -%}
+{%- if inline -%}
+    {%- set class_list = class_list ~ " inline" -%}
+{%- endif -%}
+
+{%- if full_width -%}
+    <div class="full-width">
+{%- endif -%}
+<img class="{{ class_list }}" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
+{%- if full_width -%}
+    </div>
+{%- endif -%}
diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html
new file mode 100644
index 0000000..5eadc09
--- /dev/null
+++ b/templates/shortcodes/dual_theme_image.html
@@ -0,0 +1,45 @@
+{%- set colocated_path = page.colocated_path | default(value="") -%}
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{%- set light_class_list = "img-light" -%}
+{%- set dark_class_list = "img-dark" -%}
+{%- if inline -%}
+    {%- set light_class_list = light_class_list ~ " inline" -%}
+    {%- set dark_class_list = dark_class_list ~ " inline" -%}
+{%- endif -%}
+
+{# Handling for light mode image #}
+{%- if light_src is starting_with("http") or raw_path -%}
+    {%- set light_image_url = light_src -%}
+{%- else -%}
+    {%- set relative_light_path = colocated_path ~ light_src -%}
+    {%- set light_meta = get_image_metadata(path=relative_light_path, allow_missing=true) -%}
+    {%- if not light_meta -%}
+        {%- set light_image_url = get_url(path=light_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set light_image_url = get_url(path=relative_light_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{# Handling for dark mode image #}
+{%- if dark_src is starting_with("http") or raw_path -%}
+    {%- set dark_image_url = dark_src -%}
+{%- else -%}
+    {%- set relative_dark_path = colocated_path ~ dark_src -%}
+    {%- set dark_meta = get_image_metadata(path=relative_dark_path, allow_missing=true) -%}
+    {%- if not dark_meta -%}
+        {%- set dark_image_url = get_url(path=dark_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set dark_image_url = get_url(path=relative_dark_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{%- if full_width -%}
+    <div class="full-width">
+{%- endif -%}
+<img class="{{ light_class_list }}" src="{{ light_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if light_meta.width %} width="{{ light_meta.width }}"{% endif %}{% if light_meta.height %} height="{{ light_meta.height }}" {% endif %}>
+<img class="{{ dark_class_list }}" src="{{ dark_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if dark_meta.width %} width="{{ dark_meta.width }}"{% endif %}{% if dark_meta.height %} height="{{ dark_meta.height }}" {% endif %}>
+{%- if full_width -%}
+    </div>
+{%- endif -%}
diff --git a/templates/shortcodes/force_text_direction.html b/templates/shortcodes/force_text_direction.html
new file mode 100644
index 0000000..79d9697
--- /dev/null
+++ b/templates/shortcodes/force_text_direction.html
@@ -0,0 +1,5 @@
+{%- set direction = direction | default(value="ltr") -%}
+
+<div data-force-text-direction="{{ direction }}">
+    {{ body | markdown | safe }}
+</div>
diff --git a/templates/shortcodes/full_width_image.html b/templates/shortcodes/full_width_image.html
new file mode 100644
index 0000000..a50bf10
--- /dev/null
+++ b/templates/shortcodes/full_width_image.html
@@ -0,0 +1,22 @@
+{#- Set paths based on whether the src is remote or local -#}
+{%- if src is starting_with("http") or raw_path -%}
+    {%- set image_url = src -%}
+{%- else -%}
+    {%- set colocated_path = page.colocated_path | default(value="") -%}
+    {%- set relative_path = colocated_path ~ src -%}
+    {%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%}
+
+    {#- Fallback to absolute path if relative path doesn't work -#}
+    {%- if not meta -%}
+        {%- set meta = get_image_metadata(path=src, allow_missing=true) -%}
+        {%- set image_url = get_url(path=src, cachebust=true) -%}
+    {%- else %}
+        {%- set image_url = get_url(path=relative_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+
+<div class="full-width">
+    <img src="{{ image_url }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}"{% endif %}{% if lazy_loading %} loading="lazy"{% endif %}/>
+</div>
diff --git a/templates/shortcodes/iine.html b/templates/shortcodes/iine.html
new file mode 100644
index 0000000..d37211d
--- /dev/null
+++ b/templates/shortcodes/iine.html
@@ -0,0 +1,5 @@
+{% set button_icon = icon | default(value="heart") %}
+{% set label = label | default(value="Like this post") %}
+{% set slug = slug | default(value=page.path) %}
+
+{% include "partials/iine_button.html" %}
diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html
new file mode 100644
index 0000000..443329b
--- /dev/null
+++ b/templates/shortcodes/image_hover.html
@@ -0,0 +1,50 @@
+{%- set colocated_path = page.colocated_path | default(value="") -%}
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{#- Determine the tag for container elements -#}
+{#- Necessary for inline images -#}
+{%- set tag = "div" -%}
+{%- if inline -%}
+    {%- set tag = "span" -%}
+{%- endif -%}
+
+{%- set img_class_list = "" -%}
+{%- if inline -%}
+    {%- set img_class_list = img_class_list ~ " inline" -%}
+{%- endif -%}
+
+{#- Direct or relative URL handling for default image -#}
+{%- if default_src is starting_with("http") or raw_path -%}
+    {%- set default_image_url = default_src -%}
+{%- else -%}
+    {%- set relative_default_path = colocated_path ~ default_src -%}
+    {%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%}
+    {%- if not default_meta -%}
+        {%- set default_image_url = get_url(path=default_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set default_image_url = get_url(path=relative_default_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{#- Direct or relative URL handling for hovered image -#}
+{%- if hovered_src is starting_with("http") or raw_path -%}
+    {%- set hovered_image_url = hovered_src -%}
+{%- else -%}
+    {%- set relative_hovered_path = colocated_path ~ hovered_src -%}
+    {%- set hovered_meta = get_image_metadata(path=relative_hovered_path, allow_missing=true) -%}
+    {%- if not hovered_meta -%}
+        {%- set hovered_image_url = get_url(path=hovered_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set hovered_image_url = get_url(path=relative_hovered_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+<{{ tag }} class="image-hover-container{% if full_width %} full-width{% endif %}">
+    <{{ tag }} class="image-default">
+        <img class="{{ img_class_list }}" src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
+    </{{ tag }}>
+    <{{ tag }} class="image-hovered">
+        <img class="{{ img_class_list }}" src="{{ hovered_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if hovered_alt %} alt="{{ hovered_alt }}"{% endif %}{% if hovered_meta.width %} width="{{ hovered_meta.width }}"{% endif %}{% if hovered_meta.height %} height="{{ hovered_meta.height }}"{% endif %}>
+    </{{ tag }}>
+</{{ tag }}>
diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html
new file mode 100644
index 0000000..991d5f5
--- /dev/null
+++ b/templates/shortcodes/image_toggler.html
@@ -0,0 +1,57 @@
+{# The `random_id` ensures that each instance of the shortcode has a "unique" id #}
+{# allowing individual interactive elements (like toggles) to function correctly. #}
+{# This avoids conflicts when multiple instances of the shortcode are used. #}
+{%- set random_id = get_random(end=100000) -%}
+{%- set colocated_path = page.colocated_path | default(value="") -%}
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{#- Determine the class for the images -#}
+{#- Necessary for inline images -#}
+{%- set tag = "div" -%}
+{%- if inline -%}
+    {%- set tag = "span" -%}
+{%- endif -%}
+
+{%- set img_class_list = "" -%}
+{%- if inline -%}
+    {%- set img_class_list = img_class_list ~ " inline" -%}
+{%- endif -%}
+
+{# Direct or relative URL handling for default image #}
+{%- if default_src is starting_with("http") or raw_path -%}
+    {%- set default_image_url = default_src -%}
+{%- else -%}
+    {%- set relative_default_path = colocated_path ~ default_src -%}
+    {%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%}
+    {%- if not default_meta -%}
+        {%- set default_image_url = get_url(path=default_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set default_image_url = get_url(path=relative_default_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{# Direct or relative URL handling for toggled image #}
+{%- if toggled_src is starting_with("http") or raw_path -%}
+    {%- set toggled_image_url = toggled_src -%}
+{%- else -%}
+    {%- set relative_toggled_path = colocated_path ~ toggled_src -%}
+    {%- set toggled_meta = get_image_metadata(path=relative_toggled_path, allow_missing=true) -%}
+    {%- if not toggled_meta -%}
+        {%- set toggled_image_url = get_url(path=toggled_src, cachebust=true) -%}
+    {%- else -%}
+        {%- set toggled_image_url = get_url(path=relative_toggled_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+<{{ tag }} class="image-toggler-container {% if full_width %}full-width{% endif %}">
+    <input type="checkbox" id="toggle-img-{{ random_id }}" class="image-toggler-toggle">
+    <label for="toggle-img-{{ random_id }}" class="image-label">
+        <{{ tag }} class="image-default">
+            <img class="{{ img_class_list }}" src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
+        </{{ tag }}>
+        <{{ tag }} class="image-toggled">
+            <img class="{{ img_class_list }}" src="{{ toggled_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if toggled_alt %} alt="{{ toggled_alt }}"{% endif %}{% if toggled_meta.width %} width="{{ toggled_meta.width }}"{% endif %}{% if toggled_meta.height %} height="{{ toggled_meta.height }}"{% endif %}>
+        </{{ tag }}>
+    </label>
+</{{ tag }}>
diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html
new file mode 100644
index 0000000..0e3c920
--- /dev/null
+++ b/templates/shortcodes/invertible_image.html
@@ -0,0 +1,32 @@
+{#- Determine if src is a remote URL or a local path -#}
+{%- if src is starting_with("http") or raw_path -%}
+    {%- set image_url = src -%}
+{%- else -%}
+    {%- set colocated_path = page.colocated_path | default(value="") -%}
+    {%- set relative_path = colocated_path ~ src -%}
+    {%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%}
+
+    {#- Fallback to absolute path if relative path doesn't work -#}
+    {%- if not meta -%}
+        {%- set meta = get_image_metadata(path=src, allow_missing=true) -%}
+        {%- set image_url = get_url(path=src, cachebust=true) -%}
+    {%- else %}
+        {%- set image_url = get_url(path=relative_path, cachebust=true) -%}
+    {%- endif -%}
+{%- endif -%}
+
+{%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{%- set class_list = "invertible-image" -%}
+{%- if inline -%}
+    {%- set class_list = class_list ~ " inline" -%}
+{%- endif -%}
+
+{%- if full_width -%}
+    <div class="full-width">
+{%- endif -%}
+<img class="{{ class_list }}" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
+{%- if full_width -%}
+    </div>
+{%- endif -%}
diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html
new file mode 100644
index 0000000..88bbdc4
--- /dev/null
+++ b/templates/shortcodes/mermaid.html
@@ -0,0 +1,8 @@
+{% set invertible = invertible | default(value=true) %}
+{% set full_width = full_width | default(value=false) %}
+<noscript>
+    <strong>⚠️ JavaScript is required to render the diagram.</strong>
+</noscript>
+<pre class="mermaid{% if invertible %} invertible-image{% endif %}{% if full_width %} full-width{% endif %}">
+    {{ body | safe }}
+</pre>
diff --git a/templates/shortcodes/multilingual_quote.html b/templates/shortcodes/multilingual_quote.html
new file mode 100644
index 0000000..7ea9849
--- /dev/null
+++ b/templates/shortcodes/multilingual_quote.html
@@ -0,0 +1,37 @@
+{%- import "macros/translate.html" as macros_translate -%}
+{# Load internationalisation data #}
+{%- set language_strings = load_data(path="i18n/" ~ lang ~ '.toml', required=false) -%}
+{%- if not language_strings -%}
+    {%- set language_strings = load_data(path="themes/tabi/i18n/" ~ lang ~ ".toml", required=false) -%}
+{%- endif -%}
+
+{%- set open_quote = macros_translate::translate(key="open_quotation_mark", default="“", language_strings=language_strings) -%}
+{%- set close_quote = macros_translate::translate(key="close_quotation_mark", default="”", language_strings=language_strings) -%}
+
+{#- The `random_id` ensures that each instance of the shortcode has a "unique" id -#}
+{#- allowing individual interactive elements (like toggles) to function correctly. -#}
+{#- This avoids conflicts when multiple instances of the shortcode are used. -#}
+{#- More context: https://github.com/welpo/tabi/issues/82 -#}
+{%- set random_id = get_random(end=100000) -%}
+
+<div class="quote-container">
+    <input type="checkbox" id="toggle-{{ random_id }}" class="quote-toggle">
+    <div class="quote">
+        <div class="translated">
+            <blockquote>
+                <p>{{ open_quote ~ translated ~ close_quote }}</p>
+                <p>{% if author %}— {{ author | safe }}{% endif %} <label for="toggle-{{ random_id }}" class="quote-label quote-label-original">
+                    ({{- macros_translate::translate(key="show_original_quote", default="Show original quote", language_strings=language_strings) -}})
+                </label></p>
+            </blockquote>
+        </div>
+        <div class="original">
+            <blockquote>
+                <p>{{ open_quote ~ original ~ close_quote }}</p>
+                <p>{% if author %}— {{ author | safe }}{% endif %} <label for="toggle-{{ random_id }}" class="quote-label quote-label-translate">
+                    ({{- macros_translate::translate(key="show_translation", default="Show translation", language_strings=language_strings) -}})
+                </label></p>
+            </blockquote>
+        </div>
+    </div>
+</div>
diff --git a/templates/shortcodes/references.html b/templates/shortcodes/references.html
new file mode 100644
index 0000000..1894479
--- /dev/null
+++ b/templates/shortcodes/references.html
@@ -0,0 +1,3 @@
+<div class="references">
+    {{ body | markdown | safe }}
+</div>
diff --git a/templates/shortcodes/remote_text.html b/templates/shortcodes/remote_text.html
new file mode 100644
index 0000000..70fd33a
--- /dev/null
+++ b/templates/shortcodes/remote_text.html
@@ -0,0 +1,30 @@
+{%- set start = start | default(value=1) -%}
+{%- set end = end | default(value=0) -%}
+
+{#- load_data uses different arguments based on whether it's a remote or local file -#}
+{%- if src is starting_with("http") -%}
+    {%- set response = load_data(url=src, format="plain") -%}
+{%- else -%}
+    {#- Try to load the file from a relative path -#}
+    {%- set colocated_path = page.colocated_path | default(value="") -%}
+    {%- set relative_path = colocated_path ~ src -%}
+    {%- set response = load_data(path=relative_path, format="plain", required=false) -%}
+    {#- If relative path fails, try absolute path -#}
+    {%- if not response -%}
+        {%- set response = load_data(path=src, format="plain") -%}
+    {%- endif -%}
+{%- endif -%}
+
+{%- set lines = response | trim_end | split(pat="\n") -%}
+
+{%- if start > 0 -%}
+    {%- set start = start - 1 -%}
+{%- endif -%}
+
+{%- if end == 0 or end > lines | length -%}
+    {%- set end = lines | length -%}
+{%- endif -%}
+
+{%- set lines = lines | slice(start=start, end=end) -%}
+
+{{- lines | join(sep="\n") | safe -}}
diff --git a/templates/shortcodes/spoiler.html b/templates/shortcodes/spoiler.html
new file mode 100644
index 0000000..ff9e695
--- /dev/null
+++ b/templates/shortcodes/spoiler.html
@@ -0,0 +1,13 @@
+{# The `random_id` ensures that each instance of the shortcode has a "unique" id #}
+{# allowing individual interactive elements (like toggles) to function correctly. #}
+{# This avoids conflicts when multiple instances of the shortcode are used. #}
+{# More context: https://github.com/welpo/tabi/issues/82 #}
+{%- set random_id = get_random(end=100000) -%}
+{%- set fixed_blur = fixed_blur | default(value=false) -%}
+
+<label class="spoiler-container{% if fixed_blur %} fixed-blur{% endif %}">
+    <input type="checkbox" id="spoiler-{{random_id}}" class="spoiler-toggle" role="button" aria-pressed="false" />
+    <span class="spoiler-content" title="reveal spoiler" tabindex="0">
+        <span class="spoiler-hidden">{{ text | markdown | trim_start_matches(pat="<p>") | trim_start_matches(pat="</p>") | safe }}</span>
+    </span>
+</label>
diff --git a/templates/shortcodes/toc.html b/templates/shortcodes/toc.html
new file mode 100644
index 0000000..8756586
--- /dev/null
+++ b/templates/shortcodes/toc.html
@@ -0,0 +1,2 @@
+{# Inserts special string to add the Table of Contents anywhere on a post #}
+<!-- toc -->
diff --git a/templates/shortcodes/wide_container.html b/templates/shortcodes/wide_container.html
new file mode 100644
index 0000000..6268e63
--- /dev/null
+++ b/templates/shortcodes/wide_container.html
@@ -0,0 +1,3 @@
+<div class="full-width">
+    {{ body | markdown | safe }}
+</div>
-- 
cgit v1.2.3