huge upgrade to theme and pagefind search bar.

2026-04-17 13:28:48 -06:00
parent a6a38f7ea7
commit 235d40da0b
442 changed files with 18933 additions and 2893 deletions
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/_index.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/_index.md
@@ -0,0 +1,3 @@
+---
+bookFlatSection: true
+---
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/buttons.md
+++ b/themes/hugo-book.backup/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 href="/">}}Get Home{{</button>}}
+{{<button href="https://github.com/alex-shpak/hugo-book">}}Contribute{{</button>}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/columns.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/columns.md
@@ -0,0 +1,65 @@
+# Columns
+
+Columns help organize shorter pieces of content horizontally for readability. `columns` shortcode styles markdown list as up to 3 columns.
+
+## Example
+
+```tpl
+{{%/* columns [ratio="1:1"] [class="..."] */%}}
+- ### Left Content
+  Lorem markdownum insigne...
+
+- ### Mid Content
+  Lorem markdownum insigne...
+
+- ### Right Content
+  Lorem markdownum insigne...
+{{%/* /columns */%}}
+```
+
+{{% 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 %}}
+
+## Settings size ratio for columns
+
+```tpl
+{{%/* columns ratio="1:2" */%}}
+- ## x1 Column
+  Lorem markdownum insigne...
+
+- ## x2 Column
+  Lorem markdownum insigne...
+{{%/* /columns */%}}
+```
+
+{{% columns ratio="1:2" %}}
+- ### x1 Column
+  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.
+
+- ### x2 Column
+  Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+  stringit, frustra Saturnius uteroque inter!
+  
+  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 %}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/details.md
+++ b/themes/hugo-book.backup/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 %}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/_index.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/_index.md
@@ -0,0 +1,3 @@
+---
+bookCollapseSection: true
+---
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/asciinema.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/asciinema.md
@@ -0,0 +1,28 @@
+# Asciinema
+
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
+Asciinema shortcode integrates asciinema player into the markdown page.
+
+```tpl
+{{</* asciinema
+  cast="asciinema-627097.cast"
+  or
+  cast="https://asciinema.org/a/vJNKUQFjuh7qKI2j3OoaKs8Jk.cast"
+  loop=true
+  autoplay=true
+  speed=2 */>}}
+```
+
+{{< asciinema
+  cast="asciinema-627097.cast"
+  loop=true
+  autoplay=true
+  speed=2 >}}
+
+## Parameters
+
+All parameters added to the shortcode will be transformed to options for Asciinema player, expect `cast` parameter that is used to locate cast file. Cast file follows same rules as portable image, it could be site resource, page resource or remote file URL.
+
+[List of Asciinema options](https://docs.asciinema.org/manual/player/options/)
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/badges.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/badges.md
@@ -0,0 +1,32 @@
+# Badges
+
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
+Badges can be used to annotate your pages with additional information or mark specific places in markdown content.
+
+{{< badge title="Title" value="Value" >}}
+{{< badge style="info" title="Hugo" value="0.147.6" >}}
+{{< badge style="success" title="Build" value="Passing" >}}
+{{< badge style="warning" title="Coverage" value="25%" >}}
+{{< badge style="danger" title="Issues" value="120" >}}
+
+## Examples
+
+| Shortcode | Output |
+| --        | --     |
+| `{{</* badge style="info" title="hugo" value="0.147.6" */>}}`     | {{< badge style="info" title="Hugo" value="0.147.6" >}}     |
+| `{{</* badge style="success" title="Build" value="Passing" */>}}` | {{< badge style="success" title="Build" value="Passing" >}} |
+| `{{</* badge style="warning" title="Coverage" value="25%" */>}}`  | {{< badge style="warning" title="Coverage" value="25%" >}}  |
+| `{{</* badge style="danger" title="Issues" value="120" */>}}`     | {{< badge style="danger" title="Issues" value="120" >}}     |
+| | |
+| `{{</* badge style="info" title="Title" */>}}`                    | {{< badge style="info" title="Title" >}}                    |
+| `{{</* badge style="info" value="Value" */>}}`                    | {{< badge style="info" value="Value" >}}                    |
+| `{{</* badge title="Default" */>}}`                               | {{< badge value="Default" >}}                               |
+
+## Use in links 
+
+A badge can be wrapped in markdown link producing following result: [{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
+```tpl
+[{{</* badge title="Hugo" value="0.147.6" */>}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
+```
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/cards.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/cards.md
@@ -0,0 +1,33 @@
+# Cards
+
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
+## Example
+
+{{% columns %}}
+- {{< card image="placeholder.svg" >}}
+  ### Line 1
+  Line 2
+  {{< /card >}}
+
+- {{< card image="placeholder.svg" >}}
+  This is tab MacOS content.
+  {{< /card >}}
+{{% /columns %}}
+
+{{% columns %}}
+- {{< card href="/docs/shortcodes/experimental/cards" >}}
+  **Markdown**  
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
+  {{< /card >}}
+
+- {{< card >}}
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
+  {{< /card >}}
+
+- {{< card title="Card" >}}
+  ### Heading
+  This is tab MacOS content.
+  {{< /card >}}
+{{% /columns %}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/images.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/experimental/images.md
@@ -0,0 +1,33 @@
+# Images
+
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
+Image shortcode produces an image that can be clicked to expand.
+
+## Example
+
+```go-html-template
+{{</* image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" */>}}
+```
+{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}}
+
+## Parameters
+
+`src` {{< badge style="warning" title="Required" >}}
+: The link to the image
+
+`class` {{< badge style="info" title="Optional" >}}  
+: An optional CSS class name that will be applied to the `img` element
+
+`alt` {{< badge style="info" title="Optional" >}}  
+: An optional alternate text for the image
+
+`title` {{< badge style="info" title="Optional" >}}  
+: An optional title for the image
+
+`loading` {{< badge style="info" title="Optional" >}}  
+: Sets `loading` control for the image: `lazy`, `eager` or `auto`
+
+
+
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/hints.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/hints.md
@@ -0,0 +1,75 @@
+# Hints
+
+Hint shortcode can be used as a hint/alert/notification block.
+
+```tpl
+{{%/* hint [info|success|warning|danger] */%}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{%/* /hint */%}}
+
+> [!NOTE|TIP|IMPORTANT|WARNING|CAUTION]
+> **Markdown content**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+```
+
+## Example
+
+{{% hint %}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{% /hint %}}
+
+{{% 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 success %}}
+**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 %}}
+
+## Support for markdown alerts
+
+> [!NOTE]
+> **Note**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+
+> [!TIP]
+> **Tip**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+
+> [!IMPORTANT]
+> **Important**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+
+> [!WARNING]
+> **Warning**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+
+> [!CAUTION]
+> **Caution**  
+> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/katex.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/katex.md
@@ -0,0 +1,85 @@
+---
+title: KaTeX
+---
+
+# KaTeX
+
+KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
+
+{{% hint info %}}
+**Override KaTeX initialization config**  
+To override the [initialization config](https://katex.org/docs/options.html) for KaTeX,
+create a `katex.json` file in your `assets` folder!
+{{% /hint %}}
+
+# Example
+{{< katex />}}
+
+
+## Activation
+KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty `{{</* katex /*/>}}` and use delimiters defined in configuration in `assets/katex.json`.
+
+## Rendering as block
+
+{{% columns %}}
+
+```latex
+{{</* katex display=true >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex */>}}
+```
+
+````latex
+```katex
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+```
+````
+
+````latex
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+````
+
+<--->
+
+{{< katex display=true >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+---
+
+```katex
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+```
+
+---
+
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+
+{{% /columns %}}
+
+## Rendering inline 
+When KaTeX is active on the page it is possible to write inline expressions.  
+
+| Code | Output |
+| --   | --     |
+| `{{</* katex >}}\pi(x){{< /katex */>}}` | {{< katex >}}\pi(x){{< /katex >}} |
+| `\\( \pi(x) \\)` | \\( \pi(x) \\) |
+
+## Configuration
+KaTeX configuration could be adjusted by editing `assets/katex.json` file. For example to enabled inline delimiters `$..$` put content below into the file.
+
+```json
+{
+  "delimiters": [
+    {"left": "$$", "right": "$$", "display": true},
+    {"left": "$", "right": "$", "display": false},
+    {"left": "\\(", "right": "\\)", "display": false},
+    {"left": "\\[", "right": "\\]", "display": true}
+  ]
+}
+```
+
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/mermaid.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/mermaid.md
@@ -0,0 +1,186 @@
+# 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
+  stateDiagram-v2
+      State1: The state with a note
+      note right of State1
+          Important information! You can write
+          notes.
+      end note
+      State1 --> State2
+      note left of State2 : This is the note to the left.
+  ```
+  ````
+
+- ```mermaid
+  stateDiagram-v2
+      State1: The state with a note
+      note right of State1
+          Important information! You can write
+          notes.
+      end note
+      State1 --> State2
+      note left of State2 : This is the note to the left.
+  ```
+{{% /columns %}}
+
+{{% columns %}}
+- ```tpl
+  {{</* mermaid [class="..."] >}}
+  stateDiagram-v2
+      State1: The state with a note
+      note right of State1
+          Important information! You can write
+          notes.
+      end note
+      State1 --> State2
+      note left of State2 : This is the note to the left.
+  {{< /mermaid */>}}
+  ```
+
+- {{< 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 %}}
+
+## Diagrams
+Explore more diagrams and syntax on Mermaid [documentation page](https://mermaid.js.org/syntax/flowchart.html).
+
+{{% columns %}}
+
+```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
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+```
+
+```mermaid
+---
+title: Animal example
+---
+classDiagram
+    note "From Duck till Zebra"
+    Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    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
+---
+title: Simple sample
+---
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+<--->
+
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+   commit
+   commit
+   branch develop
+   checkout develop
+   commit
+   commit
+   checkout main
+   merge develop
+   commit
+   commit
+```
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
+```
+
+```mermaid
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+```
+
+```mermaid
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+```
+
+{{% /columns %}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/section/_index.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/section/_index.md
@@ -0,0 +1,16 @@
+---
+bookCollapseSection: true
+bookHidden: true
+---
+
+# Section
+
+Section renders pages in section as definition list, using title and description. Optional param `summary` can be used to show or hide page summary
+
+## Example
+
+```tpl
+{{</* section [summary] */>}}
+```
+
+{{<section summary>}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/section/first-page.md
+++ b/themes/hugo-book.backup/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.
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/section/second-page.md
+++ b/themes/hugo-book.backup/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.
+
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/steps.md
+++ b/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/steps.md
@@ -0,0 +1,35 @@
+# Steps
+
+Steps shortcode styles numbered list as series of points for better content organization.
+
+```tpl
+{{%/* steps */%}}
+1. ## Suspendisse sed congue orci.
+   ...
+
+2. ## Maecenas scelerisque sem.
+   ...
+
+3. ## Etiam risus purus.
+   ...
+
+4. ## Curabitur sed lacinia velit.
+   ...
+{{%/* /steps */%}}
+```
+
+## Example
+
+{{% steps %}}
+1. ## Suspendisse sed congue orci.
+   Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. Curabitur pellentesque sodales ipsum, sed efficitur libero euismod ac. Donec sit amet erat nunc. Suspendisse porta nisl velit, quis auctor massa commodo nec. Donec sollicitudin tellus sit amet massa condimentum luctus. Etiam molestie at ante et convallis.
+
+2. ## Maecenas scelerisque sem.
+   Maecenas scelerisque sem a tellus dignissim, in sodales neque varius. Integer quis ex quis sem posuere consequat. Morbi interdum ex et mollis maximus. Proin sed quam nisl. Donec tempus non risus vel auctor. Ut ultricies vitae urna in laoreet. Phasellus cursus nunc sit amet sodales euismod. Suspendisse potenti.
+
+3. ## Etiam risus purus.
+   Etiam risus purus, suscipit a orci quis, mollis mollis ante. Vestibulum congue nisl malesuada tortor egestas, a lobortis tellus dictum. Nam nec ultrices justo. Donec malesuada dignissim posuere. 
+
+4. ## Curabitur sed lacinia velit.
+   Curabitur sed lacinia velit. Nullam sed ante non quam lobortis hendrerit. Phasellus elementum, erat sit amet imperdiet pulvinar, odio massa lobortis ipsum, in tincidunt metus dolor vel ligula.
+{{% /steps %}}
--- a/themes/hugo-book.backup/exampleSite/content.en/docs/shortcodes/tabs.md
+++ b/themes/hugo-book.backup/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 */>}}
+{{%/* tab "MacOS" */%}} # MacOS Content {{%/* /tab */%}}
+{{%/* tab "Linux" */%}} # Linux Content {{%/* /tab */%}}
+{{%/* tab "Windows" */%}} # Windows Content {{%/* /tab */%}}
+{{</* /tabs */>}}
+```
+
+## Example
+
+{{< tabs >}}
+
+{{% 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 >}}