awebsite/public/index.html

28 lines
27 KiB
HTML
Raw Normal View History

<!doctype html><html lang=en xmlns=http://www.w3.org/1999/xhtml><head><meta charset=UTF-8><meta name=description><meta content="width=device-width,initial-scale=1" name=viewport><meta content=#9a9996 name=theme-color><title>Aron Petau</title><link href=https://aron.petau.net/ rel=canonical><link href=https://aron.petau.net/favicon.png rel=icon type=image/png><link href=https://aron.petau.net/apple-touch-icon.png rel=apple-touch-icon sizes=180x180 type=image/png><link title="Aron Petau - RSS Feed" href=https://aron.petau.net/rss.xml rel=alternate type=application/rss+xml><link title="Aron Petau - Atom Feed" href=https://aron.petau.net/atom.xml rel=alternate type=application/atom+xml><style>:root{--accent-color:#6f8396}</style><link href=https://aron.petau.net/style.css rel=stylesheet><link href=https://aron.petau.net/syntax-theme.css rel=stylesheet><script defer src=https://aron.petau.net/closable.js></script><script defer src=https://aron.petau.net/fuse.js></script><script defer src=https://aron.petau.net/search-fuse.js></script><meta content="Aron Petau" property=og:site_name><meta content="Aron Petau" property=og:title><meta content=https://aron.petau.net/ property=og:url><meta property=og:description><meta content=https://aron.petau.net/card.png property=og:image><meta content=en_US property=og:locale><body><main id=main-content><div class="crt scanlines" aria-hidden=true><pre class=z-code><code><span class="z-text z-plain"> _ _ _ _ _
</span><span class="z-text z-plain"> >(')____, >(')____, >(')____, >(')____, >(') ___,
</span><span class="z-text z-plain"> (` =~~/ (` =~~/ (` =~~/ (` =~~/ (` =~~/
</span><span class="z-text z-plain">jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
</span></code></pre></div><h1 id=duckquill><a aria-label="Anchor link for: duckquill" class=zola-anchor href=#duckquill><i class=icon></i></a> Duckquill</h1><p>Duckquill is an opinionated, modern, pretty, and clean <a href=https://www.getzola.org>Zola</a> 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.<p>With it, you can change some configuration variables, tweak some of the included graphics, and have a nice blog up in minutes!<p>Some of the features Duckquill has to offer:<ul><li>Cute and informative social media cards for Discourse, Facebook, LinkedIn, Mastodon and more.<li><a href=https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/>Mastodon-powered comments</a>; comment under a post by using your Mastodon account.<li>Lightweight by default, powerful when needed; no mandatory JavaScript is used by default.<li>Privacy respecting analytics using <a href=https://www.goatcounter.com>GoatCounter</a>, with support for self-hosting.<li>Estimated read time of the post; put away those with short attention spans.<li>Light/dark/system theme switcher (for some reason everyone likes these).<li>Everything is tinted with the user-defined accent color for a pleasant look.<li>GitHub-style alerts. Yes, theyre pretty, but dont overuse them.<li>Post banners; theyre even used in the social media cards!<li>YouTube/Vimeo shortcodes for easy video embedding.<li>Tiny by default; only ~100kB. Take that, 5MB Medium!<li>Customizable copyright text; you Better Quack Soul!<li>Image styling via URL. Yes, you read that right.<li>Useless CRT style that everyone seems to like.<li>Fully localizeable, worry not, <a href=https://aron.petau.net/#localization>its pretty easy</a>.<li>Social links in the footer, with special styling.<li>LaTeX markup support via the <a href=https://katex.org>KaTeX</a> library.<li>Emoji favicon if youre lazy to draw one.<li>Copy button for code blocks.<li>Search functionality.</ul><blockquote class=tip><p class=alert-title><i class=icon></i>Tip<p>If you use Duckquill and enjoy it, or just like my work, please consider <a href=https://daudix.one/coffee/>buying me a coffee</a>, it would mean the world to me ^^.</blockquote><h2 id=installation><a aria-label="Anchor link for: installation" class=zola-anchor href=#installation><i class=icon></i></a> Installation</h2><p>First, if you already have Git setup, add this theme as a submodule:<pre class="language-bash z-code" data-lang=bash><code class=language-bash data-lang=bash><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> submodule init</span>
</span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill</span>
</span></code></pre><p>Otherwise, simply clone it to your <code>themes</code> directory:<pre class="language-bash z-code" data-lang=bash><code class=language-bash data-lang=bash><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone https://codeberg.org/daudix/duckquill.git themes/duckquill</span>
</span></code></pre><blockquote class=important><p class=alert-title><i class=icon></i>Important<p>It is highly recommended to switch from the <code>main</code> branch to the latest release:</blockquote><pre class="language-bash z-code" data-lang=bash><code class=language-bash data-lang=bash><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-cd z-shell">cd</span></span><span class="z-meta z-function-call z-arguments z-shell"> themes/duckquill</span>
</span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> checkout tags/v6.3.0</span>
</span></code></pre><p>Then, enable it in your <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>duckquill<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>To update the theme, simply switch to a new tag:<pre class="language-bash z-code" data-lang=bash><code class=language-bash data-lang=bash><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> submodule update<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>remote</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>merge</span></span>
</span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-cd z-shell">cd</span></span><span class="z-meta z-function-call z-arguments z-shell"> themes/duckquill</span>
</span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> checkout tags/v6.3.0</span>
</span></code></pre><blockquote class=important><p class=alert-title><i class=icon></i>Important<p>Check the changelog for all versions after the one you are using; there may be breaking changes that require manual involvement.</blockquote><h2 id=options><a aria-label="Anchor link for: options" class=zola-anchor href=#options><i class=icon></i></a> Options</h2><p>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.<h2 id=front-matter><a aria-label="Anchor link for: front-matter" class=zola-anchor href=#front-matter><i class=icon></i></a> Front Matter</h2><p>Duckquill has some <a href=https://www.getzola.org/documentation/content/page/#front-matter>front matter</a> variables that you can use by setting them in the <code>[extra]</code> section:<h3 id=global><a aria-label="Anchor link for: global" class=zola-anchor href=#global><i class=icon></i></a> Global</h3><p>Configuration variables from <code>config.toml</code> that can be set/overriden per page/section:<ul><li><code>default_theme</code>: Which theme should be used by default (light/dark).<li><code>accent_color</code>: Sets theme and <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color>browser theme</a> color.<li><code>accent_color_dark</code>: Ditto but for the dark theme. If not set regular variant will be used.<li><code>emoji_favicon</code>: Use emoji as a favicon. Only one emoji is being rendered, everything else is truncated.<li><code>styles</code>: Additional CSS styles; expects them to be in the <code>./static/</code> directory. If you are using Sass it will be generated there automatically.<li><code>scripts</code>: Additional JavaScript scripts; expects them to be in the <code>./static/</code> directory.<li><code>katex</code>: Whether to enable the KaTeX library for rendering LaTeX.<li><code>toc</code>: Enables table of contents. Only first 2 levels of headings are listed.<li><code>toc_inline</code>: Whether to render inline table of contents at the top of all pages, in addition to floating quick navigation buttons.<li><code>toc_ordered</code>: Whether to use numbered (ordered) list for table of contents.<li><code>toc_sidebar</code>: Whether to display table of contents as a sidebar (useful for long pages).<li><code>card</code>: When set to <code>false</code> disables share preview cards globally.</ul><p>Other variables:<ul><li><code>apple_touch_icon</code>: Filename of the <a href=https://www.getzola.org/documentation/content/overview/#asset-colocation>colocated</a> Apple Touch Icon.<li><code>favicon</code>: Filename of the <a href=https://www.getzola.org/documentation/content/overview/#asset-colocation>colocated</a> favicon.<li><code>card</code>: Filename of the <a href=https://www.getzola.org/documentation/content/overview/#asset-colocation>colocated</a> metadata card.<li><code>archive</code>: Displays an archived message.<li><code>trigger</code>: Displays a trigger warning message.<li><code>disclaimer</code>: Displays a disclaimer message.<li><code>go_to_top</code>: Displays a “go to top” button.</ul><h3 id=blog-post-specific><a aria-label="Anchor link for: blog-post-specific" class=zola-anchor href=#blog-post-specific><i class=icon></i></a> Blog post specific:</h3><ul><li><code>banner</code>: Filename of the <a href=https://www.getzola.org/documentation/content/overview/#asset-colocation>colocated</a> banner image. Recommended dimensions are 2:1 aspect ratio and 1920x960 resolution.<li><code>banner_pixels</code> Makes the banner use nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.<li><code>archived</code>: Make the post visually stand out in the post list. Also accepts message as a value.<li><code>featured</code>: Ditto but doesnt accept message as a value.<li><code>hot</code>: Ditto.<li><code>poor</code>: Ditto.</ul><p>In <code>[extra.comments]</code> section:<ul><li><code>host</code>: The Mastodon server on which the post was posted.<li><code>user</code>: The username of t
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">styles</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>YOUR_STYLE.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>ALSO_YOUR_STYLE.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>Additional styles are expected it to be in the <code>static</code> directory. If you are using Sass they will be compiled there by default.<p>If for some reason overridden style is not respected, try using <code>!important</code> (dont use it unless needed). You can import styles from Duckquill using:<pre class="language-scss z-code" data-lang=scss><code class=language-scss data-lang=scss><span class="z-source z-scss"><span class="z-meta z-at-rule z-module z-sass"><span class="z-keyword z-control z-at-rule z-module z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>use</span> <span class="z-string z-quoted z-double z-css"><span class="z-punctuation z-definition z-string z-begin z-css">"</span>../themes/duckquill/sass/NEEDED_FILE.scss<span class="z-punctuation z-definition z-string z-end z-css">"</span></span><span class="z-punctuation z-terminator z-rule z-sass">;</span></span>
</span></code></pre><p>You can also load styles per page/section by setting them inside pages front matter:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">styles</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>YOUR_PAGE_STYLE.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><h3 id=accent-color><a aria-label="Anchor link for: accent-color" class=zola-anchor href=#accent-color><i class=icon></i></a> Accent Color</h3><p>Duckquill respects chosen accent color everywhere. To use your own, simply change it in <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">accent_color</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>#3584e4<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Additionally, you can set a separate color for dark mode:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">accent_color_dark</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>#ff7800<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><h3 id=favicon><a aria-label="Anchor link for: favicon" class=zola-anchor href=#favicon><i class=icon></i></a> Favicon</h3><p>Files named <code>favicon.png</code> and <code>apple-touch-icon.png</code> are used as favicon and Apple Touch Icon respectively. For animated favicon you can use APNG with the <code>png</code> file extension.<h2 id=in-the-wild><a aria-label="Anchor link for: in-the-wild" class=zola-anchor href=#in-the-wild><i class=icon></i></a> In the Wild</h2><details><summary>This list is starting to get long, so click on it to expand it.</summary> <ul><li><a href=https://agustinramirodiaz.github.io>agustinramirodiaz.github.io</a><li><a href=https://alavi.me>alavi.me</a><li><a href=https://www.aparoksha.dev>aparoksha.dev</a><li><a href=https://arfh.pages.dev>arfh.pages.dev</a><li><a href=https://www.bambalabs.co>bambalabs.co</a><li><a href=https://bano.dev>bano.dev</a><li><a href=https://benjaminandre.be>benjaminandre.be</a><li><a href=https://blog.digital-horror.com>blog.digital-horror.co</a><li><a href=https://blog.millefeuille42.fr>blog.millefeuille42.fr</a><li><a href=https://blog.pansi21.xyz>blog.pansi21.xyz</a><li><a href=https://blog.thundernetwork.org>blog.thundernetwork.org</a><li><a href=https://blog2.maki0419.com>blog2.maki0419.com</a><li><a href=https://cabysm.github.io>cabysm.github.io</a><li><a href=https://www.daveparr.info>daveparr.info</a><li><a href=https://davepoltorak.com>davepoltorak.com</a><li><a href=https://drismir.ca>drismir.ca</a><li><a href=https://enriquekesslerm.com>enriquekesslerm.com</a><li><a href=https://gregorni.gitlab.io>gregorni.gitlab.io</a><li><a href=http://harrypotterexplained.com>harrypotterexplained.com</a><li><a href=https://hyouteki.github.io>hyouteki.github.io</a><li><a href=https://ikergimenez.neocities.org>ikergimenez.neocities.org</a><li><a href=https://kaipeacock.com>kaipeacock.com</a><li><a href=https://larrabyte.dev>larrabyte.dev</a><li><a href=https://lifailon.github.io>lifailon.github.io</a><li><a href=https://luciengheerbrant.com>luciengheerbrant.com</a><li><a href=http://www.lukoktonos.com>lukoktonos.com</a><li><a href=https://matteorisso.github.io>matteorisso.github.io</a><li><a href=https://maxffarrell.com>maxffarrell.com</a><li><a href=https://maxime.letemple.fr>maxime.letemple.fr</a><li><a href=https://mourelask.xyz>mourelask.xyz</a><li><a href=https://muelsyse.codeberg.page>muelsyse.codeberg.page</a><li><a href=https://mukuljoshi.xyz>mukuljoshi.xyz</a><li><a href=https://nbenedek.me>nbenedek.me</a><li><a href=https://nikos-archive.org>nikos-archive.org</a><li><a href=https://nisf.be>nisf.be</a><li><a href=https://nullpuppy.github.io>nullpuppy.github.io</a><li><a href=https://nutn-isc.gitlab.io/nutn-isc-website/>nutn-isc.gitlab.io</a><li><a href=https://orzklv.uz>orzklv.uz</a><li><a href=https://penandink.work>penandink.work</a><li><a href=https://pyter.at>pyter.at</a><li><a href=https://www.reallysimple.io>reallysimple.io</a><li><a href=https://rerere.unlogic.co.uk>rerere.unlogic.co.uk</a><li><a href=https://rossjr.dev>rossjr.dev</a><li><a href=https://samienr.com>samienr.com</a><li><a href=https://shrimple.srht.site>shrimple.srht.site</a><li><a href=https://siddharthsabron.in>siddharthsabron.in</a><li><a href=https://sorg.codeberg.page>sorg.codeberg.page</a><li><a href=https://sungsphinx.codeberg.page>sungsphinx.codeberg.page</a><li><a href=https://tmblog.pages.dev>tmblog.pages.dev</a><li><a href=https://treeniks.github.io>treeniks.github.io</a><li><a href=https://vegner.io>vegner.io</a><li><a href=https://voluxyy.github.io/portfolio/>voluxyy.github.io</a><li><a href=https://winnydows.com>winnydows.com</a><li><a href=https://zlog.si-on.top>zlog.si-on.top</a><li><a href=https://zstg.is-a.dev>zstg.is-a.dev</a><li>Yours? <small>(feel free to <a href=https://daudix.one/find/#contacts>contact me</a> or send a pull request)</small></ul></details><h2 id=in-credits><a aria-label="Anchor link for: in-credits" class=zola-anchor href=#in-credits><i class=icon></i></a> In Credits</h2><ul><li><a href=https://www.andreatitolo.com/credits>andre