Rewrite the demo (fixes #27)

content/_index.md

@@ -133,9 +133,6 @@ Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and app
 ## Test Pages
 
 - [Demo page](@/demo/index.md)
-- [Cake Party!](@/demo/page.md)
-- [ActivityPub/​Fediverse comments demo](@/demo/comments.md)
-- [Code block demo (needs Zola v0.18.0 and higher)](@/demo/code.md)
 
 ## In the Wild
 

content/blog/the-quill-of-duck/index.md

@@ -9,8 +9,12 @@ tags = ["Demo", "Test"]
 [extra]
 banner = "quill.png#pixels"
 toc = true
+trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
 disclaimer = """
-See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. This page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
+- 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.
 """
 featured = true
 [extra.comments]

content/demo/code.ar.md

@@ -1,3 +0,0 @@
-+++
-title = "Code Block Demo (العربية)"
-+++

content/demo/code.md

@@ -1,21 +0,0 @@
-+++
-title = "Code Block Demo"
-+++
-
-```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
-pre mark {
-
-  display: block;
-
-  color: currentcolor;
-
-}
-
-pre table td:nth-of-type(1) {
-
-  color: #6b6b6b;
-
-  font-style: italic;
-
-}
-```

content/demo/code.ru.md

@@ -1,3 +0,0 @@
-+++
-title = "Code Block Demo (Русский)"
-+++

content/demo/comments.ar.md

@@ -1,8 +0,0 @@
-+++
-template = "article.html"
-title = "ActivityPub/​Fediverse comments demo (العربية)"
-[extra.comments]
-host = "toot.community"
-user = "sungsphinx"
-id = "111784580759701190"
-+++

content/demo/comments.md

@@ -1,8 +0,0 @@
-+++
-template = "article.html"
-title = "ActivityPub/​Fediverse comments demo"
-[extra.comments]
-host = "toot.community"
-user = "sungsphinx"
-id = "111784580759701190"
-+++

content/demo/comments.ru.md

@@ -1,8 +0,0 @@
-+++
-template = "article.html"
-title = "ActivityPub/​Fediverse comments demo (Русский)"
-[extra.comments]
-host = "toot.community"
-user = "sungsphinx"
-id = "111784580759701190"
-+++

content/demo/index.ar.md

@@ -1,4 +1,3 @@
 +++
-template = "article.html"
 title = "Demo Page (العربية)"
 +++

content/demo/index.md

@@ -1,33 +1,70 @@
 +++
-template = "article.html"
 title = "Demo Page"
-[extra]
-archive = "This page is, in fact, not archived, meaning it will receive content updates."
-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.
-"""
 +++
 
-Text can be **bold**, _italic_, or ~~strikethrough~~.
+# 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.
 
-## Heading 2
+😭😂🥺🤣❤️✨🙏😍🥰😊
+
+```
+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
 
-### Heading 3
+- 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
+
+![Indian Runner Ducks](https://upload.wikimedia.org/wikipedia/commons/1/14/COLLECTIE_TROPENMUSEUM_Eenden_in_een_sawa_TMnr_60032098_%28cropped%29.jpg)
+
+| Mare         | Rating            | Additional info  |
+| :----------- | :---------------- | :---------------  |
+| Fluttershy   | Best pone         | Shy and adorable |
+| Apple Jack   | Good pone         | Honest and nice  |
+| Pinke Pie    | Fun pone          | Party Horn!      |
+| Twilight     | Decent pone       | Neeerd           |
+| Rainbow Dash | Annoying pone     | Looks badass     |
+| Rarity       | Fancy pone        | Sometimes nice   |
 
 ```rust
 let highlight = true;
@@ -51,113 +88,13 @@ pre table td:nth-of-type(1) {
 }
 ```
 
-#### Heading 4
-
-- Item 1
-- Item 2
-- Item 3
-- `Item 4`
-
-##### Heading 5
-
-1. Perform step #1
-2. Proceed to step #2
-3. Conclude with step #3
-
-###### Heading 6
-
-| Mare         | Rating            | Additional info |
-| :----------- | :---------------- | :-------------- |
-| Fluttershy   | Best pone         | Shy             |
-| Apple Jack   | Good pone         | Honest and nice |
-| Pinke Pie    | Fun pone          | Party Horn!     |
-| Twilight     | Decent pone       | Neeerd          |
-| Rainbow Dash | Annoying pone     | Looks badass    |
-| Rarity       | Fancy pone        | Sometimes nice  |
-
-- Item foo
-- Item bar
-- Item baz
-- Item zip
-
-1. Item one
-2. Item two
-3. Item three
-4. Item four
-
-- Level 1 item
-  - Level 2 item
-  - Level 2 item
-    - Level 3 item
-    - Level 3 item
-- Level 1 item
-
 ***
 
-- [ ] Milk
-- [x] Eggs
-- [x] Flour
-- [ ] Coffee
-- [x] Combustible lemons
-
-### Same but interactive
-
-<ul>
-<li><input type="checkbox"> Milk</li>
-<li><input checked="" type="checkbox"> Eggs</li>
-<li><input checked="" type="checkbox"> Flour</li>
-<li><input type="checkbox"> Coffee</li>
-<li><input checked="" type="checkbox"> Combustible lemons</li>
-</ul>
-
-### With radio type
-
-<ul>
-<li><input type="radio" name="test"> Milk</li>
-<li><input type="radio" name="test"> Eggs</li>
-<li><input type="radio" name="test"> Flour</li>
-<li><input checked="" type="radio" name="test"> Coffee</li>
-<li><input type="radio" name="test" disabled=""> Combustible lemons</li>
-</ul>
-
-## Small image
-
-{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png", alt="Codeberg icon", transparent=true, no_hover=true) }}
-
-## Large image
-
-{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png", alt="Codeberg horizontal", transparent=true, no_hover=true) }}
-
-## Definition lists can be used with HTML syntax.
-
-<dl>
-<dt>Name</dt>
-<dd>Godzilla</dd>
-<dt>Born</dt>
-<dd>1952</dd>
-<dt>Birthplace</dt>
-<dd>Japan</dd>
-<dt>Color</dt>
-<dd>Green</dd>
-</dl>
-
-```
-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.
-```
-
-```
-The final element.
-```
-
 ## Extra
 
-Alright now that the generic (slightly extended) ~~Jekyll~~ Zola demo page have ended, we can get to the custom stuff, which believe me, is neat.
-
-😭😂🥺🤣❤️✨🙏😍🥰😊
-
 ### Shortcodes
 
-Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks.
+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
 
@@ -197,9 +134,9 @@ Urgent info that needs immediate user attention to avoid problems.
 Advises about risks or negative outcomes of certain actions.
 {% end %}
 
-#### Image
+#### Images and Videos
 
-By default images come with styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.
+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:
 
@@ -214,8 +151,6 @@ Available variables are:
 - `transparent`: Removes rounded corners and shadow, useful for transparent images.
 - `no_hover`: Removes zoom on hover.
 
-Variables should be comma-separated and be inside the brackets.
-
 ```jinja2
 {{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
 ```
@@ -247,9 +182,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 \
 [![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)
 
-#### Video
+For videos it's all the same except for a few differences: `no_hover` and `url_min` variables are not available.
-
-Same as images, but with a few differences: `no_hover` and `url_min` are not available.
 
 ```jinja2
 {{/* video(url="video.webm", alt="This is a video") */}}
@@ -295,38 +228,109 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 
 {% end %}
 
-## Captions
+### Description List (`<dl>`)
 
-Media can have additional text description using the `<figcaption>` HTML tag directly under it.
+```html
-
+<dl>
-```markdown
+<dt>Something</dt>
-![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
+<dd>And its description</dd>
-<figcaption>The image caption</figcaption>
+</dl>
 ```
 
-![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
+<dl>
-<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
+<dt>Name</dt>
+<dd>Godzilla</dd>
+<dt>Born</dt>
+<dd>1952</dd>
+<dt>Birthplace</dt>
+<dd>Japan</dd>
+<dt>Color</dt>
+<dd>Green</dd>
+</dl>
 
-## Accordion
+### Form Input (`<input>`)
+
+```html
+<input type="checkbox" /><label>Checkbox</label>
+```
+
+<ul>
+<li><input type="checkbox" /><label>&nbsp;Milk</label></li>
+<li><input type="checkbox" /><label>&nbsp;Eggs</label></li>
+<li><input type="checkbox" /><label>&nbsp;Flour</label></li>
+<li><input type="checkbox" checked /><label>&nbsp;Coffee</label></li>
+<li><input type="checkbox" disabled /><label>&nbsp;Combustible lemons</label></li>
+</ul>
+
+With `radio` type:
+
+```html
+<input type="radio" name="test" /><label>Radio</label>
+```
+
+<ul>
+<li><input type="radio" name="test" /><label>&nbsp;Milk</label></li>
+<li><input type="radio" name="test" /><label>&nbsp;Eggs</label></li>
+<li><input type="radio" name="test" /><label>&nbsp;Flour</label></li>
+<li><input type="radio" name="test" checked /><label>&nbsp;Coffee</label></li>
+<li><input type="radio" name="test" disabled /><label>&nbsp;Combustible lemons</label></li>
+</ul>
+
+### Figure Captions (`<figcaption>`)
+
+```markdown
+<figure>
+  -> Whatever content <-
+  <figcaption>Caption of content above</figcaption>
+</figure>
+```
+
+<figure>
+
+  ![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
+  <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
+</figure>
+
+### Accordion (`<details>`)
+
+```markdown
+<details>
+  <summary>Accordion title</summary>
+  -> Contents here <-
+</details>
+```
 
 <details>
-  <summary>I can be a spoiler, I can be a long text, I could be anything.</summary>
+  <summary>Reveal accordion</summary>
 
-_Quack-quack!_
+  Get it? I know, it's an awful pun.
-
+  ![Piano Accordeon](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PianoAccordeon.jpg/916px-PianoAccordeon.jpg)
-![Cute duck](https://i.ibb.co/x5Wd5dm/EEVSKgV.jpg)
 
 </details>
 
-## Small
+### Side Comment (`<small>`)
+
+```html
+<small>Small, cute text that doesn't catch attention.</small>
+```
 
 <small>Small, cute text that doesn't catch attention.</small>
 
-## Abbreviation
+### Abbreviation (`<abbr>`)
+
+```html
+<abbr title="American Standard Code for Information Interchange">ASCII</abbr>
+```
 
 The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
 
-## Aside
+### Aside (`<aside>`)
+
+```html
+<aside>
+-> Contents here <-
+</aside>
+```
 
 <aside>
 Quill and a parchment
@@ -337,27 +341,31 @@ A quill is a writing tool made from a moulted flight feather (preferably a prima
 
 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 shortcut
+### Keyboard Input (`<kbd>`)
 
 ```html
-<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
+<kbd>⌘ Command</kbd>.
 ```
 
 To switch the keyboard layout, press <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.
 
-## Highlighted
+### Mark Text (`<mark>`)
+
+```html
+<mark>Marked text</mark>
+```
 
 You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
 
-## Deleted and Inserted
+### Deleted and Inserted Text (`<del>` and `<ins>`)
 
 ```html
-<del>Text deleted</del> <ins>Text added</ins>
+<del>Something deleted</del> <ins>Something added</ins>
 ```
 
 <del>Text deleted</del> <ins>Text added</ins>
 
-## Progress bar
+### Progress Indicator (`<progress>`)
 
 ```html
 <progress></progress>
@@ -367,7 +375,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 <progress></progress>
 <progress value="33" max="100"></progress>
 
-## Sample Output
+### Sample Output (`<samp>`)
 
 ```html
 <samp>Sample Output</samp>
@@ -375,15 +383,15 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 
 <samp>Sample Output</samp>
 
-## Inline Quote
+### Inline Quotation (`<q>`)
 
 ```html
-<q>Inline Quote</q>
+<q>Someone said something</q>
 ```
 
 Blah blah <q>Inline Quote</q> hmm.
 
-## Grammar Mistakes
+### Unarticulated Annotation (`<u>`)
 
 ```html
 <u>Gmarrar mitsakes</u>
@@ -391,21 +399,24 @@ Blah blah <q>Inline Quote</q> hmm.
 
 <u>Yeet</u> the <u>sus</u> drip while <u>vibing</u> with the <u>TikTok</u> <u>fam</u> on a cap-free boomerang.
 
-## External link
+### External Links
 
 ```html
-<a class="external" href="https://example.org">Link to site</a>
+<a class="external" href="https://example.org">External link</a>
 ```
 
 <a class="external" href="https://example.org">Link to site</a>
 
-## Buttons
+### Buttons Dialog
 
 ```html.j2
 <div class="dialog-buttons">
   <a class="inline-button" href="#top">Go to Top</a>
-  <a class="inline-button colored external" href="{{ config.extra.issues_url }}">File an Issue</a>
+  <a class="inline-button colored external" href="https://example.org">Example</a>
 </div>
 ```
 
-Look bellow this text XD
+<div class="dialog-buttons">
+  <a class="inline-button" href="#top">Go to Top</a>
+  <a class="inline-button colored external" href="https://example.org">Example</a>
+</div>

content/demo/index.ru.md

@@ -1,4 +1,3 @@
 +++
-template = "article.html"
 title = "Demo Page (Русский)"
 +++

content/demo/page.ar.md

@@ -1,4 +1,5 @@
 +++
+title = "Cake Party (العربية)"
 +++
 
 # Welcome to the cake party (العربية)

content/demo/page.md

@@ -1,4 +1,5 @@
 +++
+title = "Cake Party"
 +++
 
 # Welcome to the cake party

content/demo/page.ru.md

@@ -1,4 +1,5 @@
 +++
+title = "Cake Party (Русский)"
 +++
 
 # Welcome to the cake party (Русский)

sass/_tags.scss

@@ -1,5 +1,5 @@
 .tags {
-	display: inline-flex;
+	display: flex;
 	flex-wrap: wrap;
 	gap: 0.25rem;
 	margin: 0;
@@ -11,7 +11,7 @@
 	}
 
 	li {
-		display: flex;
+		display: inline-flex;
 		transition: var(--transition);
 		line-height: normal;