v0.3.0
* Getting environment variables and passwords from Vault (not tested yet) * Vault configuration to config (not tested yet) * Ability to run scripts from file on local machine on the remote host * Ability to get ouput in the notification of a list for individual commands or all commands * Make SSH connections close after all commands have been run; reuse previous connections if needed
This commit is contained in:
15
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/INCLUDE_ME.md
vendored
Normal file
15
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/INCLUDE_ME.md
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
You can add standard markdown syntax:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- etc.[^etc]
|
||||
|
||||
[^etc]: Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean "and other similar things", or "and so forth"
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)
|
||||
16
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/_index.en.md
vendored
Normal file
16
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/_index.en.md
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
+++
|
||||
archetype = "chapter"
|
||||
title = "Shortcodes"
|
||||
ordersectionsby = "title"
|
||||
weight = 3
|
||||
+++
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it's pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/). A shortcode is a simple snippet inside a page.
|
||||
|
||||
The Relearn theme provides multiple shortcodes on top of existing ones.
|
||||
|
||||
{{%children containerstyle="div" style="h2" description="true" %}}
|
||||
7
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/_index.pir.md
vendored
Normal file
7
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/_index.pir.md
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
+++
|
||||
archetype = "chapter"
|
||||
title = "Shorrrtcodes"
|
||||
ordersectionsby = "title"
|
||||
weight = 3
|
||||
+++
|
||||
{{< piratify >}}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.en.files/hugo.png
vendored
Normal file
BIN
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.en.files/hugo.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1 @@
|
||||
This is a small text
|
||||
Binary file not shown.
130
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.en.md
vendored
Normal file
130
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.en.md
vendored
Normal file
@ -0,0 +1,130 @@
|
||||
+++
|
||||
description = "List of files attached to a page"
|
||||
title = "Attachments"
|
||||
+++
|
||||
|
||||
The `attachments` shortcode displays a list of files attached to a page with adjustable color, title and icon.
|
||||
|
||||
{{% attachments sort="asc" /%}}
|
||||
|
||||
{{% notice warning %}}
|
||||
Since Hugo {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.112.0{{% /badge %}} this only works for leaf bundles. Branch bundles and simple pages must be switched to leaf bundles or you are currently locked to a Hugo version < `0.112.0`.
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* attachments sort="asc" /*/%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/attachments.html" (dict
|
||||
"context" .
|
||||
"sort" "asc"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:------------|:----------------|:------------|
|
||||
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Attachments`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
|
||||
| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. |
|
||||
| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br><br>- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` |
|
||||
|
||||
## Setup
|
||||
|
||||
### Single language
|
||||
|
||||
The shortcode lists files found in a specific folder. The name of the folder depends on your page type (either branch bundle, leaf bundle or page).
|
||||
|
||||
1. If your page is a leaf bundle, attachments must be placed in a nested `index.files` folder, accordingly.
|
||||
|
||||
> * content
|
||||
> * _index.md
|
||||
> * page
|
||||
> * _index.md
|
||||
> * **_index.files**
|
||||
> * attachment.pdf
|
||||
|
||||
2. If your page is a branch bundle, attachments must be placed in a nested `_index.files` folder, accordingly.
|
||||
|
||||
{{% badge style="warning" title=" " %}}Warning{{% /badge %}} This is only available for Hugo < `0.112.0`
|
||||
|
||||
> * content
|
||||
> * _index.md
|
||||
> * page
|
||||
> * index.md
|
||||
> * **index.files**
|
||||
> * attachment.pdf
|
||||
|
||||
3. For simple pages, attachments must be placed in a folder named like your page and ending with `.files`.
|
||||
|
||||
{{% badge style="warning" title=" " %}}Warning{{% /badge %}} This is only available for Hugo < `0.112.0`
|
||||
|
||||
> * content
|
||||
> * _index.md
|
||||
> * **page.files**
|
||||
> * attachment.pdf
|
||||
> * page.md
|
||||
|
||||
### Multilingual
|
||||
|
||||
Be aware that if you use a multilingual website, you will need to have as many folders as languages and the language code must be part of the folder name.
|
||||
|
||||
Eg. for a site in English and Piratish:
|
||||
|
||||
> * content
|
||||
> * index.en.md
|
||||
> * index.pir.md
|
||||
> * page
|
||||
> * index.en.md
|
||||
> * index.pir.md
|
||||
> * **index.en.files**
|
||||
> * attachment.pdf
|
||||
> * **index.pir.files**
|
||||
> * attachment.pdf
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Title, List of Attachments Ending in pdf or mp4
|
||||
|
||||
````go
|
||||
{{%/* attachments title="Related **files**" pattern=".*\.(pdf|mp4)" /*/%}}
|
||||
````
|
||||
|
||||
{{% attachments title="Related **files**" pattern=".*\.(pdf|mp4)" /%}}
|
||||
|
||||
### Info Styled Box, Descending Sort Order
|
||||
|
||||
````go
|
||||
{{%/* attachments style="info" sort="desc" /*/%}}
|
||||
````
|
||||
|
||||
{{% attachments style="info" sort="desc" /%}}
|
||||
|
||||
### With User-Defined Color and Font Awesome Brand Icon
|
||||
|
||||
````go
|
||||
{{%/* attachments color="fuchsia" icon="fab fa-hackerrank" /*/%}}
|
||||
````
|
||||
|
||||
{{% attachments color="fuchsia" icon="fab fa-hackerrank" /%}}
|
||||
|
||||
### Style, Color, Title and Icons
|
||||
|
||||
For further examples for **style**, **color**, **title** and **icon**, see the [`notice` shortcode]({{% relref "shortcodes/notice" %}}) documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
|
||||
@ -0,0 +1 @@
|
||||
Harrr, nothn' to see herre
|
||||
7
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.pir.md
vendored
Normal file
7
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/attachments/index.pir.md
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "Th' Attachments shorrrtcode displays a list o' files attached t' a plank"
|
||||
title = "Attachments"
|
||||
+++
|
||||
{{% attachments /%}}
|
||||
|
||||
{{< piratify >}}
|
||||
227
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/badge.en.md
vendored
Normal file
227
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/badge.en.md
vendored
Normal file
@ -0,0 +1,227 @@
|
||||
+++
|
||||
description = "Marker badges to display in your text"
|
||||
title = "Badge"
|
||||
+++
|
||||
|
||||
The `badge` shortcode displays little markers in your text with adjustable color, title and icon.
|
||||
|
||||
{{% badge %}}Important{{% /badge %}}
|
||||
{{% badge style="primary" title="Version" %}}6.6.6{{% /badge %}}
|
||||
{{% badge style="red" icon="angle-double-up" %}}Captain{{% /badge %}}
|
||||
{{% badge style="info" %}}New{{% /badge %}}
|
||||
{{% badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* badge %}}Important{{% /badge */%}}
|
||||
{{%/* badge style="primary" title="Version" %}}6.6.6{{% /badge */%}}
|
||||
{{%/* badge style="red" icon="angle-double-up" %}}Captain{{% /badge */%}}
|
||||
{{%/* badge style="info" %}}New{{% /badge */%}}
|
||||
{{%/* badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/badge.html" (dict
|
||||
"context" .
|
||||
"content" "Important"
|
||||
)}}
|
||||
{{ partial "shortcodes/badge.html" (dict
|
||||
"context" .
|
||||
"style" "primary"
|
||||
"title" "Version"
|
||||
"content" "6.6.6"
|
||||
)}}
|
||||
{{ partial "shortcodes/badge.html" (dict
|
||||
"context" .
|
||||
"style" "red"
|
||||
"icon" "angle-double-up"
|
||||
"content" "Captain"
|
||||
)}}
|
||||
{{ partial "shortcodes/badge.html" (dict
|
||||
"context" .
|
||||
"style" "info"
|
||||
"content" "New"
|
||||
)}}
|
||||
{{ partial "shortcodes/badge.html" (dict
|
||||
"context" .
|
||||
"color" "fuchsia"
|
||||
"icon" "fab fa-hackerrank"
|
||||
"content" "Awesome"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:----------------|:------------|
|
||||
| **style** | `default` | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | see notes | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| _**<content>**_ | _<empty>_ | Arbitrary text for the badge. |
|
||||
|
||||
## Examples
|
||||
|
||||
### Style
|
||||
|
||||
#### By Severity
|
||||
|
||||
````go
|
||||
{{%/* badge style="info" %}}New{{% /badge */%}}
|
||||
{{%/* badge style="note" %}}Change{{% /badge */%}}
|
||||
{{%/* badge style="tip" %}}Optional{{% /badge */%}}
|
||||
{{%/* badge style="warning" %}}Breaking{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge style="info" %}}New{{% /badge %}}
|
||||
{{% badge style="note" %}}Change{{% /badge %}}
|
||||
{{% badge style="tip" %}}Optional{{% /badge %}}
|
||||
{{% badge style="warning" %}}Breaking{{% /badge %}}
|
||||
|
||||
#### By Brand Colors
|
||||
|
||||
````go
|
||||
{{%/* badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge */%}}
|
||||
{{%/* badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge */%}}
|
||||
{{%/* badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge %}}
|
||||
{{% badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge %}}
|
||||
{{% badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge %}}
|
||||
|
||||
#### By Color
|
||||
|
||||
````go
|
||||
{{%/* badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge */%}}
|
||||
{{%/* badge style="green" icon="palette" title="Color" %}}Green{{% /badge */%}}
|
||||
{{%/* badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge */%}}
|
||||
{{%/* badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge */%}}
|
||||
{{%/* badge style="red" icon="palette" title="Color" %}}Red{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge %}}
|
||||
{{% badge style="green" icon="palette" title="Color" %}}Green{{% /badge %}}
|
||||
{{% badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge %}}
|
||||
{{% badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge %}}
|
||||
{{% badge style="red" icon="palette" title="Color" %}}Red{{% /badge %}}
|
||||
|
||||
#### By Special Color
|
||||
|
||||
````go
|
||||
{{%/* badge style="default" icon="palette" title="Color" %}}Default{{% /badge */%}}
|
||||
{{%/* badge style="transparent" icon="palette" title="Color" %}}Transparent{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge style="default" icon="palette" title="Color" %}}Default{{% /badge %}}
|
||||
{{% badge style="transparent" icon="palette" title="Color" %}}Transparent{{% /badge %}}
|
||||
|
||||
### Variants
|
||||
|
||||
#### Without Icon and Title Text
|
||||
|
||||
````go
|
||||
{{%/* badge %}}6.6.6{{% /badge */%}}
|
||||
{{%/* badge style="info" icon=" " title=" " %}}Awesome{{% /badge */%}}
|
||||
{{%/* badge style="red" %}}Captain{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge %}}6.6.6{{% /badge %}}
|
||||
{{% badge style="info" icon=" " title=" " %}}Awesome{{% /badge %}}
|
||||
{{% badge style="red" %}}Captain{{% /badge %}}
|
||||
|
||||
#### Without Icon
|
||||
|
||||
````go
|
||||
{{%/* badge title="Version" %}}6.6.6{{% /badge */%}}
|
||||
{{%/* badge style="info" icon=" " %}}Awesome{{% /badge */%}}
|
||||
{{%/* badge style="red" title="Rank" %}}Captain{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge title="Version" %}}6.6.6{{% /badge %}}
|
||||
{{% badge style="info" icon=" " %}}Awesome{{% /badge %}}
|
||||
{{% badge style="red" title="Rank" %}}Captain{{% /badge %}}
|
||||
|
||||
#### Without Title Text
|
||||
|
||||
````go
|
||||
{{%/* badge icon="star" %}}6.6.6{{% /badge */%}}
|
||||
{{%/* badge style="info" title=" " %}}Awesome{{% /badge */%}}
|
||||
{{%/* badge style="red" icon="angle-double-up" %}}Captain{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge icon="star" %}}6.6.6{{% /badge %}}
|
||||
{{% badge style="info" title=" " %}}Awesome{{% /badge %}}
|
||||
{{% badge style="red" icon="angle-double-up" %}}Captain{{% /badge %}}
|
||||
|
||||
#### All Set
|
||||
|
||||
````go
|
||||
{{%/* badge icon="star" title="Version" %}}6.6.6{{% /badge */%}}
|
||||
{{%/* badge style="info" %}}Awesome{{% /badge */%}}
|
||||
{{%/* badge style="red" icon="angle-double-up" title="Rank" %}}Captain{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge icon="star" title="Version" %}}6.6.6{{% /badge %}}
|
||||
{{% badge style="info" %}}Awesome{{% /badge %}}
|
||||
{{% badge style="red" icon="angle-double-up" title="Rank" %}}Captain{{% /badge %}}
|
||||
|
||||
#### Override for Severity
|
||||
|
||||
````go
|
||||
{{%/* badge style="info" icon="rocket" title="Feature" %}}Awesome{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge style="info" icon="rocket" title="Feature" %}}Awesome{{% /badge %}}
|
||||
|
||||
### Other
|
||||
|
||||
#### With User-Defined Color, Font Awesome Brand Icon and Markdown Title and Content
|
||||
|
||||
````go
|
||||
{{%/* badge color="fuchsia" icon="fab fa-hackerrank" title="**Font**" %}}**Awesome**{{% /badge */%}}
|
||||
````
|
||||
|
||||
{{% badge color="fuchsia" icon="fab fa-hackerrank" title="**Font**" %}}**Awesome**{{% /badge %}}
|
||||
|
||||
#### With Icon Content
|
||||
|
||||
You can combine the badge with the [`icon` shortcode]({{% relref "shortcodes/icon" %}}) to create even more stunning visuals.
|
||||
|
||||
In this case you need to declare `{{</* badge */>}}` instead of `{{%/* badge */%}}`. Note, that in this case it is not possible to put markdown in the content.
|
||||
|
||||
````go
|
||||
{{</* badge style="primary" icon="angle-double-up" >}}{{% icon skull-crossbones %}}{{< /badge */>}}
|
||||
{{</* badge style="primary" icon="angle-double-up" >}}{{% icon skull-crossbones %}} Pirate{{< /badge */>}}
|
||||
{{</* badge style="primary" title="Rank" >}}{{% icon skull-crossbones %}}{{< /badge */>}}
|
||||
{{</* badge style="primary" title="Rank" >}}{{% icon skull-crossbones %}} Pirate{{< /badge */>}}
|
||||
{{</* badge style="primary" icon="angle-double-up" title="Rank" >}}{{% icon skull-crossbones %}}{{< /badge */>}}
|
||||
{{</* badge style="primary" icon="angle-double-up" title="Rank" >}}{{% icon skull-crossbones %}} Pirate{{< /badge */>}}
|
||||
````
|
||||
|
||||
{{< badge style="primary" icon="angle-double-up" >}}{{% icon skull-crossbones %}}{{< /badge >}}
|
||||
{{< badge style="primary" icon="angle-double-up" >}}{{% icon skull-crossbones %}} Pirate{{< /badge >}}
|
||||
{{< badge style="primary" title="Rank" >}}{{% icon skull-crossbones %}}{{< /badge >}}
|
||||
{{< badge style="primary" title="Rank" >}}{{% icon skull-crossbones %}} Pirate{{< /badge >}}
|
||||
{{< badge style="primary" icon="angle-double-up" title="Rank" >}}{{% icon skull-crossbones %}}{{< /badge >}}
|
||||
{{< badge style="primary" icon="angle-double-up" title="Rank" >}}{{% icon skull-crossbones %}} Pirate{{< /badge >}}
|
||||
|
||||
#### Inside of Text
|
||||
|
||||
````go
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. {{%/* badge style="blue" icon="rocket" %}}Awesome{{% /badge */%}} Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
````
|
||||
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. {{% badge style="blue" icon="rocket" %}}Awesome{{% /badge %}} Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/badge.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/badge.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Marker badges t' display 'n yer text"
|
||||
title = "Badge"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
208
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/button.en.md
vendored
Normal file
208
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/button.en.md
vendored
Normal file
@ -0,0 +1,208 @@
|
||||
+++
|
||||
description = "Clickable buttons"
|
||||
title = "Button"
|
||||
+++
|
||||
|
||||
The `button` shortcode displays a clickable button with adjustable color, title and icon.
|
||||
|
||||
{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="warning" icon="dragon" %}}Get Hugo{{% /button %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="warning" icon="dragon" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/button.html" (dict
|
||||
"context" .
|
||||
"href" "https://gohugo.io/"
|
||||
"content" "Get Hugo"
|
||||
)}}
|
||||
{{ partial "shortcodes/button.html" (dict
|
||||
"context" .
|
||||
"href" "https://gohugo.io/"
|
||||
"style" "warning"
|
||||
"icon" "dragon"
|
||||
"content" "Get Hugo"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
Once the button is clicked, it opens another browser tab for the given URL.
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:----------------|:------------|
|
||||
| **href** | _<empty>_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
|
||||
| **style** | `transparent` | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **iconposition** | `left` | Places the icon to the `left` or `right` of the title. |
|
||||
| **target** | see notes | The destination frame/window if **href** is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- the setting of `externalLinkTarget` or `_blank` if not set, for any address starting with `http://` or `https://`<br>- no specific value for all other links |
|
||||
| **type** | see notes | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button` |
|
||||
| _**<content>**_ | see notes | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
|
||||
## Examples
|
||||
|
||||
### Style
|
||||
|
||||
#### By Severity
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button %}}
|
||||
|
||||
|
||||
#### By Brand Colors
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button %}}
|
||||
|
||||
#### By Color
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button %}}
|
||||
|
||||
#### By Special Color
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button %}}
|
||||
|
||||
### Icon
|
||||
|
||||
#### To the Left
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
|
||||
|
||||
#### To the Right
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" icon="download" iconposition="right" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" icon="download" iconposition="right" %}}Get Hugo{{% /button %}}
|
||||
|
||||
#### Override for Severity
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
|
||||
|
||||
### Target
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" target="_self" %}}Get Hugo in same window{{% /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" %}}Get Hugo in new Window/Frame (default){{% /button */%}}
|
||||
````
|
||||
{{% button href="https://gohugo.io/" target="_self" %}}Get Hugo in same Window/Frame{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" %}}Get Hugo in new Window/Frame (default){{% /button %}}
|
||||
|
||||
### Other
|
||||
|
||||
#### With User-Defined Color, Font Awesome Brand Icon and Markdown Title
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" color="fuchsia" icon="fab fa-hackerrank" %}}Get **Hugo**{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" color="fuchsia" icon="fab fa-hackerrank" %}}Get **Hugo**{{% /button %}}
|
||||
|
||||
#### Severity Style with All Defaults
|
||||
|
||||
````go
|
||||
{{%/* button href="https://gohugo.io/" style="tip" %}}{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
|
||||
|
||||
#### Button to Internal Page
|
||||
|
||||
````go
|
||||
{{%/* button href="/index.html" %}}Home{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button href="/index.html" %}}Home{{% /button %}}
|
||||
|
||||
#### Button with JavaScript Action
|
||||
|
||||
If your JavaScript action does not change the focus afterwards, make sure to call `this.blur()` in the end to unselect the button.
|
||||
|
||||
````go
|
||||
{{%/* button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button */%}}
|
||||
````
|
||||
|
||||
{{% button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}}
|
||||
|
||||
#### Button within a `form` Element
|
||||
|
||||
To use native HTML elements in your Markdown, add this in your `config.toml`
|
||||
|
||||
````toml
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
````
|
||||
|
||||
````html
|
||||
<form action="../../search.html" method="get">
|
||||
<input name="search-by-detail" class="search-by" type="search">
|
||||
{{%/* button type="submit" style="secondary" icon="search" %}}Search{{% /button */%}}
|
||||
</form>
|
||||
````
|
||||
|
||||
<form action="../../search.html" method="get">
|
||||
<div class="searchform" style="width: 20vw;">
|
||||
<input name="search-by-detail" class="search-by" type="search" placeholder="Search...">
|
||||
{{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
|
||||
</div>
|
||||
</form>
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/button.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/button.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Nice buttons on yer plank"
|
||||
title = "Button"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
86
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/_index.en.md
vendored
Normal file
86
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/_index.en.md
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "List the child pages of a page"
|
||||
title = "Children"
|
||||
+++
|
||||
|
||||
The `children` shortcode lists the child pages of the current page and its descendants.
|
||||
|
||||
{{% children sort="weight" %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* children sort="weight" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/children.html" (dict
|
||||
"context" .
|
||||
"sort" "weight"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:-------------------|:------------------|:------------|
|
||||
| **containerstyle** | `ul` | Choose the style used to group all children. It could be any HTML tag name. |
|
||||
| **style** | `li` | Choose the style used to display each descendant. It could be any HTML tag name. |
|
||||
| **showhidden** | `false` | When `true`, child pages hidden from the menu will be displayed as well. |
|
||||
| **description** | `false` | When `true` shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - [read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/). |
|
||||
| **depth** | `1` | The depth of descendants to display. For example, if the value is `2`, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. `999`. |
|
||||
| **sort** | see notes | The sort order of the displayed list.<br><br>If not set it is sorted by the [`ordersectionsby`]({{% relref "basics/configuration#global-site-parameters" %}}) setting of the site and the pages frontmatter<br><br>- `weight`: to sort on menu order<br>- `title`: to sort alphabetically on menu label. |
|
||||
|
||||
## Examples
|
||||
|
||||
### All Default
|
||||
|
||||
````go
|
||||
{{%/* children */%}}
|
||||
````
|
||||
|
||||
{{% children %}}
|
||||
|
||||
### With Description
|
||||
|
||||
````go
|
||||
{{%/* children description="true" */%}}
|
||||
````
|
||||
|
||||
{{%children description="true" %}}
|
||||
|
||||
### Infinite Depth and Hidden Pages
|
||||
|
||||
````go
|
||||
{{%/* children depth="999" showhidden="true" */%}}
|
||||
````
|
||||
|
||||
{{% children depth="999" showhidden="true" %}}
|
||||
|
||||
### Heading Styles for Container and Elements
|
||||
|
||||
````go
|
||||
{{%/* children containerstyle="div" style="h2" depth="3" description="true" */%}}
|
||||
````
|
||||
|
||||
{{% children containerstyle="div" style="h2" depth="3" description="true" %}}
|
||||
|
||||
### Divs for Group and Element Styles
|
||||
|
||||
````go
|
||||
{{%/* children containerstyle="div" style="div" depth="3" */%}}
|
||||
````
|
||||
|
||||
{{% children containerstyle="div" style="div" depth="3" %}}
|
||||
6
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/_index.pir.md
vendored
Normal file
6
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/_index.pir.md
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "List th' child planks on a plank"
|
||||
title = "Children"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
13
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-1/_index.en.md
vendored
Normal file
13
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-1/_index.en.md
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1"
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
This is a demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,8 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1"
|
||||
weight = 10
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,12 @@
|
||||
+++
|
||||
alwaysopen = true
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1"
|
||||
+++
|
||||
|
||||
This is a demo child page with a hidden child. You can still access the hidden child [directly]({{% relref "shortcodes/children/children-1/children-1-1/children-1-1-1" %}}) or via the search.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
alwaysopen = true
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,12 @@
|
||||
+++
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1 (hidden)"
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "plank 1-1-1 (hidden)"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,11 @@
|
||||
+++
|
||||
description = "This is a non-hidden demo child page of a hidden parent page"
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1"
|
||||
+++
|
||||
|
||||
This is a **non-hidden** demo child page of a hidden parent page with a hidden child. You can still access the hidden child [directly]({{% relref "shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1" %}}) or via the search.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a non-hidden demo child plank o' a hidden parrrent plank"
|
||||
tags = ["children", "hidden"]
|
||||
title = "plank 1-1-1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,12 @@
|
||||
+++
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1-1 (hidden)"
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "plank 1-1-1-1-1 (hidden)"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a non-hidden demo child page of a hidden parent page"
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1-1-1"
|
||||
+++
|
||||
|
||||
This is a **non-hidden** demo child page of a hidden parent page.
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a non-hidden demo child plank on a hidden parrrent plank"
|
||||
tags = ["children", "hidden"]
|
||||
title = "plank 1-1-1-1-1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,11 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1-1-2"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2-1"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1-1-2-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2-2"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1-1-2-2"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-3"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 1-1-3"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-2/_index.en.md
vendored
Normal file
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-2/_index.en.md
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 2"
|
||||
weight = 20
|
||||
+++
|
||||
|
||||
This is a demo child page with no description.
|
||||
|
||||
So its content is used as description.
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 2"
|
||||
weight = 20
|
||||
+++
|
||||
{{< piratify >}}
|
||||
13
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-3/_index.en.md
vendored
Normal file
13
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-3/_index.en.md
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 3"
|
||||
weight = 30
|
||||
+++
|
||||
|
||||
This is a demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@ -0,0 +1,8 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 3"
|
||||
weight = 30
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a plain page test nested in a parent"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 3-1"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a plain plank test nested 'n a parrrent"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "plank 3-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-4/_index.en.md
vendored
Normal file
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/children-4/_index.en.md
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 4 (hidden)"
|
||||
weight = 40
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
@ -0,0 +1,9 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "plank 4 (hidden)"
|
||||
weight = 40
|
||||
+++
|
||||
{{< piratify >}}
|
||||
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/test.en.md
vendored
Normal file
10
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/test.en.md
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
description: |
|
||||
This is a plain page test, and the beginning of a YAML multiline description...
|
||||
tags:
|
||||
- "Children"
|
||||
title: "page X"
|
||||
weight: 1
|
||||
---
|
||||
|
||||
This is a plain demo child page.
|
||||
9
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/test.pir.md
vendored
Normal file
9
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/children/test.pir.md
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
description: |
|
||||
This be a plain plank test, an' th' beginn'n o' a YAML multiline description…
|
||||
tags:
|
||||
- "Children"
|
||||
title: "plank X"
|
||||
weight: 1
|
||||
---
|
||||
{{< piratify >}}
|
||||
118
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/expand.en.md
vendored
Normal file
118
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/expand.en.md
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
+++
|
||||
description = "Expandable/collapsible sections of text"
|
||||
title = "Expand"
|
||||
+++
|
||||
|
||||
The `expand` shortcode displays an expandable/collapsible section of text.
|
||||
|
||||
{{% expand title="Expand me..." %}}Thank you!
|
||||
|
||||
That's some text with a footnote[^1]
|
||||
|
||||
[^1]: And that's the footnote.
|
||||
|
||||
That's some more text with a footnote.[^someid]
|
||||
|
||||
[^someid]:
|
||||
Anything of interest goes here.
|
||||
|
||||
Blue light glows blue.
|
||||
{{% /expand %}}
|
||||
|
||||
{{% notice note %}}
|
||||
This only works in modern browsers flawlessly. While Internet Explorer 11 has issues in displaying it, the functionality still works.
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* expand title="Expand me..." */%}}Thank you!{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* expand "Expand me..." */%}}Thank you!{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/expand.html" (dict
|
||||
"context" .
|
||||
"title" "Expand me..."
|
||||
"content" "Thank you!"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|:----------------------|:---------|:-----------------|:------------|
|
||||
| **title** | 1 | `"Expand me..."` | Arbitrary text to appear next to the expand/collapse icon. |
|
||||
| **open** | 2 | `false` | When `true` the content text will be initially shown as expanded. |
|
||||
| _**<content>**_ | | _<empty>_ | Arbitrary text to be displayed on expand. |
|
||||
|
||||
## Examples
|
||||
|
||||
### All Defaults
|
||||
|
||||
````go
|
||||
{{%/* expand */%}}Yes, you did it!{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
{{% expand %}}Yes, you did it!{{% /expand %}}
|
||||
|
||||
### Initially Expanded
|
||||
|
||||
````go
|
||||
{{%/* expand title="Expand me..." open="true" */%}}No need to press you!{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
{{% expand title="Expand me..." open="true" %}}No need to press you!{{% /expand %}}
|
||||
|
||||
### Arbitrary Text
|
||||
|
||||
````go
|
||||
{{%/* expand title="Show me almost **endless** possibilities" */%}}
|
||||
You can add standard markdown syntax:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
{{% expand title="Show me almost **endless** possibilities" %}}
|
||||
You can add standard markdown syntax:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{% /expand %}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/expand.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/expand.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Displays an expand'ble/collaps'ble sect'n o' text on yer plank"
|
||||
title = "Expand"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
97
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/icon.en.md
vendored
Normal file
97
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/icon.en.md
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
+++
|
||||
aliases = "/cont/icons"
|
||||
description = "Nice icons for your page"
|
||||
title = "Icon"
|
||||
+++
|
||||
|
||||
The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome.com) library.
|
||||
|
||||
{{% icon exclamation-triangle %}}
|
||||
{{% icon angle-double-up %}}
|
||||
{{% icon skull-crossbones %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with positional parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* icon icon="exclamation-triangle" */%}}
|
||||
{{%/* icon icon="angle-double-up" */%}}
|
||||
{{%/* icon icon="skull-crossbones" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* icon exclamation-triangle */%}}
|
||||
{{%/* icon angle-double-up */%}}
|
||||
{{%/* icon skull-crossbones */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"context" .
|
||||
"icon" "exclamation-triangle"
|
||||
)}}
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"context" .
|
||||
"icon" "angle-double-up"
|
||||
)}}
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"context" .
|
||||
"icon" "skull-crossbones"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|:----------------------|:---------|:----------------|:------------|
|
||||
| **icon** | 1 | _<empty>_ | [Font Awesome icon name]({{%relref "#finding-an-icon" %}}) to be displayed. It will be displayed in the text color of its according context. |
|
||||
|
||||
### Finding an icon
|
||||
|
||||
Browse through the available icons in the [Font Awesome Gallery](https://fontawesome.com/v5/search?m=free). Notice that the **free** filter is enabled, as only the free icons are available by default.
|
||||
|
||||
Once on the Font Awesome page for a specific icon, for example the page for the [heart](https://fontawesome.com/v5/icons/heart?s=solid), copy the icon name and paste into the Markdown content.
|
||||
|
||||
### Customising Icons
|
||||
|
||||
Font Awesome provides many ways to modify the icon
|
||||
|
||||
- Change color (by default the icon will inherit the parent color)
|
||||
- Increase or decrease size
|
||||
- Rotate
|
||||
- Combine with other icons
|
||||
|
||||
Check the full documentation on [web fonts with CSS](https://fontawesome.com/how-to-use/web-fonts-with-css) for more.
|
||||
|
||||
## Examples
|
||||
|
||||
### Standard Usage
|
||||
|
||||
````go
|
||||
Built with {{%/* icon heart */%}} by Relearn and Hugo
|
||||
````
|
||||
|
||||
Built with {{% icon heart %}} by Relearn and Hugo
|
||||
|
||||
### Advanced HTML Usage
|
||||
|
||||
While the shortcode simplyfies using standard icons, the icon customisation and other advanced features of the Font Awesome library requires you to use HTML directly. Just paste the `<i>` HTML into markup and Font Awesome will load the relevant icon.
|
||||
|
||||
````html
|
||||
Built with <i class="fas fa-heart"></i> by Relearn and Hugo
|
||||
````
|
||||
|
||||
Built with <i class="fas fa-heart"></i> by Relearn and Hugo
|
||||
6
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/icon.pir.md
vendored
Normal file
6
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/icon.pir.md
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
+++
|
||||
aliases = "/pir/cont/icons"
|
||||
descrption = "Nice ay'cons fer yer plank"
|
||||
title = "Icon"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
56
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/include.en.md
vendored
Normal file
56
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/include.en.md
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
+++
|
||||
description = "Displays content from other files"
|
||||
title = "Include"
|
||||
+++
|
||||
|
||||
The `include` shortcode includes other files from your project inside of the current page.
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to use positional aswell or also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* include file="shortcodes/INCLUDE_ME.md" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* include "shortcodes/INCLUDE_ME.md" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/include .html" (dict
|
||||
"context" .
|
||||
"file" "shortcodes/INCLUDE_ME.md"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
The included files can even contain Markdown and will be taken into account when generating the table of contents.
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|:---------------------|:---------|:-----------------|:------------|
|
||||
| **file** | 1 | _<empty>_ | The path to the file to be included. Path resolution adheres to [Hugo's build-in `readFile` function](https://gohugo.io/functions/readfile/) |
|
||||
| **hidefirstheading** | 2 | `false` | When `true` and the included file contains headings, the first heading will be hidden. This comes in handy, eg. if you include otherwise standalone Markdown files. |
|
||||
|
||||
## Examples
|
||||
|
||||
### Arbitrary Content
|
||||
|
||||
````go
|
||||
{{%/* include "shortcodes/INCLUDE_ME.md" */%}}
|
||||
````
|
||||
|
||||
{{% include "shortcodes/INCLUDE_ME.md" %}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/include.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/include.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Displays content from other Marrrkdown files"
|
||||
title = "Include"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
150
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/math.en.md
vendored
Normal file
150
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/math.en.md
vendored
Normal file
@ -0,0 +1,150 @@
|
||||
+++
|
||||
description = "Beautiful math and chemical formulae"
|
||||
title = "Math"
|
||||
+++
|
||||
|
||||
The `math` shortcode generates beautiful formatted math and chemical formulae using the [MathJax](https://mathjax.org/) library.
|
||||
|
||||
{{< math align="center" >}}
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
{{< /math >}}
|
||||
|
||||
{{% notice note %}}
|
||||
This only works in modern browsers.
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Math codefences (eg. GitHub) and so your markdown becomes more portable.
|
||||
|
||||
You are free to also call this shortcode from your own partials.
|
||||
|
||||
{{% notice note %}}
|
||||
To use codefence syntax you have to turn off `guessSyntax` for the `markup.highlight` setting ([see the configuration section](#configuration)).
|
||||
{{% /notice %}}
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="codefence" %}}
|
||||
|
||||
````md
|
||||
```math { align="center" }
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
```
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{</* math align="center" */>}}
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
{{</* /math */>}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/math.html" (dict
|
||||
"context" .
|
||||
"content" "$$left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$"
|
||||
"align" "center"
|
||||
)}}
|
||||
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:-----------------|:------------|
|
||||
| **align** | `center` | Allowed values are `left`, `center` or `right`. |
|
||||
| _**<content>**_ | _<empty>_ | Your formuale. |
|
||||
|
||||
## Configuration
|
||||
|
||||
MathJax is configured with default settings. You can customize MathJax's default settings for all of your files thru a JSON object in your `config.toml` or override these settings per page thru your pages frontmatter.
|
||||
|
||||
The JSON object of your `config.toml` / frontmatter is forwarded into MathJax's configuration object.
|
||||
|
||||
See [MathJax documentation](https://docs.mathjax.org/en/latest/options/index.html) for all allowed settings.
|
||||
|
||||
{{% notice note %}}
|
||||
To use codefence syntax you have to turn off `guessSyntax` for the `markup.highlight` setting.
|
||||
{{% /notice %}}
|
||||
|
||||
### Global Configuration File
|
||||
|
||||
````toml
|
||||
[params]
|
||||
mathJaxInitialize = "{ \"chtml\": { \"displayAlign\": \"left\" } }"
|
||||
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
# if `guessSyntax = true`, there will be no unstyled code even if no language
|
||||
# was given BUT Mermaid and Math codefences will not work anymore! So this is a
|
||||
# mandatory setting for your site if you want to use Math codefences
|
||||
guessSyntax = false
|
||||
````
|
||||
|
||||
### Page's Frontmatter
|
||||
|
||||
````toml
|
||||
+++
|
||||
mathJaxInitialize = "{ \"chtml\": { \"displayAlign\": \"left\" } }"
|
||||
+++
|
||||
````
|
||||
|
||||
## Examples
|
||||
|
||||
### Inline Math
|
||||
|
||||
````md
|
||||
Inline math is generated if you use a single `$` as a delimiter around your formulae: {{</* math */>}}$\sqrt{3}${{</* /math */>}}
|
||||
````
|
||||
|
||||
Inline math is generated if you use a single `$` as a delimiter around your formulae: {{< math >}}$\sqrt{3}${{< /math >}}
|
||||
|
||||
### Blocklevel Math with Right Alignment
|
||||
|
||||
````md
|
||||
If you delimit your formulae by two consecutive `$$` it generates a new block.
|
||||
|
||||
{{</* math align="right" */>}}
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
{{</* /math */>}}
|
||||
````
|
||||
|
||||
If you delimit your formulae by two consecutive `$$` it generates a new block.
|
||||
|
||||
{{< math align="right" >}}
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
{{< /math >}}
|
||||
|
||||
### Codefence
|
||||
|
||||
You can also use codefences.
|
||||
|
||||
````md
|
||||
```math
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
```
|
||||
````
|
||||
|
||||
````math
|
||||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||||
````
|
||||
|
||||
### Chemical Formulae
|
||||
|
||||
````md
|
||||
{{</* math */>}}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
{{</* /math */>}}
|
||||
`````
|
||||
|
||||
{{< math >}}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
{{< /math >}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/math.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/math.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Beaut'fl math and chemical formulae"
|
||||
title = "Math"
|
||||
+++
|
||||
{{< piratify true >}}
|
||||
600
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/mermaid.en.md
vendored
Normal file
600
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/mermaid.en.md
vendored
Normal file
@ -0,0 +1,600 @@
|
||||
+++
|
||||
description = "Generate diagrams and flowcharts from text"
|
||||
title = "Mermaid"
|
||||
+++
|
||||
|
||||
The `mermaid` shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the [Mermaid](https://mermaidjs.github.io/) library.
|
||||
|
||||
{{< mermaid align="center">}}
|
||||
graph LR;
|
||||
If --> Then
|
||||
Then --> Else
|
||||
{{< /mermaid >}}
|
||||
|
||||
{{% notice note %}}
|
||||
This only works in modern browsers.
|
||||
{{% /notice %}}
|
||||
|
||||
{{% notice warning %}}
|
||||
Due to limitations with [Mermaid](https://github.com/mermaid-js/mermaid/issues/1846), it is currently not possible to use Mermaid code fences in an initially collapsed `expand` shortcode. This is a know issue and [can't be fixed by this theme](https://github.com/McShelby/hugo-theme-relearn/issues/187).
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Mermaid codefences (eg. GitHub) and so your markdown becomes more portable.
|
||||
|
||||
You are free to also call this shortcode from your own partials.
|
||||
|
||||
{{% notice note %}}
|
||||
To use codefence syntax you have to turn off `guessSyntax` for the `markup.highlight` setting ([see the configuration section](#configuration)).
|
||||
{{% /notice %}}
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="codefence" %}}
|
||||
|
||||
````md
|
||||
```mermaid { align="center" zoom="true" }
|
||||
graph LR;
|
||||
If --> Then
|
||||
Then --> Else
|
||||
```
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{</* mermaid align="center" zoom="true" */>}}
|
||||
graph LR;
|
||||
If --> Then
|
||||
Then --> Else
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/mermaid.html" (dict
|
||||
"context" .
|
||||
"content" "graph LR;\nIf --> Then\nThen --> Else"
|
||||
"align" "center"
|
||||
"zoom" "true"
|
||||
)}}
|
||||
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures.
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:-----------------|:------------|
|
||||
| **align** | `center` | Allowed values are `left`, `center` or `right`. |
|
||||
| **zoom** | see notes | Whether the graph is pan- and zoomable.<br><br>If not set the value is determined by the `mermaidZoom` setting of the [site](#global-configuration-file) or the [pages frontmatter](#pages-frontmatter) or `false` if not set at all.<br><br>- `false`: no pan or zoom<br>- `true`: pan and zoom active |
|
||||
| _**<content>**_ | _<empty>_ | Your Mermaid graph. |
|
||||
|
||||
## Configuration
|
||||
|
||||
Mermaid is configured with default settings. You can customize Mermaid's default settings for all of your files thru a JSON object in your `config.toml`, override these settings per page thru your pages frontmatter or override these setting per diagramm thru [diagram directives](https://mermaid-js.github.io/mermaid/#/directives?id=directives).
|
||||
|
||||
The JSON object of your `config.toml` / frontmatter is forwarded into Mermaid's `mermaid.initialize()` function.
|
||||
|
||||
See [Mermaid documentation](https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults) for all allowed settings.
|
||||
|
||||
The `theme` setting can also be set by your used color variant. This will be the sitewide default and can - again - be overridden by your settings in `config.toml`, frontmatter or diagram directives.
|
||||
|
||||
{{% notice note %}}
|
||||
To use codefence syntax you have to turn off `guessSyntax` for the `markup.highlight` setting.
|
||||
{{% /notice %}}
|
||||
|
||||
### Global Configuration File
|
||||
|
||||
````toml
|
||||
[params]
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
mermaidZoom = true
|
||||
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
# if `guessSyntax = true`, there will be no unstyled code even if no language
|
||||
# was given BUT Mermaid and Math codefences will not work anymore! So this is a
|
||||
# mandatory setting for your site if you want to use Mermaid codefences
|
||||
guessSyntax = false
|
||||
````
|
||||
|
||||
### Page's Frontmatter
|
||||
|
||||
````toml
|
||||
+++
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
mermaidZoom = true
|
||||
+++
|
||||
````
|
||||
|
||||
## Examples
|
||||
|
||||
### Flowchart with YAML-Title
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
---
|
||||
title: Example Diagram
|
||||
---
|
||||
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 */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
---
|
||||
title: Example Diagram
|
||||
---
|
||||
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 Diagram with Configuration Directive
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Class Diagram with Codefence Syntax
|
||||
|
||||
````go
|
||||
```mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
````mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
````
|
||||
|
||||
### State Diagram Aligned to the Right
|
||||
|
||||
````go
|
||||
{{</* mermaid align="right" */>}}
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
closed: Closed Door
|
||||
locked: Locked Door
|
||||
open --> closed: Close
|
||||
closed --> locked: Lock
|
||||
locked --> closed: Unlock
|
||||
closed --> open: Open
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid align="right" >}}
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
closed: Closed Door
|
||||
locked: Locked Door
|
||||
open --> closed: Close
|
||||
closed --> locked: Lock
|
||||
locked --> closed: Unlock
|
||||
closed --> open: Open
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Entity Relationship Model with Non-Default Mermaid Theme
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
%%{init:{"theme":"forest"}}%%
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
%%{init:{"theme":"forest"}}%%
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
|
||||
### User Journey
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 3: Me
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 3: Me
|
||||
{{< /mermaid >}}
|
||||
|
||||
### GANTT Chart
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to Mermaid
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to Mermaid :1d
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to Mermaid
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to Mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Pie Chart without Zoom
|
||||
|
||||
````go
|
||||
{{</* mermaid zoom="false" */>}}
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid zoom="false" >}}
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Requirement Diagram
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Git Graph
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{< /mermaid >}}
|
||||
|
||||
### C4 Diagrams
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Mindmaps
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Timeline
|
||||
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook
|
||||
: Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
{{< mermaid >}}
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook
|
||||
: Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
{{< /mermaid >}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/mermaid.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/mermaid.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Generrrat'n o' diagrrram an' flowcharrrt frrrom text 'n a similar manner as Marrrkdown"
|
||||
title = "Merrrmaid"
|
||||
+++
|
||||
{{< piratify true >}}
|
||||
299
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/notice.en.md
vendored
Normal file
299
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/notice.en.md
vendored
Normal file
@ -0,0 +1,299 @@
|
||||
+++
|
||||
description = "Disclaimers to help you structure your page"
|
||||
title = "Notice"
|
||||
+++
|
||||
|
||||
The `notice` shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.
|
||||
|
||||
{{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}}
|
||||
It is all about the boxes.
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="There may be pirates" icon="skull-crossbones" */%}}
|
||||
It is all about the boxes.
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* notice primary "There may be pirates" "skull-crossbones" */%}}
|
||||
It is all about the boxes.
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/notice.html" (dict
|
||||
"context" .
|
||||
"style" "primary"
|
||||
"title" "There may be pirates"
|
||||
"icon" "skull-crossbones"
|
||||
"content" "It is all about the boxes."
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|:----------|:---------|:----------|:------------|
|
||||
| **style** | 1 | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | 3 | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| _**<content>**_ | | _<empty>_ | Arbitrary text to be displayed in box. |
|
||||
|
||||
## Examples
|
||||
|
||||
### By Severity
|
||||
|
||||
#### Info with markup
|
||||
|
||||
````go
|
||||
{{%/* notice style="info" */%}}
|
||||
An **information** disclaimer
|
||||
|
||||
You can add standard markdown syntax:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="info" %}}
|
||||
An **information** disclaimer
|
||||
|
||||
You can add standard markdown syntax:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{% /notice %}}
|
||||
|
||||
#### Note
|
||||
|
||||
````go
|
||||
{{%/* notice style="note" */%}}
|
||||
A **notice** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="note" %}}
|
||||
A **notice** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Tip
|
||||
|
||||
````go
|
||||
{{%/* notice style="tip" */%}}
|
||||
A **tip** disclaimer
|
||||
````
|
||||
|
||||
{{% notice style="tip" %}}
|
||||
A **tip** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning with Non-Default Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" title="Here are dragons" icon="dragon" */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" title="Here are dragons" icon="dragon" %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning without a Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" title=" " icon=" " */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" title=" " icon=" " %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
### By Brand Colors
|
||||
|
||||
#### Primary with Title only
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="Primary" */%}}
|
||||
A **primary** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="primary" title="Primary" %}}
|
||||
A **primary** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Secondary with Icon only
|
||||
|
||||
````go
|
||||
{{%/* notice style="secondary" icon="stopwatch" */%}}
|
||||
A **secondary** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="stopwatch" %}}
|
||||
A **secondary** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Accent
|
||||
|
||||
````go
|
||||
{{%/* notice style="accent" */%}}
|
||||
An **accent** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="accent" %}}
|
||||
An **accent** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
### By Color
|
||||
|
||||
#### Blue without a Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="blue" */%}}
|
||||
A **blue** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="blue" %}}
|
||||
A **blue** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Green with Title only
|
||||
|
||||
````go
|
||||
{{%/* notice style="green" title="Green" */%}}
|
||||
A **green** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="green" title="Green" %}}
|
||||
A **green** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Grey with Icon only
|
||||
|
||||
````go
|
||||
{{%/* notice style="grey" icon="bug" */%}}
|
||||
A **grey** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="grey" icon="bug" %}}
|
||||
A **grey** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Orange with Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="orange" title="Orange" icon="bug" */%}}
|
||||
A **orange** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="orange" title="Orange" icon="bug" %}}
|
||||
A **orange** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Red without a Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="red" */%}}
|
||||
A **red** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="red" %}}
|
||||
A **red** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
### By Special Color
|
||||
|
||||
#### Default with Positional Parameter
|
||||
|
||||
````go
|
||||
{{%/* notice default "Pay Attention to this Note!" "skull-crossbones" */%}}
|
||||
Some serious information.
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice default "Pay Attention to this Note!" "skull-crossbones" %}}
|
||||
Some serious information.
|
||||
{{% /notice %}}
|
||||
|
||||
#### Transparent with Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" */%}}
|
||||
Some serious information.
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" %}}
|
||||
Some serious information.
|
||||
{{% /notice %}}
|
||||
|
||||
### With User-Defined Color, Font Awesome Brand Icon and Markdown Title
|
||||
|
||||
````go
|
||||
{{%/* notice color="fuchsia" title="**Hugo**" icon="fab fa-hackerrank" */%}}
|
||||
Victor? Is it you?
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice color="fuchsia" title="**Hugo**" icon="fab fa-hackerrank" %}}
|
||||
Victor? Is it you?
|
||||
{{% /notice %}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/notice.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/notice.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Disclaimerrrs t' help ye strrructurrre yer plank"
|
||||
title = "Notice"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
56
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/_index.en.md
vendored
Normal file
56
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/_index.en.md
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
description: "UI for your OpenAPI / Swagger specifications"
|
||||
title: "OpenAPI"
|
||||
---
|
||||
|
||||
The `openapi` shortcode uses the [Swagger UI](https://github.com/swagger-api/swagger-ui) library to display your OpenAPI / Swagger specifications.
|
||||
|
||||
{{% notice note %}}
|
||||
This only works in modern browsers.
|
||||
{{% /notice %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{</* openapi src="https://petstore3.openapi.io/api/v3/openapi.json" */>}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/openapi.html" (dict
|
||||
"context" .
|
||||
"src" "https://petstore3.openapi.io/api/v3/openapi.json"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:---------------------|:-----------------|:------------|
|
||||
| **src** | _<empty>_ | The URL to the OpenAPI specification file. This can be relative to the URL of your page if it is a leaf or branch bundle. |
|
||||
|
||||
{{% notice note %}}
|
||||
If you want to print out (or generate a PDF) from your OpenAPI documentation, don't initiate printing directly from the page because the elements are optimized for interactive usage in a browser.
|
||||
|
||||
Instead, open the [print preview]({{% relref "basics/configuration/#activate-print-support" %}}) in your browser and initiate printing from that page. This page is optimized for reading and expands most of the available sections.
|
||||
{{% /notice %}}
|
||||
|
||||
## Example
|
||||
|
||||
### Using Local File
|
||||
|
||||
````go
|
||||
{{</* openapi src="petstore.json" */>}}
|
||||
````
|
||||
|
||||
{{< openapi src="petstore.json" >}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/_index.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/_index.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
description: "Adds UI fer yer OpenAPI / Swaggerrr Specificat'ns"
|
||||
title: "OpenAPI"
|
||||
---
|
||||
{{< piratify true >}}
|
||||
1225
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/petstore.json
vendored
Normal file
1225
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/openapi/petstore.json
vendored
Normal file
File diff suppressed because it is too large
Load Diff
54
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/siteparam.en.md
vendored
Normal file
54
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/siteparam.en.md
vendored
Normal file
@ -0,0 +1,54 @@
|
||||
+++
|
||||
description = "Get value of site params"
|
||||
title = "Site Param"
|
||||
+++
|
||||
|
||||
The `siteparam` shortcode prints values of site params.
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to use positional aswell or call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupId="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
|
||||
````go
|
||||
{{%/* siteparam name="editURL" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* siteparam "editURL" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/siteparam.html" (dict
|
||||
"context" .
|
||||
"name" "editURL"
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|:---------------------|:---------|:-----------------|:------------|
|
||||
| **name** | 1 | _<empty>_ | The name of the site param to be displayed. |
|
||||
|
||||
## Examples
|
||||
|
||||
### `editURL` from `config.toml`
|
||||
|
||||
```go
|
||||
`editURL` value: {{%/* siteparam name="editURL" */%}}
|
||||
```
|
||||
|
||||
`editURL` value: {{% siteparam name="editURL" %}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/siteparam.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/siteparam.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Get value o' ship parrrams varrriables 'n yer plank"
|
||||
title = "Ship Param"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
153
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tab.en.md
vendored
Normal file
153
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tab.en.md
vendored
Normal file
@ -0,0 +1,153 @@
|
||||
+++
|
||||
description = "Show content in a single tab"
|
||||
title = "Tab"
|
||||
+++
|
||||
|
||||
You can use a `tab` shortcode to display a single tab.
|
||||
|
||||
This is especially useful if you want to flag your code example with an explicit language.
|
||||
|
||||
If you want multiple tabs grouped together you can wrap your tabs into the [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}).
|
||||
|
||||
{{% tab title="c" %}}
|
||||
|
||||
```python
|
||||
printf("Hello World!");
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
{{< tabs groupid="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* tab title="c" */%}}
|
||||
```c
|
||||
printf("Hello World!");
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/tab.html" (dict
|
||||
"context" .
|
||||
"title" "c"
|
||||
"content" ("```c\nprintf(\"Hello World!\")\n```" | .RenderString)
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:----------------|:------------|
|
||||
| **style** | see notes | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | see notes | Arbitrary title for the tab. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| _**<content>**_ | _<empty>_ | Arbitrary text to be displayed in the tab. |
|
||||
|
||||
## Examples
|
||||
|
||||
### Single Code Block with Collapsed Margins
|
||||
|
||||
{{% tab title="Code" %}}
|
||||
|
||||
```python
|
||||
printf("Hello World!");
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
|
||||
### Mixed Markdown Content
|
||||
|
||||
{{% tab title="_**Mixed**_" %}}
|
||||
|
||||
A tab can not only contain code but arbitrary text. In this case text and code will get a margin.
|
||||
|
||||
```python
|
||||
printf("Hello World!");
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
|
||||
### Understanding `style` and `color` Behavior
|
||||
|
||||
The `style` parameter affects how the `color` parameter is applied.
|
||||
|
||||
````go
|
||||
{{</* tabs */>}}
|
||||
{{%/* tab title="just colored style" style="blue" */%}}
|
||||
The `style` parameter is set to a color style.
|
||||
|
||||
This will set the background to a lighter version of the chosen style color as configured in your theme variant.
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="just color" color="blue" */%}}
|
||||
Only the `color` parameter is set.
|
||||
|
||||
This will set the background to a lighter version of the chosen CSS color value.
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="default style and color" style="default" color="blue" */%}}
|
||||
The `style` parameter affects how the `color` parameter is applied.
|
||||
|
||||
The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="just severity style" style="info" */%}}
|
||||
The `style` parameter is set to a severity style.
|
||||
|
||||
This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="severity style and color" style="info" color="blue" */%}}
|
||||
The `style` parameter affects how the `color` parameter is applied.
|
||||
|
||||
This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="just colored style" style="blue" %}}
|
||||
|
||||
The `style` parameter is set to a color style.
|
||||
|
||||
This will set the background to a lighter version of the chosen style color as configured in your theme variant.
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="just color" color="blue" %}}
|
||||
|
||||
Only the `color` parameter is set.
|
||||
|
||||
This will set the background to a lighter version of the chosen CSS color value.
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="default style and color" style="default" color="blue" %}}
|
||||
|
||||
The `style` parameter affects how the `color` parameter is applied.
|
||||
|
||||
The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="just severity style" style="info" %}}
|
||||
|
||||
The `style` parameter is set to a severity style.
|
||||
|
||||
This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="severity style and color" style="info" color="blue" %}}
|
||||
|
||||
The `style` parameter affects how the `color` parameter is applied.
|
||||
|
||||
This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tab.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tab.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Show rrrambl'n 'n a single tab"
|
||||
title = "Tab"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
288
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tabs.en.md
vendored
Normal file
288
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tabs.en.md
vendored
Normal file
@ -0,0 +1,288 @@
|
||||
+++
|
||||
description = "Show content in tabbed views"
|
||||
title = "Tabs"
|
||||
+++
|
||||
|
||||
The `tabs` shortcode displays arbitrary content in an unlimited number of tabs.
|
||||
|
||||
This comes in handy eg. for providing code snippets for multiple languages.
|
||||
|
||||
If you just want a single tab you can instead call the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) standalone.
|
||||
|
||||
{{< tabs title="hello." >}}
|
||||
{{% tab title="py" %}}
|
||||
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="sh" %}}
|
||||
|
||||
```bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="c" %}}
|
||||
|
||||
```c
|
||||
printf("Hello World!");
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Usage
|
||||
|
||||
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
|
||||
|
||||
See the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) for a description of the parameter for nested tabs.
|
||||
|
||||
{{< tabs groupid="shortcode-parameter">}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{</* tabs title="hello." */>}}
|
||||
{{%/* tab title="py" */%}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="sh" */%}}
|
||||
```bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="c" */%}}
|
||||
```c
|
||||
printf"Hello World!");
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
{{ partial "shortcodes/tabs.html" (dict
|
||||
"context" .
|
||||
"title" "hello."
|
||||
"content" (slice
|
||||
(dict
|
||||
"title" "py"
|
||||
"content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
|
||||
)
|
||||
(dict
|
||||
"title" "sh"
|
||||
"content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
|
||||
)
|
||||
(dict
|
||||
"title" "c"
|
||||
"content" ("```c\nprintf(\"Hello World!\");\n```" | .RenderString)
|
||||
)
|
||||
)
|
||||
)}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|:----------------------|:---------------------|:------------|
|
||||
| **groupid** | _<random>_ | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. The tab selection is restored automatically based on the `groupid` for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.<br><br>This sychronization applies to the whole site! |
|
||||
| **style** | _<empty>_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
|
||||
| **color** | _<empty>_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
|
||||
| **title** | _<empty>_ | Arbitrary title written in front of the tab view. |
|
||||
| **icon** | _<empty>_ | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. |
|
||||
| _**<content>**_ | _<empty>_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
|
||||
|
||||
## Examples
|
||||
|
||||
### Behavior of the `groupid`
|
||||
|
||||
See what happens to the tab views while you select different tabs.
|
||||
|
||||
While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="Group A, Tab View 1" %}}
|
||||
````go
|
||||
{{</* tabs groupid="a" */>}}
|
||||
{{%/* tab title="json" */%}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="_**XML**_ stuff" */%}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="text" */%}}
|
||||
Hello World
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
{{% /tab %}}
|
||||
{{% tab title="Group A, Tab View 2" %}}
|
||||
````go
|
||||
{{</* tabs groupid="a" */>}}
|
||||
{{%/* tab title="json" */%}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="XML stuff" */%}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
{{% /tab %}}
|
||||
{{% tab title="Group B" %}}
|
||||
````go
|
||||
{{</* tabs groupid="b" */>}}
|
||||
{{%/* tab title="json" */%}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="XML stuff" */%}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
#### Group A, Tab View 1
|
||||
|
||||
{{< tabs groupid="tab-example-a" >}}
|
||||
{{% tab title="json" %}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab title="_**XML**_ stuff" %}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab title="text" %}}
|
||||
|
||||
Hello World
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
#### Group A, Tab View 2
|
||||
|
||||
{{< tabs groupid="tab-example-a" >}}
|
||||
{{% tab title="json" %}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab title="XML stuff" %}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
#### Group B
|
||||
|
||||
{{< tabs groupid="tab-example-b" >}}
|
||||
{{% tab title="json" %}}
|
||||
```json
|
||||
{ "Hello": "World" }
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab title="XML stuff" %}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Nested Tab Views and Color
|
||||
|
||||
In case you want to nest tab views, the parent tab that contains nested tab views needs to be declared with `{{</* tab */>}}` instead of `{{%/* tab */%}}`. Note, that in this case it is not possible to put markdown in the parent tab.
|
||||
|
||||
You can also set style and color parameter for all tabs and overwrite them on tab level. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values.
|
||||
|
||||
````go
|
||||
{{</* tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" */>}}
|
||||
{{</* tab title="Text" */>}}
|
||||
Simple text is possible here...
|
||||
{{</* tabs groupid="tabs-example-language" */>}}
|
||||
{{%/* tab title="python" */%}}
|
||||
Python is **super** easy.
|
||||
|
||||
- most of the time.
|
||||
- if you don't want to output unicode
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="bash" */%}}
|
||||
Bash is for **hackers**.
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab title="Code" style="default" color="darkorchid" */>}}
|
||||
...but no markdown
|
||||
{{</* tabs groupid="tabs-example-language" */>}}
|
||||
{{%/* tab title="python" */%}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab title="bash" */%}}
|
||||
```bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
{{</* /tab */>}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" >}}
|
||||
{{< tab title="Text" >}}
|
||||
Simple text is possible here...
|
||||
{{< tabs groupid="tabs-example-language" >}}
|
||||
{{% tab title="python" %}}
|
||||
Python is **super** easy.
|
||||
|
||||
- most of the time.
|
||||
- if you don't want to output unicode
|
||||
{{% /tab %}}
|
||||
{{% tab title="bash" %}}
|
||||
Bash is for **hackers**.
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab title="Code" style="default" color="darkorchid" >}}
|
||||
...but no markdown
|
||||
{{< tabs groupid="tabs-example-language" >}}
|
||||
{{% tab title="python" %}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab title="bash" %}}
|
||||
```bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tabs.pir.md
vendored
Normal file
5
docs/themes/hugo-theme-relearn/exampleSite/content/shortcodes/tabs.pir.md
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Synchr'nize select'n o' content 'n different tabbed views"
|
||||
title = "Tabs"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
Reference in New Issue
Block a user