commit 60b4238ea29a12be33c8b6bc5984f89a251af6a4 Author: Max Katz-Christy Date: Wed Feb 18 02:37:27 2026 +0100 add demo duckquill with minimal changes diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b7d2f83 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +public/ +.sass-cache/ diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..9e98ea4 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "themes/duckquill"] + path = themes/duckquill + url = https://codeberg.org/daudix/duckquill.git diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..621ab56 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,303 @@ ++++ +insert_anchor_links = "left" +title = "Home" ++++ + +{% crt() %} +``` + -> /> + \_____| + /\ /| + .--/, - / ,\--. >(')____, >(')____, >(')____, >(') ___, + | <----o | \ | (` =~~/ (` =~~/ (` =~~/ (` =~~/ + \___/ - \___/ ---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~ +``` +{% end %} + +# Max Katz-Christy + +I am an adventurer and software developer. + +With it, you can change some configuration variables, tweak some of the included graphics, and have a nice blog up in minutes! + +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 mandatory 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. +- Fully localizeable, worry not, [it's pretty easy](#localization). +- Social links in the footer, with special styling. +- LaTeX markup support via the [KaTeX](https://katex.org) library. +- Emoji favicon if you're lazy to draw one. +- Copy button for code blocks. +- Search functionality. + +{% 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, 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 %} + +```bash +cd themes/duckquill +git checkout tags/v6.3.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/v6.3.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 + +Configuration variables from `config.toml` that can be set/overriden per page/section: + +- `default_theme`: Which theme should be used by default (light/dark). +- `accent_color`: Sets theme and [browser theme](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) color. +- `accent_color_dark`: Ditto but for the dark theme. If not set regular variant will be used. +- `emoji_favicon`: Use emoji as a favicon. Only one emoji is being rendered, everything else is truncated. +- `styles`: Additional CSS styles; expects them to be in the `./static/` directory. If you are using Sass it will be generated there automatically. +- `scripts`: Additional JavaScript scripts; expects them to be in the `./static/` directory. +- `katex`: Whether to enable the KaTeX library for rendering LaTeX. +- `toc`: Enables table of contents. Only first 2 levels of headings are listed. +- `toc_inline`: Whether to render inline table of contents at the top of all pages, in addition to floating quick navigation buttons. +- `toc_ordered`: Whether to use numbered (ordered) list for table of contents. +- `toc_sidebar`: Whether to display table of contents as a sidebar (useful for long pages). +- `card`: When set to `false` disables share preview cards globally. + +Other variables: + +- `apple_touch_icon`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) Apple Touch Icon. +- `favicon`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) favicon. +- `card`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) metadata card. +- `archive`: Displays an archived message. +- `trigger`: Displays a trigger warning message. +- `disclaimer`: Displays a disclaimer message. +- `go_to_top`: Displays a "go to top" button. + +### 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. +- `banner_pixels` Makes the banner use nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. +- `archived`: Make the post visually stand out in the post list. Also accepts message as a value. +- `featured`: Ditto but doesn't accept message as a value. +- `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 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. + +Additionally to translating Duckquill, you can also override the English stings by copy-pasting `en.toml` from Duckquill to the `i18n` directory of your website and adjusting the values to your liking. + +### Custom Styles + +To add your own or override existing styles, create a custom style and add it in the `config.toml`: + +```toml +[extra] +styles = [ + "YOUR_STYLE.css", + "ALSO_YOUR_STYLE.css" +] +``` + +Additional styles are expected it to be in the `static` directory. If you are using Sass they will be compiled there by default. + +If for some reason overridden style is not respected, try using `!important` (don't use it unless needed). You can import styles from Duckquill using: + +```scss +@use "../themes/duckquill/sass/NEEDED_FILE.scss"; +``` + +You can also load styles per page/section by setting them inside page's front matter: + +```toml +[extra] +styles = [ + "YOUR_PAGE_STYLE.css" +] +``` + +### Accent Color + +Duckquill respects chosen accent color everywhere. To use your own, simply change it in `config.toml`: + +```toml +[extra] +accent_color = "#3584e4" +``` + +Additionally, you can set a separate color for dark mode: + +```toml +[extra] +accent_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 the `png` file extension. + +## In the Wild + +
+ This list is starting to get long, so click on it to expand it. + +- [agustinramirodiaz.github.io](https://agustinramirodiaz.github.io) +- [alavi.me](https://alavi.me) +- [aparoksha.dev](https://www.aparoksha.dev) +- [arfh.pages.dev](https://arfh.pages.dev) +- [bambalabs.co](https://www.bambalabs.co) +- [bano.dev](https://bano.dev) +- [benjaminandre.be](https://benjaminandre.be) +- [blog.digital-horror.co](https://blog.digital-horror.com) +- [blog.millefeuille42.fr](https://blog.millefeuille42.fr) +- [blog.pansi21.xyz](https://blog.pansi21.xyz) +- [cabysm.github.io](https://cabysm.github.io) +- [daveparr.info](https://www.daveparr.info) +- [davepoltorak.com](https://davepoltorak.com) +- [drismir.ca](https://drismir.ca) +- [enriquekesslerm.com](https://enriquekesslerm.com) +- [gregorni.gitlab.io](https://gregorni.gitlab.io) +- [harrypotterexplained.com](http://harrypotterexplained.com) +- [hyouteki.github.io](https://hyouteki.github.io) +- [ikergimenez.com](https://ikergimenez.com) +- [kaipeacock.com](https://kaipeacock.com) +- [larrabyte.dev](https://larrabyte.dev) +- [lifailon.github.io](https://lifailon.github.io) +- [luciengheerbrant.com](https://luciengheerbrant.com) +- [lukoktonos.com](http://www.lukoktonos.com) +- [matteorisso.github.io](https://matteorisso.github.io) +- [maxffarrell.com](https://maxffarrell.com) +- [maxime.letemple.fr](https://maxime.letemple.fr) +- [mourelask.xyz](https://mourelask.xyz) +- [muelsyse.codeberg.page](https://muelsyse.codeberg.page) +- [mukuljoshi.xyz](https://mukuljoshi.xyz) +- [nbenedek.me](https://nbenedek.me) +- [nikos-archive.org](https://nikos-archive.org) +- [nisf.be](https://nisf.be) +- [nullpuppy.github.io](https://nullpuppy.github.io) +- [nutn-isc.gitlab.io](https://nutn-isc.gitlab.io/nutn-isc-website/) +- [orzklv.uz](https://orzklv.uz) +- [penandink.work](https://penandink.work) +- [pyter.at](https://pyter.at) +- [reallysimple.io](https://www.reallysimple.io) +- [rerere.unlogic.co.uk](https://rerere.unlogic.co.uk) +- [rossjr.dev](https://rossjr.dev) +- [samienr.com](https://samienr.com) +- [shrimple.srht.site](https://shrimple.srht.site) +- [siddharthsabron.in](https://siddharthsabron.in) +- [sorg.codeberg.page](https://sorg.codeberg.page) +- [sungsphinx.codeberg.page](https://sungsphinx.codeberg.page) +- [tmblog.pages.dev](https://tmblog.pages.dev) +- [treeniks.github.io](https://treeniks.github.io) +- [vegner.io](https://vegner.io) +- [voluxyy.github.io](https://voluxyy.github.io/portfolio/) +- [winnydows.com](https://winnydows.com) +- [zlog.si-on.top](https://zlog.si-on.top) +- [zstg.is-a.dev](https://zstg.is-a.dev) +- [琳.tw](https://xn--jgy.tw/) +- Yours? (feel free to [contact me](https://daudix.one/find/#contacts) or send a pull request) + +
+ +## In Credits + +- [andreatitolo.com](https://www.andreatitolo.com/credits) +- [aplos.gxbs.me](https://aplos.gxbs.me) +- [archaeoramblings.com](https://www.archaeoramblings.com/credits) +- [oomfie.town](https://oomfie.town/credits) + +## Assets Sources + +All sources for Duckquill's assets are available [here](https://codeberg.org/daudix/archive/src/branch/main/duckquill/src) and licensed under CC BY-SA 4.0. The reason for not putting the sources in the same repo as Duckquill itself is simple: I want it to be as small as possible, so that repo cloning is fast and doesn't make the site significantly heavier; this is also why the demo uses remote images instead of local copies. + +## Credits + +- [Quill image used in the metadata card](https://commons.wikimedia.org/wiki/File:3quills.jpg) + +## Tools Used + +- [VSCodium](https://vscodium.com) - Free/Libre Open Source Software Binaries of VS Code + - [Capitalize](https://marketplace.visualstudio.com/items?itemName=viablelab.capitalize) - Title capitalization without random websites. + - [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) - For `config.toml` basically. + - [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) - Awfully pretty theme. + - [PX to REM](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem) - Easy conversion from PX to REM and vice versa. + - [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) - Not sure if it actually works. ¯\\\_(ツ)_/¯ + - [Sort CSS](https://marketplace.visualstudio.com/items?itemName=piyushsarkar.sort-css-properties) - A lifesaver for long CSS properties. + - [Tera](https://marketplace.visualstudio.com/items?itemName=karunamurti.tera) - Tera template engine (the one Zola uses) support. +- [Firefox developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) - Best of its kind. + +As for the code formatter I use built-in VSCodium one. Prettier is good but I don't like how it tries to make code fit in a very narrow column, this can be changed of course, but built-in formatter does it's job so I don't bother doing so. + +## Thanks To + +- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), which served as a starting point and inspiration. +- [Óscar](https://osc.garden) for [tabi](https://welpo.github.io/tabi/) and its [translation system](https://github.com/welpo/tabi/blob/7b00ed1d9dca5c529d2816c5b6679bfe600d63fc/templates/macros/translate.html), [rel attributes](https://github.com/welpo/tabi/blob/7b00ed1d9dca5c529d2816c5b6679bfe600d63fc/templates/macros/rel_attributes.html), and [Content Security Policy](https://github.com/welpo/tabi/blob/7b00ed1d9dca5c529d2816c5b6679bfe600d63fc/templates/partials/content_security_policy.html). +- [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/). +- [Jonathan Neal](https://jonneal.dev) for the [normalize.css](https://csstools.github.io/normalize.css/). +- [GNOME design team](https://gitlab.gnome.org/Teams/Design) for the [icon development kit](https://gitlab.gnome.org/Teams/Design/icon-development-kit) +- [Modern Font Stacks](https://modernfontstacks.com) for the system font stack. +- [TheEvilSkeleton](https://tesk.page) for helping to improve the look and accessibility. +- [Dexter Reed](https://sungsphinx.codeberg.page) for being the first Duckquill user, preventing it from being axed. +- Everyone who supported me and said good stuff <3 diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 0000000..bffdf80 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,9 @@ ++++ +title = "Writings of Duck's Feet" +sort_by = "date" +template = "article_list.html" +page_template = "article.html" +paginate_by = 2 ++++ + +Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo. diff --git a/content/blog/dolor/index.md b/content/blog/dolor/index.md new file mode 100644 index 0000000..eeb918f --- /dev/null +++ b/content/blog/dolor/index.md @@ -0,0 +1,16 @@ ++++ +authors = ["John Dolor"] +title = "Dolor" +description = "Lorem ipsum dolor sit amet." +date = 1970-01-03 +[taxonomies] +tags = ["Lorem", "Ipsum", "Dolor"] +[extra] +archive = true ++++ + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea. diff --git a/content/blog/drafted-post/index.md b/content/blog/drafted-post/index.md new file mode 100644 index 0000000..cfa1f9d --- /dev/null +++ b/content/blog/drafted-post/index.md @@ -0,0 +1,15 @@ ++++ +authors = ["John Draft"] +title = "Drafty Draft" +description = "Drafted post, very drafty." +date = 2024-04-29 +draft = true +[taxonomies] +tags = ["Draft"] ++++ + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea. diff --git a/content/blog/ipsum/index.md b/content/blog/ipsum/index.md new file mode 100644 index 0000000..6f38cfb --- /dev/null +++ b/content/blog/ipsum/index.md @@ -0,0 +1,16 @@ ++++ +authors = ["John Ipsum"] +title = "Ipsum" +description = "Lorem ipsum dolor sit amet." +date = 1970-01-02 +[taxonomies] +tags = ["Lorem", "Ipsum"] +[extra] +hot = true ++++ + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea. diff --git a/content/blog/long-long-man/index.md b/content/blog/long-long-man/index.md new file mode 100644 index 0000000..5330479 --- /dev/null +++ b/content/blog/long-long-man/index.md @@ -0,0 +1,18 @@ ++++ +authors = ["Looong Looong Man", "Alexander Maximilian Jonathan"] +title = "Loooooong Loooooong Loooooong Loooooong Loooooong Man" +description = "Pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious pseudopseudohypoparathyroidism." +date = 2017-01-01 +[taxonomies] +tags = ["Honorificabilitudinitatibus"] +[extra] +featured = true ++++ + +![Long Long Man](https://upload.wikimedia.org/wikipedia/en/e/ed/Long_Long_Man.jpeg#end#spoiler) + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea. diff --git a/content/blog/lorem/index.md b/content/blog/lorem/index.md new file mode 100644 index 0000000..10f0cd8 --- /dev/null +++ b/content/blog/lorem/index.md @@ -0,0 +1,16 @@ ++++ +authors = ["John Lorem"] +title = "Lorem" +description = "Lorem ipsum dolor sit amet." +date = 1970-01-01 +[taxonomies] +tags = ["Lorem"] +[extra] +poor = true ++++ + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est. + +Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea. diff --git a/content/blog/mapping-tgtg/banner.jpg b/content/blog/mapping-tgtg/banner.jpg new file mode 100644 index 0000000..2441cf2 Binary files /dev/null and b/content/blog/mapping-tgtg/banner.jpg differ diff --git a/content/blog/mapping-tgtg/banner.webp b/content/blog/mapping-tgtg/banner.webp new file mode 100644 index 0000000..751c9b8 Binary files /dev/null and b/content/blog/mapping-tgtg/banner.webp differ diff --git a/content/blog/mapping-tgtg/index.md b/content/blog/mapping-tgtg/index.md new file mode 100644 index 0000000..209e824 --- /dev/null +++ b/content/blog/mapping-tgtg/index.md @@ -0,0 +1,92 @@ ++++ +authors = ["Max Katz-Christy"] +title = "Mapping My Leftover Food Tourism" +description = "How to turn eating into a casino game" +date = 2025-02-18 +# updated = "2025-02-18" +[taxonomies] +tags = ["TGTG", "Reverse Engineering"] +[extra] +banner = "banner.webp" +toc = true +toc_inline = true +toc_ordered = true +# trigger = "This page contains blackjack and hookers, and bad jokes such as this one." +disclaimer = """ +- The Too Good to Go API is not meant for this use +- Whoopsies +""" +[extra.comments] +# Long thread with image +# +# host = "mastodon.social" +# user = "brownpau" +# id = "104529877688537579" +# +# Thread with multiple images per post +# +# host = "mastodon.blaede.family" +# user = "cassidy" +# id = "112774854109302186" +# +# Thread with preview cards +# host = "mastodon.blaede.family" +# user = "cassidy" +# id = "110669429936617026" +# +# Post on GoToSocial +# +# host = "alpha.polymaths.social" +# user = "orbitalmartian" +# id = "01J7ETKJ19FGBDQGS1ZWZ3KEPP" +# +# Post on Sharkey +# +# host = "is-a.wyvern.rip" +# user = "volpeon" +# id = "9qy755nsnu2c0hbc" +host = "better.boston" +user = "maxtkc" +id = "tbd" ++++ +# Mapping My Leftover Food Tourism + +## An Addict + +Gambling is very addictive. I have an addictive personality. I have spent $TBD in an online casino where the only possible reward is food. This addiction has caused me to run, bike, and train for miles towards pickup locations in a variety of far flung places all over the US and Europe. + +Maybe this is an unfair comparison because the house and I both usually win. While I'm not a huge fan of most big companies, Too Good To Go is one of my favorites. They host a platform where restaurants can post "surprise bags" for around a third of the original price that can be picked up in limited numbers at given times. If it was just for the food alone, I don't know if I would be winning. I spend lots of time and energy collecting the food. I don't know if there's any hunter/gatherer left in our DNA, but I do get quite a bit of pleasure from scouting out what is available and making a collection. Additionally, while solo traveling, it gives me a sense of purpose and gives me an excuse to explore the city in ways that not many others do. And of course, the off chance encounters with other too good to goers is quite interesting. + +## The Problem + +The stats in the Too Good To Go app are pretty limited. + +Pic app + +I mean, who cares about climate change anyways. Why can't I export the data, or see a map of places I've been? I have so many more important things to do, but this is bugging me. + +## Existing "Research" + +There's a Too Good To Go python package that I've used before, let's see if that works. + +Pic + +Nope, auth issues. Let's try this package. + +Pic + +Wheee! But wait, they don't have the history API written in? I guess people just don't care... + +## Reverse Engineering + +Too Good to Go's API is not documented anywhere or intended for public use outside of the app. However, my app is able to look at my past pickups. So I can be sure that it's possible, if my computer does the exact same thing as my phone, their server will provide me with my too good to go history. + +Because Apple and Google are both shitty big companies, they don't want you to be able to figure out what is running on your phone. However, there's only so much they can do, because the requests to the server for data must leave the phone and fly on their own. They are usually encrypted after leaving the phone, with that tricky little s on the end of http. + +So, how do we jump in the middle of this? We can instruct the phone to use a proxy! A proxy, as the name implies, sends requests to servers on behalf of the original sender. So, I boot up a very simple proxy on my laptop and point my phone to it. + +Http requests work! Ok, now what about a secure request? Certificate not valid? When I send an https request, an app on my phone first sets up a secure connection with some fancy math. My phone has a list of "System Certificate Authorities" that it allows. Websites go to one of these authorities to get approved, proving that they are actually "phoey.com" or whatever. Once the authority is convinces of who they are, they are given a signed key. They can provide this key when people make requests to them, and, if the user trusts their signing authority, can trust that they are who they say they are. + +Think of it like countries giving out passports. I go to the US and say, I'd like a passport. First, they make sure I am who I am. Then I can go around to any place in the world that trusts the US passport authority and they can be certain I am who I say I am. + +Now, what my proxy is trying to do is, whenever I make any request, respond with, "Yes, I am phoey.com!" If my phone trusts it and sends the request, my proxy will get the request and then resend it on my behalf diff --git a/content/blog/the-quill-of-duck/banner.webp b/content/blog/the-quill-of-duck/banner.webp new file mode 100644 index 0000000..ae0672b Binary files /dev/null and b/content/blog/the-quill-of-duck/banner.webp differ diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md new file mode 100644 index 0000000..c83ed1f --- /dev/null +++ b/content/blog/the-quill-of-duck/index.md @@ -0,0 +1,106 @@ ++++ +authors = ["Scrooge McDuck", "Darkwing Duck"] +title = "The Quill of Duck" +description = "This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo." +date = 2023-08-31 +updated = "2024-06-21" +[taxonomies] +tags = ["Demo", "Test"] +[extra] +banner = "banner.webp" +toc = true +toc_inline = true +toc_ordered = true +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. +""" +[extra.comments] +# Long thread with image +# +# host = "mastodon.social" +# user = "brownpau" +# id = "104529877688537579" +# +# Thread with multiple images per post +# +# host = "mastodon.blaede.family" +# user = "cassidy" +# id = "112774854109302186" +# +# Thread with preview cards +# host = "mastodon.blaede.family" +# user = "cassidy" +# id = "110669429936617026" +# +# Post on GoToSocial +# +# host = "alpha.polymaths.social" +# user = "orbitalmartian" +# id = "01J7ETKJ19FGBDQGS1ZWZ3KEPP" +# +# Post on Sharkey +# +# host = "is-a.wyvern.rip" +# user = "volpeon" +# id = "9qy755nsnu2c0hbc" +host = "toot.community" +user = "sungsphinx" +id = "111789185826519979" ++++ + +{% alert(tip=true) %} +Recommended banner dimensions are 2:1 aspect ratio and 1920x960 resolution. +Other sizes will also work, but will be cut off at the bottom/won't be high enough. +{% end %} + +## The what? + +This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo. + +## Some info + +Well, open this file and look at how it's made, it includes all the essential front matter stuff. + +Now to the _Stanley!_ + +## The _Stanley_! + +This is the story of a man named _Stanley_. + +_Stanley_ worked for a company in a big building where he was Employee `#427`. + +
+ +![The Office](the-office.webp) +
The Office where Stanley works, it has yellow floor and beige walls
+
+ +Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard. + +Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order. + +This is what Employee `#427` did every day of every month of every year, and although others may have considered it soul rending, + +_Stanley_ relished every moment that the orders came in, as though he had been made exactly for this job. + +And _Stanley_ was happy. + +And then one day, something very peculiar happened. + +Something that would forever change _Stanley_; + +Something he would never quite forget. + +He had been at his desk for nearly an hour when he had realized not one single order had arrived on the monitor for him to follow. + +No one had shown up to give him instructions, call a meeting, or even say 'hi'. Never in all his years at the company had this happened, this complete isolation. + +Something was very clearly wrong. Shocked, frozen solid, _Stanley_ found himself unable to move for the longest time. + +But as he came to his wits and regained his senses, he got up from his desk and stepped out of his office. + +All of his co-workers were gone. What could it mean? Stanley decided to go to the meeting room; perhaps he had simply missed a memo. diff --git a/content/blog/the-quill-of-duck/the-office.webp b/content/blog/the-quill-of-duck/the-office.webp new file mode 100644 index 0000000..4b4ff1d Binary files /dev/null and b/content/blog/the-quill-of-duck/the-office.webp differ diff --git a/content/demo/demo.css b/content/demo/demo.css new file mode 100644 index 0000000..30b2ddc --- /dev/null +++ b/content/demo/demo.css @@ -0,0 +1,43 @@ +#color-picker-container { + -webkit-backdrop-filter: var(--blur); + position: fixed; + transform: translateX(calc(-100% + 1rem)); + z-index: 1; + backdrop-filter: var(--blur); + transition: var(--transition); + inset-block-end: 1rem; + inset-inline-start: 0; + box-shadow: var(--edge-highlight), var(--shadow-glass); + border-start-end-radius: var(--rounded-corner); + border-end-end-radius: var(--rounded-corner); + background-color: var(--glass-bg); + padding: 0.5rem; +} + +:root[dir*="rtl"] #color-picker-container { + transform: translateX(calc(100% - 1rem)); +} + +:root[dir*="rtl"] #color-picker-container:hover { + transform: none; +} + +#color-picker-container:hover { + transform: none; +} + +#color-picker-container > small { + display: block; + margin-block-end: 0.5rem; + font-weight: bold; +} + +#color-picker-container label { + margin-inline-end: 0.25rem; + color: var(--fg-muted-5); +} + +#color-picker-light, +#color-picker-dark { + margin-inline-end: 0.25rem; +} diff --git a/content/demo/demo.js b/content/demo/demo.js new file mode 100644 index 0000000..dddec69 --- /dev/null +++ b/content/demo/demo.js @@ -0,0 +1,56 @@ +// Slider +var slider = document.getElementById("range"); +var output = document.getElementById("range-value"); +output.innerHTML = slider.value; + +slider.oninput = function() { + output.innerHTML = this.value; +} + +// Spaceship control center +const colorPickerLight = document.querySelector("#color-picker-light"); +const colorPickerDark = document.querySelector("#color-picker-dark"); + +let accentColorLight = colorPickerLight.value; +let accentColorDark = colorPickerDark.value; + +colorPickerLight.addEventListener("input", updateAccentColorLight); +colorPickerDark.addEventListener("input", updateAccentColorDark); + +function updateAccentColorLight() { + accentColorLight = colorPickerLight.value; + updateStyles(); +} + +function updateAccentColorDark() { + accentColorDark = colorPickerDark.value; + updateStyles(); +} + +function updateStyles() { + let styleElement = document.getElementById("dynamic-styles"); + + if (!styleElement) { + styleElement = document.createElement("style"); + styleElement.id = "dynamic-styles"; + document.head.appendChild(styleElement); + } + + let styles = ` + :root { + --accent-color: ${accentColorLight}; + } + [data-theme="dark"] { + --accent-color: ${accentColorDark}; + } + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --accent-color: ${accentColorDark}; + } + } + `; + + styleElement.textContent = styles; +} + +updateStyles(); diff --git a/content/demo/index.md b/content/demo/index.md new file mode 100644 index 0000000..2f1dcf1 --- /dev/null +++ b/content/demo/index.md @@ -0,0 +1,700 @@ ++++ +title = "Demo Page" +[extra] +go_to_top = true +styles = ["demo/demo.css"] +scripts = ["demo/demo.js"] +katex = true +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. +""" ++++ + +## Markdown + +Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***. + +[Link to another page](@/demo/page.md). + +There should be whitespace between paragraphs[^1]. + +# Heading 1 +## Heading 2 +### Heading 3 +#### Heading 4 +##### Heading 5 +###### Heading 6 + +This is a normal paragraph[^2] following a header. + +😭😂🥺🤣❤️✨🙏😍🥰😊 + +``` +Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. +``` + +> "Original content is original only for a few seconds before getting old" +> > Rule #21 of the internet + +- Item 1 +- Item 2 + - Item 2.1 + - Item 2.2 +- Item 3 +- `Item 4` + +1. Perform step #1 +2. Proceed to step #2 +3. Conclude with step #3 + +- [ ] Milk +- [x] Eggs +- [x] Flour +- [ ] Coffee +- [x] Combustible lemons + +[![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)](https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg) + +| Mare | Rating | Additional info | +| :----------- | :---------------- | :--------------- | +| Fluttershy | Best pone | Shy and adorable | +| Apple Jack | Good pone | Honest and nice | +| Pinkie Pie | Fun pone | Parties and ADHD | +| Twilight | Main pone | Neeerd | +| Rainbow Dash | Yes | Looks badass | +| Rarity | Fancy pone | Generous | +| Derpy Hooves | *M u f f i n s* | [REDACTED] | + +```rust +let highlight = true; +``` + +```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7 +pre mark { + // If you want your highlights to take the full width + display: block; + color: currentcolor; +} +pre table td:nth-of-type(1) { + // Select a colour matching your theme + color: #6b6b6b; + font-style: italic; +} +``` + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +*** + +## Extra + +### KaTeX + +Duckquill can render LaTeX using the [KaTeX](https://katex.org) library. It can be enabled using the `extra.katex` config variable. + +```latex +$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$ +``` + +$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$ + +```latex +$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$ +``` + +$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$ + +### Shortcodes + +Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks. They can be used on all pages. + +#### Alerts + +[GitHub-style](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look. + +> [!NOTE] +> As of version 0.21.0, Zola supports GitHub flavored alerts natively, without this shortcode. It can be enabled by adding the following to `config.toml`: +> +> ```toml +> [markdown] +> github_alerts = true +> ``` + +Available alert types: + +- `note`: Useful information that users should know, even when skimming content. +- `tip`: Helpful advice for doing things better or more easily. +- `important`: Key information users need to know to achieve their goal. +- `warning`: Urgent info that needs immediate user attention to avoid problems. +- `caution`: Advises about risks or negative outcomes of certain actions. + +```jinja2 +{%/* alert(note=true) */%} +-> Alert text <- +{%/* end */%} +``` + +{% alert(note=true) %} +Useful information that users should know, even when skimming content. +{% end %} + +{% alert(tip=true) %} +Helpful advice for doing things better or more easily. +{% end %} + +{% alert(important=true) %} +Key information users need to know to achieve their goal. +{% end %} + +{% alert(warning=true) %} +Urgent info that needs immediate user attention to avoid problems. +{% end %} + +{% alert(caution=true) %} +Advises about risks or negative outcomes of certain actions. +{% end %} + +#### Images and Videos + +By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations. + +Available variables are: + +- `url`: URL to an image. +- `url_min`: URL to compressed version of an image, original can be opened by clicking on the image. +- `alt`: Alt text, same as if the text were inside square brackets in Markdown. +- `full`: Forces image to be full-width. +- `full_bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover. +- `start`: Float image to the start of paragraph and scale it down. +- `end`: Float image to the end of paragraph and scale it down. +- `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. +- `transparent`: Removes rounded corners and shadow, useful for images with transparency. +- `no_hover`: Removes zoom on hover. +- `spoiler`: Blurs image until hovered over/pressed on, useful for plot rich game screenshots. +- `spoiler` with `solid`: Ditto, but makes the image completely hidden. + +```jinja2 +{{/* image(url="image.png", alt="This is an image", no_hover=true) */}} +``` + +
+{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }} +
Image with an alt text and without zoom on hover
+
+ +
+{{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }} +
Image with compressed version, an alt text, and without zoom on hover
+
+ +
+{{ image(url="https://files.catbox.moe/lk7nee.jpg", alt="Portal Gun blueprint", spoiler=true) }} +
Image with an alt text, hidden behind a spoiler
+
+ +Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes. + +- `#full`: Forces image to be full-width. +- `#full-bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover. +- `#start`: Float image to the start of paragraph and scale it down. +- `#end`: Float image to the end of paragraph and scale it down. +- `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. +- `#transparent`: Removes rounded corners and shadow, useful for images with transparency. +- `#no-hover`: Removes zoom on hover. +- `#spoiler`: Blurs image until hovered over/pressed on, useful for plot rich game screenshots. +- `#spoiler` with `#solid`: Ditto, but makes the image completely hidden. + +
+
+ +[![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)](https://containertoolbx.org) +
Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover
+
+ +
+ +![1966 Ford Mustang coupe white](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start) +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. + +\ +[![Picture of the magnificent lej da staz just before sunrise in october](https://images.unsplash.com/photo-1635410773896-da585e1fe138?q=80&w=2063&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D#full-bleed)](https://unsplash.com/photos/a-mountain-lake-surrounded-by-trees-and-snow-CqTOTZh5vrs) + +For videos it's all the same except for a few differences: `no_hover` and `url_min` variables are not available. + +Additionally, the following [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes) can be set: + +- `autoplay`: Start playing the video automatically. +- `controls`: Display video controls such as volume control, seeking and pause/resume. +- `loop`: Play the video again once it ends. +- `muted`: Turn off the audio by default. +- `playsinline`: Prevent the video from playing in fullscreen by default (depends on the browser). + +```jinja2 +{{/* video(url="video.webm", alt="This is a video", controls=true) */}} +``` + +
+{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up", controls=true) }} +
WebM video example from MDN
+
+ +
+{{ video(url="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm", alt="Duckling preening", full_bleed=true, controls=true) }} +
Duckling preening
+
+ +#### CRT + +Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks. + +```jinja2 +{%/* crt() */%} +-> Markdown code block <- +{%/* end */%} +``` + +{% crt() %} + +``` + _____________________________________________ +|.'', Public_Library_Halls ,''.| +|.'.'', ,''.'.| +|.'.'.'', ,''.'.'.| +|.'.'.'.'', ,''.'.'.'.| +|.'.'.'.'.| |.'.'.'.'.| +|.'.'.'.'.|===; ;===|.'.'.'.'.| +|.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.| +|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.| +|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.| +|,',',',',|---|',|'|???????|'|,'|---|,',',',',| +|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.| +|.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.| +|.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.| +|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.| +|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.| +|.'.'.',' /%%%%%%%%%%%\ ','.'.'.| +|.'.',' /%%%%%%%%%%%%%\ ','.'.| +|.',' /%%%%%%%%%%%%%%%\ ','.| +|;____________/%%%%%Spicer%%%%%%\____________;| +``` + +{% end %} + +There's also a `cursor` class that you can add to a span with e.g. `█` character to simulate the terminal cursor. It doesn't work from inside Markdown code blocks though. + +#### YouTube + +Allows to embed a YouTube video using youtube-nocookie. + +Available variables are: + +- `autoplay`: Whether the video should autoplay. +- `start`: On which second video should start. + +```jinja2 +{{/* youtube(id="0Da8ZhKcNKQ") */}} +``` + +{{ youtube(id="0Da8ZhKcNKQ") }} + +#### Vimeo + +Allows to embed a Vimeo video. + +Available variables are: + +- `autoplay`: Whether the video should autoplay. + +```jinja2 +{{/* vimeo(id="869483483") */}} +``` + +{{ vimeo(id="869483483") }} + +#### Mastodon + +Allows to embed a Mastodon post. + +Available variables are: + +- `host`: The instance on which the post resides. If not set, it will fallback to the one set in the `[extra.comments]` section of `config.toml`. +- `user`: The poster. If not set, it will fallback to the one set in the `[extra.comments]` section of `config.toml`. +- `id`: The ID of the post, usually at the end of the URL. + +```jinja2 +{{/* mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") */}} +``` + +{{ mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") }} + +### Description List (`
`) + +```html +
+
Something
+
And its description
+
+``` + +
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+ +### Form Input (``) + +```html + + +``` + + + +With `switch` class: + +```html + + +``` + + + +With `switch` and `big` classes: + +```html + + +``` + + + +With `radio` type: + +```html + + +``` + + + +With `color` type: + +```html + + +``` + + + + + + + +With `range` type: + +```html + +``` + + + + + + +### Figure Captions (`
`) + +```markdown +
+ -> Whatever content <- +
Caption of content above
+
+``` + +
+ + ![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png) +
The Office where Stanley works, it has yellow floor and beige walls
+
+ +### Accordion (`
`) + +```markdown +
+ Accordion title + -> Contents here <- +
+``` + +
+ Reveal accordion + + Get it? I know, it's an awful pun. + ![Piano Accordion](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PianoAccordeon.jpg/916px-PianoAccordeon.jpg#transparent#no-hover) + +
+ +### Side Comment (``) + +```html +Small, cute text that doesn't catch attention. +``` + +Small, cute text that doesn't catch attention. + +### Abbreviation (``) + +```html +ASCII +``` + +The ASCII art is awesome! + +### Aside (`