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

Allow making posts "featured", tweak article list styles

Browse Source
This commit is contained in:
daudix
2024-06-22 06:29:52 +03:00
parent 6c092ad49d
commit b157f81a07
25 changed files with 290 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/blog/the-quill-of-duck/index.ar.md
View File

@ -5,4 +5,6 @@ description = "This is a Duckquill post example, this post has nothing but a bun
date = 2023-08-31
[taxonomies]
tags = ["Demo", "Test"]
[extra]
featured = true
+++

2
content/blog/the-quill-of-duck/index.md
View File

@ -7,11 +7,11 @@ updated = "2024-06-21"
[taxonomies]
tags = ["Demo", "Test"]
[extra]
archive = "This page is, in fact, not archived."
toc = true
disclaimer = """
See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. This page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
"""
featured = true
[extra.comments]
host = "toot.community"
user = "sungsphinx"

2
content/blog/the-quill-of-duck/index.ru.md
View File

@ -5,4 +5,6 @@ description = "This is a Duckquill post example, this post has nothing but a bun
date = 2023-08-31
[taxonomies]
tags = ["Demo", "Test"]
[extra]
featured = true
+++

1
i18n/ar.toml
View File

@ -24,6 +24,7 @@ copy_code = "نسخ الرمز"
disclaimer = "إخلاء المسؤولية"
drafted = "مسودة"
faves_from = "المفضلة من"
featured = "مميز"
feed = "موجز"
file_an_issue = "ملف مشكلة"
filter_by_tag = "تصفية حسب العلامة"

1
i18n/en.toml
View File

@ -25,6 +25,7 @@ copy_code = "Copy code"
disclaimer = "Disclaimer"
drafted = "Drafted"
faves_from = "Favorites from"
featured = "Featured"
feed = "Feed"
file_an_issue = "File an Issue"
filter_by_tag = "Filter by tag"

3
i18n/ru.toml
View File

@ -18,7 +18,7 @@ Demo = "Демо"
Repo = "Репо"
all_tags = "Показать все теги"
archived = "Архивировано"
archived = "Архив"
author = "Автор"
blog_post_author = "Автор блог-поста"
boosts_from = "Продвижения с"
@ -28,6 +28,7 @@ copy_code = "Скопировать код"
disclaimer = "Дисклеймер"
drafted = "Черновик"
faves_from = "Избранное с"
featured = "Подборка"
feed = "Лента"
file_an_issue = "Отправить Отчет об Ошибке"
filter_by_tag = "Фильтр по тегам"

139
sass/_article-list.scss
View File

@ -1,34 +1,143 @@
#article-list {
margin-top: 2rem;
article {
&.draft,
&.archive,
&.featured {
position: relative;
h3 {
margin-right: 8rem;
:root[dir="rtl"] & {
margin-right: unset;
margin-left: 8rem;
}
}
}
&.draft {
transform: scale(0.95);
opacity: 0.6;
transition: var(--transition-longer);
outline: 0.125rem dashed var(--fg-muted-2);
outline: 0.125rem dashed var(--fg-muted-4);
outline-offset: 1rem;
border-radius: 1rem;
border-radius: var(--rounded-corner);
border-top-right-radius: 1.125rem;
&:hover {
transform: scale(1);
opacity: 1;
outline: 0.125rem dashed transparent;
outline-offset: 0;
}
h3 a {
color: var(--fg-muted-4);
}
&:has(.draft-badge, .archive-badge) h3 {
margin-right: 7rem;
.tags a:hover {
background-color: var(--fg-muted-1);
color: var(--fg-muted-4);
}
:root[dir="rtl"] & {
margin-right: unset;
margin-left: 7rem;
border-top-right-radius: var(--rounded-corner);
border-top-left-radius: 1.125rem;
}
}
&.archive {
h3 a {
color: var(--purple-fg);
}
.tags a:hover {
background-color: var(--purple-bg);
color: var(--purple-fg);
}
}
&.featured {
transition: var(--transition-longer);
outline: 0.125rem dashed transparent;
outline-offset: 0;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
border-top-right-radius: 2.125rem;
background-color: var(--faves-bg);
padding: 1rem;
overflow: hidden;
&::before {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
-webkit-mask-size: cover;
position: absolute;
top: 50%;
right: -3rem;
transform: translateY(-50%) rotate(-10deg);
opacity: 0.5;
z-index: -1;
mask-image: $icon;
mask-size: cover;
transition: var(--transition-longer);
background-color: var(--star-featured);
width: 12rem;
height: 12rem;
content: "";
:root[dir="rtl"] & {
right: unset;
left: -3rem;
transform: translateY(-50%) rotate(10deg);
}
}
&:hover {
outline: 0.125rem dashed var(--faves-fg);
outline-offset: 0.5rem;
&::before {
transform: translateY(-50%) rotate(62deg) scale(1.5);
}
}
h3 {
margin-top: unset;
a {
color: var(--faves-fg);
}
}
.featured-badge {
top: 1rem;
right: 1rem;
:root[dir="rtl"] & {
left: 1rem;
}
}
.tags a:hover {
background-color: var(--faves-bg);
color: var(--faves-fg);
}
:root[dir="rtl"] & {
border-top-right-radius: var(--rounded-corner);
border-top-left-radius: 2.125rem;
&:hover::before {
transform: translateY(-50%) rotate(-62deg) scale(1.5);
}
}
}
.draft-badge,
.archive-badge {
.archive-badge,
.featured-badge {
position: absolute;
top: 0;
right: 0;
@ -73,6 +182,18 @@
background-color: var(--purple-fg);
}
}
.featured-badge {
background-color: var(--faves-bg);
color: var(--faves-fg);
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--faves-fg);
}
}
}
hr:last-of-type {

2
sass/_footer.scss
View File

@ -6,7 +6,7 @@
nav {
margin: 0 auto 2rem;
box-shadow: var(--edge-highlight);
border-radius: 22px;
border-radius: 1.375rem;
background-color: var(--fg-muted-1);
padding: 0.25rem;
width: fit-content;

4
sass/_last-updated.scss Normal file
View File

@ -0,0 +1,4 @@
.last-updated {
display: block;
margin-top: 1rem;
}

1
sass/_nav.scss
View File

@ -156,6 +156,7 @@
&#dropdown {
details {
position: relative;
box-shadow: unset;
border-radius: unset;
background-color: unset;
padding: 0;

10
sass/_tags.scss
View File

@ -2,9 +2,19 @@
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
&.inline {
margin-left: 0.25rem;
:root[dir="rtl"] & {
margin-right: 0.25rem;
margin-left: unset;
}
}
li {
display: flex;
transition: var(--transition);

1
sass/_typography.scss
View File

@ -147,6 +147,7 @@ details {
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
box-shadow: var(--edge-highlight);
&>summary {
cursor: pointer;

2
sass/_variables.scss
View File

@ -18,6 +18,7 @@
--boosts-fg: rgb(145, 65, 172);
--faves-bg: rgba(229, 165, 10, 0.1);
--faves-fg: rgb(229, 165, 10);
--star-featured: rgba(229, 165, 10, 0.15);
// VARIABLES
--active: 0.9;
@ -70,6 +71,7 @@
--boosts-fg: rgb(220, 138, 221);
--faves-bg: rgba(249, 240, 107, 0.1);
--faves-fg: rgb(249, 240, 107);
--star-featured: rgba(249, 240, 107, 0.05);
color-scheme: dark;
}

1
sass/style.scss
View File

@ -20,6 +20,7 @@
@use "hidden";
@use "icon";
@use "input";
@use "last-updated";
@use "media";
@use "nav";
@use "not-found";

4
templates/404.html
View File

@ -12,8 +12,8 @@
<div class="dialog-buttons">
<a onclick="window.history.go(-1)" class="inline-button">Go Back</a>
{% if config.extra.issues_url %}
{%- if config.extra.issues_url %}
<a class="inline-button colored external" href="{{ config.extra.issues_url }}">File an Issue</a>
{% endif %}
{%- endif %}
</div>
{% endblock content %}

22
templates/article.html
View File

@ -11,15 +11,6 @@
<time datetime="{{ page.date | date(format=' %+') }}" pubdate>
{{ page.date | date(format=date_format, locale=date_locale) }}
</time>
{%- if page.updated -%}
<span>•</span>
<time datetime="{{ page.updated | date(format=' %+') }}" pubdate>
<span>
{{ macros_translate::translate(key="updated", default="Last updated on", language_strings=language_strings) }}
{{ page.updated | date(format=date_format, locale=date_locale) }}
</span>
</time>
{%- endif -%}
{%- if page.authors -%}
<span>•</span>
<span>
@ -29,8 +20,7 @@
{%- endif -%}
{%- if page.taxonomies -%}
{%- for name, taxon in page.taxonomies -%}
<span>•</span>
<ul class="tags">
<ul class="tags inline">
{%- for item in taxon -%}
<li>
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">
@ -42,6 +32,16 @@
{%- endfor -%}
{%- endif -%}
</small>
{%- if page.updated -%}
<small class="last-updated">
<time datetime="{{ page.updated | date(format=' %+') }}" pubdate>
<span>
{{ macros_translate::translate(key="updated", default="Last updated on", language_strings=language_strings) }}
{{ page.updated | date(format=date_format, locale=date_locale) }}
</span>
</time>
</small>
{%- endif -%}
{%- endif -%}
{%- if page.extra.archive -%}

48
templates/article_list.html
View File

@ -16,47 +16,55 @@
</small>
<div id="article-list">
{%- for page in section.pages -%}
<article {% if page.draft %}class="draft"{% endif %}>
{%- for page in section.pages %}
<article class="
{% if page.draft %}draft{% endif %}
{% if page.extra.archive %}archive{% endif %}
{% if page.extra.featured %}featured{% endif %}">
<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
{%- if page.draft -%}
{%- if page.draft %}
<span class="draft-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) }}
</span>
{%- endif -%}
{%- if page.extra.archive -%}
{%- if page.extra.archive %}
<span class="archive-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) }}
</span>
{%- endif -%}
{%- if page.description -%}
{%- endif %}
{%- if page.extra.featured %}
<span class="featured-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) }}
</span>
{%- endif %}
{%- if page.description %}
{{ page.description | markdown | safe }}
{%- endif -%}
{%- if page.date -%}
{%- endif %}
{%- if page.date %}
<small>
<time datetime="{{ page.date | date(format='%+') }}" pubdate>
{{- page.date | date(format=date_format, locale=date_locale) -}}
{{ page.date | date(format=date_format, locale=date_locale) }}
</time>
{%- if page.authors -%}
{%- if page.authors %}
<span>•</span>
<span>{{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}: {{ page.authors[0] }}</span>
{%- endif %}
{%- if page.taxonomies -%}
{%- for name, taxon in page.taxonomies -%}
<span>•</span>
<ul class="tags">
{%-for item in taxon -%}
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
<ul class="tags inline">
{%-for item in taxon %}
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
{%- endfor -%}
{%- endfor %}
</ul>
{%- endfor -%}
{%- endif -%}
{%- endfor %}
{%- endif %}
</small>
{%- endif -%}
{%- endif %}
</article>
<hr>
{%- endfor -%}
{%- endfor %}
</div>
{% endblock content %}

4
templates/page.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
{%- if page.extra.archive -%}
{%- if page.extra.archive %}
<div class="statement-container archive">
<strong class="big">
<i class="icon"></i>
@ -9,6 +9,6 @@
</strong>
{{ page.extra.archive | markdown | safe }}
</div>
{%- endif -%}
{%- endif %}
{{ page.content | safe }}
{% endblock content %}

2
templates/partials/comments.html
View File

@ -1,4 +1,4 @@
{#- Taken from the https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ -#}
{#- Taken from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ -#}
{%- if page.extra.comments.host -%}
{%- set host = page.extra.comments.host -%}

40
templates/partials/footer.html
View File

@ -1,60 +1,60 @@
<footer id="site-footer">
{%- if config.extra.footer.links -%}
{%- if config.extra.footer.links %}
<nav>
<ul>
{%- for link in config.extra.footer.links -%}
{%- if link.url is matching('https?://') -%}
{%- for link in config.extra.footer.links %}
{%- if link.url is matching('https?://') %}
<li>
<a href="{{ link.url }}">
{{ macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) }}
</a>
</li>
{%- else -%}
{%- else %}
<li>
<a href="{{ get_url(path=link.url, lang=lang)}}">
{{ macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) }}
</a>
</li>
{%- endif -%}
{%- endfor -%}
{%- endif %}
{%- endfor %}
</ul>
</nav>
{%- endif -%}
{%- endif %}
{%- if config.extra.footer.show_copyright -%}
{%- if config.extra.footer.copyright -%}
{%- if config.extra.footer.show_copyright %}
{%- if config.extra.footer.copyright %}
{{ config.extra.footer.copyright | markdown | safe }}
{%- else -%}
{%- else %}
<p>&copy; {{ config.title }}, {{ now() | date(format="%Y") }}</p>
{%- endif -%}
{%- endif -%}
{%- endif %}
{%- endif %}
{%- if config.extra.source_url and config.extra.footer.show_source -%}
{%- if config.extra.source_url and config.extra.footer.show_source %}
<p>
<a href="{{ config.extra.source_url }}">
{{ macros_translate::translate(key="source", default="Website source", language_strings=language_strings) }}
</a>
</p>
{%- endif -%}
{%- endif %}
{%- if config.extra.footer.show_powered_by -%}
{%- if config.extra.footer.show_powered_by %}
<p>
<small>
{{ macros_translate::translate(key="powered_by", default="Powered by", language_strings=language_strings) }} <a class="link" href="https://www.getzola.org">Zola</a> {{ macros_translate::translate(key="powered_by_and", default="and", language_strings=language_strings) }} <a class="link" href="https://daudix.codeberg.page/duckquill">Duckquill</a>
</small>
</p>
{%- endif -%}
{%- endif %}
{%- if config.extra.footer.socials -%}
{%- if config.extra.footer.socials %}
<ul id="socials">
{%- for link in config.extra.footer.socials -%}
{%- for link in config.extra.footer.socials %}
<li>
<a href="{{ link.url | safe }}" rel="me" title="{{ link.name }}">
<i class="icon" style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
<span>{{ link.name }}</span>
</a>
</li>
{%- endfor -%}
{%- endfor %}
</ul>
{%- endif -%}
{%- endif %}
</footer>

10
templates/partials/head.html
View File

@ -23,7 +23,7 @@
{%- set stylesheets = stylesheets | concat(with=config.extra.stylesheets) %}
{%- endif %}
{%- if page.extra.stylesheets -%}
{%- if page.extra.stylesheets %}
{%- set stylesheets = stylesheets | concat(with=page.extra.stylesheets) %}
{%- elif section.extra.stylesheets %}
{%- set stylesheets = stylesheets | concat(with=section.extra.stylesheets) %}
@ -43,11 +43,13 @@
{%- endif %}
{%- if config.extra.show_copy_button %}
{%- set scripts = [ "copy-button.js" ] %}
{%- include "partials/copy_button.html" %}
{%- endif %}
{%- set scripts = [] %}
{%- if config.extra.scripts %}
{%- set scripts = scripts | concat(with=config.extra.scripts) %}
{%- set scripts = config.extra.scripts %}
{%- endif %}
{%- if page.extra.scripts %}
@ -56,9 +58,11 @@
{%- set scripts = scripts | concat(with=section.extra.scripts) %}
{%- endif %}
{%- if scripts | length > 0 %}
{%- for script in scripts %}
<script src="{{ get_url(path=script) | safe }}"></script>
{%- endfor %}
{%- endif %}
{%- if config.extra.comments %}
<link rel="me" href="https://{{ config.extra.comments.host }}/@{{ config.extra.comments.user }}" />

2
templates/partials/language_switcher.html
View File

@ -1,3 +1,5 @@
{#- Based on https://github.com/welpo/tabi/blob/main/templates/partials/language_switcher.html -#}
<li id="dropdown">
<details>
<summary>

16
templates/partials/nav.html
View File

@ -12,8 +12,8 @@
{{ config.title }}
</a>
</li>
{%- for link in config.extra.nav.links -%}
{%- if link.url is matching('https?://') -%}
{%- for link in config.extra.nav.links %}
{%- if link.url is matching('https?://') %}
<li>
<a href="{{ link.url }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe -%}
@ -22,7 +22,7 @@
{{ macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) }}
</a>
</li>
{%- else -%}
{%- else %}
<li>
<a href="{{ get_url(path=link.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
@ -31,12 +31,12 @@
{{ macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) }}
</a>
</li>
{%- endif -%}
{%- endif %}
{%- endfor -%}
{%- if config.languages | length > 0 -%}
{%- include "partials/language_switcher.html" -%}
{%- if config.languages | length > 0 %}
{%- include "partials/language_switcher.html" %}
{%- endif -%}
{%- if config.generate_feed and config.extra.nav.show_feed -%}
{%- if config.generate_feed and config.extra.nav.show_feed %}
<li id="feed">
<a href="{{ get_url(path=config.feed_filename) }}">
<i class="icon"></i>
@ -45,7 +45,7 @@
</span>
</a>
</li>
{%- endif -%}
{%- endif %}
</ul>
</nav>
</header>

1
templates/taxonomy_list.html
View File

@ -6,6 +6,7 @@
<small>{{ macros_translate::translate(key="tags", number=number_of_tags, default="$NUMBER tags", language_strings=language_strings) }}
</small>
<br />
<br />
<ul class="tags">
{%- for tag in terms -%}
<li><a href="{{ get_taxonomy_url(kind='tags', name=tag.name, lang=lang) }}"><span class="tag">{{ tag.name }}</span><span class="count">{{ tag.pages | length }}</span></a></li>

52
templates/taxonomy_single.html
View File

@ -15,49 +15,55 @@
</small>
<div id="article-list">
{%- for page in term.pages -%}
<article {% if page.draft %}class="draft"{% endif %}>
{%- for page in term.pages %}
<article class="
{% if page.draft %}draft{% endif %}
{% if page.extra.archive %}archive{% endif %}
{% if page.extra.featured %}featured{% endif %}">
<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
{%- if page.draft -%}
{%- if page.draft %}
<span class="draft-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) }}
</span>
{%- endif -%}
{%- if page.extra.archive -%}
{%- if page.extra.archive %}
<span class="archive-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) }}
</span>
{%- endif -%}
{%- endif %}
{%- if page.extra.featured %}
<span class="featured-badge">
<i class="icon"></i>
{{ macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) }}
</span>
{%- endif %}
{%- if page.description %}
{{ page.description | markdown | safe }}
{%- endif -%}
{%- if page.date -%}
{%- endif %}
{%- if page.date %}
<small>
<time datetime="{{ page.date | date(format='%+') }}" pubdate>
{{- page.date | date(format=date_format, locale=date_locale) -}}
{{ page.date | date(format=date_format, locale=date_locale) }}
</time>
{%- if page.authors -%}
{%- if page.authors %}
<span>•</span>
<span>
{{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}: {{ page.authors[0] }}
</span>
{%- endif -%}
{%- if page.taxonomies -%}
{%- for name, taxon in page.taxonomies -%}
<span>•</span>
<ul class="tags">
{%-for item in taxon -%}
<span>{{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}: {{ page.authors[0] }}</span>
{%- endif %}
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
<ul class="tags inline">
{%-for item in taxon %}
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
{%- endfor -%}
{%- endfor %}
</ul>
{%- endfor -%}
{%- endif -%}
{%- endfor %}
{%- endif %}
</small>
{%- endif -%}
{%- endif %}
</article>
<hr>
{%- endfor -%}
{%- endfor %}
</div>
{% endblock content %}