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

A bunch of breaking changes for no reason except for "I didn't like it"

Browse Source 
I mean, this release has breaking changes anyway, why not break all the
stuff I wanted to break?
This commit is contained in:
daudix
2024-09-14 03:31:25 +03:00
parent 1722b95bea
commit a1946ae0b2
23 changed files with 121 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -30,8 +30,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
- **[BREAKING]** Change the way `--bg-color` works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
- **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`.
- **[BREAKING]** Change the way `--bg-color` CSS variable works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
- **[BREAKING]** Rename `--primary-color` CSS variable to `--accent-color`.
- **[BREAKING]** Rename `config.extra.nav.links.sublinks` to `config.extra.nav.links.menu`
- **[BREAKING]** Rename `config.extra.primary_color` and `config.extra.primary_color_dark` config variables to `config.extra.accent_color` and `config.extra.accent_color_dark`.
- **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`. Front matter variables are renamed as well.
- Allow enabling table of contents on all pages and sections except for the homepage.
- Allow opening original comment attachment by clicking on it.
- Allow overriding the `body` block of `base.html.

8
config.toml
View File

@ -65,12 +65,12 @@ taxonomies = [{ name = "tags", feed = true }]
#
# Sets theme and browser theme color.
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800"
accent_color = "#ff7800"
# Ditto but for the dark theme.
# If not set regular variant will be used.
primary_color_dark = "#ffa348"
accent_color_dark = "#ffa348"
# Whether to fix low contrast in text selection, checkboxes, etc.
# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
# Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow.
#
# fix_contrast = true
#
@ -128,7 +128,7 @@ show_repo = true
# i.e. "@/blog/_index.md".
# See https://www.getzola.org/documentation/content/linking/#internal-links
links = [
{ name = "Links", sublinks = [
{ name = "Links", menu = [
{ url = "@/blog/_index.md", name = "Blog" },
{ url = "@/demo/index.md", name = "Demo" },
{ url = "@/tricks/index.md", name = "Tricks" },

10
content/_index.md
View File

@ -25,8 +25,8 @@ Some of the features Duckquill has to offer:
- Lightweight by default, powerful when needed; no JavaScript is used by default.
- Privacy respecting analytics using [GoatCounter](https://www.goatcounter.com), with support for self-hosting.
- Estimated read time of the post; put away those with short attention spans.
- Everything is tinted with the user-defined primary color for a pleasant look.
- Light/dark/system theme switcher (for some reason everyone likes these).
- Everything is tinted with the user-defined accent color for a pleasant look.
- GitHub-style alerts. Yes, they're pretty, but don't overuse them.
- Post banners; they're even used in the social media cards!
- YouTube/Vimeo shortcodes for easy video embedding.
@ -159,20 +159,20 @@ styles = [
]
```
### Primary Color
### Accent Color
Duckquill respects chosen primary color everywhere. To use your own, simply change the primary color in `config.toml`:
Duckquill respects chosen accent color everywhere. To use your own, simply change it in `config.toml`:
```toml
[extra]
primary_color = "#3584e4"
accent_color = "#3584e4"
```
Additionally, you can set a separate color for dark mode:
```toml
[extra]
primary_color_dark = "#ff7800"
accent_color_dark = "#ff7800"
```
### Favicon

24
content/demo/index.md
View File

@ -645,7 +645,7 @@ URL anchor `#solid` can be used for this as well.
<!-- For the demo purposes only -->
<div id="color-picker-container">
<small>Primary color:</small>
<small>Accent color:</small>
<br />
<input id="color-picker-light" type="color" value="#ff7800" />
<label for="color-picker-light">Light theme</label>
@ -713,21 +713,21 @@ URL anchor `#solid` can be used for this as well.
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
let primaryColorLight = colorPickerLight.value;
let primaryColorDark = colorPickerDark.value;
let accentColorLight = colorPickerLight.value;
let accentColorDark = colorPickerDark.value;
colorPickerLight.addEventListener("input", updatePrimaryColorLight);
colorPickerDark.addEventListener("input", updatePrimaryColorDark);
colorPickerLight.addEventListener("input", updateAccentColorLight);
colorPickerDark.addEventListener("input", updateAccentColorDark);
contrastCheckboxLight.addEventListener("change", updateStyles);
contrastCheckboxDark.addEventListener("change", updateStyles);
function updatePrimaryColorLight() {
primaryColorLight = colorPickerLight.value;
function updateAccentColorLight() {
accentColorLight = colorPickerLight.value;
updateStyles();
}
function updatePrimaryColorDark() {
primaryColorDark = colorPickerDark.value;
function updateAccentColorDark() {
accentColorDark = colorPickerDark.value;
updateStyles();
}
@ -745,14 +745,14 @@ URL anchor `#solid` can be used for this as well.
let styles = `
:root {
--primary-color: ${primaryColorLight};
--accent-color: ${accentColorLight};
}
[data-theme="dark"] {
--primary-color: ${primaryColorDark};
--accent-color: ${accentColorDark};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark};
--accent-color: ${accentColorDark};
}
}
`;

10
sass/_article-list.scss
View File

@ -14,12 +14,12 @@
border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem;
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 1rem;
overflow: hidden;
&:hover {
outline-color: var(--primary-color);
outline-color: var(--accent-color);
outline-offset: 0.5rem;
}
@ -36,11 +36,11 @@
justify-content: flex-end;
a {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
}

4
sass/_buttons.scss
View File

@ -44,11 +44,11 @@ button.inline-button {
&.colored {
box-shadow: none;
background-color: transparent;
color: var(--primary-color);
color: var(--accent-color);
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
}
}
}

2
sass/_code.scss
View File

@ -62,7 +62,7 @@ pre {
border-radius: 0; // Unset code block border radius
background-color: var(--fg-muted-1);
padding: 0; // Unset mark padding
color: var(--fg-color); // Unset mark color from primary color to text color
color: var(--fg-color); // Unset mark color from accent color to text color
}
// The line numbers already provide some kind of left/right padding

14
sass/_comments.scss
View File

@ -26,7 +26,7 @@
margin-block-start: 2rem;
#load-comments {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
background-size: 200%;
background-color: transparent;
@ -140,12 +140,12 @@
}
&.op {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding-inline-start: 0.625rem;
color: var(--primary-color);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
&::before {
@ -163,7 +163,7 @@
mask-size: cover;
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--primary-color);
background-color: var(--accent-color);
width: 0.75rem;
height: 0.75rem;
content: "";
@ -195,13 +195,13 @@
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
line-height: 1.25;
text-decoration: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}

20
sass/_crt.scss
View File

@ -2,23 +2,23 @@
margin: 1rem 0 1rem;
box-shadow:
var(--edge-highlight),
0 0 0 0.0625rem var(--primary-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
0 0 0 0.0625rem var(--accent-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
border-radius: var(--rounded-corner);
background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black),
color-mix(in srgb, var(--primary-color) 10%, black) 80%,
color-mix(in srgb, var(--primary-color) 5%, black));
background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black),
color-mix(in srgb, var(--accent-color) 10%, black) 80%,
color-mix(in srgb, var(--accent-color) 5%, black));
pre {
--text-shadow-1: hsl(from var(--primary-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l);
--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
animation: flicker 0.25s alternate infinite;
margin: 0;
box-shadow: none;
background-color: transparent !important;
padding: 1rem 1rem;
color: var(--primary-color);
color: var(--accent-color);
text-shadow:
var(--text-shadow-1) 0 0 0.25rem,
var(--text-shadow-2) 0 0 0.75rem;
@ -69,7 +69,7 @@
}
&::after {
--scanline-color: rgb(from var(--primary-color) r g b / 0.05);
--scanline-color: rgb(from var(--accent-color) r g b / 0.05);
display: block;
position: absolute;
animation: scanline 5s linear infinite;

2
sass/_external.scss
View File

@ -7,7 +7,7 @@ a.external::after {
mask-image: var(--icon);
mask-size: cover;
margin-inline-start: 0.25rem;
background-color: var(--primary-color);
background-color: var(--accent-color);
width: max(0.75rem, 0.75em);
height: max(0.75rem, 0.75em);
content: "";

10
sass/_footer.scss
View File

@ -44,11 +44,11 @@
&.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
}
@ -122,12 +122,12 @@
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
text-decoration: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}

4
sass/_footnotes-list.scss
View File

@ -21,14 +21,14 @@
user-select: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
a + a[href*="#fr-"],
li:target a[href*="#fr-"] {
opacity: var(--disabled);
background-color: var(--primary-color);
background-color: var(--accent-color);
&:hover {
opacity: 1;

18
sass/_general.scss
View File

@ -4,8 +4,8 @@
:root {
scroll-behavior: smooth;
scrollbar-color: var(--primary-color) transparent;
accent-color: var(--primary-color);
scrollbar-color: var(--accent-color) transparent;
accent-color: var(--accent-color);
font-size: 16px;
// Smaller font size on mobile
@ -27,25 +27,25 @@ body {
overflow-wrap: break-word;
}
// Style text selection to use primary color
// Style text selection to use accent color
::selection {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
// Make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it
// and flash it with accent color when jumping to it
:target:not(#main) {
transition: all var(--transition), scroll-margin-block-start 0s;
scroll-margin-block-start: 15vh;
color: var(--primary-color);
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
color: var(--accent-color);
text-shadow: var(--accent-color-alpha) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
}
// Custom focus indicator
:focus-visible {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
@ -53,7 +53,7 @@ body {
@supports not selector(:focus-visible) {
:focus {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
}

8
sass/_input.scss
View File

@ -39,11 +39,11 @@ input[type="checkbox"] {
&:checked {
border: 0.15rem solid transparent;
background-color: var(--primary-color);
background-color: var(--accent-color);
&:disabled {
border: 0.15rem solid transparent;
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
&::before {
opacity: 0.8;
@ -124,7 +124,7 @@ input[type="checkbox"] {
}
&:checked {
background-color: var(--primary-color);
background-color: var(--accent-color);
&::before {
transform: translateX(1rem);
@ -169,7 +169,7 @@ input[type="range"] {
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
background: var(--primary-color);
background: var(--accent-color);
width: 100%;
height: 0.5rem;

18
sass/_nav.scss
View File

@ -82,11 +82,11 @@
a.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
.icon {
@ -95,7 +95,7 @@
}
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -112,7 +112,7 @@
}
&.active {
color: var(--primary-color);
color: var(--accent-color);
&:hover {
color: var(--contrast-color);
@ -123,7 +123,7 @@
}
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -317,14 +317,14 @@
}
.active {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
.icon {
background-color: var(--contrast-color);

4
sass/_post-nav.scss
View File

@ -14,10 +14,10 @@
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.post-title {
color: var(--primary-color);
color: var(--accent-color);
}
}

6
sass/_pre-container.scss
View File

@ -4,7 +4,7 @@
border-radius: var(--rounded-corner);
.header {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
background-size: 200%;
@ -70,13 +70,13 @@
button {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}

8
sass/_tags.scss
View File

@ -28,13 +28,13 @@
white-space: nowrap;
&:hover {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
text-decoration: none;
.count {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
}
}

16
sass/_typography.scss
View File

@ -49,7 +49,7 @@ figcaption {
blockquote {
margin: 0;
border-radius: 0.25rem;
border-inline-start: 0.25rem solid var(--primary-color);
border-inline-start: 0.25rem solid var(--accent-color);
padding: 0 0.75rem;
color: var(--fg-muted-5);
}
@ -65,8 +65,8 @@ q {
}
mark {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
}
del {
@ -111,7 +111,7 @@ progress {
background-color: var(--fg-muted-1);
width: 100%;
height: 0.5rem;
color: var(--primary-color);
color: var(--accent-color);
&:indeterminate {
background-color: var(--fg-muted-1);
@ -127,12 +127,12 @@ progress {
&::-moz-progress-bar {
border-radius: 999px;
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&::-webkit-progress-value {
border-radius: 999px;
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -159,7 +159,7 @@ kbd {
}
a {
color: var(--primary-color);
color: var(--accent-color);
font-weight: bold;
text-decoration-thickness: max(1px, 0.0625em);
@ -202,7 +202,7 @@ aside {
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 1rem;
width: 30%;

6
sass/_variables.scss
View File

@ -17,7 +17,7 @@
@include theme-variables using ($theme) {
@if $theme == "dark" {
// COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@
@else {
// COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -52,7 +52,7 @@
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105);
--nav-bg: rgb(242 242 242 / 0.7);
--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity));
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));

4
sass/_zola-anchor.scss
View File

@ -16,7 +16,7 @@ h6 {
margin: 0 0.25em;
&:hover .icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&:active {
@ -41,5 +41,5 @@ h6 {
}
:target .zola-anchor .icon {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
}

18
templates/partials/head.html
View File

@ -3,9 +3,9 @@
<meta charset="UTF-8" />
<meta name="description" content="{{ config.description }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') | safe }}" />
{%- if config.extra.primary_color_dark %}
<meta name="theme-color" content="{{ config.extra.primary_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
<meta name="theme-color" content="{{ config.extra.accent_color | default(value='#9a9996') | safe }}" />
{%- if config.extra.accent_color_dark %}
<meta name="theme-color" content="{{ config.extra.accent_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
{%- endif %}
<title>{% include "partials/title.html" %}</title>
<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
@ -40,18 +40,18 @@
<style type="text/css">
:root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
--accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
}
{%- if config.extra.primary_color_dark %}
{%- if config.extra.accent_color_dark %}
[data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark | safe }};
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark | safe }};
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
}
{%- endif %}
@ -72,7 +72,7 @@
*,
*::before,
*::after {
outline: solid 1px var(--primary-color);
outline: solid 1px var(--accent-color);
}
{%- endif -%}
</style>
@ -130,7 +130,7 @@
{%- set scripts = scripts | concat(with=["theme-switcher.js"]) %}
{%- endif %}
{%- if config.extra.nav.links.sublinks or config.languages | length > 0 or config.extra.nav.show_theme_switcher %}
{%- if config.extra.nav.links.menu or config.languages | length > 0 or config.extra.nav.show_theme_switcher %}
{%- set scripts = scripts | concat(with=["details.js"]) %}
{%- endif %}

18
templates/partials/nav.html
View File

@ -17,7 +17,7 @@
</li>
<div class="divider"></div>
{%- for link in config.extra.nav.links %}
{%- if link.sublinks and link.sublinks | length > 0 -%}
{%- if link.menu and link.menu | length > 0 -%}
<li>
<details>
<summary>
@ -25,23 +25,23 @@
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</summary>
<ul>
{%- for sublink in link.sublinks -%}
{%- if sublink.url is matching('https?://') %}
{%- for link in link.menu -%}
{%- if link.url is matching('https?://') %}
<li>
<a href="{{ sublink.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == sublink.url | trim_end_matches(pat='/') | safe -%}
<a href="{{ link.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.name, language_strings=language_strings) -}}
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a>
</li>
{%- else %}
<li>
<a href="{{ get_url(path=sublink.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=sublink.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
<a href="{{ get_url(path=link.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.name, language_strings=language_strings) -}}
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a>
</li>
{%- endif %}