feat: Simplify <code> style, use tables instead of lists for available variables

This commit is contained in:
daudix-UFO
2023-10-30 21:12:26 +03:00
parent 0ebed6e34d
commit 71fdfc7557
4 changed files with 48 additions and 35 deletions

View File

@ -31,6 +31,7 @@ source_url = "https://git.exozy.me/daudix/duckquill"
[extra.nav] [extra.nav]
show_feed = true show_feed = true
icons = true
links = [ links = [
{url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"}, {url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
{url = "/demo", name = "Demo", icon = "car-front-fill"}, {url = "/demo", name = "Demo", icon = "car-front-fill"},

View File

@ -122,25 +122,30 @@ Set any color in `$primary-color` and reload, the primary color should be used n
### `[extra]` variables: ### `[extra]` variables:
- `primary_color`: Primary color used in some browsers set in metadata, see [#primary-color](https://git.exozy.me/daudix/duckquill#primary-color) | Variable | Description | Default |
- `animated_favicon`: Specify if the favicon are animated GIF (true, 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 | `primary_color` | Primary color used in some browsers set in metadata, see [ #primary-color ]( https://git.exozy.me/daudix/duckquill#primary-color ) | `#ff7800` |
- `hosting`: Where the website source are located, used on 404 page | `animated_favicon` | Specify if the favicon are animated GIF | `false` |
- `issues_url`: Link to site bug tracker, if present | `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` |
- `source_url`: Link to site source (not built site) | `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: ### `[extra.nav]` variables:
- `show_feed`: Whether to display "Feed" link | Variable | Description | Default |
- `nav_links`: Links used in navigation bar |-------------|--------------------------------------------------------------------------------------------------------------|-----------|
| `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 `nav_links` are set like the following: The `links` are set like the following:
```toml ```toml
[extra] links = [
nav_links = [ {url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
{url = "https://example.org", name = "Example"}, {url = "/demo", name = "Demo", icon = "car-front-fill"},
{url = "https://mstdn.social", name = "Mastodon", icon = "mastodon"}, {url = "/blog", name = "Blog", icon = "journal-bookmark-fill"},
] ]
``` ```
@ -148,17 +153,21 @@ You can set any icon from [Bootstrap Icons](https://icons.getbootstrap.com) for
### `[extra.footer]` variables: ### `[extra.footer]` variables:
- `johnvert_ref`: Site URL without `https://` part or trailing slashes, e.g `example.org`. Works only if `show_johnvert` are set to `true` | Variable | Description | Default |
- `show_copyright`: Whether to display `© Duckquill, 2023`. (true, false) |-------------------|--------------------------------------------------------------------------------------------------------------------------|-------------------|
- `show_johnvert`: Whether to display [Johnvertisement](https://john.citrons.xyz). (true, false) | `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_powered_by`: Whether to display `Powered by Zola and Duckquill`. (true, false) | `show_copyright` | Whether to display `© Duckquill, 2023` | `true` |
- `show_source`: Whether to display `Website source` link. (true, false) | `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: ### `[extra.comments]` variables:
- `host`: Mastodon home server, e.g `mstdn.social` | Variable | Description | Default |
- `user`: Mastodon username, e.g `Daudix` |----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
- `token`: Mastodon app token, e.g `jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ`. 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) | `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. These values are also used in the `<head>` for Mastodon verification.
@ -172,7 +181,7 @@ These values are also used in the `<head>` for Mastodon verification.
If you want to improve Duckquill in any way, feel free to open an issue, or even better, a pull request! I'm happy about every contribution! If you want to improve Duckquill in any way, feel free to open an issue, or even better, a pull request! I'm happy about every contribution!
The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me members can open issues and pull requests, there is two-way mirror at https://next.forgejo.org/daudix-UFO/duckquill, you can open issues and pull requests there just fine. The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duckquill), but since only exozy.me members can open issues and pull requests, there is two-way mirror at [next.forgejo.org/daudix-UFO/duckquill](https://next.forgejo.org/daudix-UFO/duckquill), you can open issues and pull requests there just fine.
## Credits ## Credits

View File

@ -25,7 +25,7 @@ body {
body { body {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
line-height: 1.6; line-height: 1.5;
color: var(--fg-color); color: var(--fg-color);
background-color: var(--bg-color); background-color: var(--bg-color);
// put footer at the bottom for short pages, such as the 404 // put footer at the bottom for short pages, such as the 404
@ -217,14 +217,14 @@ details {
// TABLES // TABLES
table { table {
display: block;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} max-width: 100vw;
table {
overflow: auto; overflow: auto;
word-break: normal; word-break: normal;
word-break: keep-all; word-break: keep-all; // For Firefox to horizontally scroll wider tables.
-webkit-overflow-scrolling: touch;
} }
table th { table th {
@ -234,7 +234,7 @@ table th {
table th, table th,
table td { table td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: 1px solid var(--fg05); border: 1px solid var(--fg07);
} }
td, td,
@ -404,9 +404,6 @@ img:not(.no-hover):hover {
// CODE // CODE
code { code {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
padding: 2px 6px;
border-radius: var(--rounded-corner-small);
background-color: var(--fg07);
color: var(--red-fg); color: var(--red-fg);
} }

View File

@ -1,16 +1,20 @@
<nav class="nav"> <nav class="nav">
<div class="nav-container"> <div class="nav-container">
<a href="{{ config.base_url }}"> <a href="{{ config.base_url }}">
{% if config.extra.nav.icons %}
<i class="bi bi-house-fill"></i> <i class="bi bi-house-fill"></i>
{% endif %}
{{ config.title }} {{ config.title }}
</a> </a>
<ul> <ul>
{% for link in config.extra.nav.links %} {% for link in config.extra.nav.links %}
<li> <li>
<a href="{{ link.url }}"> <a href="{{ link.url }}">
{% if config.extra.nav.icons %}
{% if link.icon %} {% if link.icon %}
<i class="bi bi-{{ link.icon }}"></i> <i class="bi bi-{{ link.icon }}"></i>
{% endif %} {% endif %}
{% endif %}
{{ link.name }} {{ link.name }}
</a> </a>
</li> </li>
@ -18,7 +22,9 @@
{% if config.extra.nav.show_feed %} {% if config.extra.nav.show_feed %}
<li> <li>
<a href="{{ config.base_url }}/atom.xml"> <a href="{{ config.base_url }}/atom.xml">
{% if config.extra.nav.icons %}
<i class="bi bi-rss-fill"></i> <i class="bi bi-rss-fill"></i>
{% endif %}
Feed Feed
</a> </a>
</li> </li>