From 8bf69a5d71e556f07dcfd43e02eb83861ea9136c Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Thu, 17 Oct 2024 17:00:35 +0300
Subject: [PATCH] The big shortcode cleanup

---
 CHANGELOG.md                              |  4 +
 config.toml                               |  2 +-
 content/demo/index.md                     | 30 ++++++-
 i18n/ar.toml                              |  2 +
 i18n/en.toml                              |  2 +
 i18n/es.toml                              |  2 +
 i18n/fa.toml                              |  2 +
 i18n/ms.toml                              |  2 +
 i18n/ru.toml                              |  2 +
 i18n/zh-Hans.toml                         |  2 +
 sass/_iframe.scss                         | 10 ++-
 templates/macros/rel_attributes.html      |  6 +-
 templates/macros/translate.html           | 98 +++++++++++------------
 templates/partials/comments.html          | 10 +--
 templates/partials/csp.html               | 72 ++++++++---------
 templates/partials/default_theme.html     |  6 +-
 templates/partials/description.html       |  6 +-
 templates/partials/favicon.html           | 22 ++---
 templates/partials/language_switcher.html | 76 +++++++++---------
 templates/partials/title.html             |  6 +-
 templates/shortcodes/alert.html           | 41 +++++-----
 templates/shortcodes/image.html           | 63 ++++++++-------
 templates/shortcodes/mastodon.html        | 16 ++++
 templates/shortcodes/video.html           | 62 +++++++++++---
 templates/shortcodes/vimeo.html           |  6 +-
 templates/shortcodes/youtube.html         |  7 +-
 26 files changed, 331 insertions(+), 226 deletions(-)
 create mode 100644 templates/shortcodes/mastodon.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f037b6..0c1f1d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,12 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `config.extra.show_backlinks` config variable for showing the backlinks button for linked articles in the article's quick actions.
 - Add `fediverse:creator` meta tag.
 - Add `title` class for use on `<strong>`.
+- Add missing translation strings for author separator and conjunctions.
+- Add shortcode for Mastodon post embedding.
 - Add support for Fuse.js search (#101).
+- Add the ability to set video attributes via shortcode.
 
 ### Changed
 
 - Make `emoji` class available outside of comments.
 - Make the code and styling for article cards much cleaner.
+- Make the shortcodes code much cleaner.
 - Remove top/bottom margin from the first/last element in `<aside>`.
 - Rename `show_read_time` to `show_reading_time`.
 - Use Zola's built-in reading time variable instead of the custom implementation (#102).
diff --git a/config.toml b/config.toml
index b5471a5..16f40ad 100644
--- a/config.toml
+++ b/config.toml
@@ -167,7 +167,7 @@ csp = [
 	{ directive = "media-src", domains = ["'self'", "https:", "data:"] },
 	{ directive = "script-src", domains = ["'self'", "'unsafe-inline'"] },
 	{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
-	{ directive = "frame-src", domains = ["https://player.vimeo.com", "https://www.youtube-nocookie.com"] },
+	{ directive = "frame-src", domains = ["https://player.vimeo.com", "https://www.youtube-nocookie.com", "https://toot.community"] },
 	{ directive = "connect-src", domains = ["https:"] },
 ]
 # Display outlines around all elements for debugging purposes
diff --git a/content/demo/index.md b/content/demo/index.md
index 3a38f58..7d34710 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -213,17 +213,25 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 For videos it's all the same except for a few differences: `no_hover` and `url_min` variables are not available.
 
+Additionally, the following [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes) can be set:
+
+- `autoplay`: Start playing the video automatically.
+- `controls`: Display video controls such as volume control, seeking and pause/resume.
+- `loop`: Play the video again once it ends.
+- `muted`: Turn off the audio by default.
+- `playsinline`: Prevent the video from playing in fullscreen by default (depends on the browser).
+
 ```jinja2
-{{/* video(url="video.webm", alt="This is a video") */}}
+{{/* video(url="video.webm", alt="This is a video", controls=true) */}}
 ```
 
 <figure>
-{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
+{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up", controls=true) }}
 <figcaption>WebM video example from MDN</figcaption>
 </figure>
 
 <figure>
-{{ video(url="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm", alt="Duckling preening", full_bleed=true) }}
+{{ video(url="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm", alt="Duckling preening", full_bleed=true, controls=true) }}
 <figcaption>Duckling preening</figcaption>
 </figure>
 
@@ -295,6 +303,22 @@ Available variables are:
 
 {{ vimeo(id="869483483") }}
 
+#### Mastodon
+
+Allows to embed a Mastodon post.
+
+Available variables are:
+
+- `host`: The instance on which the post resides. If not set, it will fallback to the one set in the `[extra.comments]` section of `config.toml`.
+- `user`: The poster. If not set, it will fallback to the one set in the `[extra.comments]` section of `config.toml`.
+- `id`: The ID of the post, usually at the end of the URL.
+
+```jinja2
+{{/* mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") */}}
+```
+
+{{ mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") }}
+
 ### Description List (`<dl>`)
 
 ```html
diff --git a/i18n/ar.toml b/i18n/ar.toml
index b335b41..7a9d18e 100644
--- a/i18n/ar.toml
+++ b/i18n/ar.toml
@@ -18,6 +18,8 @@ Coffee = "القهوة"
 all_tags = "انظر جميع العلامات"
 archived = "الأرشيف"
 author = "الكاتب"
+author_conjunction = " و "
+author_separator = "، "
 backlinks = "الروابط الخلفية"
 blog_post_author = "كاتب منشور المدونة"
 boosts_from = "$INSTANCE التعزيزات من"
diff --git a/i18n/en.toml b/i18n/en.toml
index 42ebd22..d5a365f 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -18,6 +18,8 @@ Coffee = "Coffee"
 all_tags = "See all tags"
 archived = "Archived"
 author = "Author"
+author_conjunction = " and "
+author_separator = ", "
 backlinks = "Backlinks"
 blog_post_author = "Blog post author"
 boosts_from = "Boosts from $INSTANCE"
diff --git a/i18n/es.toml b/i18n/es.toml
index ff165b5..cc12ea0 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -18,6 +18,8 @@ Coffee = "Café"
 all_tags = "Ver todas las etiquetas"
 archived = "Archivado"
 author = "Autor"
+author_conjunction = " y "
+author_separator = ", "
 backlinks = "Enlaces de retroceso"
 blog_post_author = "Autor del post"
 boosts_from = "Boosts de $INSTANCE"
diff --git a/i18n/fa.toml b/i18n/fa.toml
index 24ca2a7..e499579 100644
--- a/i18n/fa.toml
+++ b/i18n/fa.toml
@@ -18,6 +18,8 @@ Coffee = "قهوه"
 all_tags = "دیدن تمامی برچسب ها"
 archived = "بایگانی شده"
 author = "نویسنده"
+author_conjunction = " و "
+author_separator = "، "
 backlinks = "بک لینک ها"
 blog_post_author = "نویسنده‌ی این مطلب"
 boosts_from = "$INSTANCE تقویت از"
diff --git a/i18n/ms.toml b/i18n/ms.toml
index be8e408..065900e 100644
--- a/i18n/ms.toml
+++ b/i18n/ms.toml
@@ -18,6 +18,8 @@ Coffee = "Kopi"
 all_tags = "Lihat semua tag"
 archived = "Diarkibkan"
 author = "Pengarang"
+author_conjunction = " dan "
+author_separator = ", "
 backlinks = "Pautan balik"
 blog_post_author = "Pengarang siaran blog"
 boosts_from = "Galakkan dari $INSTANCE"
diff --git a/i18n/ru.toml b/i18n/ru.toml
index ebc45af..0049666 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -22,6 +22,8 @@ Coffee = "Кофе"
 all_tags = "Показать все теги"
 archived = "Архив"
 author = "Автор"
+author_conjunction = " и "
+author_separator = ", "
 backlinks = "Обратные ссылки"
 blog_post_author = "Автор блог-поста"
 boosts_from = "Продвижения с $INSTANCE"
diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml
index 366f10f..931b967 100644
--- a/i18n/zh-Hans.toml
+++ b/i18n/zh-Hans.toml
@@ -19,6 +19,8 @@ Coffee = "赞助"
 all_tags = "查看所有标签"
 archived = "归档"
 author = "作者"
+author_conjunction = "和"
+author_separator = "、"
 backlinks = "反向链接"
 blog_post_author = "博客作者"
 boosts_from = "来自 $INSTANCE 的转发"
diff --git a/sass/_iframe.scss b/sass/_iframe.scss
index 0b53300..f752e2e 100644
--- a/sass/_iframe.scss
+++ b/sass/_iframe.scss
@@ -1,4 +1,5 @@
 iframe {
+	display: block;
 	margin: 1rem auto;
 	box-shadow: var(--edge-highlight), var(--shadow);
 	border: none;
@@ -7,8 +8,13 @@ iframe {
 	width: 100%;
 	max-width: 100%;
 
-	&.youtube-embed,
-	&.vimeo-embed {
+	&.mastodon-embed {
+		aspect-ratio: 3 / 4;
+		width: min(calc(var(--container-width) / 2), 100%);
+	}
+
+	&.vimeo-embed,
+	&.youtube-embed {
 		aspect-ratio: 16 / 9;
 	}
 
diff --git a/templates/macros/rel_attributes.html b/templates/macros/rel_attributes.html
index a4c6d52..52a2be9 100644
--- a/templates/macros/rel_attributes.html
+++ b/templates/macros/rel_attributes.html
@@ -4,13 +4,13 @@
 
 {%- set rel_attributes = [] -%}
 {%- if config.markdown.external_links_target_blank -%}
-    {%- set rel_attributes = rel_attributes | concat(with="noopener")  -%}
+	{%- set rel_attributes = rel_attributes | concat(with="noopener") -%}
 {%- endif -%}
 {%- if config.markdown.external_links_no_follow -%}
-    {%- set rel_attributes = rel_attributes | concat(with="nofollow")  -%}
+	{%- set rel_attributes = rel_attributes | concat(with="nofollow") -%}
 {%- endif -%}
 {%- if config.markdown.external_links_no_referrer -%}
-    {%- set rel_attributes = rel_attributes | concat(with="noreferrer")  -%}
+	{%- set rel_attributes = rel_attributes | concat(with="noreferrer") -%}
 {%- endif -%}
 
 {# Return the array of rel attributes joined by a space #}
diff --git a/templates/macros/translate.html b/templates/macros/translate.html
index db9d873..20a89e6 100644
--- a/templates/macros/translate.html
+++ b/templates/macros/translate.html
@@ -18,57 +18,57 @@ NOTE: If the logic for pluralization is modified, it needs to be replicated on t
 Files: static/js/searchElasticlunr.js and its minified version at static/js/searchElasticlunr.min.js
 Function name: getPluralizationKey -#}
 {% macro translate(key, number=-1, language_strings="", default="", replace=true) %}
-    {%- set slavic_plural_languages = ["uk", "be", "bs", "hr", "ru", "sr"] -%}
+	{%- set slavic_plural_languages = ["uk", "be", "bs", "hr", "ru", "sr"] -%}
 
-    {%- set key_prefix = "" -%}
-    {#- `zero_` and `one_` are common cases. We handle "many" (plural) later, after language-specific pluralization -#}
-    {%- if number == 0 -%}
-        {%- set key_prefix = "zero_" -%}
-    {%- elif number == 1 -%}
-        {%- set key_prefix = "one_" -%}
-    {%- endif -%}
+	{%- set key_prefix = "" -%}
+	{#- `zero_` and `one_` are common cases. We handle "many" (plural) later, after language-specific pluralization -#}
+	{%- if number == 0 -%}
+		{%- set key_prefix = "zero_" -%}
+	{%- elif number == 1 -%}
+		{%- set key_prefix = "one_" -%}
+	{%- endif -%}
 
-    {#- Pluralization -#}
-    {%- if number != -1 and key_prefix == "" -%}
-        {#- Arabic -#}
-        {%- if lang == "ar" -%}
-            {%- set modulo = number % 100 -%}
-            {%- if number == 2 -%}
-                {%- set key_prefix = "two_" -%}
-            {%- elif modulo >= 3 and modulo <= 10 -%}
-                {%- set key_prefix = "few_" -%}
-            {%- else -%}
-                {%- set key_prefix = "many_" -%}
-            {%- endif -%}
-        {#- Slavic languages like Russian or Ukrainian -#}
-        {%- elif lang in slavic_plural_languages -%}
-            {%- set modulo10 = number % 10 -%}
-            {%- set modulo100 = number % 100 -%}
-            {%- if modulo10 == 1 and modulo100 != 11 -%}
-                {%- set key_prefix = "one_" -%}
-            {%- elif modulo10 >= 2 and modulo10 <= 4 -%}
-                {%- if modulo100 >= 12 and modulo100 <= 14 -%}
-                    {%- set key_prefix = "many_" -%}
-                {%- else -%}
-                    {%- set key_prefix = "few_" -%}
-                {%- endif -%}
-            {%- else -%}
-                {%- set key_prefix = "many_" -%}
-            {%- endif -%}
-        {%- else -%}
-            {#- Default pluralization -#}
-            {#- Zero and one are already handled -#}
-            {%- set key_prefix = "many_" -%}
-        {%- endif -%}
-    {%- endif -%}
+	{#- Pluralization -#}
+	{%- if number != -1 and key_prefix == "" -%}
+		{#- Arabic -#}
+		{%- if lang == "ar" -%}
+			{%- set modulo = number % 100 -%}
+			{%- if number == 2 -%}
+				{%- set key_prefix = "two_" -%}
+			{%- elif modulo >= 3 and modulo <= 10 -%}
+				{%- set key_prefix = "few_" -%}
+			{%- else -%}
+				{%- set key_prefix = "many_" -%}
+			{%- endif -%}
+		{#- Slavic languages like Russian or Ukrainian -#}
+		{%- elif lang in slavic_plural_languages -%}
+			{%- set modulo10 = number % 10 -%}
+			{%- set modulo100 = number % 100 -%}
+			{%- if modulo10 == 1 and modulo100 != 11 -%}
+				{%- set key_prefix = "one_" -%}
+			{%- elif modulo10 >= 2 and modulo10 <= 4 -%}
+				{%- if modulo100 >= 12 and modulo100 <= 14 -%}
+					{%- set key_prefix = "many_" -%}
+				{%- else -%}
+					{%- set key_prefix = "few_" -%}
+				{%- endif -%}
+			{%- else -%}
+				{%- set key_prefix = "many_" -%}
+			{%- endif -%}
+		{%- else -%}
+			{#- Default pluralization -#}
+			{#- Zero and one are already handled -#}
+			{%- set key_prefix = "many_" -%}
+		{%- endif -%}
+	{%- endif -%}
 
-    {#- Translated string -#}
-    {%- set final_key = key_prefix ~ key -%}
-    {%- set translated_text = language_strings[final_key] | default(value=default) | safe -%}
+	{#- Translated string -#}
+	{%- set final_key = key_prefix ~ key -%}
+	{%- set translated_text = language_strings[final_key] | default(value=default) | safe -%}
 
-    {#- Replace $NUMBER with the number -#}
-    {%- if replace -%}
-        {%- set translated_text = translated_text | replace(from="$NUMBER", to=number | as_str) -%}
-    {%- endif -%}
-    {{- translated_text -}}
+	{#- Replace $NUMBER with the number -#}
+	{%- if replace -%}
+		{%- set translated_text = translated_text | replace(from="$NUMBER", to=number | as_str) -%}
+	{%- endif -%}
+	{{- translated_text -}}
 {% endmacro translate %}
diff --git a/templates/partials/comments.html b/templates/partials/comments.html
index 399ad3e..5032ac6 100644
--- a/templates/partials/comments.html
+++ b/templates/partials/comments.html
@@ -10,9 +10,9 @@
 {%- endif -%}
 
 {%- if page.extra.comments.user -%}
-	{%- set username = page.extra.comments.user -%}
+	{%- set user = page.extra.comments.user -%}
 {%- else %}
-	{%- set username = config.extra.comments.user -%}
+	{%- set user = config.extra.comments.user -%}
 {%- endif -%}
 
 {%- set id = page.extra.comments.id -%}
@@ -28,7 +28,7 @@
 				decoding="async"
 				loading="lazy"
 			{%- endif -%}
-			src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}"
+			src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ user }}/{{ id }}"
 		/>
 	{%- endif -%}
 	<h2>{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}</h2>
@@ -37,7 +37,7 @@
 		<button id="load-comments" class="inline-button" onclick="loadComments()">
 			{{- macros_translate::translate(key="load_comments", default="Load Comments", language_strings=language_strings) -}}
 		</button>
-		<a class="inline-button colored external" href="https://{{ host }}/@{{ username }}/{{ id }}" rel="{{ rel_attributes }}">
+		<a class="inline-button colored external" href="https://{{ host }}/@{{ user }}/{{ id }}" rel="{{ rel_attributes }}">
 			{{- macros_translate::translate(key="open_post", default="Open Post", language_strings=language_strings) -}}
 		</a>
 	</div>
@@ -129,7 +129,7 @@
 							const isReply = status.in_reply_to_id !== "{{ id }}";
 
 							let op = false;
-							if (status.account.acct == "{{ username }}") {
+							if (status.account.acct == "{{ user }}") {
 								op = true;
 							}
 
diff --git a/templates/partials/csp.html b/templates/partials/csp.html
index 782f6a8..ac61faf 100644
--- a/templates/partials/csp.html
+++ b/templates/partials/csp.html
@@ -4,50 +4,50 @@
 content="default-src 'self'
 {%- if config.extra.csp -%}
 
-    {#- Initialise a base script-src directive -#}
-    {%- set script_src = "script-src 'self'" -%}
+	{#- Initialise a base script-src directive -#}
+	{%- set script_src = "script-src 'self'" -%}
 
-    {#- Initialise a base connect-src directive -#}
-    {%- set connect_src = "connect-src 'self'" -%}
+	{#- Initialise a base connect-src directive -#}
+	{%- set connect_src = "connect-src 'self'" -%}
 
-    {# Base logic for appending analytics domains #}
-    {%- if config.extra.goatcounter %}
-        {%- set goatcounter_host = config.extra.goatcounter.host | default(value='goatcounter.com') -%}
-        {%- set goatcounter_url = "https://" ~ config.extra.goatcounter.user ~ "." ~ goatcounter_host ~ "/count" %}
-        {%- set script_src = script_src ~ " " ~ goatcounter_url -%}
-        {%- set connect_src = connect_src ~ " " ~ goatcounter_url -%}
-    {%- endif %}
+	{# Base logic for appending analytics domains #}
+	{%- if config.extra.goatcounter %}
+		{%- set goatcounter_host = config.extra.goatcounter.host | default(value='goatcounter.com') -%}
+		{%- set goatcounter_url = "https://" ~ config.extra.goatcounter.user ~ "." ~ goatcounter_host ~ "/count" %}
+		{%- set script_src = script_src ~ " " ~ goatcounter_url -%}
+		{%- set connect_src = connect_src ~ " " ~ goatcounter_url -%}
+	{%- endif %}
 
-    {#- Append WebSocket for Zola serve mode -#}
-    {%- if config.mode == "serve" -%}
-        {%- set connect_src = connect_src ~ " ws:" -%}
-    {%- endif -%}
+	{#- Append WebSocket for Zola serve mode -#}
+	{%- if config.mode == "serve" -%}
+		{%- set connect_src = connect_src ~ " ws:" -%}
+	{%- endif -%}
 
-    {%- for domain in config.extra.csp -%}
-        {%- if domain.directive == "connect-src" -%}
-            {%- set configured_connect_src = domain.domains | join(sep=' ') -%}
-            {%- set_global connect_src = connect_src ~ " " ~ configured_connect_src  -%}
-            {%- continue -%}
-        {%- endif -%}
+	{%- for domain in config.extra.csp -%}
+		{%- if domain.directive == "connect-src" -%}
+			{%- set configured_connect_src = domain.domains | join(sep=' ') -%}
+			{%- set_global connect_src = connect_src ~ " " ~ configured_connect_src  -%}
+			{%- continue -%}
+		{%- endif -%}
 
-        {%- if domain.directive == "script-src" -%}
-            {%- set configured_script_src = domain.domains | join(sep=' ') -%}
-            {%- set_global script_src = script_src ~ " " ~ configured_script_src  -%}
-            {%- continue -%}
-        {%- endif -%}
+		{%- if domain.directive == "script-src" -%}
+			{%- set configured_script_src = domain.domains | join(sep=' ') -%}
+			{%- set_global script_src = script_src ~ " " ~ configured_script_src  -%}
+			{%- continue -%}
+		{%- endif -%}
 
-        {#- Handle directives that are not connect-src -#}
-        {{ domain.directive }} {{ domain.domains | join(sep=' ') -}}
+		{#- Handle directives that are not connect-src -#}
+		{{ domain.directive }} {{ domain.domains | join(sep=' ') -}}
 
-        {%- if not loop.last -%}
-        ;
-        {%- endif -%}
-    {%- endfor -%}
+		{%- if not loop.last -%}
+		;
+		{%- endif -%}
+	{%- endfor -%}
 
-    {#- Insert the generated connect-src -#}
-    {{ ";" ~ connect_src }}
+	{#- Insert the generated connect-src -#}
+	{{ ";" ~ connect_src }}
 
-    {#- Insert the generated script-src -#}
-    {{ ";" ~ script_src }}
+	{#- Insert the generated script-src -#}
+	{{ ";" ~ script_src }}
 
 {%- endif -%}">
diff --git a/templates/partials/default_theme.html b/templates/partials/default_theme.html
index 2362727..836b5ec 100644
--- a/templates/partials/default_theme.html
+++ b/templates/partials/default_theme.html
@@ -1,7 +1,7 @@
 {%- if page.extra.default_theme -%}
-    data-theme="{{ page.extra.default_theme }}"
+	data-theme="{{ page.extra.default_theme }}"
 {%- elif section.extra.default_theme -%}
-    data-theme="{{ section.extra.default_theme }}"
+	data-theme="{{ section.extra.default_theme }}"
 {%- elif config.extra.default_theme -%}
-    data-theme="{{ config.extra.default_theme }}"
+	data-theme="{{ config.extra.default_theme }}"
 {%- endif -%}
diff --git a/templates/partials/description.html b/templates/partials/description.html
index a108a7d..47c2499 100644
--- a/templates/partials/description.html
+++ b/templates/partials/description.html
@@ -1,7 +1,7 @@
 {%- if page.description -%}
-    {{- page.description }}
+	{{- page.description }}
 {%- elif section.description -%}
-    {{- section.description }}
+	{{- section.description }}
 {%- else -%}
-    {{- config.description -}}
+	{{- config.description -}}
 {%- endif -%}
diff --git a/templates/partials/favicon.html b/templates/partials/favicon.html
index 6cdc839..b4457f8 100644
--- a/templates/partials/favicon.html
+++ b/templates/partials/favicon.html
@@ -4,25 +4,25 @@
 {%- elif section.extra.favicon -%}
 	{{ get_url(path=section.colocated_path ~ section.extra.favicon) }}
 {%- else -%}
-    {{ get_url(path='favicon.png') }}
+	{{ get_url(path='favicon.png') }}
 {%- endif -%}" />
 
 <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="
 {%- if page.extra.apple_touch_icon -%}
 	{{ get_url(path=page.colocated_path ~ page.extra.apple_touch_icon) }}
 {%- elif section.extra.apple_touch_icon -%}
-    {{ get_url(path=section.colocated_path ~ section.extra.apple_touch_icon) }}
+	{{ get_url(path=section.colocated_path ~ section.extra.apple_touch_icon) }}
 {%- else -%}
-    {{ get_url(path='apple-touch-icon.png') }}
+	{{ get_url(path='apple-touch-icon.png') }}
 {%- endif -%}" />
 
 {%- if page.extra.emoji_favicon or section.extra.emoji_favicon or config.extra.emoji_favicon %}
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='-.07em' y='.89em' font-size='90'%3E
-    {%- if page.extra.emoji_favicon -%}
-        {{ page.extra.emoji_favicon | truncate(length=1, end='') }}
-    {%- elif section.extra.emoji_favicon -%}
-        {{ section.extra.emoji_favicon | truncate(length=1, end='') }}
-    {%- else -%}
-        {{ config.extra.emoji_favicon | truncate(length=1, end='') }}
-    {%- endif -%}%3C/text%3E%3C/svg%3E">
+	<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='-.07em' y='.89em' font-size='90'%3E
+	{%- if page.extra.emoji_favicon -%}
+		{{ page.extra.emoji_favicon | truncate(length=1, end='') }}
+	{%- elif section.extra.emoji_favicon -%}
+		{{ section.extra.emoji_favicon | truncate(length=1, end='') }}
+	{%- else -%}
+		{{ config.extra.emoji_favicon | truncate(length=1, end='') }}
+	{%- endif -%}%3C/text%3E%3C/svg%3E">
 {%- endif %}
diff --git a/templates/partials/language_switcher.html b/templates/partials/language_switcher.html
index 6c37e78..e78b37f 100644
--- a/templates/partials/language_switcher.html
+++ b/templates/partials/language_switcher.html
@@ -1,42 +1,42 @@
 {#- Based on https://github.com/welpo/tabi/blob/7b00ed1d9dca5c529d2816c5b6679bfe600d63fc/templates/partials/language_switcher.html -#}
 
 <li id="language-switcher">
-    <details class="closable">
-        <summary class="circle" title="{{ macros_translate::translate(key='language', default='Language', language_strings=language_strings) }}">
-            <i class="icon"></i>
-        </summary>
-        <ul>
-            {%- for lcode, ldetails in config.languages -%}
-                {#- Skip the current language to avoid linking to the current page -#}
-                {%- if lang == lcode -%}
-                    {%- continue -%}
-                {%- endif -%}
-                {#- Dynamically load the language strings for each language -#}
-                {%- set other_language_strings = load_data(path="i18n/" ~ lcode ~ ".toml", required=false) -%}
-                {%- if not other_language_strings -%}
-                    {%- set other_language_strings = load_data(path="themes/duckquill/i18n/" ~ lcode ~ ".toml", required=false) -%}
-                {%- endif -%}
-                {#- Use the loaded language strings to get the language name -#}
-                {% set language_name = macros_translate::translate(key="language_name", default=lcode, language_strings=other_language_strings) %}
-                {#- Check if the language code matches the default language -#}
-                {%- if lcode == config.default_language -%}
-                    {#- If it does, link to the root path (no language code in URL) -#}
-                    <li>
-                        <a lang="{{ lcode }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ language_name }}</a>
-                    </li>
-                    {#- Check if the current language is the default language -#}
-                    {#- If it is, append the language code to the base URL -#}
-                {%- elif lang == config.default_language -%}
-                    <li>
-                        <a lang="{{ lcode }}" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value="/") | safe }}">{{ language_name }}</a>
-                    </li>
-                {%- else -%}
-                    {#- If it's not, replace the current language code in the URL with the new one -#}
-                    <li>
-                        <a lang="{{ lcode }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{ language_name }}</a>
-                    </li>
-                {%- endif -%}
-            {%- endfor -%}
-        </ul>
-    </details>
+	<details class="closable">
+		<summary class="circle" title="{{ macros_translate::translate(key='language', default='Language', language_strings=language_strings) }}">
+			<i class="icon"></i>
+		</summary>
+		<ul>
+			{%- for lcode, ldetails in config.languages -%}
+				{#- Skip the current language to avoid linking to the current page -#}
+				{%- if lang == lcode -%}
+					{%- continue -%}
+				{%- endif -%}
+				{#- Dynamically load the language strings for each language -#}
+				{%- set other_language_strings = load_data(path="i18n/" ~ lcode ~ ".toml", required=false) -%}
+				{%- if not other_language_strings -%}
+					{%- set other_language_strings = load_data(path="themes/duckquill/i18n/" ~ lcode ~ ".toml", required=false) -%}
+				{%- endif -%}
+				{#- Use the loaded language strings to get the language name -#}
+				{% set language_name = macros_translate::translate(key="language_name", default=lcode, language_strings=other_language_strings) %}
+				{#- Check if the language code matches the default language -#}
+				{%- if lcode == config.default_language -%}
+					{#- If it does, link to the root path (no language code in URL) -#}
+					<li>
+						<a lang="{{ lcode }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ language_name }}</a>
+					</li>
+					{#- Check if the current language is the default language -#}
+					{#- If it is, append the language code to the base URL -#}
+				{%- elif lang == config.default_language -%}
+					<li>
+						<a lang="{{ lcode }}" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value="/") | safe }}">{{ language_name }}</a>
+					</li>
+				{%- else -%}
+					{#- If it's not, replace the current language code in the URL with the new one -#}
+					<li>
+						<a lang="{{ lcode }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{ language_name }}</a>
+					</li>
+				{%- endif -%}
+			{%- endfor -%}
+		</ul>
+	</details>
 </li>
diff --git a/templates/partials/title.html b/templates/partials/title.html
index 77d825d..e88d0ee 100644
--- a/templates/partials/title.html
+++ b/templates/partials/title.html
@@ -1,7 +1,7 @@
 {%- if page.title -%}
-    {{- page.title }} - {{ config.title -}}
+	{{- page.title }} - {{ config.title -}}
 {%- elif section.title -%}
-    {{- section.title }} - {{ config.title -}}
+	{{- section.title }} - {{ config.title -}}
 {%- else -%}
-    {{- config.title -}}
+	{{- config.title -}}
 {%- endif -%}
diff --git a/templates/shortcodes/alert.html b/templates/shortcodes/alert.html
index 2ff9ec4..db2c6f7 100644
--- a/templates/shortcodes/alert.html
+++ b/templates/shortcodes/alert.html
@@ -5,30 +5,27 @@
     {%- set language_strings = load_data(path="themes/duckquill/i18n/" ~ lang ~ ".toml", required=false) -%}
 {%- endif -%}
 
-<blockquote class="
-	{% if note %}note{% endif %}
-	{% if tip %}tip{% endif %}
-	{% if important %}important{% endif %}
-	{% if warning %}warning{% endif %}
-	{% if caution %}caution{% endif %}
-">
+{%- if note -%}
+	{%- set alert_type = "note" -%}
+	{%- set alert_string = macros_translate::translate(key="note", default="Note", language_strings=language_strings) -%}
+{%- elif tip -%}
+	{%- set alert_type = "tip" -%}
+	{%- set alert_string = macros_translate::translate(key="tip", default="Tip", language_strings=language_strings) -%}
+{%- elif important -%}
+	{%- set alert_type = "important" -%}
+	{%- set alert_string = macros_translate::translate(key="important", default="Important", language_strings=language_strings) -%}
+{%- elif warning -%}
+	{%- set alert_type = "warning" -%}
+	{%- set alert_string = macros_translate::translate(key="warning", default="Warning", language_strings=language_strings) -%}
+{%- elif caution -%}
+	{%- set alert_type = "caution" -%}
+	{%- set alert_string = macros_translate::translate(key="caution", default="Caution", language_strings=language_strings) -%}
+{%- endif -%}
+
+<blockquote class="{{ alert_type }}">
 	<p class="alert-title">
 		<i class="icon"></i>
-		{%- if note -%}
-			{{ macros_translate::translate(key="note", default="Note", language_strings=language_strings) }}
-		{%- endif -%}
-		{%- if tip -%}
-			{{ macros_translate::translate(key="tip", default="Tip", language_strings=language_strings) }}
-		{%- endif -%}
-		{%- if important -%}
-			{{ macros_translate::translate(key="important", default="Important", language_strings=language_strings) }}
-		{%- endif -%}
-		{%- if warning -%}
-			{{ macros_translate::translate(key="warning", default="Warning", language_strings=language_strings) }}
-		{%- endif -%}
-		{%- if caution -%}
-			{{ macros_translate::translate(key="caution", default="Caution", language_strings=language_strings) }}
-		{%- endif -%}
+		{{- alert_string -}}
 	</p>
 	{{ body | markdown | safe }}
 </blockquote>
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 2fda304..e4eeaeb 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -1,35 +1,38 @@
+{%- set image_classes = [] -%}
+{%- if full -%}
+	{%- set image_classes = image_classes | concat(with="full") -%}
+{%- endif -%}
+{%- if full_bleed -%}
+	{%- set image_classes = image_classes | concat(with="full-bleed") -%}
+{%- endif -%}
+{%- if start -%}
+	{%- set image_classes = image_classes | concat(with="start") -%}
+{%- endif -%}
+{%- if end -%}
+	{%- set image_classes = image_classes | concat(with="end") -%}
+{%- endif -%}
+{%- if pixels -%}
+	{%- set image_classes = image_classes | concat(with="pixels") -%}
+{%- endif -%}
+{%- if transparent -%}
+	{%- set image_classes = image_classes | concat(with="transparent") -%}
+{%- endif -%}
+{%- if no_hover -%}
+	{%- set image_classes = image_classes | concat(with="no-hover") -%}
+{%- endif -%}
+{%- if spoiler -%}
+	{%- set image_classes = image_classes | concat(with="spoiler") -%}
+{%- endif -%}
+{%- if spoiler and solid -%}
+	{%- set image_classes = image_classes | concat(with="solid") -%}
+{%- endif -%}
+
+{%- set image_classes = image_classes | join(sep=" ") -%}
+
 {%- if url_min -%}
 	<a href="{{ url }}">
-		<img class="
-			{% if full %}full{% endif %}
-			{% if full_bleed %}full-bleed{% endif %}
-			{% if start %}start{% endif %}
-			{% if end %}end{% endif %}
-			{% if pixels %}pixels{% endif %}
-			{% if transparent %}transparent{% endif %}
-			{% if no_hover %}no-hover{% endif %}
-			{% if spoiler %}spoiler{% endif %}
-			{% if spoiler and solid %}solid{% endif %}
-		"
-		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
-		src="{{ url_min }}"
-		{%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%}
-		/>
+		<img class="{{ image_classes }}" {%- if alt -%}alt="{{ alt }}"{%- endif -%} src="{{ url_min }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
 	</a>
 {%- else -%}
-	<img class="
-			{% if full %}full{% endif %}
-			{% if full_bleed %}full-bleed{% endif %}
-			{% if start %}start{% endif %}
-			{% if end %}end{% endif %}
-			{% if pixels %}pixels{% endif %}
-			{% if transparent %}transparent{% endif %}
-			{% if no_hover %}no-hover{% endif %}
-			{% if spoiler %}spoiler{% endif %}
-			{% if spoiler and solid %}solid{% endif %}
-		"
-		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
-		src="{{ url }}"
-		{%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%}
-		/>
+	<img class="{{ image_classes }}" {%- if alt -%}alt="{{ alt }}"{%- endif -%} src="{{ url }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
 {%- endif -%}
diff --git a/templates/shortcodes/mastodon.html b/templates/shortcodes/mastodon.html
new file mode 100644
index 0000000..b607739
--- /dev/null
+++ b/templates/shortcodes/mastodon.html
@@ -0,0 +1,16 @@
+{%- if host -%}
+	{%- set host = host -%}
+{%- else -%}
+	{%- set host = config.extra.comments.host -%}
+{%- endif -%}
+
+{%- if user -%}
+	{%- set user = user -%}
+{%- else -%}
+	{%- set user = config.extra.comments.user -%}
+{%- endif -%}
+
+<iframe
+	class="mastodon-embed"
+	src="https://{{ host }}/@{{ user }}/{{ id }}/embed">
+</iframe>
diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html
index aee0613..e161bce 100644
--- a/templates/shortcodes/video.html
+++ b/templates/shortcodes/video.html
@@ -1,12 +1,50 @@
-<video class="
-		{% if full %}full{% endif %}
-		{% if full_bleed %}full-bleed{% endif %}
-		{% if start %}start{% endif %}
-		{% if end %}end{% endif %}
-		{% if pixels %}pixels{% endif %}
-		{% if transparent %}transparent{% endif %}
-		{% if spoiler %}spoiler{% endif %}
-		{% if spoiler and solid %}solid{% endif %}
-	"
-	{%- if alt -%}aria-title="{{ alt }}"{%- endif -%}
-	controls src="{{ url }}"></video>
+{# Video classes #}
+{%- set video_classes = [] -%}
+{%- if full -%}
+	{%- set video_classes = video_classes | concat(with="full") -%}
+{%- endif -%}
+{%- if full_bleed -%}
+	{%- set video_classes = video_classes | concat(with="full-bleed") -%}
+{%- endif -%}
+{%- if start -%}
+	{%- set video_classes = video_classes | concat(with="start") -%}
+{%- endif -%}
+{%- if end -%}
+	{%- set video_classes = video_classes | concat(with="end") -%}
+{%- endif -%}
+{%- if pixels -%}
+	{%- set video_classes = video_classes | concat(with="pixels") -%}
+{%- endif -%}
+{%- if transparent -%}
+	{%- set video_classes = video_classes | concat(with="transparent") -%}
+{%- endif -%}
+{%- if spoiler -%}
+	{%- set video_classes = video_classes | concat(with="spoiler") -%}
+{%- endif -%}
+{%- if spoiler and solid -%}
+	{%- set video_classes = video_classes | concat(with="solid") -%}
+{%- endif -%}
+
+{%- set video_classes = video_classes | join(sep=" ") -%}
+
+{# Video attributes #}
+{%- set video_attributes = [] -%}
+{%- if autoplay -%}
+	{%- set video_attributes = video_attributes | concat(with="autoplay") -%}
+{%- endif -%}
+{%- if controls -%}
+	{%- set video_attributes = video_attributes | concat(with="controls") -%}
+{%- endif -%}
+{%- if loop -%}
+	{%- set video_attributes = video_attributes | concat(with="loop") -%}
+{%- endif -%}
+{%- if muted -%}
+	{%- set video_attributes = video_attributes | concat(with="muted") -%}
+{%- endif -%}
+{%- if playsinline -%}
+	{%- set video_attributes = video_attributes | concat(with="playsinline") -%}
+{%- endif -%}
+
+{%- set video_attributes = video_attributes | join(sep=" ") -%}
+
+<video class="{{ video_classes }}" src="{{ url }}" {%- if alt -%}aria-title="{{ alt }}"{%- endif -%} {{ video_attributes }}></video>
diff --git a/templates/shortcodes/vimeo.html b/templates/shortcodes/vimeo.html
index 6acd96c..4c5f027 100644
--- a/templates/shortcodes/vimeo.html
+++ b/templates/shortcodes/vimeo.html
@@ -1,4 +1,6 @@
-<iframe class="vimeo-embed"
+<iframe
+    class="vimeo-embed"
     src="https://player.vimeo.com/video/{{ id }}{% if autoplay %}?autoplay=1{% endif %}"
     allow="autoplay; fullscreen; picture-in-picture"
-    allowfullscreen></iframe>
+    allowfullscreen>
+</iframe>
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
index 083fd58..45fdea0 100644
--- a/templates/shortcodes/youtube.html
+++ b/templates/shortcodes/youtube.html
@@ -1,5 +1,6 @@
-<iframe class="youtube-embed"
+<iframe
+	class="youtube-embed"
 	src="https://www.youtube-nocookie.com/embed/{{ id }}{% if autoplay %}?autoplay=1{% endif %}{% if autoplay and start %}&start={{ start }}{% elif start %}?start={{ start }}{% endif %}"
-	title="YouTube video player"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-	referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+	referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+</iframe>