+++
title = "Demo Page"
+++
# 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~~***.
[Link to another page](@/demo/page.md).
There should be whitespace between paragraphs.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
This is a normal paragraph 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
| Mare | Rating | Additional info |
| :----------- | :---------------- | :--------------- |
| Fluttershy | Best pone | Shy and adorable |
| Apple Jack | Good pone | Honest and nice |
| Pinkie Pie | Fun pone | Party horn! |
| Twilight | Decent pone | Neeerd |
| Rainbow Dash | Annoying pone | Looks badass |
| Rarity | Fancy pone | Sometimes nice |
```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;
}
```
***
## Extra
### Shortcodes
Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks. The 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.
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 transparent images.
- `no_hover`: Removes zoom on hover.
```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
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 transparent images.
- `#no-hover`: Removes zoom on hover.
Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover
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.
\
[](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.
```jinja2
{{/* video(url="video.webm", alt="This is a video") */}}
```
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
WebM video example from MDN
#### 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 %}
### Description List (`
`)
```html
Something
And its description
```
Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green
### Form Input (``)
```html
```
With `radio` type:
```html
```
### Figure Captions (``)
```markdown
-> Whatever content <-
Caption of content above
```
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.
### 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 are awesome!
### Aside (`