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

Some improvements to the config (breaking changes!)

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

39
config.toml
View File

@ -28,26 +28,29 @@ smart_punctuation = true
primary_color = "#ff7800" primary_color = "#ff7800"
# Same as primary_color, but with 20% opacity # Same as primary_color, but with 20% opacity
primary_color_alpha = "rgba(255, 120, 0, 0.2)" 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 emoji_favicon = false
# If the favicon is GIF or not # Whether the favicon is an animated GIF or not
animated_favicon = false 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 # See https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html
date_format = "%d %B %Y" date_format = "%d %B %Y"
# URL to issue tracker # URL to website's issue tracker
issues_url = "https://codeberg.org/daudix/duckquill/issues" issues_url = "https://codeberg.org/daudix/duckquill/issues"
# URL to website's source code # URL to website's source code
source_url = "https://codeberg.org/daudix/duckquill" source_url = "https://codeberg.org/daudix/duckquill"
# Additional stylesheets; expects it to be in the "./static/" directory. # 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 = [ # stylesheets = [
# "YOUR_STYLE.css", # "YOUR_STYLE.css",
# "ALSO_YOUR_STYLE.css" # "ALSO_YOUR_STYLE.css"
# ] # ]
[extra.nav] [extra.nav]
# Display Atom/RSS feed button in the nav # Whether to show Atom/RSS feed button in the nav
show_feed = true show_feed = true
# Links used in the nav. # Links used in the nav.
# For local files use same link format as in Markdown, # For local files use same link format as in Markdown,
@ -60,15 +63,16 @@ links = [
] ]
[extra.footer] [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" johnvert_ref = "daudix.codeberg.page"
# "© Title, YEAR" in the footer # Whether to show "© Title, YEAR"
show_copyright = true show_copyright = true
# Marketing via "john" in the footer # Whether to show marketing via "john"
show_johnvert = false show_johnvert = false
# "Powered by Zola and Duckquill" in footer # Whether to show "Powered by Zola and Duckquill"
show_powered_by = true show_powered_by = true
# Link to website source # Whether to show link to website source
show_source = true show_source = true
# Based on https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ # 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, # These variables are also used for Mastodon verification,
# the needed rel="me" link is set in the head based on these. # the needed rel="me" link is set in the head based on these.
[extra.comments] [extra.comments]
# Your Mastodon API host; this should be where you have an account # Your Mastodon API host; instance that you have an account on
host = "mstdn.social" host = "social.treehouse.systems"
# Used to determine who the original poster is # Your Mastodon username; used to determine who the original poster is
user = "Daudix" user = "daudix"
# Display the QR code to Mastodon post # Whether to show the QR code to Mastodon post
show_qr = true 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"

1
sass/_crt.scss
View File

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

7
sass/_main.scss
View File

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

BIN
static/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
templates/partials/comments.html
View File

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

29
templates/partials/head.html
View File

@ -18,8 +18,8 @@
</title> </title>
<link rel="stylesheet" type="text/css" href="{{ get_url(path='style.css') }}" /> <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="{{ get_url(path='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-light.css') }}" media="(prefers-color-scheme: light)" />
{% if config.extra.stylesheets %} {% if config.extra.stylesheets %}
{% for stylesheet in config.extra.stylesheets %} {% for stylesheet in config.extra.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ get_url(path=stylesheet) }}" /> <link rel="stylesheet" type="text/css" href="{{ get_url(path=stylesheet) }}" />
@ -33,26 +33,17 @@
} }
</style> </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 %} {% if config.extra.comments %}
<link rel="me" href="https://{{ config.extra.comments.host }}/@{{ config.extra.comments.user }}" /> <link rel="me" href="https://{{ config.extra.comments.host }}/@{{ config.extra.comments.user }}" />
{% endif %} {% 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 --> <!-- Open Graph -->
<meta property="og:site_name" content="{{ config.title }}" /> <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 -%}" /> <meta property="og:title" content="{%- if page.title -%}{{- page.title }} - {{ config.title -}}{%- elif section.title -%}{{- section.title }} - {{ config.title -}}{%- else -%}{{- config.title -}}{%- endif -%}" />