Update example file structure, give each shortcode own file

21 files changed, 255 insertions, 399 deletions

diff --git a/exampleSite/content/docs/introduction/_index.md b/exampleSite/content/docs/example/_index.md
index 38a85fc..4835b7c 100644
--- a/exampleSite/content/docs/introduction/_index.md
+++ b/exampleSite/content/docs/example/_index.md
@@ -1,6 +1,7 @@
 ---
 weight: 1
 bookFlatSection: true
+title: "Example Site"
 ---
 
 # Introduction
diff --git a/exampleSite/content/docs/more-examples/hidden.md b/exampleSite/content/docs/example/hidden.md
index df7cb9e..df7cb9e 100644
--- a/exampleSite/content/docs/more-examples/hidden.md
+++ b/exampleSite/content/docs/example/hidden.md
diff --git a/exampleSite/content/docs/introduction/examples/_index.md b/exampleSite/content/docs/example/table-of-contents/_index.md
index d322f8d..d322f8d 100644
--- a/exampleSite/content/docs/introduction/examples/_index.md
+++ b/exampleSite/content/docs/example/table-of-contents/_index.md
diff --git a/exampleSite/content/docs/introduction/examples/with-toc.md b/exampleSite/content/docs/example/table-of-contents/with-toc.md
index c92685d..5345c66 100644
--- a/exampleSite/content/docs/introduction/examples/with-toc.md
+++ b/exampleSite/content/docs/example/table-of-contents/with-toc.md
@@ -1,5 +1,5 @@
 ---
-title: With Table of Contents
+title: With ToC
 weight: 1
 ---
 # Caput vino delphine in tamen vias
diff --git a/exampleSite/content/docs/introduction/examples/without-toc.md b/exampleSite/content/docs/example/table-of-contents/without-toc.md
index 52003b1..9b16318 100644
--- a/exampleSite/content/docs/introduction/examples/without-toc.md
+++ b/exampleSite/content/docs/example/table-of-contents/without-toc.md
@@ -1,5 +1,5 @@
 ---
-title: Without Table of Contents
+title: Without ToC
 weight: 2
 bookToc: false
 ---
diff --git a/exampleSite/content/docs/introduction/examples/shortcodes.md b/exampleSite/content/docs/introduction/examples/shortcodes.md
deleted file mode 100644
index c2f115a..0000000
--- a/exampleSite/content/docs/introduction/examples/shortcodes.md
+++ /dev/null
@@ -1,229 +0,0 @@
----
-weight: 3
----
-
-# Shortcodes
-
-## 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 */>}}
-```
-
-{{< 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 >}}
-
-## Buttons
-
-```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 >}}
-
-## Tabs
-
-```tpl
-{{</* tabs "uniqueid" */>}}
-{{</* tab "MacOS" */>}} # MacOS Content {{</* /tab */>}}
-{{</* tab "Linux" */>}} # Linux Content {{</* /tab */>}}
-{{</* tab "Windows" */>}} # Windows Content {{</* /tab */>}}
-{{</* /tabs */>}}
-```
-
-{{< 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 >}}
-
-## Columns
-
-```html
-{{</* columns */>}} <!-- begin columns block -->
-# Left Content
-Lorem markdownum insigne...
-
-<---> <!-- magic sparator, between columns -->
-
-# Mid Content
-Lorem markdownum insigne...
-
-<---> <!-- magic sparator, between columns -->
-
-# 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 >}}
-
-## Expand shortcode
-
-Expand shortcode can help to decrease clutter on screen by hiding part of text
-
-### 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 >}}
-
-## Mermaid Chart
-
-{{< columns >}}
-```tpl
-{{</* mermaid [class="text-center"]*/>}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-{{</* /mermaid */>}}
-```
-
-<--->
-
-{{< mermaid >}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-{{< /mermaid >}}
-
-{{< /columns >}}
-
-
-## KaTeX
-
-{{< columns >}}
-
-```latex
-{{</* katex */>}}
-x = \begin{cases}
-   a &\text{if } b \\
-   c &\text{if } d
-\end{cases}
-{{</* /katex */>}}
-```
-
-<--->
-
-{{< katex >}}
-x = \begin{cases}
-   a &\text{if } b \\
-   c &\text{if } d
-\end{cases}
-{{< /katex >}}
-
-{{< /columns >}}
-
-
diff --git a/exampleSite/content/docs/more-examples/advanced.md b/exampleSite/content/docs/more-examples/advanced.md
deleted file mode 100644
index ca3dcf1..0000000
--- a/exampleSite/content/docs/more-examples/advanced.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Vagus elidunt
-
-## Mole et vultus populifer quaque primoque non
-
-Lorem **markdownum pignora pelle** est tota propiore conpellat pectoribus de
-pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice
-subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
-caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis
-lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus
-silentia flumen, sustinet placuit petis in dilapsa erat sunt. [Atria
-tractus](http://agendo-dis.io/) malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, [malo vulnere](http://www.nec.org/iactorcolonos.php) contra
-dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere
-furit nec; iaculi [matertera](http://iugis-thalamique.com/pecus) et visa est,
-viribus. Divesque creatis, tecta novat collumque vulnus
-[est](http://canentiet.net/lateri.php), parvas. **Faces illo pepulere** tempus
-adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-    var multiplatform = cifs(illegal, zip, memory) / pcbPowerJavascript;
-    hdmi -= 3;
-    tunneling(constant(service_fi_hyper, avatarBar), matrixUmlMbps);
-    frequency /= nat(keyboardRecycle, programmingGnuPerl) + icfExbibyteCursor;
-    io_dithering(-5, markup / languageShortcut - driveHtml);
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli
-Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare
-Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert
-ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae
-vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, [materna](http://mandereevincitque.net/), ipsumque ut Politen,
-nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus,
-inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa.
-Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a
-alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem
-Propoetides **parte**.
diff --git a/exampleSite/content/docs/more-examples/client.md b/exampleSite/content/docs/more-examples/client.md
deleted file mode 100644
index b014b5b..0000000
--- a/exampleSite/content/docs/more-examples/client.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Ista qua aera
-
-## Tetigisse hac duc omnipotens urbis per sapiente
-
-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.
-
-    var mnemonicPcmcia = file;
-    if (bookmarkMultiprocessing) {
-        core.intranetDigitize = menu(vdslWordart(enterprise,
-                dviRealityTeraflops));
-    } else {
-        portal_socket.jsp_shareware_digital = multicasting(component_uml);
-        memory.ppc_title_hit(lunWebFormat + fontSmartphoneView, tween *
-                default_hard, 5 + laptopMethod);
-        wddm_tablet_null.widgetFileRate(3, leakMaskResponsive);
-    }
-    var siteRjSoftware = installer;
-    html.text = address + nasSystemDns;
-
-## Lac roratis Diomede
-
-*Aut in vivitur* quam ibi is veniebat Herculis mihi hominem! In matrem gesserit
-manus [coniuge silva](http://etinachus.org/cornibusalter.html) pectore simul nec
-felix in haud ostendit lacrimavit mora. Digna adspice temptata, Palaestina armis
-at crura centum tellus ni tibi Amphiona mansit, bello tibi pugnat fuit. Sidera
-nec ambo temporis summe tempore, falsa committere, pater horrenda, erat ast
-cadunt preces.
-
-1. Ventorum pariturae cum discors fit dabat inguina
-2. Armeniae viscera
-3. Et monitusque boum misereri
-4. Obliquaque primasque suae
-
-## Ovaque in tendens tibi Iovis iuga
-
-Vagatur laboribus vocandus [honorque segnior
-inclinat](http://www.neve-tellus.io/) petentes manere ut terram fundit; sunt.
-Pressit eodem inmotae quasque linguam, sub famem animos dei nocte futura
-Laconide India. Posset iter nata negarit *limina latus postquam* serior, cum dic
-area iamdudum non! Et curaque [me illo](http://testudine-est.com/): addidit
-tuam, Cerealia, fila undae Ilithyiam proceresque tegens numero dominaeque
-**regna** humanis. Multo [adstringit hirsutaque](http://www.e.org/est.php)
-crimine postquam perfudit illis, a mutua, memorant.
-
-## His nocte ipse cum oculorum recepta ignorat
-
-Minos ad carmina exire studiosior Talia tamen, est a hi de quae ipsa et quoniam.
-Se victus at unca tantae eurus Euippe Bacchumque vocantia.
-
-Ullum frena statione de at praeferret classi Acarnanum iacuit lacertis gemino;
-ad caperet **finiat**! Utque videt ingemuit Dulichium paravi portaque te et, tot
-ab caesariem sumit, vias in rerum te.
\ No newline at end of file
diff --git a/exampleSite/content/docs/more-examples/server.md b/exampleSite/content/docs/more-examples/server.md
deleted file mode 100644
index 81c4dcd..0000000
--- a/exampleSite/content/docs/more-examples/server.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Nimium sacravere cetera exorata multifidasque satia
-
-## Datum perierunt nato
-
-Lorem markdownum. Sit en turpe, recessit nominibus et sanguis totis. Unaque
-cognitius docuit sensimus mutasse terra flammas. Nec nunc sustinet Coeranon
-figura Erecthida saepe *gestu vel*: quod mei. Docto interdum quasi labefactus
-nocentius miserrimus pars cum missi matrem, ipse fletus
-[illo](http://fuerit-cultus.net/) super.
-
-1. Metuunt non paene iniectis licuit
-2. Extemplo iugulum relictis reddidit caput
-3. Frustra adspiceres viae
-4. Non fluctibus civiliter pater procedit non
-5. Deos spumis ille aderam semper Stygios quantum
-6. Orgia hoc
-
-## Dare hirtus cervice Cecropis
-
-Si veteris alas proelia, sic remotis in portus nisi minimae acerris carina: et
-ne. Crimina longis, visae, quae et cur innuba dabat Haedis non. **Multorumque**
-damus qua, circumtulit teli, nec cum ait, o procul miserabile cursus. Tuam
-Rhodanumque ipse **scelus** humum fratrem volucrumque tandem seque domus fuerat
-quam per quidem ululasse ab aquas vocari.
-
-1. Inperfecta frugum sed perennis deposuit
-2. Quem cortice penthea venerisque perque perque deditque
-3. Cerno impete
-
-## Daedalon inguina mea Autolycus caeleste lumina et
-
-Cupiere adulter parentum, semineces malit nec seu luce superos integer
-inritaturque antro cum. Aegeus sic tabe nulla satyri notissima inmensa et aquas
-et. Digiti quis addit *materna*, et arma tu aegide dixit. *Traxerat* ubera, fuit
-se cacumine praeteritae corpore esse pendentem Diana gratissima dolor generi
-clamoribus occupat; flavam arma. Ponat invidiosa honores.
-
-    var nybble_computer_market = client_sd_webmail.margin(romGamma(nui,
-            internet, 78) + p_malware_algorithm(thyristorCloneBare, backup,
-            multicastingHsf));
-    circuit(thickDesktopPpm, computer(protocol_alert(sla)));
-    if (integrated_memory_rich(array_printer.thermistor_lock_web(
-            camera.gnu_read_engine.third(4, rom_point_risc), piracy(
-            paste_analyst, os, multiprocessingKilohertz)))) {
-        click_samba = 1;
-    }
-
-Liber virorum acervo quaecumque placabat Luna recessit utque, nox cum nymphae
-licet? Arce tibi commissus letalis ambo fuit bis deus? Dixit mea, non [Quid
-potentior osculaque](http://ibat.org/) factis opposuitque semel perspexerat
-posuitque parte quas [sive](http://www.est.com/seanimos).
\ No newline at end of file
diff --git a/exampleSite/content/docs/more-examples/_index.md b/exampleSite/content/docs/shortcodes/_index.md
index 2f14075..9bb0430 100644
--- a/exampleSite/content/docs/more-examples/_index.md
+++ b/exampleSite/content/docs/shortcodes/_index.md
@@ -1,4 +1,3 @@
 ---
-weight: 2
 bookFlatSection: true
 ---
diff --git a/exampleSite/content/docs/shortcodes/buttons.md b/exampleSite/content/docs/shortcodes/buttons.md
new file mode 100644
index 0000000..b8c96bb
--- /dev/null
+++ b/exampleSite/content/docs/shortcodes/buttons.md
@@ -0,0 +1,13 @@
+# Buttons
+
+Buttons are styled links that can lead to local page or external link.
+
+```tpl
+{{</* button relref="/" [class="..."] */>}}Get Home{{</* /button */>}}
+{{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Contribute{{</* /button */>}}
+```
+
+## Example
+
+{{< button relref="/" >}}Get Home{{< /button >}}
+{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
diff --git a/exampleSite/content/docs/shortcodes/columns.md b/exampleSite/content/docs/shortcodes/columns.md
new file mode 100644
index 0000000..4df396a
--- /dev/null
+++ b/exampleSite/content/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 sparator, between columns -->
+
+# Mid Content
+Lorem markdownum insigne...
+
+<---> <!-- magic sparator, 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/docs/shortcodes/expand.md b/exampleSite/content/docs/shortcodes/expand.md
new file mode 100644
index 0000000..c62520f
--- /dev/null
+++ b/exampleSite/content/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/docs/shortcodes/hints.md b/exampleSite/content/docs/shortcodes/hints.md
new file mode 100644
index 0000000..3477113
--- /dev/null
+++ b/exampleSite/content/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/docs/shortcodes/katex.md b/exampleSite/content/docs/shortcodes/katex.md
new file mode 100644
index 0000000..965577f
--- /dev/null
+++ b/exampleSite/content/docs/shortcodes/katex.md
@@ -0,0 +1,27 @@
+# KaTeX
+
+KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
+
+## Example 
+{{< columns >}}
+
+```latex
+{{</* katex [class="text-center"] */>}}
+x = \begin{cases}
+   a &\text{if } b \\
+   c &\text{if } d
+\end{cases}
+{{</* /katex */>}}
+```
+
+<--->
+
+{{< katex >}}
+x = \begin{cases}
+   a &\text{if } b \\
+   c &\text{if } d
+\end{cases}
+{{< /katex >}}
+
+{{< /columns >}}
+
diff --git a/exampleSite/content/docs/shortcodes/mermaid.md b/exampleSite/content/docs/shortcodes/mermaid.md
new file mode 100644
index 0000000..3a617bc
--- /dev/null
+++ b/exampleSite/content/docs/shortcodes/mermaid.md
@@ -0,0 +1,38 @@
+# Mermaid Chart
+
+[Mermaid](https://mermaidjs.github.io/) is library for generating svg charts and diagrams from text.
+
+## Example
+
+{{< columns >}}
+```tpl
+{{</* mermaid [class="text-center"]*/>}}
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    alt is sick
+        Bob->>Alice: Not so good :(
+    else is well
+        Bob->>Alice: Feeling fresh like a daisy
+    end
+    opt Extra response
+        Bob->>Alice: Thanks for asking
+    end
+{{</* /mermaid */>}}
+```
+
+<--->
+
+{{< mermaid >}}
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    alt is sick
+        Bob->>Alice: Not so good :(
+    else is well
+        Bob->>Alice: Feeling fresh like a daisy
+    end
+    opt Extra response
+        Bob->>Alice: Thanks for asking
+    end
+{{< /mermaid >}}
+
+{{< /columns >}}
diff --git a/exampleSite/content/docs/shortcodes/tabs.md b/exampleSite/content/docs/shortcodes/tabs.md
new file mode 100644
index 0000000..096892c
--- /dev/null
+++ b/exampleSite/content/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 >}}
diff --git a/exampleSite/content/menu/index.md b/exampleSite/content/menu/index.md
index 8f54c18..d07c65d 100644
--- a/exampleSite/content/menu/index.md
+++ b/exampleSite/content/menu/index.md
@@ -2,13 +2,16 @@
 headless: true
 ---
 
-- [**Introduction**]({{< relref "/docs/introduction" >}})
-- [Examples]({{< relref "/docs/introduction/examples" >}})
-  - [With Table of Contents]({{< relref "/docs/introduction/examples/with-toc" >}})
-  - [Without Table of Contents]({{< relref "/docs/introduction/examples/without-toc" >}})
-  - [Shortcodes]({{< relref "/docs/introduction/examples/shortcodes" >}})  
-- **More Examples**
-- [Server]({{< relref "/docs/more-examples/server" >}})
-- [Client]({{< relref "/docs/more-examples/client" >}})
-- [Advanced]({{< relref "/docs/more-examples/advanced" >}})  
+- [**Example Site**]({{< relref "/docs/example" >}})
+- [Table of Contents]({{< relref "/docs/example/table-of-contents" >}})
+  - [With ToC]({{< relref "/docs/example/table-of-contents/with-toc" >}})
+  - [Without ToC]({{< relref "/docs/example/table-of-contents/without-toc" >}})  
+- **Shortcodes**
+- [Buttons]({{< relref "/docs/shortcodes/buttons" >}})
+- [Columns]({{< relref "/docs/shortcodes/columns" >}})
+- [Expand]({{< relref "/docs/shortcodes/expand" >}})
+- [Hints]({{< relref "/docs/shortcodes/hints" >}})
+- [Katex]({{< relref "/docs/shortcodes/katex" >}})
+- [Mermaid]({{< relref "/docs/shortcodes/mermaid" >}})
+- [Tabs]({{< relref "/docs/shortcodes/tabs" >}})  
 - [**Blog**]({{< relref "/posts" >}})
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/images/.DS_Store
diff --git a/images/screenshot.png b/images/screenshot.png
index 84212d4..e7da289 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
index 553ecc6..129ea9a 100644
--- a/images/tn.png
+++ b/images/tn.png