diff --git a/content/_index.md b/content/_index.md index a763259..7e84044 100644 --- a/content/_index.md +++ b/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 diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md index 0890a78..1212c3f 100644 --- a/content/blog/the-quill-of-duck/index.md +++ b/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] diff --git a/content/demo/code.ar.md b/content/demo/code.ar.md deleted file mode 100644 index 813e390..0000000 --- a/content/demo/code.ar.md +++ /dev/null @@ -1,3 +0,0 @@ -+++ -title = "Code Block Demo (العربية)" -+++ diff --git a/content/demo/code.md b/content/demo/code.md deleted file mode 100644 index 3d2446b..0000000 --- a/content/demo/code.md +++ /dev/null @@ -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; - -} -``` diff --git a/content/demo/code.ru.md b/content/demo/code.ru.md deleted file mode 100644 index be7dc38..0000000 --- a/content/demo/code.ru.md +++ /dev/null @@ -1,3 +0,0 @@ -+++ -title = "Code Block Demo (Русский)" -+++ diff --git a/content/demo/comments.ar.md b/content/demo/comments.ar.md deleted file mode 100644 index 7bc93f4..0000000 --- a/content/demo/comments.ar.md +++ /dev/null @@ -1,8 +0,0 @@ -+++ -template = "article.html" -title = "ActivityPub/​Fediverse comments demo (العربية)" -[extra.comments] -host = "toot.community" -user = "sungsphinx" -id = "111784580759701190" -+++ diff --git a/content/demo/comments.md b/content/demo/comments.md deleted file mode 100644 index 5742788..0000000 --- a/content/demo/comments.md +++ /dev/null @@ -1,8 +0,0 @@ -+++ -template = "article.html" -title = "ActivityPub/​Fediverse comments demo" -[extra.comments] -host = "toot.community" -user = "sungsphinx" -id = "111784580759701190" -+++ diff --git a/content/demo/comments.ru.md b/content/demo/comments.ru.md deleted file mode 100644 index 791b03c..0000000 --- a/content/demo/comments.ru.md +++ /dev/null @@ -1,8 +0,0 @@ -+++ -template = "article.html" -title = "ActivityPub/​Fediverse comments demo (Русский)" -[extra.comments] -host = "toot.community" -user = "sungsphinx" -id = "111784580759701190" -+++ diff --git a/content/demo/index.ar.md b/content/demo/index.ar.md index 5c67354..7c7c7db 100644 --- a/content/demo/index.ar.md +++ b/content/demo/index.ar.md @@ -1,4 +1,3 @@ +++ -template = "article.html" title = "Demo Page (العربية)" +++ diff --git a/content/demo/index.md b/content/demo/index.md index 00d44aa..a746141 100644 --- a/content/demo/index.md +++ b/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 - - - -### With radio type - - - -## 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. - -
-
Name
-
Godzilla
-
Born
-
1952
-
Birthplace
-
Japan
-
Color
-
Green
-
- -``` -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 - -Same as images, but with a few differences: `no_hover` and `url_min` are not available. +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") */}} @@ -295,38 +228,109 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou {% end %} -## Captions +### Description List (`
`) -Media can have additional text description using the `
` HTML tag directly under it. - -```markdown -![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png) -
The image caption
+```html +
+
Something
+
And its description
+
``` -![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png) -
The Office where Stanley works, it has yellow floor and beige walls
+
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
-## Accordion +### Form Input (``) + +```html + +``` + + + +With `radio` 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 <- +
+```
- I can be a spoiler, I can be a long text, I could be anything. + Reveal accordion -_Quack-quack!_ - -![Cute duck](https://i.ibb.co/x5Wd5dm/EEVSKgV.jpg) + 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)
-## Small +### Side Comment (``) + +```html +Small, cute text that doesn't catch attention. +``` Small, cute text that doesn't catch attention. -## Abbreviation +### Abbreviation (``) + +```html +ASCII +``` The ASCII art are awesome! -## Aside +### Aside (`