diff options
| author | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
|---|---|---|
| committer | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
| commit | a2ea06d513a5802964f8f0ef5795cec7e548ed7b (patch) | |
| tree | 8afb58e3749d19bc46cffc6473f3059d647c515b /templates/shortcodes | |
Squashed 'themes/tabi-lean/' content from commit 95c8796
git-subtree-dir: themes/tabi-lean
git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c
Diffstat (limited to 'templates/shortcodes')
| -rw-r--r-- | templates/shortcodes/add_src_to_code_block.html | 1 | ||||
| -rw-r--r-- | templates/shortcodes/admonition.html | 12 | ||||
| -rw-r--r-- | templates/shortcodes/aside.html | 5 | ||||
| -rw-r--r-- | templates/shortcodes/dimmable_image.html | 31 | ||||
| -rw-r--r-- | templates/shortcodes/dual_theme_image.html | 45 | ||||
| -rw-r--r-- | templates/shortcodes/force_text_direction.html | 5 | ||||
| -rw-r--r-- | templates/shortcodes/full_width_image.html | 22 | ||||
| -rw-r--r-- | templates/shortcodes/iine.html | 5 | ||||
| -rw-r--r-- | templates/shortcodes/image_hover.html | 50 | ||||
| -rw-r--r-- | templates/shortcodes/image_toggler.html | 57 | ||||
| -rw-r--r-- | templates/shortcodes/invertible_image.html | 32 | ||||
| -rw-r--r-- | templates/shortcodes/mermaid.html | 8 | ||||
| -rw-r--r-- | templates/shortcodes/multilingual_quote.html | 37 | ||||
| -rw-r--r-- | templates/shortcodes/references.html | 3 | ||||
| -rw-r--r-- | templates/shortcodes/remote_text.html | 30 | ||||
| -rw-r--r-- | templates/shortcodes/spoiler.html | 13 | ||||
| -rw-r--r-- | templates/shortcodes/toc.html | 2 | ||||
| -rw-r--r-- | templates/shortcodes/wide_container.html | 3 |
18 files changed, 361 insertions, 0 deletions
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> |
