diff --git a/CHANGELOG.md b/CHANGELOG.md index aaac95c..d0d84cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,12 +27,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - **[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. +- Add `h1` with page/section title by default. - Add margin between comment author name and timestamp. - Add missing edge highlight to active footer navbar links. +- Allow enabling table of contents on all pages and sections except for the homepage. - Allow overriding the `body` block of `base.html. +- Allow statements on all sections except for the homepage. - Change the way 404 image is resized (#74). - Make comment timestamp more subtle. - Make the copy button inactive after it is pressed until the animation is complete. +- Move table of contents code to a partial. - Reduce the target heading transition time. - Reduce top margin of the target heading. - Remove bottom margin of `:last-child` and not `:last-of-type`. @@ -43,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use more fitting cursors in some contexts. - Use PNG instead of GIF for comments QR code to reduce download size. - Use relative colors for `-bg` color variants. +- Rewrite the homepage (#75). ### Removed @@ -52,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set. - Don't add `::before` pseudo element to color pickers. +- Load auto-menu-close script if navbar sublinks are present. ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0) diff --git a/README.md b/README.md index aec2861..4ff05de 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ # [Duckquill](https://duckquill.daudix.one) -Duckquill is a modern, pretty, and clean (and opinionated) [Zola](https://www.getzola.org) theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the needed options for comfortable writing, keeping the balance of it being simple. +Duckquill is an opinionated, modern, pretty, and clean [Zola](https://www.getzola.org) theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the necessary options for comfortable writing, while keeping the balance of simplicity. ![Screenshot](screenshot.png) diff --git a/config.toml b/config.toml index cd15bd4..192c2a2 100644 --- a/config.toml +++ b/config.toml @@ -62,14 +62,6 @@ primary_color = "#ff7800" # Ditto but for the dark theme. # If not set regular variant will be used. primary_color_dark = "#ffa348" -# Sets the opacity used for most colors. -# -# color_opacity = "0.1" -# -# Ditto but for the dark theme. -# -# color_opacity_dark = "0.1" -# # 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. # diff --git a/content/_index.md b/content/_index.md index 1167296..865a8f3 100644 --- a/content/_index.md +++ b/content/_index.md @@ -14,38 +14,56 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~ # Duckquill -Duckquill is a modern, pretty, and clean (and opinionated) [Zola](https://www.getzola.org) theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the needed options for comfortable writing, keeping the balance of it being simple. +Duckquill is an opinionated, modern, pretty, and clean [Zola](https://www.getzola.org) theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the necessary options for comfortable writing, while keeping the balance of simplicity. -Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes! +With it, you can change some configuration variables, tweak some of the included graphics, and have a nice blog up in minutes! -- Pretty, yet lightweight. No JavaScript is used by default. -- Colors are tinted with the user-selected primary color for a pleasant look. -- ~90kB in size; take that, 12MB Medium! -- Uses system fonts for blazingly fast loading. -- Mobile friendly, with a proper dark variant. -- Proper favicon for modern browsers and Apple device icons. -- Twitter, Mastodon and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test. -- [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment using compatible ActivityPub server by replying to a Mastodon post. +Some of the features Duckquill has to offer: + +- Cute and informative social media cards for Discourse, Facebook, LinkedIn, Mastodon and more. +- [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment under a post by using your Mastodon account. +- 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. +- 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. +- Tiny by default; only ~100kB. Take that, 5MB Medium! +- Customizable copyright text; you Better Quack Soul! +- Image styling via URL. Yes, you read that right. +- Useless CRT style that everyone seems to like. +- KaTeX; use some complex math and whatnot. +- Fully localizeable, worry not, [it's pretty easy](#localization). +- Social links in the footer, with special styling. +- Emoji favicon if you're lazy to draw one. +- Copy button for code blocks. +- Search functionality. {% alert(note=true) %} -Duckquill is made based on needs of [my website](https://daudix.one), if you need some feature/configuration that doesn't exist feel free to open an issue or better yet, pull request! +Although Duckquill is made based on the needs of [my website](https://daudix.one), I am very open to feature requests as long as they are somewhat useful to others, so if you need a feature/configuration that does not exist, feel free to open an issue, or better yet, a pull request! +{% end %} + +{% alert(tip=true) %} +If you use Duckquill and enjoy it, or just like my work, please consider [buying me a coffee](https://daudix.one/coffee/), it would mean the world to me ^^. {% end %} ## Installation -First, download this theme to your `themes` directory: - -```bash -git clone https://codeberg.org/daudix/duckquill.git themes/duckquill -``` - -...or add as submodule for easy updating (recommended if you already have git setup on site): +First, if you already have Git setup, add this theme as a submodule: ```bash git submodule init git submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill ``` +Otherwise, simply clone it to your `themes` directory: + +```bash +git clone https://codeberg.org/daudix/duckquill.git themes/duckquill +``` + {% alert(important=true) %} It is highly recommended to switch from the `main` branch to the latest release: {% end %} @@ -55,33 +73,57 @@ cd themes/duckquill git checkout tags/v4.8.0 ``` -To update the submodule, simply switch to a new tag: - -{% alert(tip=true) %} -Check the changelog for all versions that came after the one you are using, there might be breaking changes that may need manual involvement. -{% end %} - -```bash -git submodule update --remote --merge -git tag --list -git checkout tags/v4.8.0 -``` - Then, enable it in your `config.toml`: ```toml theme = "duckquill" ``` +To update the theme, simply switch to a new tag: + +```bash +git submodule update --remote --merge +cd themes/duckquill +git checkout tags/v4.8.0 +``` + +{% alert(important=true) %} +Check the changelog for all versions after the one you are using; there may be breaking changes that require manual involvement. +{% end %} + ## Options 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. +## Front Matter + +Duckquill has some [front matter](https://www.getzola.org/documentation/content/page/#front-matter) variables that you can use by setting them in the `[extra]` section: + +### Global + +- `archive`: Make the post visually stand out in the post list. Also accepts message as a value. +- `trigger`: Displays a trigger warning message. +- `disclaimer`: Displays a disclaimer message. +- `toc`: Enables table of contents. Only first 2 levels of headings are listed. + +### Blog post specific: + +- `banner`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) banner image. Recommended dimensions are 2:1 aspect ratio and 1920x960 resolution. +- `featured`: Make the post visually stand out in the post list. +- `hot`: Ditto. +- `poor`: Ditto... + +In `[extra.comments]` section: + +- `host`: The Mastodon server on which the post was posted. +- `user`: The username of the poster. +- `id`: ID of the post; the one in the URL. + ### Localization Duckquill ships with a localization system based on one used in [tabi](https://github.com/welpo/tabi), it's very easy to use and quite flexible at the same time. -To add a translation, simply create a file in your site's `i18n` directory called `[lang-code].toml`, e.g `fr.toml`. The language code should be [ISO 639-1](https://localizely.com/iso-639-1-list/) or [BCP 47](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry). +To add a translation, simply create a file in your site's `i18n` directory called `LANG_CODE.toml`, e.g `fr.toml`. The language code should be either [ISO 639-1](https://localizely.com/iso-639-1-list/) or [BCP 47](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry). Inside that file, copy-paste one of the existing translations from Duckquill and adapt it to your needs. You can also check [tabi](https://github.com/welpo/tabi/tree/main/i18n) translation files for reference. @@ -134,7 +176,7 @@ primary_color_dark = "#ff7800" ### Favicon -Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and apple touch icon respectively. For animated favicon you can use APNG with `png` file extension. +Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and Apple Touch Icon respectively. For animated favicon you can use APNG with the `png` file extension. ## In the Wild diff --git a/content/demo/index.md b/content/demo/index.md index fce0531..4ce6589 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -1,16 +1,16 @@ +++ title = "Demo Page" +[extra] +archive = "This page is in fact not archived. It is only here to demonstrate the archival statement." +trigger = "This page contains blackjack and hookers, and bad jokes such as this one." +disclaimer = """ +- All tricks in this page are performed by the lab boys, don't try this at home. +- Don't expose yourself to 4000° kelvin. +- Don't take party escort submission position. +- Don't interact with asbestos and moon rocks. +""" +++ -# Demo Page - -{% alert(note=true) %} -This is a demo of most of the components, but some of them are only accessible on specific pages. If you wish to see them, follow one of these: - -- [Blog Demo](@/blog/_index.md) -- [Post Demo](@/blog/the-quill-of-duck/index.md) -{% end %} - ## Markdown Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***. diff --git a/templates/article.html b/templates/article.html index 879ae5a..c489982 100644 --- a/templates/article.html +++ b/templates/article.html @@ -45,25 +45,7 @@ {%- include "partials/statements.html" -%} - {%- if page.extra.toc -%} -

{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}

- - {%- endif -%} + {%- include "partials/toc.html" -%} {{ page.content | safe }} diff --git a/templates/page.html b/templates/page.html index 7413f7c..acc84b1 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,6 +1,8 @@ {% extends "base.html" %} {% block content %} +

{{ page.title }}

{%- include "partials/statements.html" -%} +{%- include "partials/toc.html" -%} {{ page.content | safe }} {% endblock content %} diff --git a/templates/partials/head.html b/templates/partials/head.html index aaec70b..d9207da 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -122,7 +122,7 @@ {%- set scripts = scripts | concat(with=["theme-switcher.js"]) %} {%- endif %} - {%- if config.show_theme_switcher or config.languages | length > 0 %} + {%- if config.extra.nav.links.sublinks or config.languages | length > 0 or config.extra.nav.show_theme_switcher %} {%- set scripts = scripts | concat(with=["details.js"]) %} {%- endif %} diff --git a/templates/partials/toc.html b/templates/partials/toc.html new file mode 100644 index 0000000..1d8cf0e --- /dev/null +++ b/templates/partials/toc.html @@ -0,0 +1,37 @@ +{%- if page.extra.toc -%} +

{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}

+ +{%- elif section.extra.toc -%} +

{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}

+ +{%- endif -%} diff --git a/templates/section.html b/templates/section.html index 575141f..2cd488f 100644 --- a/templates/section.html +++ b/templates/section.html @@ -1,5 +1,8 @@ {% extends "base.html" %} {% block content %} +

{{ section.title }}

+{%- include "partials/statements.html" -%} +{%- include "partials/toc.html" -%} {{ section.content | safe }} {% endblock content %}