Demo Page

Archived

This page is in fact not archived. It is only here to demonstrate the archival statement.

Trigger Warning

This page contains blackjack and hookers, and bad jokes such as this one.

Disclaimer

Markdown

Text can be bold, italic, strikethrough, and all at the same time.

Link to another page.

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

  1. Perform step #1
  2. Proceed to step #2
  3. Conclude with step #3

Shimmer Glimmer Twiggle Trouble

MareRatingAdditional info
FluttershyBest poneShy and adorable
Apple JackGood poneHonest and nice
Pinkie PieFun poneParties and ADHD
TwilightMain poneNeeerd
Rainbow DashYesLooks badass
RarityFancy poneGenerous
Derpy HoovesM u f f i n s[REDACTED]
let highlight = true;
10pre mark {
12 display: block;
13 color: currentcolor;
14}
15pre table td:nth-of-type(1) {
17 color: #6b6b6b;
18 font-style: italic;
19}

Extra

Shortcodes

Duckquill provides a few useful shortcodes that simplify some tasks. They can be used on all pages.

Alerts

GitHub-style alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look.

Available alert types:

{% alert(note=true) %}
-> Alert text <-
{% end %}

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.

Edit

Indicates that something has been edited.

Uninteresting Fact

Some uninteresting fact.

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:

{{ image(url="image.png", alt="This is an image", no_hover=true) }}
Portal Gun blueprint
Image with an alt text and without zoom on hover
The gravestone of J.P.G.
Image with compressed version, an alt text, and without zoom on hover
Portal Gun blueprint
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.


Toolbx header image

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 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

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 can be set:

{{ video(url="video.webm", alt="This is a video", controls=true) }}
WebM video example from MDN
Duckling preening

CRT

Alright, this one doesn’t simplify anything, it just adds a CRT-like effect around Markdown code blocks.

{% crt() %}
-> Markdown code block <-
{% 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.

Emoji

Use any custom emoji from Akkoma.

Available variables are:

{{ emoji(name="neofox_googly_shocked") }}

Hello there, I’m an neofox_googly_shocked inline custom emoji.

{{ emoji(name="afloofLoad", big=true) }}
afloofLoad

YouTube

Allows to embed a YouTube video using youtube-nocookie.

Available variables are:

{{ youtube(id="0Da8ZhKcNKQ") }}

Vimeo

Allows to embed a Vimeo video.

Available variables are:

{{ vimeo(id="869483483") }}

Mastodon

Allows to embed a Mastodon post.

Available variables are:

{{ mastodon(id="113375516179365586") }}

Description List (<dl>)

<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>
Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

Form Input (<input>)

<input type="checkbox" />
<label>Checkbox</label>

With switch class:

<input class="switch" type="checkbox" />
<label>Checkbox</label>

With switch and big classes:

<input class="switch big" type="checkbox" />
<label>Checkbox</label>

With radio type:

<input type="radio" name="test" />
<label>Radio</label>

With color type:

<label>Color:</label>
<input type="color" value="#000000" />

With range type:

<input type="range" max="100" value="33">

Figure Captions (<figcaption>)

<figure>
  -> Whatever content <-
  <figcaption>Caption of content above</figcaption>
</figure>

The Office

The Office where Stanley works, it has yellow floor and beige walls

Accordion (<details>)

<details>
  <summary>Accordion title</summary>
  -> Contents here <-
</details>
Reveal accordion

Get it? I know, it’s an awful pun. Piano Accordion

Side Comment (<small>)

<small>Small, cute text that doesn't catch attention.</small>

Small, cute text that doesn’t catch attention.

Abbreviation (<abbr>)

<abbr title="American Standard Code for Information Interchange">ASCII</abbr>

The ASCII art is awesome!

Aside (<aside>)

<aside>

-> Contents here <-
</aside>

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

Keyboard Input (<kbd>)

<kbd>⌘ Command</kbd>.

To switch the keyboard layout, press ⌘ Super + Space.

Mark Text (<mark>)

<mark>Marked text</mark>

You know what? I’m gonna say some very important stuff, so important that even bold is not enough.

Deleted and Inserted Text (<del> and <ins>)

<del>Something deleted</del> <ins>Something added</ins>

Text deleted Text added

Progress Indicator (<progress>)

<progress></progress>
<progress value="33" max="100"></progress>

Sample Output (<samp>)

<samp>Sample Output</samp>

Sample Output

Inline Quotation (<q>)

<q>Someone said something</q>

Blah blah Inline Quote hmm.

Unarticulated Annotation (<u>)

<u>Gmarrar mitsakes</u>

Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.

<a class="external" href="https://example.org">External link</a>

Link to site

Spoilers

<span class="spoiler">Some spoiler</span>

You know, Duckquill is a pretty dumb name. I know, crazy.

With solid class:

<span class="spoiler solid">Some spoiler</span>

You know, Duckquill is a pretty dumb name. I know, crazy.

Buttons Dialog

<div class="buttons">
  <a href="#top">Go to Top</a>
  <a class="colored external" href="https://example.org">Example</a>
</div>
Go to TopExample

With centered and big classes:

<div class="buttons centered">
  <button class="big colored">Do Something…</button>
</div>

  1. Footnote

  2. Footnote (link)