daudix/duckquill
1
2
Fork 0
Code Issues Pull requests Releases Activity

feat: Comments in config.toml
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
David Lapshin 2023-11-03 00:23:42 +03:00
parent 025eec166f
commit d7c2f206b9
5 changed files with 123 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
config.toml
View file

@ -22,16 +22,35 @@ highlight_themes_css = [
smart_punctuation = true
[extra]
# Sets browser theme color,
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800"
# If the favicon is GIF or not
animated_favicon = false
# Tera date format (not used in comments!),
# see https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html
# for all available variables.
date_format = "%d %B %Y"
# The name of the Git forge the site's source code is hosted on, used on the 404 page
hosting = "Forgejo"
# URL to issue tracker
issues_url = "https://git.exozy.me/daudix/duckquill/issues"
# URL to website's source code
source_url = "https://git.exozy.me/daudix/duckquill"
# Additional stylesheets; expects it to be in the ./static/ directory.
# If you are using Sass it will be compiled there anyway.
# stylesheets = [
# "YOUR_STYLE.css",
# "ALSO_YOUR_STYLE.css"
# ]
[extra.nav]
# Display RSS/Atom feed button in the nav
show_feed = true
# Show icons next to links in the nav
icons = true
# Links used in the nav; any icon from https://icons.getbootstrap.com
# can be used as the icon. The bi- prefix should not be added.
links = [
{url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
{url = "/demo", name = "Demo", icon = "car-front-fill"},
@ -39,13 +58,34 @@ links = [
]
[extra.footer]
# URL to the website without the https:// part, used for Johnvertisement leaderboard
johnvert_ref = "daudix.exozy.me"
# "© Title, YEAR" in the footer
show_copyright = true
# Johnvertisement in the footer
show_johnvert = false
# "Powered by Zola and Duckquill" in footer
show_powered_by = true
# Link to website source
show_source = true
# Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/75cd2a202de7a1026de1ea00a4ef1d5b2675c7ff/_config.yaml#L35-L74
#
# Mastodon-powered commenting.
# Values can be overridden in front-matter, e.g.
# for multi-author blogs or guest posts.
#
# 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/verified poster is;
# role may be expanded in the future (e.g. for moderation).
user = "Daudix"
# Optional; required to fetch more than 60 replies to any given blog post.
# Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE
# WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly
# recommended to use a dedicated bot/API account to create an application with
# scope read:statuses.
token = "jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ"

66
content/_index.md
View file

@ -55,7 +55,7 @@ theme = "duckquill"
## Options
Duckquill offers some configuration options to make it fit you better.
Duckquill offers some configuration options to make it fit you better; most options have pretty descriptive comments, so it should be easy to understand what they do.
### Custom stylesheets
@ -68,7 +68,7 @@ stylesheets = [
]
```
It expects the style to be in the `static` directory. If you are using Sass it will be compiled there anyway.
Additional stylesheets; expects it to be in the `static` directory. If you are using Sass it will be compiled there anyway.
If for some reason overridden class are not respected, try using `!important`. You can import styles from Duckquill using `@use "../themes/duckquill/sass/NEEDED_FILE.scss";`.
@ -83,6 +83,15 @@ First, change the primary color in `config.toml`:
primary_color = "#HEX_COLOR_CODE"
```
Then, add `custom.css` to additional stylesheets.
```toml
[extra]
stylesheets = [
"custom.css"
]
```
Then, paste the following code inside `sass/custom.scss` (inside your site, not the theme):
```sass
@ -118,58 +127,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
}
```
Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` inside Sass.
### `[extra]` variables:
| Variable | Description | Default |
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------|
| `primary_color` | Primary color used in some browsers set in metadata, see [ #primary-color ]( https://git.exozy.me/daudix/duckquill#primary-color ) | `#ff7800` |
| `animated_favicon` | Specify if the favicon are animated GIF | `false` |
| `date_format` | Allows setting custom date format in [ Tera ]( https://keats.github.io/tera ) format, all available variables are listed [ here ]( https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html ). Does not apply to comments | `%d %B %Y` |
| `hosting` | Where the website source are located, used on 404 page | `Forgejo` |
| `issues_url` | Link to site bug tracker, if present | `https://git.exozy.me/daudix/duckquill/issues` |
| `source_url` | Link to site source (not built site) | `https://git.exozy.me/daudix/duckquill` |
### `[extra.nav]` variables:
| Variable | Description | Default |
|-------------|--------------------------------------------------------------------------------------------------------------|-----------|
| `show_feed` | Whether to display "Feed" link | `true` |
| `icons` | Whether to display icons in navigation bar, when set to `false`, icons set in `links` won't display as well | `true` |
| `links` | Links used in navigation bar | see below |
The `links` are set like the following:
```toml
links = [
{url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
{url = "/demo", name = "Demo", icon = "car-front-fill"},
{url = "/blog", name = "Blog", icon = "journal-bookmark-fill"},
]
```
You can set any icon from [Bootstrap Icons](https://icons.getbootstrap.com) for the navigation items, simply add the `icon` variable and put icon name there, without `bi-` prefix, since it's added automatically :)
### `[extra.footer]` variables:
| Variable | Description | Default |
|-------------------|--------------------------------------------------------------------------------------------------------------------------|-------------------|
| `johnvert_ref` | Site URL without `https://` part or trailing slashes, e.g `example.org`. Works only if `show_johnvert` are set to `true` | `daudix.exozy.me` |
| `show_copyright` | Whether to display `© Duckquill, 2023` | `true` |
| `show_johnvert` | Whether to display [Johnvertisement](https://john.citrons.xyz) | `false` |
| `show_powered_by` | Whether to display `Powered by Zola and Duckquill` | `true` |
| `show_source` | Whether to display `Website source` link | `true` |
### `[extra.comments]` variables:
| Variable | Description | Default |
|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
| `host` | Mastodon home server, e.g `mstdn.social` | `mstdn.social` |
| `user` | Mastodon username | `Daudix` |
| `token` | Mastodon app token. Can be left empty, but in this case only first 60 comments will be loaded, instructions on how to get one are available [here](https://github.com/cassidyjames/cassidyjames.github.io/blob/47c449a0083113ea5be8d215beb6650ac64929e4/_config.yaml#L48-L52) | `jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ` |
These values are also used in the `<head>` for Mastodon verification.
Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` options inside Sass files.
## Test pages

123
sass/_main.scss
View file

@ -25,7 +25,7 @@ body {
body {
font-family: "Inter", sans-serif;
font-weight: 400;
line-height: 1.5;
line-height: 1.6;
color: var(--fg-color);
background-color: var(--bg-color);
// put footer at the bottom for short pages, such as the 404
@ -176,7 +176,7 @@ kbd {
font-family: "JetBrains Mono", monospace;
padding: 2px 6px;
border-radius: var(--rounded-corner-small);
background-color: var(--fg07);
background-color: var(--fg05);
box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
cursor: pointer;
}
@ -188,6 +188,66 @@ kbd:active {
transform: translateY(2px);
}
// CODE
code {
font-family: "JetBrains Mono", monospace;
padding: 2px 6px;
border-radius: var(--rounded-corner-small);
background-color: var(--fg05);
color: var(--red-fg);
}
pre code {
background-color: unset;
border-radius: unset;
color: unset;
padding: unset;
}
// apply monospace font to everything inside <pre>
pre * {
font-family: "JetBrains Mono", monospace;
}
pre {
line-height: normal; // unset line height
padding: 1rem;
margin: 1rem 0 1rem;
border-radius: var(--rounded-corner);
max-width: 100vw;
box-shadow: var(--shadow);
overflow: auto;
}
// the line numbers already provide some kind of left/right padding
pre[data-linenos] {
padding: 1rem 0;
}
pre table td {
padding: 0;
border: none;
}
// the line number cells
pre table td:nth-of-type(1) {
text-align: center;
user-select: none;
}
pre mark {
display: block;
background-color: var(--fg05);
color: var(--fg-color); // unset mark color from primary color to text color
border-radius: 0; // unset code block border radius
padding: 0; // unset mark padding
}
pre table {
width: 100%;
border-collapse: collapse;
}
mark {
padding: 2px 6px;
border-radius: var(--rounded-corner-small);
@ -234,7 +294,7 @@ table th {
table th,
table td {
padding: 0.5rem 1rem;
border: 1px solid var(--fg07);
border: 1px solid var(--fg05);
}
td,
@ -401,63 +461,6 @@ img:not(.no-hover):hover {
color: var(--fg-color);
}
// CODE
code {
font-family: "JetBrains Mono", monospace;
color: var(--red-fg);
}
pre code {
background-color: unset;
border-radius: unset;
color: unset;
padding: unset;
}
// apply monospace font to everything inside <pre>
pre * {
font-family: "JetBrains Mono", monospace;
}
pre {
line-height: normal; // unset line height
padding: 1rem;
margin: 1rem 0 1rem;
border-radius: var(--rounded-corner);
max-width: 100vw;
box-shadow: var(--shadow);
overflow: auto;
}
// the line numbers already provide some kind of left/right padding
pre[data-linenos] {
padding: 1rem 0;
}
pre table td {
padding: 0;
border: none;
}
// the line number cells
pre table td:nth-of-type(1) {
text-align: center;
user-select: none;
}
pre mark {
display: block;
background-color: var(--fg07);
color: var(--fg-color); // unset mark color from primary color to text color
border-radius: 0; // unset code block border radius
padding: 0; // unset mark padding
}
pre table {
width: 100%;
border-collapse: collapse;
}
// CRT
.crt {
margin: 1rem 0 1rem;

4
sass/_variables.scss
View file

@ -28,9 +28,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
--rounded-corner: 0.75rem;
// CUSTOM COLOR PALETTE
--fg03: rgba(0, 0, 0, 0.03);
--fg05: rgba(0, 0, 0, 0.05);
--fg07: rgba(0, 0, 0, 0.07);
--fg09: rgba(0, 0, 0, 0.09);
--fg50: rgba(0, 0, 0, 0.5);
@ -66,9 +64,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
--fg-color: var(--light2);
// CUSTOM COLOR PALETTE
--fg03: rgba(255, 255, 255, 0.03);
--fg05: rgba(255, 255, 255, 0.05);
--fg07: rgba(255, 255, 255, 0.07);
--fg09: rgba(255, 255, 255, 0.09);
--fg50: rgba(255, 255, 255, 0.5);

16
templates/includes/footer.html
View file

@ -1,21 +1,21 @@
<footer class="footer">
{% if config.extra.footer.show_copyright %}
<p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
<p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
{% endif %}
{% if config.extra.footer.show_source %}
<p><a href="{{ config.extra.source_url }}">Website source</a></p>
<p><a href="{{ config.extra.source_url }}">Website source</a></p>
{% endif %}
{% if config.extra.footer.show_powered_by %}
<p><small>Powered by <a href="https://www.getzola.org">Zola</a> and <a href="https://duckquill.exozy.me">Duckquill</a></small></p>
<p><small>Powered by <a href="https://www.getzola.org">Zola</a> and <a href="https://duckquill.exozy.me">Duckquill</a></small></p>
{% endif %}
{% if config.extra.footer.show_johnvert %}
<small>
<details><summary>Johnvertisement</summary>
<iframe class="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
</details>
</small>
<small>
<details><summary>Johnvertisement</summary>
<iframe class="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
</details>
</small>
{% endif %}
</footer>