Attachments

Th' attachments shorrrtcode displays a list o' files attached t' a plank wit' adjust'ble color, title an' ay'con.

Usage

Th' shortcurt lists files found 'n a specific folder.

{{% attachments /%}}

Currently, it support two implementat'ns fer planks

1. If yer plank be a Marrrkdown file, attachements must be placed 'n a folder named like yer plank an' end'n wit' .files.

   • rrrambl'n
     • _index.md
     • plank.files
       • attachment.pdf
     • plank.md

2. If yer plank be a folder, attachements must be placed 'n a nested ‘files’ folder.

   • rrrambl'n
     • _index.md
     • plank
       • index.md
       • files
         • attachment.pdf

Be aware that if ye use a multilingual website, ye will need t' have as many folders as languages.

Parameter

Examples

Custom title, list o' attachments end'n 'n pdf or mp4

{{% attachments title="Related files" pattern=".*(pdf|mp4)" /%}}

Colored styled box, descend'n sort order

{{% attachments style="orange" sort="desc" /%}}

Style an' ay'cons

For further examples fer style, title an' ay'con, see th' notice shorrrtcode documentat'n. Th' parameter be work'n th' same way fer both shorrrtcodes, besides hav'n different defaults.

Button

A button be a just a click'ble button wit' optional ay'con.

{{% button href="https://gohugo.io/" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" ay'con="fas fa-download" %}}Get Cap'n Hugo wit' ay'con{{% /button %}}
{{% button href="https://gohugo.io/" ay'con="fas fa-download" ay'con-posit'n="right" %}}Get Cap'n Hugo wit' ay'con right{{% /button %}}

Get Cap'n Hugo Get Cap'n Hugo wit' ay'con Get Cap'n Hugo wit' ay'con right

Children

Use th' children shorrrtcode t' list th' child planks o' a plank an' th' further descendants (children’s children). By default, th' shorrrtcode displays links t' th' child planks.

Usage

Demo

{{% children  %}}

• plank X
• plank 1
• plank 2
• plank 3

{{% children descript'n="true" %}}

• plank X

This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...

• plank 1

This be a demo child plank

• plank 2

This be a demo child plank wit' no descript'n. So its rrrambl'n be used as descript'n.

• plank 3

This be a demo child plank

{{% children depth="999" showhidden="true" %}}

• plank X
• plank 1
• plank 1-1
• plank 1-1-1 (hidden)
• plank 1-1-1-1
• plank 1-1-1-1-1 (hidden)
• plank 1-1-1-1-1-1
• plank 1-1-2
• plank 1-1-2-1
• plank 1-1-2-2
• plank 1-1-3
• plank 2
• plank 3
• plank 3-1
• plank 4 (hidden)

{{% children containerstyle="div" style="h2" depth="3" descript'n="true" %}}

{{% children containerstyle="div" style="div" depth="999" %}}

Expand

Th' Expand shorrrtcode displays an expandable/collaps'ble section o' text on yer plank.

Usage

{{% expand [ <str'n> [ "true" | "false" ] ] %}}
Yes!
{{% /expand %}}

Th' first optional parameter defines th' text that appears next t' th' expand/collapse ay'con. Th' default text be "Expand me...".

Th' second optional parameter controls if th' block be initially shown as expanded ("true") or collapsed ("false"). Th' default ist "false".

Examples

All defaults

{{% expand %}}
Yes, ye did it!
{{% /expand %}}

Initially expanded

{{% expand "Expand me..." "true" %}}
No need t' press ye!
{{% /expand %}}

Arbitrary text

...and even source code

{{% expand "Show me almost endless possibilities" %}}
Some expand'ble text.

Ye can add standard markdown rules:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even **_bold emphasized_** text
- [links](https://example.com)
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless (almost - includ'n other shorrrtcodes may or may not work)
{{% /expand %}}

Include

Th' include shorrrtcode includes other files from yer project inside o' th' current file. This can even contain Marrrkdown an' will be taken into account when generat'n th' t'ble o' contents.

Usage

{{% include <str'n> [ "true" | "false" ] %}}

Th' first required parameter be th' path t' th' file t' be included.

If th' file’s rrrambl'n will be displayed as HTML, th' second optional parameter controls if th' first head'n o' th' included file should be displayed ("true")- which be th' default - or be hidden.

Examples

Arbitray rrrambl'n

Ye can add standard markdown rules:

• multiple paragraphs
• bullet point lists
• emphasized, bold an' even bold emphasized text
• links
• etc.

...and even source code

th' possiblities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)

{{% include "shortcodes/INCLUDE_ME.md" %}}

Merrrmaid

Merrrmaid be a library help'n ye t' generate diagram an' flowcharts from text, 'n a similar manner as Marrrkdown.

Usage

Just insert yer Merrrmaid code 'n th' mermaid shorrrtcode like this:

{{< mermaid [ align=("left"|"right"|"center"|"justify") ] >}}
classDiagram
    Person *-- Dog
{{< /mermaid >}}

Ye can set an optional align attribute which defaults t' "center".

If ye don’t need alignment ye can use th' alternative rules us'n code fences if ye have turned off guessSyntax fer th' marrrkup.highlight sett'n (see below):

```mermaid
classDiagram
    Person *-- Dog
```

Th' generated graphs can be be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.

Examples

Flowchart

{{< mermaid align="left" >}}
%%{init:{"theme":"forest"}}%%
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{<strong>Decision</strong>}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

Sequence

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how be ye?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Avast right o' John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about ye?
    Bob-->John: Jolly bloody!
{{< /mermaid >}}

GANTT

{{< mermaid >}}
gantt
        dateFormat  YYYY-MM-DD
        title Add'n GANTT diagram functionality t' Merrrmaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, aft des2, 5d
        Future task2              :         des4, aft des3, 5d
        section Critical tasks
        Completed task 'n th' critical line :crit, done, 2014-01-06,24h
        Implement parser an' jison          :crit, done, aft des1, 2d
        Create tests fer parser             :crit, active, 3d
        Future task 'n critical line        :crit, 5d
        Create tests fer renderer           :2d
        Add t' Merrrmaid                      :1d
{{< /mermaid >}}

Class

{{< mermaid >}}
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Whar' am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{{< /mermaid >}}

State

```mermaid
stateDiagram-v2
    open: Open Door
    closed: Closed Door
    locked: Locked Door
    open   --> closed: Close
    closed --> locked: Lock
    locked --> closed: Unlock
    closed --> open: Open
```

Configurat'n

Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer config.toml, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru diagram directives.

Th' JSON object o' yer config.toml / frontmatter be forwarded into Mermaid’s mermaid.initialize() funct'n.

See Merrrmaid documentat'n fer all allowed sett'ns.

Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n config.toml, frontmatter or diagram directives.

Example

[params]
  mermaidInitialize = "{ \"theme\": \"dark\" }"

[marrrkup]
  [marrrkup.highlight]
    # if set t' `guessSyntax = true`, there will be no unstyled code even if no language
    # was given BUT mermaid code fences will not work anymore! So this be a mandatory
    # sett'n fer yer ship
    guessSyntax = false

or planks frontmatter

+++
mermaidInitialize = "{ \"theme\": \"dark\" }"
+++

Notice

Th' notice shorrrtcode shows various types o' disclaimers wit' adjust'ble title an' ay'con t' help ye structure yer plank.

Usage

While th' examples be us'n named parameter ye be free t' use positional aswell.

{{% notice style="primary" title="There may be pirates" ay'con="skull-crossbones" %}}
It be all about th' boxes.
{{% /notice %}}

{{% notice primary "There may be pirates" "skull-crossbones" %}}
It be all about th' boxes.
{{% /notice %}}

Parameter

Examples

By Severity

Ahoi wit' marrrkup

...and even source code

{{% notice style="info" %}}
An **informat'n** disclaimer

Ye can add standard markdown rules:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even ***bold emphasized*** text
- [links](https://example.com)
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless (almost - includ'n other shorrrtcodes may or may not work)
{{% /notice %}}

Avast

{{% notice style="note" %}}
A **notice** disclaimer
{{% /notice %}}

Smarrrt Arrrse

{{% notice style="tip" %}}
A **tip** disclaimer

Arrr

{{% notice style="warning" %}}
A **warning** disclaimer
{{% /notice %}}

Arrr wit' non-default title an' ay'con

{{% notice style="warning" title="Here be dragons" ay'con="dragon" %}}
A **warning** disclaimer
{{% /notice %}}

Arrr without a title an' ay'con

{{% notice style="warning" title=" " ay'con=" " %}}
A **warning** disclaimer
{{% /notice %}}

By Brand Colors

Primary wit' title only

{{% notice style="primary" title="Primary" %}}
A **primary** disclaimer
{{% /notice %}}

Secondary wit' ay'con only

{{% notice style="secondary" ay'con="stopwatch" %}}
A **secondary** disclaimer
{{% /notice %}}

By Color

Blue without a title an' ay'con

{{% notice style="blue" %}}
A **blue** disclaimer
{{% /notice %}}

Green wit' title only

{{% notice style="green" title="Green" %}}
A **green** disclaimer
{{% /notice %}}

Grey wit' ay'con only

{{% notice style="grey" ay'con="bug" %}}
A **grey** disclaimer
{{% /notice %}}

Orange wit' title an' ay'con

{{% notice style="orange" title="Orange" ay'con="bug" %}}
A **orange** disclaimer
{{% /notice %}}

Red

{{% notice style="red" %}}
A **red** disclaimer
{{% /notice %}}

By Special Color

Default wit' title an' ay'con

{{% notice style="default" title"Pay Attent'n t' this Avast!" ay'con="skull-crossbones" %}}
Some serious informat'n.
{{% /notice %}}

Transparent wit' title an' ay'con

{{% notice style="transparent" title"Pay Attent'n t' this Avast!" ay'con="skull-crossbones" %}}
Some serious informat'n.
{{% /notice %}}

Ship param

Th' siteparam shorrrtcode be used t' help ye print values o' ship params.

Usage

{{% siteparam <str'n> %}}

Th' first required parameter be th' name o' th' ship param t' be displayed.

Examples

For instance, 'n this current ship, th' editURL vari'ble be used 'n config.toml

[params]
  editURL = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/"

Use th' siteparam shorrrtcode t' display its value.

`editURL` Value : {{% siteparam "editURL" %}}

be displayed as

editURL Value : https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/

Swaggerrr

This shorrrtcode uses th' RapiDoc library t' display yer OpenAPI Specificat'ns.

Configurat'n

Swagger be configured wit' default sett'ns. Ye can cust'mize Swagger’s default sett'ns fer all o' yer files thru a JSON object 'n yer config.toml or override these sett'ns per plank thru yer planks frontmatter.

Th' JSON object o' yer config.toml / frontmatter be forwarded into Swagger’s initializat'n. At th' moment, only th' theme sett'n be supported.

Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n config.toml or frontmatter.

Example

[params]
  swaggerInitialize = "{ \"theme\": \"dark\" }"

Usage

Just insert give th' URL t' yer OpenAPI Specificat'n like this:

{{< swagger src="https://petstore3.swagger.io/api/v3/openapi.json" >}}

If yer plank be a leaf or branch bundle, ye can also use relative URLs:

{{< swagger src="petstore.json" >}}

Th' src parameter be mandatory an' can be either an absolute or a relative URL.

Example

Tabbed views

Choose which rrrambl'n t' see across th' plank. Very handy fer provid'n code snippets fer multiple languages or provid'n configurat'n 'n different formats.

Code example

{{< tabs >}}
{{% tab name="python" %}}
```python
print("Hello World!")
```
{{% /tab %}}
{{% tab name="R" %}}
```R
> print("Hello World!")
```
{{% /tab %}}
{{% tab name="Bash" %}}
```Bash
echo "Hello World!"
```
{{% /tab %}}
{{< /tabs >}}

Renders as:

print("Hello World!")

> print("Hello World!")

echo "Hello World!"

Tab views wit' th' same tabs that belong t' th' same group sychr'nize their select'n:

print("Hello World!")

> print("Hello World!")

echo "Hello World!"

Config example

{{< tabs groupId="config" >}}
{{% tab name="json" %}}
```json
{
  "Hello": "World"
}
```
{{% /tab %}}
{{% tab name="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab name="properties" %}}
```properties
Hello = World
```
{{% /tab %}}
{{< /tabs >}}

Renders as:

{
  "Hello": "World"
}

<Hello>World</Hello>

Hello = World