Some improvements to the config (breaking changes!)

- Remove support for per-page/section emoji favicon (breaking change!)
- Update copyright year
- Improve code comments in config
- Introduce a new configuration variable: locale; used for defining comment timestamp locale
- Fix code blocks having every other line being darker in some complex cases (unset leftover styles from "table")
- Fix code block "mark" having an edge highlight (leftover style from "mark")
- Use get_url for code block styles
- Always use png favicon as a fallback
- Get rid of transparency and roundness in apple-touch-icon (as recommended by 🤮pple)
This commit is contained in:
David Lapshin
2024-04-21 20:36:38 +03:00
parent 664bc2f987
commit 41ff1c4748
7 changed files with 42 additions and 38 deletions

View File

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2023 David "Daudix" Lapshin
Copyright (c) 2024 David "Daudix" Lapshin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

View File

@ -28,26 +28,29 @@ smart_punctuation = true
primary_color = "#ff7800"
# Same as primary_color, but with 20% opacity
primary_color_alpha = "rgba(255, 120, 0, 0.2)"
# Emoji favicon; can be set per-page or even section.
# Whether to use emoji as a favicon.
# Replace with an emoji wrapped in quotes.
emoji_favicon = false
# If the favicon is GIF or not
# Whether the favicon is an animated GIF or not
animated_favicon = false
# Tera date format (not used in comments).
# Tera Date format used when listing posts
# (post publication date, tag posts list...).
# Not used in comments.
# See https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html
date_format = "%d %B %Y"
# URL to issue tracker
# URL to website's issue tracker
issues_url = "https://codeberg.org/daudix/duckquill/issues"
# URL to website's source code
source_url = "https://codeberg.org/daudix/duckquill"
# Additional stylesheets; expects it to be in the "./static/" directory.
# If you are using Sass it will be compiled there anyway.
# If you are using Sass it will be generated there automatically.
# stylesheets = [
# "YOUR_STYLE.css",
# "ALSO_YOUR_STYLE.css"
# ]
[extra.nav]
# Display Atom/RSS feed button in the nav
# Whether to show Atom/RSS feed button in the nav
show_feed = true
# Links used in the nav.
# For local files use same link format as in Markdown,
@ -60,15 +63,16 @@ links = [
]
[extra.footer]
# URL to the website without the https:// part, used for Johnvertisement leaderboard
# URL to the website without the https:// part,
# used for Johnvertisement leaderboard.
johnvert_ref = "daudix.codeberg.page"
# "© Title, YEAR" in the footer
# Whether to show "© Title, YEAR"
show_copyright = true
# Marketing via "john" in the footer
# Whether to show marketing via "john"
show_johnvert = false
# "Powered by Zola and Duckquill" in footer
# Whether to show "Powered by Zola and Duckquill"
show_powered_by = true
# Link to website source
# Whether to show link to website source
show_source = true
# Based on https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
@ -80,9 +84,12 @@ show_source = true
# These variables are also used for Mastodon verification,
# the needed rel="me" link is set in the head based on these.
[extra.comments]
# Your Mastodon API host; this should be where you have an account
host = "mstdn.social"
# Used to determine who the original poster is
user = "Daudix"
# Display the QR code to Mastodon post
# Your Mastodon API host; instance that you have an account on
host = "social.treehouse.systems"
# Your Mastodon username; used to determine who the original poster is
user = "daudix"
# Whether to show the QR code to Mastodon post
show_qr = true
# BCP 47 locale used for comment timestamps;
# See https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
locale = "en-IE"

View File

@ -8,7 +8,6 @@
animation: flicker 0.25s alternate infinite;
margin: unset;
box-shadow: unset;
// Unset some <pre> stuff
background-color: unset;
padding: 1rem 1rem;
color: var(--primary-color);

View File

@ -210,6 +210,7 @@ pre {
mark {
display: block;
box-shadow: none;
border-radius: 0; // Unset code block border radius
background-color: var(--fg-muted-1);
padding: 0; // Unset mark padding
@ -223,6 +224,12 @@ pre {
width: 100%;
table-layout: auto;
overflow: auto;
tr {
&:nth-child(even) {
background-color: unset;
}
}
}
// The line numbers already provide some kind of left/right padding

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -185,7 +185,7 @@
permalink.setAttribute("rel", "external nofollow");
permalink.textContent = new Date(
status.created_at
).toLocaleString("en-IE", {
).toLocaleString("{{ config.extra.comments.locale }}", {
dateStyle: "long",
timeStyle: "short",
});

View File

@ -18,8 +18,8 @@
</title>
<link rel="stylesheet" type="text/css" href="{{ get_url(path='style.css') }}" />
<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="{{ get_url(path='syntax-theme-dark.css') }}" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="{{ get_url(path='syntax-theme-light.css') }}" media="(prefers-color-scheme: light)" />
{% if config.extra.stylesheets %}
{% for stylesheet in config.extra.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ get_url(path=stylesheet) }}" />
@ -33,26 +33,17 @@
}
</style>
{% if page.extra.emoji_favicon %}
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ page.extra.emoji_favicon }}</text></svg>">
<link rel="apple-touch-icon" type="image/svg+xml" sizes="180x180" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ page.extra.emoji_favicon }}</text></svg>">
{% elif section.extra.emoji_favicon %}
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ section.extra.emoji_favicon }}</text></svg>">
<link rel="apple-touch-icon" type="image/svg+xml" sizes="180x180" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ section.extra.emoji_favicon }}</text></svg>">
{% elif config.extra.emoji_favicon %}
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ config.extra.emoji_favicon }}</text></svg>">
<link rel="apple-touch-icon" type="image/svg+xml" sizes="180x180" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.9em%22 font-size=%2290%22>{{ config.extra.emoji_favicon }}</text></svg>">
{% elif config.extra.animated_favicon %}
<link rel="icon" type="image/gif" href="{{ get_url(path='favicon.gif') }}" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ get_url(path='apple-touch-icon.png') }}" />
{% else %}
<link rel="icon" type="image/png" href="{{ get_url(path='favicon.png') }}" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ get_url(path='apple-touch-icon.png') }}" />
{% endif %}
{% if config.extra.comments %}
<link rel="me" href="https://{{ config.extra.comments.host }}/@{{ config.extra.comments.user }}" />
{% endif %}
{% if config.extra.emoji_favicon %}
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ config.extra.emoji_favicon }}</text></svg>">
{% endif %}
{% if config.extra.animated_favicon %}
<link rel="icon" type="image/gif" href="{{ get_url(path='favicon.gif') }}" />
{% endif %}
<link rel="icon" type="image/png" href="{{ get_url(path='favicon.png') }}" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ get_url(path='apple-touch-icon.png') }}" />
<!-- Open Graph -->
<meta property="og:site_name" content="{{ config.title }}" />
<meta property="og:title" content="{%- if page.title -%}{{- page.title }} - {{ config.title -}}{%- elif section.title -%}{{- section.title }} - {{ config.title -}}{%- else -%}{{- config.title -}}{%- endif -%}" />