demo

⚠ Archived

This page is, in fact, not archived, meaning it will receive content updates.

⚠ Trigger Warning

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

⚠ Disclaimer(s)

Text can be bold, italic, or strikethrough.

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

Heading 1

Yes, H1 has ultra-bold style and a dot at the end. You probably shouldn’t use it for anything other than page header :)

This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Heading 2

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

Heading 3

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require("./lang/" + l);
  return true;
};
# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Heading 4

Heading 5
  1. This is an ordered list following a header.
  2. This is an ordered list following a header.
  3. This is an ordered list following a header.
Heading 6
head1head twothree
okgood swedish fishnice
out of stockgood and plentynice
okgood oreoshmm
okgood zoute dropyumm

There’s a horizontal rule below this.


Here is an unordered list:

And an ordered list:

  1. Item one
  2. Item two
  3. Item three
  4. Item four

And a nested list:

Here is a checkboxes:

Small image

Codeberg icon

Large image

Codeberg horizontal

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, are neat.

Shortcodes

Duckquill provides a few useful shortcodes that simplify some tasks.

Image

By default images come with styling, such as round corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.

Available variables are:

Variables should be comma-separated and be inside the brackets.

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

Video

Same as images, but with a few differences: no_hover and url_min are not available.

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

CRT

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

{% crt() %}
-> Markdown code block <-
{% end %}
 _____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|

Captions

Media can have additional text description using the <figcaption> HTML tag.

![Image]image.pmg

<figcaption>The image caption</figcaption>

The Office

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

Accordion

I can be a spoiler, I can be a long text, I could be anything.

Quack-quack!

Cute duck

Small

Small, cute text that doesn’t catch attention.

Abbreviation

The ASCII art are awesome!

Keyboard shortcut

<kbd>⌘ Super</kbd> + <kbd>Space</kbd>

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

Highlighted

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

<a class="page-link" href="demo/demo-page">Link to page</a>

Link to page

<a class="site-link" href="https://example.org">Link to site</a>

Link to site

Buttons

<p class="dialog-buttons">
  <a class="inline-button" href="#top">Go to top</a>
  <a href="{{site.issuesurl}}">File an issue</a>
</p>

Look at the end of this page xD

Go to top