diff options
Diffstat (limited to 'exampleSite/content.en/docs/shortcodes')
12 files changed, 296 insertions, 0 deletions
diff --git a/exampleSite/content.en/docs/shortcodes/_index.md b/exampleSite/content.en/docs/shortcodes/_index.md new file mode 100644 index 0000000..9bb0430 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/_index.md @@ -0,0 +1,3 @@ +--- +bookFlatSection: true +--- diff --git a/exampleSite/content.en/docs/shortcodes/buttons.md b/exampleSite/content.en/docs/shortcodes/buttons.md new file mode 100644 index 0000000..c2ef1e7 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/buttons.md @@ -0,0 +1,13 @@ +# Buttons + +Buttons are styled links that can lead to local page or external link. + +## Example + +```tpl +{{</* button relref="/" [class="..."] */>}}Get Home{{</* /button */>}} +{{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Contribute{{</* /button */>}} +``` + +{{< button relref="/" >}}Get Home{{< /button >}} +{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}} diff --git a/exampleSite/content.en/docs/shortcodes/columns.md b/exampleSite/content.en/docs/shortcodes/columns.md new file mode 100644 index 0000000..0b8fde8 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/columns.md @@ -0,0 +1,45 @@ +# Columns + +Columns help organize shorter pieces of content horizontally for readability. + + +```html +{{</* columns */>}} <!-- begin columns block --> +# Left Content +Lorem markdownum insigne... + +<---> <!-- magic separator, between columns --> + +# Mid Content +Lorem markdownum insigne... + +<---> <!-- magic separator, between columns --> + +# Right Content +Lorem markdownum insigne... +{{</* /columns */>}} +``` + +## Example + +{{< columns >}} +## Left Content +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. + +<---> + +## Mid Content +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! + +<---> + +## Right Content +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. +{{< /columns >}} diff --git a/exampleSite/content.en/docs/shortcodes/details.md b/exampleSite/content.en/docs/shortcodes/details.md new file mode 100644 index 0000000..248bafd --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/details.md @@ -0,0 +1,22 @@ +# Details + +Details shortcode is a helper for `details` html5 element. It is going to replace `expand` shortcode. + +## Example +```tpl +{{</* details "Title" [open] */>}} +## Markdown content +Lorem markdownum insigne... +{{</* /details */>}} +``` +```tpl +{{</* details title="Title" open=true */>}} +## Markdown content +Lorem markdownum insigne... +{{</* /details */>}} +``` + +{{< details "Title" open >}} +## Markdown content +Lorem markdownum insigne... +{{< /details >}} diff --git a/exampleSite/content.en/docs/shortcodes/expand.md b/exampleSite/content.en/docs/shortcodes/expand.md new file mode 100644 index 0000000..c62520f --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/expand.md @@ -0,0 +1,35 @@ +# Expand + +Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it. + +## Example +### Default + +```tpl +{{</* expand */>}} +## Markdown content +Lorem markdownum insigne... +{{</* /expand */>}} +``` + +{{< expand >}} +## Markdown content +Lorem markdownum insigne... +{{< /expand >}} + +### With Custom Label + +```tpl +{{</* expand "Custom Label" "..." */>}} +## Markdown content +Lorem markdownum insigne... +{{</* /expand */>}} +``` + +{{< expand "Custom Label" "..." >}} +## Markdown content +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. +{{< /expand >}} diff --git a/exampleSite/content.en/docs/shortcodes/hints.md b/exampleSite/content.en/docs/shortcodes/hints.md new file mode 100644 index 0000000..3477113 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/hints.md @@ -0,0 +1,32 @@ +# Hints + +Hint shortcode can be used as hint/alerts/notification block. +There are 3 colors to choose: `info`, `warning` and `danger`. + +```tpl +{{</* hint [info|warning|danger] */>}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{</* /hint */>}} +``` + +## Example + +{{< hint info >}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{< /hint >}} + +{{< hint warning >}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{< /hint >}} + +{{< hint danger >}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{< /hint >}} diff --git a/exampleSite/content.en/docs/shortcodes/katex.md b/exampleSite/content.en/docs/shortcodes/katex.md new file mode 100644 index 0000000..7587bd7 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/katex.md @@ -0,0 +1,28 @@ +# KaTeX + +KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/) + +## Example +{{< columns >}} + +```latex +{{</*/* katex [display] [class="text-center"] */*/>}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{</*/* /katex */*/>}} +``` + +<---> + +{{< katex display >}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{< /katex >}} + +{{< /columns >}} + +## Display Mode Example + +Here is some inline example: {{< katex >}}\pi(x){{< /katex >}}, rendered in the same line. And below is `display` example, having `display: block` +{{< katex display >}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{< /katex >}} +Text continues here. diff --git a/exampleSite/content.en/docs/shortcodes/mermaid.md b/exampleSite/content.en/docs/shortcodes/mermaid.md new file mode 100644 index 0000000..a9ed4d4 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/mermaid.md @@ -0,0 +1,41 @@ +# Mermaid Chart + +[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text. + +{{< hint info >}} +**Override Mermaid Initialization Config** + +To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid, +create a `mermaid.json` file in your `assets` folder! +{{< /hint >}} + +## Example + +{{< columns >}} +```tpl +{{</*/* mermaid [class="text-center"]*/*/>}} +stateDiagram-v2 + State1: The state with a note + note right of State1 + Important information! You can write + notes. + end note + State1 --> State2 + note left of State2 : This is the note to the left. +{{</*/* /mermaid */*/>}} +``` + +<---> + +{{< mermaid >}} +stateDiagram-v2 + State1: The state with a note + note right of State1 + Important information! You can write + notes. + end note + State1 --> State2 + note left of State2 : This is the note to the left. +{{< /mermaid >}} + +{{< /columns >}} diff --git a/exampleSite/content.en/docs/shortcodes/section/_index.md b/exampleSite/content.en/docs/shortcodes/section/_index.md new file mode 100644 index 0000000..bd5db38 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/section/_index.md @@ -0,0 +1,15 @@ +--- +bookCollapseSection: true +--- + +# Section + +Section renders pages in section as definition list, using title and description. + +## Example + +```tpl +{{</* section */>}} +``` + +{{<section>}} diff --git a/exampleSite/content.en/docs/shortcodes/section/first-page.md b/exampleSite/content.en/docs/shortcodes/section/first-page.md new file mode 100644 index 0000000..999c120 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/section/first-page.md @@ -0,0 +1,6 @@ +# First page + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +<!--more--> +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/exampleSite/content.en/docs/shortcodes/section/second-page.md b/exampleSite/content.en/docs/shortcodes/section/second-page.md new file mode 100644 index 0000000..70414a3 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/section/second-page.md @@ -0,0 +1,6 @@ +# Second Page +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +<!--more--> +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + diff --git a/exampleSite/content.en/docs/shortcodes/tabs.md b/exampleSite/content.en/docs/shortcodes/tabs.md new file mode 100644 index 0000000..096892c --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/tabs.md @@ -0,0 +1,50 @@ +# Tabs + +Tabs let you organize content by context, for example installation instructions for each supported platform. + +```tpl +{{</* tabs "uniqueid" */>}} +{{</* tab "MacOS" */>}} # MacOS Content {{</* /tab */>}} +{{</* tab "Linux" */>}} # Linux Content {{</* /tab */>}} +{{</* tab "Windows" */>}} # Windows Content {{</* /tab */>}} +{{</* /tabs */>}} +``` + +## Example + +{{< tabs "uniqueid" >}} +{{< tab "MacOS" >}} +# MacOS + +This is tab **MacOS** content. + +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. +{{< /tab >}} + +{{< tab "Linux" >}} + +# Linux + +This is tab **Linux** content. + +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. +{{< /tab >}} + +{{< tab "Windows" >}} + +# Windows + +This is tab **Windows** content. + +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. +Miseratus fonte Ditis conubia. +{{< /tab >}} +{{< /tabs >}} |