feat: Comments in config.toml
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
025eec166f
commit
d7c2f206b9
40
config.toml
40
config.toml
|
@ -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"
|
||||
|
|
|
@ -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
123
sass/_main.scss
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in a new issue