#39, Add expand and tabs shortcodes

assets/_markdown.scss

@@ -10,7 +10,7 @@ $block-border-radius: 0.15rem;
     line-height: 1.25;
 
     // remove padding at the beginning of page
-    &:first-child { 
+    &> :first-child { 
       margin-top: 0;
       line-height: 1em;
     }

assets/_shortcode.scss

@@ -0,0 +1,52 @@
+@import "variables";
+
+.markdown-inner {
+  :first-child {
+    margin-top: 0;
+  }
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.book-expand {
+  border: 1px solid $gray-200;
+
+  .book-expand-head {
+    background: $gray-100;
+    padding: $padding-8 $padding-16;
+    cursor: pointer;
+  }
+
+  .book-expand-content {
+    display: none;
+    padding: $padding-16;
+  }
+
+  input[type="checkbox"]:checked + .book-expand-content {
+    display: block;
+  }
+}
+
+.book-tabs {
+  border: 1px solid $gray-200;
+
+  .book-tabs-head {
+    border-bottom: $padding-1 solid $gray-100;
+
+    label {
+      display: inline-block;
+      padding: $padding-8 $padding-16;
+      cursor: pointer;
+    }
+  }
+
+  .book-tabs-content {
+    padding: $padding-16;
+    display: none;
+  }
+
+  input[type="radio"]:checked + .book-tabs-content {
+    display: block;
+  }
+}

assets/book.scss

@@ -1,6 +1,7 @@
 @import "normalize";
 @import "variables";
 @import "markdown";
+@import "shortcode";
 @import "utils";
 
 html {

exampleSite/content/docs/shortcodes.md

@@ -0,0 +1,57 @@
+# Expand shortcode
+
+## Default
+
+{{< expand >}}
+## Markdown content
+
+Some text
+{{< /expand >}}
+
+## Custom label
+
+{{< expand "Custom Label" "..." >}}
+## Markdown content
+
+Some text
+{{< /expand >}}
+
+# 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 >}}

exampleSite/content/menu/index.md

@@ -6,6 +6,7 @@ headless: true
 - [Examples]({{< relref "/docs/examples.md" >}})
   - [With Table of contents]({{< relref "/docs/with-toc.md" >}})
   - [Without Table of Contents]({{< relref "/docs/without-toc.md" >}})
+  - [Shortcodes]({{< relref "/docs/shortcodes.md" >}})  
 - **More Examples**
 - [Server]({{< relref "/docs/server.md" >}})
 - [Client]({{< relref "/docs/client.md" >}})

exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"book.min.a7f2160cdf1e5775f3754e8d34cce9f404c64bff092efe992263805e4efeec6c.css","MediaType":"text/css","Data":{"Integrity":"sha256-p/IWDN8eV3XzdU6NNMzp9ATGS/8JLv6ZImOAXk7+7Gw="}}
+{"Target":"book.min.bb64fbdb003b80d0a1548f9da7bfa22acc94fbb994c7df89c380263c0f5fbf14.css","MediaType":"text/css","Data":{"Integrity":"sha256-u2T72wA7gNChVI+dp7+iKsyU+7mUx9+Jw4AmPA9fvxQ="}}

layouts/shortcodes/expand.html

@@ -0,0 +1,12 @@
+<div class="book-expand">
+  <label>
+    <div class="book-expand-head flex justify-between">
+      <span>{{ default "Expand" (.Get 0) }}</span>
+      <span>{{ default "↕" (.Get 1) }}</span>
+    </div>
+    <input type="checkbox" style="display: none" />
+    <div class="book-expand-content markdown-inner">
+      {{- .Inner | markdownify -}}
+    </div>
+  </label>
+</div>

layouts/shortcodes/tab.html

@@ -0,0 +1,12 @@
+{{ if .Parent }}
+  {{ $name := .Get 0 }}
+  {{ $group := printf "tabs-%s" (.Parent.Get 0) }}
+
+  {{ if not (.Parent.Scratch.Get $group) }}
+    {{ .Parent.Scratch.Set $group slice }}
+  {{ end }}
+    
+  {{ .Parent.Scratch.Add $group (dict "Name" $name "Content" .Inner) }}
+{{ else }}
+  {{- errorf "%q: tab shortcode must be inside tabs shortcode" .Page.Path -}}
+{{ end}}

layouts/shortcodes/tabs.html

@@ -0,0 +1,19 @@
+{{ if .Inner }}{{ end }}
+{{ $id := .Get 0 }}
+{{ $group := printf "tabs-%s" $id }}
+
+<div class="book-tabs">
+  <div class="book-tabs-head">
+  {{ range $index, $tab :=  .Scratch.Get $group}}
+    <label for="{{ printf "%s-%d" $group $index }}">
+      <span>{{ $tab.Name }}</span>
+    </label>
+  {{ end }}
+  </div>
+  {{ range $index, $tab := .Scratch.Get $group}}
+  <input type="radio" name="{{ $group }}" style="display: none;" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
+  <div class="book-tabs-content markdown-inner">
+    <span>{{ .Content | markdownify }}</span>
+  </div>
+  {{ end }}
+</div>