hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The big shortcode cleanup

Browse Source
This commit is contained in:
daudix
2024-10-17 17:00:35 +03:00
parent d60dfa8496
commit 8bf69a5d71
26 changed files with 331 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

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

2
config.toml
View File

@ -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

30
content/demo/index.md
View File

@ -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

2
i18n/ar.toml
View File

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

2
i18n/en.toml
View File

@ -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"

2
i18n/es.toml
View File

@ -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"

2
i18n/fa.toml
View File

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

2
i18n/ms.toml
View File

@ -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"

2
i18n/ru.toml
View File

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

2
i18n/zh-Hans.toml
View File

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

10
sass/_iframe.scss
View File

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

10
templates/partials/comments.html
View File

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

41
templates/shortcodes/alert.html
View File

@ -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>

63
templates/shortcodes/image.html
View File

@ -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 -%}

16
templates/shortcodes/mastodon.html Normal file
View File

@ -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>

62
templates/shortcodes/video.html
View File

@ -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>

6
templates/shortcodes/vimeo.html
View File

@ -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>

7
templates/shortcodes/youtube.html
View File

@ -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>