The Wonderful World of Organic Geometry

Mon, 01 Jan 0001 00:00:00 +0000

Buttons #

Buttons are styled links that can lead to local page or external link.

Example #

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}

Get Home Contribute

Mon, 01 Jan 0001 00:00:00 +0000

Columns #

Columns help organize shorter pieces of content horizontally for readability.

Example #

{{% columns [ratio="1:1"] [class="..."] %}} <!-- begin columns block -->
# Left Content
Lorem markdownum insigne...

<---> <!-- magic separator, between columns -->

# Mid Content
Lorem markdownum insigne...

<---> <!-- magic separator, between columns -->

# Right Content
Lorem markdownum insigne...
{{% /columns %}}

Left Content #

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.

Mon, 01 Jan 0001 00:00:00 +0000

Details #

Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.

Example #

{{% details "Title" [open] %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

{{% details title="Title" open=true %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

Title

Markdown content #

Lorem markdownum insigne…

Mon, 01 Jan 0001 00:00:00 +0000

Hints #

Hint shortcode can be used as hint/alerts/notification block.
There are 3 colors to choose: info, warning and danger.

{{% hint [info|warning|danger] %}}
**Markdown content**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{% /hint %}}

Example #

Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

Mon, 01 Jan 0001 00:00:00 +0000

Mermaid Chart #

MermaidJS is library for generating svg charts and diagrams from text.

Override Mermaid initialization config
To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example #

{{< mermaid [class="..."] >}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid >}}

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.

Mon, 01 Jan 0001 00:00:00 +0000

Tabs #

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{% tabs "id" %}}
{{% tab "MacOS" %}} # MacOS Content {{% /tab %}}
{{% tab "Linux" %}} # Linux Content {{% /tab %}}
{{% tab "Windows" %}} # Windows Content {{% /tab %}}
{{% /tabs %}}

Example #

MacOS

MacOS #

This is tab MacOS content.