Update README.md with shortcodes and badges

README.md

@@ -1,11 +1,20 @@
 # Hugo Book Theme
 
 [![Build Status](https://travis-ci.org/alex-shpak/hugo-book.svg?branch=master)](https://travis-ci.org/alex-shpak/hugo-book)
+[![Hugo](https://img.shields.io/badge/hugo-0.48-green.svg)](gohugo.io)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
 ### [Hugo](https://gohugo.io) documentation theme as simple as plain book
 
 ![Screenshot](https://github.com/alex-shpak/hugo-book/blob/master/images/screenshot.png)
 
+- [Features](#features)
+- [Installation](#installation)
+- [Menu](#menu)
+- [Configuration](#configuration)
+- [Shortcodes](#shortcodes)
+- [Contributing](#contributing)
+
 ## Features
 
 - Clean simple design
@@ -13,11 +22,12 @@
 - Customisable
 - Designed to not interfere with other layouts
 - Zero initial configuration
+- Handy shortcodes
 
 ## Requirements
 
 - Hugo 0.48 or higher
-- Hugo extended version, read more [here](https://gohugo.io/news/0.43-relnotes/)
+- Hugo extended version, read more [here](https://gohugo.io/news/0.48-relnotes/)
 
 ## Installation
 
@@ -27,7 +37,7 @@ Navigate to your hugo project root and run:
 git submodule add https://github.com/alex-shpak/hugo-book themes/book
 ```
 
-Then run hugo (or set `theme: book` in configuration file)
+Then run hugo (or set `theme = "book"`/`theme: book` in configuration file)
 
 ```
 hugo server --minify --theme book
@@ -57,9 +67,7 @@ You can set `title` and `weight` in front matter of pages to adjust order and ti
 
 ### Leaf bundle menu
 
-You can also use leaf bundle and content of it's `index.md` as
-menu.
-
+You can also use leaf bundle and content of it's `index.md` as menu.  
 Given you have this file structure
 
 ```
@@ -190,6 +198,65 @@ There are few empty partials you can override in `layouts/partials/`
 | `assets/_custom.scss` | Customise or override scss styles                                                     |
 | `assets/_fonts.scss`  | Replace default font with custom fonts (e.g. local files or remote like google fonts) |
 
+## Shortcodes
+
+### Expand
+
+Provides clickable panel that show extra hidden content.
+
+```
+{{< expand >}}
+## Markdown content
+{{< /expand >}}
+```
+
+### Tabs
+
+Useful if you want to show alternative information per platform or setting.
+
+```
+{{< tabs "uniqueid" >}}
+{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
+{{< tab "Linux" >}} # Linux Content {{< /tab >}}
+{{< tab "Windows" >}} # Windows Content {{< /tab >}}
+{{< /tabs >}}
+```
+
+### Multi column text
+
+Organize text in 2 or more columns to use space efficiently.
+
+```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 >}}
+```
+
+### Mermaid Chat
+
+Render various charts with [mermaidjs](https://mermaidjs.github.io/)
+
+```
+{{< 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 >}}
+```
+
 ## Contributing
 
 ### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors)
@@ -202,7 +269,3 @@ Primary goals are:
 - Avoid interference with user-defined layouts
 
 Feel free to open issue if you missing some configuration or customisation option.
-
-## License
-
-[MIT](LICENSE)

assets/_shortcode.scss

@@ -38,11 +38,13 @@
   label {
     display: inline-block;
     padding: $padding-8 $padding-16;
+    border-bottom: $padding-1 transparent;
     cursor: pointer;
   }
 
   .book-tabs-content {
     order: 999; //Move content blocks to the end
+    width: 100%;
     border-top: $padding-1 solid $gray-100;
     padding: $padding-16;
     display: none;

exampleSite/content/docs/shortcodes.md

@@ -14,7 +14,7 @@ Lorem markdownum insigne...
 Lorem markdownum insigne...
 {{< /expand >}}
 
-## Custom label
+## With Custom Label
 
 ```tpl
 {{</* expand "Custom Label" "..." */>}}
@@ -78,7 +78,7 @@ Miseratus fonte Ditis conubia.
 {{< /tab >}}
 {{< /tabs >}}
 
-# Multi-Column shortcode
+# Columns
 
 ```html
 {{</* columns */>}} <!-- begin columns block -->
@@ -120,7 +120,7 @@ Miseratus fonte Ditis conubia.
 {{< /columns >}}
 
 
-# Mermaid Chart Shortcode
+# Mermaid Chart
 
 {{< columns >}}
 ```tpl

exampleSite/content/menu/index.md

@@ -4,7 +4,7 @@ headless: true
 
 - [**Introduction**]({{< relref "/" >}})
 - [Examples]({{< relref "/docs/examples.md" >}})
-  - [With Table of contents]({{< relref "/docs/with-toc.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**

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

@@ -1 +1 @@
-{"Target":"book.min.1eed0ce8b9904e3795315033369d6179d45f04b26f5d726c6248ce01da3922da.css","MediaType":"text/css","Data":{"Integrity":"sha256-Hu0M6LmQTjeVMVAzNp1hedRfBLJvXXJsYkjOAdo5Ito="}}
+{"Target":"book.min.551bfe022298d63e123dd11df19813a29be5c9309533e93956be85773f07d170.css","MediaType":"text/css","Data":{"Integrity":"sha256-VRv+AiKY1j4SPdEd8ZgTopvlyTCVM+k5Vr6Fdz8H0XA="}}