Demo Page
This page is in fact not archived. It is only here to demonstrate the archival statement.
This page contains blackjack and hookers, and bad jokes such as this one.
- 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.
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
- Perform step #1
- Proceed to step #2
- Conclude with step #3
- Milk
- Eggs
- Flour
- Coffee
- Combustible lemons
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] |
let highlight = true;
10 {
12 :;
13 :;
14 }
15 {
17 :;
18 :;
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:
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.fact
: Some uninteresting fact.
-> Alert text <-
Note
Useful information that users should know, even when skimming content.
- I’m a list with an inline link.
Tip
Helpful advice for doing things better or more easily.
- I’m a list with an inline link.
Important
Key information users need to know to achieve their goal.
- I’m a list with an inline link.
Warning
Urgent info that needs immediate user attention to avoid problems.
- I’m a list with an inline link.
Caution
Advises about risks or negative outcomes of certain actions.
- I’m a list with an inline link.
Edit
Indicates that something has been edited.
- I’m a list with an inline link.
Uninteresting Fact
Some uninteresting fact.
- I’m a list with an inline link.
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
withsolid
: Ditto, but makes the image completely hidden.
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.
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.
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:
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).
CRT
Alright, this one doesn’t simplify anything, it just adds a CRT-like effect around Markdown code blocks.
-> Markdown code block <-
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:
host
: The instance on which the emoji is located (defaults to pleroma.envs.net).name
: Name of the emoji.path
: Path or filename of the local colocated emoji.big
: Make the emoji bigger.
Hello there, I’m an inline custom emoji.
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.
Vimeo
Allows to embed a Vimeo video.
Available variables are:
autoplay
: Whether the video should autoplay.
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 ofconfig.toml
.user
: The poster. If not set, it will fallback to the one set in the[extra.comments]
section ofconfig.toml
.id
: The ID of the post, usually at the end of the URL.
Description List (<dl>
)
Something
And its description
- Name
- Godzilla
- Born
- 1952
- Birthplace
- Japan
- Color
- Green
Form Input (<input>
)
Checkbox
With switch
class:
Checkbox
With switch
and big
classes:
Checkbox
With radio
type:
Radio
With color
type:
Color:
With range
type:
Figure Captions (<figcaption>
)
Accordion (<details>
)
Reveal accordion
Get it? I know, it’s an awful pun.
Side Comment (<small>
)
Small, cute text that doesn't catch attention.
Small, cute text that doesn’t catch attention.
Abbreviation (<abbr>
)
ASCII
The ASCII art is awesome!
Aside (<aside>
)
-> Contents here <-
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>
)
⌘ Command .
To switch the keyboard layout, press ⌘ Super + Space.
Mark Text (<mark>
)
Marked text
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>
)
Something deleted Something added
Text deleted Text added
Progress Indicator (<progress>
)
Sample Output (<samp>
)
Sample Output
Sample Output
Inline Quotation (<q>
)
Someone said something
Blah blah Inline Quote
hmm.
Unarticulated Annotation (<u>
)
Gmarrar mitsakes
Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.
External Links
External link
Spoilers
Some spoiler
You know, Duckquill is a pretty dumb name. I know, crazy.
With solid
class:
Some spoiler
You know, Duckquill is a pretty dumb name. I know, crazy.
Buttons Dialog
Go to Top
Example
With centered
and big
classes:
Do Something…
Footnote ↩