1 files changed, 37 insertions, 0 deletions
diff --git a/themes/tabi-lean/templates/shortcodes/multilingual_quote.html b/themes/tabi-lean/templates/shortcodes/multilingual_quote.html
new file mode 100644
index 0000000..7ea9849
--- /dev/null
+++ b/themes/tabi-lean/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>