The big shortcode cleanup

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).

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

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

i18n/ar.toml

@@ -18,6 +18,8 @@ Coffee = "القهوة"
 all_tags = "انظر جميع العلامات"
 archived = "الأرشيف"
 author = "الكاتب"
+author_conjunction = " و "
+author_separator = "، "
 backlinks = "الروابط الخلفية"
 blog_post_author = "كاتب منشور المدونة"
 boosts_from = "$INSTANCE التعزيزات من"

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"

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"

i18n/fa.toml

@@ -18,6 +18,8 @@ Coffee = "قهوه"
 all_tags = "دیدن تمامی برچسب ها"
 archived = "بایگانی شده"
 author = "نویسنده"
+author_conjunction = " و "
+author_separator = "، "
 backlinks = "بک لینک ها"
 blog_post_author = "نویسنده‌ی این مطلب"
 boosts_from = "$INSTANCE تقویت از"

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"

i18n/ru.toml

@@ -22,6 +22,8 @@ Coffee = "Кофе"
 all_tags = "Показать все теги"
 archived = "Архив"
 author = "Автор"
+author_conjunction = " и "
+author_separator = ", "
 backlinks = "Обратные ссылки"
 blog_post_author = "Автор блог-поста"
 boosts_from = "Продвижения с $INSTANCE"

i18n/zh-Hans.toml

@@ -19,6 +19,8 @@ Coffee = "赞助"
 all_tags = "查看所有标签"
 archived = "归档"
 author = "作者"
+author_conjunction = "和"
+author_separator = "、"
 backlinks = "反向链接"
 blog_post_author = "博客作者"
 boosts_from = "来自 $INSTANCE 的转发"

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,
+	&.mastodon-embed {
-	&.vimeo-embed {
+		aspect-ratio: 3 / 4;
+		width: min(calc(var(--container-width) / 2), 100%);
+	}
+
+	&.vimeo-embed,
+	&.youtube-embed {
 		aspect-ratio: 16 / 9;
 	}
 

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;
 							}
 

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 -%}
-	{% if note %}note{% endif %}
+	{%- set alert_type = "note" -%}
-	{% if tip %}tip{% endif %}
+	{%- set alert_string = macros_translate::translate(key="note", default="Note", language_strings=language_strings) -%}
-	{% if important %}important{% endif %}
+{%- elif tip -%}
-	{% if warning %}warning{% endif %}
+	{%- set alert_type = "tip" -%}
-	{% if caution %}caution{% endif %}
+	{%- 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 -%}
+		{{- alert_string -}}
-			{{ 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 -%}
 	</p>
 	{{ body | markdown | safe }}
 </blockquote>

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="
+		<img class="{{ image_classes }}" {%- if alt -%}alt="{{ alt }}"{%- endif -%} src="{{ url_min }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
-			{% 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 -%}
-		/>
 	</a>
 {%- else -%}
-	<img class="
+	<img class="{{ image_classes }}" {%- if alt -%}alt="{{ alt }}"{%- endif -%} src="{{ url }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
-			{% 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 -%}
-		/>
 {%- endif -%}

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>

templates/shortcodes/video.html

@@ -1,12 +1,50 @@
-<video class="
+{# Video classes #}
-		{% if full %}full{% endif %}
+{%- set video_classes = [] -%}
-		{% if full_bleed %}full-bleed{% endif %}
+{%- if full -%}
-		{% if start %}start{% endif %}
+	{%- set video_classes = video_classes | concat(with="full") -%}
-		{% if end %}end{% endif %}
+{%- endif -%}
-		{% if pixels %}pixels{% endif %}
+{%- if full_bleed -%}
-		{% if transparent %}transparent{% endif %}
+	{%- set video_classes = video_classes | concat(with="full-bleed") -%}
-		{% if spoiler %}spoiler{% endif %}
+{%- endif -%}
-		{% if spoiler and solid %}solid{% endif %}
+{%- if start -%}
-	"
+	{%- set video_classes = video_classes | concat(with="start") -%}
-	{%- if alt -%}aria-title="{{ alt }}"{%- endif -%}
+{%- endif -%}
-	controls src="{{ url }}"></video>
+{%- 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>

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>

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>