Typography Showcase

A draft blog post showcasing all our built-in typography features.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan quam nunc, eget auctor mauris sagittis at. Praesent nec vulputate risus, volutpat porta nisi.

Vivamus consectetur diam risus, in tristique sem accumsan eget. Mauris id condimentum est. Sed convallis, massa dapibus elementum hendrerit, sem nibh cursus arcu, in gravida mi mauris eu tortor. Nunc a diam hendrerit, rhoncus turpis id, laoreet est.

# Heading 2

Donec felis sapien, semper et diam eu, faucibus efficitur mauris. Duis eu justo rutrum felis viverra convallis et id sapien. Nunc bibendum facilisis nunc ut tincidunt. Morbi quis ante mi. Duis sed consectetur eros. Praesent at tristique eros, vitae tristique mauris.

Ut feugiat tempor libero, quis eleifend justo tristique quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et purus id dui scelerisque pretium. Proin lobortis ex ut nunc fringilla, vulputate tincidunt tortor imperdiet.

# Heading 3

Aliquam vel vulputate dolor. Cras tristique quam eget dui dapibus porta. Cras lobortis dui ac tincidunt cursus. Morbi eget dignissim felis, eget ultricies justo. Maecenas sed tincidunt arcu, quis pharetra urna. Mauris ac libero tellus. Maecenas pellentesque lorem sed neque bibendum pellentesque. Proin quis urna in mi posuere dictum. Integer nec semper enim, vitae gravida lectus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sit amet mi tortor.

Suspendisse dignissim malesuada nunc. Duis accumsan lacinia magna, at bibendum urna semper quis. Duis eleifend erat velit, quis maximus augue vulputate eu.

# Heading 4

Praesent nulla ante, auctor vel turpis nec, pellentesque maximus dolor. In pellentesque, lacus nec sollicitudin rutrum, felis justo tempor elit, a bibendum mi eros in lorem. Nullam commodo, eros quis blandit congue, diam nisi placerat ante, id malesuada ex lorem vel quam.

Sed ullamcorper justo a nisi feugiat, in finibus nulla varius. Proin condimentum arcu at feugiat viverra. Donec tincidunt lobortis diam in scelerisque. Proin congue justo ipsum, vel pellentesque nibh rhoncus a.

# Heading 5

Suspendisse ut rhoncus libero. Sed neque metus, sodales vel vestibulum sed, tempus lacinia risus. Etiam vel lobortis velit, non elementum felis.

Cras a lobortis erat. Vestibulum pellentesque ac purus quis iaculis. Praesent vitae finibus nibh. In vel blandit lacus. Maecenas a ullamcorper ante, eget scelerisque mi. Vestibulum sodales magna mauris, quis tempus mauris varius quis. Donec nec viverra turpis, a vulputate sem.

# Heading 6

Ut eu mi eget orci consectetur mollis. Integer vitae magna vel augue venenatis egestas.

Etiam eleifend gravida mattis. Nulla ac neque metus. Etiam placerat commodo tellus, nec tincidunt elit dignissim vitae. Nunc in est vel neque tempus tristique at a mi. Curabitur aliquam feugiat cursus. Suspendisse eget orci turpis.

Mauris ac dapibus ex, eget vulputate ligula. In molestie odio eget neque feugiat malesuada. Nullam gravida justo ut nunc efficitur convallis. Nullam feugiat quam sit amet neque ornare iaculis.

# Images

Use the standard markdown notation to add an image. It will be not processed in any way (aside from some basic styling and positioning) - It’s up to you to make sure the resolution is suitable.

![a dolphin](/assets/images/dolphin-1.jpg)

# Tables

Use the standard markdown notation to add a simple table. It will be not processed in any way (aside from some basic styling and positioning).

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

For more complex tables you can use the table shortcode.

# Blockquotes

> This is something someone said.

This is something someone said.

# Lists

# Unordered

- Aliquam
  - Nascetur
- Bibendum
- Curabitur

• Aliquam
  • Nascetur
• Bibendum
• Curabitur

# Ordered

1. First
2. Second
3. Third

1. First
2. Second
3. Third

# Code

This is an inline code var foo = 'bar'.

# Shortcodes

# Snippet

By combining Zola’s Syntax Highlighting and our custom snippet shortcode…

{% snippet(title="Some JavaScript") %}
<!-- A markdown codeblock (code wrapped by three backticks) -->
{% end %}

…you can easily obtain something like this:

// Cross-browser xml parsing
 parseXML = function( data ) {
  var xml, tmp;
  if ( !data || typeof data !== "string" ) {
    return null;
  }
  try {
    if ( window.DOMParser ) { // Standard
      tmp = new DOMParser();
      xml = tmp.parseFromString( data , "text/xml" );
    } else { // IE
      xml = new ActiveXObject( "Microsoft.XMLDOM" );
      xml.async = false;
      xml.loadXML( data );
    }
  } catch( e ) {
    xml = undefined;
  }
  if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
    jQuery.error( "Invalid XML: " + data );
  }
  return xml;
};

Hover to display to copy button (not displayed on touch devices).

Always remember to append {% end %} or termites will eat you markdown!

Thanks to Zola you can add modifiers to the codeblock language. See some examples below…

{% snippet(title="rust, linenos") %}
<!-- A markdown codeblock (code wrapped by three backticks) with "rust, linenos" annotation -->
{% end %}

1
use highlighter::highlight;
2
let code = "...";
3
highlight(code);

20
use highlighter::highlight;
21
let code = "...";
22
highlight(code);

use highlighter::highlight;
let code = "...";
let code = "...";
let code = "...";
let code = "...";
let code = "...";
highlight(code);

42
use highlighter::highlight;
43
let code = "...";
44
highlight(code);

# Image

We can leverage on Zola’s image processing feature in order to modulate images. It is advisable you always use the shortcode image:

{{ image(
  path="/assets/images/dolphin-1.jpg",
  alt="a dolphin",
  height=300,
  caption="A smiling dolphin") }}

Notice you can omit the caption parameter if you don’t want a caption to your image.

Any image is processed to a combination of formats (webp, png) and sizes (configurable in config.toml).

Other features are:

• browser’s native lazy load
• zoombale on click/touch

# Table

# From json

{{ table(path="blog/showcase/table_example.json", columns_sizes=[100, -1, 50]) }}

With columns_sizes you can individually adjust each column width. It expects a list of integers representing the size in px. Passing -1 will fallback to width: auto.

For example, table_example.json contains:

{
    "headers": [
      "foo", // 100px
      "bar", // -1 -> auto
      "baz" // 50px
    ],
    "records": [
      [
        true,
        42,
        "Hello"
      ],
      [
        false,
        null,
        "World"
      ]
    ]
  }

Results in:

• foo

  true

  bar

  42

  baz

  Hello

• foo

  false

  baz

  World

# From csv

{{ table(path="blog/showcase/table_example.csv") }}

where table_example.csv contains:

foo, bar, baz
true, 42, Hello
false, null, World

• foo

  true

  bar

  42

  baz

  Hello

• foo

  false

  bar

  null

  baz

  World

On mobile devides a stacked cards layout is adopter for more redeability.

It’s possible to use markdown features both in json and csv.

# Tweet

You can embed a Tweet.

{{ tweet(user="Keanu_Reeves", id="180163209796390913") }}

Whoa!

— Keanu Reeves (@Keanu_Reeves) March 15, 2012

# Alert

To catch the eye you can use the shortcode alert.

{%/* alert(variant="info", title="This is a string") %}
Any markdown as body.
{%/* end %}

The argument variant can be info (default), success, warning, danger. The argument title if not provided defaults to the variant specific one.

NOTE > if copy-pasting, remind to remove /* from the snippet.

{%/* alert_collapse(title="This is always shown...") %}
This is shown on click!
{%/* end %}

const whaaaat = "surprise!";

Zola comes with some built-ins. See Zola’s built-ins.

# YouTube

The shortcode youtube can be used to embed a YouTube video.

For accessibility reasons it’s advisable to always provide a title. You can optionally provide a start and end (both expect integers as values) to create a clip of the video.

{{ youtube(
  id="w15oWDh02K4",
  title="L'Amour Toujours",
  start=30,
  end=55) }}

# Loom

The shortcode loom can be used to embed a YouTube video.

For accessibility reasons it’s advisable to always provide a title. You can optionally provide hide_owner, hide_share, hide_title, hide_embed_top_bar. The names are self-explanatory.

{{ loom(
  id="e5b8c04bca094dd8a5507925ab887002",
  title="Create a Pre-Watch with Loom",
  hide_owner=true,
  hide_share=true,
  hide_title=true,
  hide_embed_top_bar=true
  ) }}

# Vimeo

The shortcode vimeo can be used to embed a Vimeo video.

{{ vimeo(id="124313553") }}

# Streamable

The shortcode streamable can be used to embed a Streamable video.

{{ streamable(id="92ok4", class="streamable") }}

# Gist

Including a gist it’s straightforward with the shortocode gist.

{{ gist(url="https://gist.github.com/Keats/e5fb6aad409f28721c0ba14161644c57", class="gist") }}

# Alpine

You can freely run Alpine in the markdown!

<div x-data="{ open: true }" class="flex flex-col items-center gap-2">
  <button @click="open = !open" class="btn">Open</button>

  <div x-show="open" x-collapse>
    Hello!
  </div>
</div>

# APIs

# $toast

In order to show any amount of toasts you can use the $toast API. For more info run in console window.$toast.usage().