added columns and tabs shortcodes

14 files changed, 292 insertions, 2 deletions

diff --git a/assets/sass/shortcodes/columns.scss b/assets/sass/shortcodes/columns.scss
new file mode 100644
index 0000000..5b367db
--- /dev/null
+++ b/assets/sass/shortcodes/columns.scss
@@ -0,0 +1,16 @@
+div.columns{
+	flex-wrap: wrap;
+    display: flex;
+
+	div.column{
+		flex: 1 1;
+		padding: 0 1em;
+	}
+	:first-child{
+		padding-left: 0px!important;
+	}
+	:last-child{
+		padding-right: 0px!important;
+	}
+}
+
diff --git a/assets/sass/shortcodes/tabs.scss b/assets/sass/shortcodes/tabs.scss
new file mode 100644
index 0000000..3978a4b
--- /dev/null
+++ b/assets/sass/shortcodes/tabs.scss
@@ -0,0 +1,40 @@
+.tabs {
+    border: 1px solid #e9ecef;
+    border-radius: .25rem;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    label {
+        display: inline-block;
+        padding: 0.3em 1em;
+        border-bottom: 2px transparent;
+        cursor: pointer;
+    }
+
+
+    >input[type=radio] {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        opacity: 0;
+        position: absolute;
+
+        &:checked+label {
+            border-bottom: 2px solid #05b;
+
+            +.tab {
+                display: block;
+            }
+        }
+    }
+
+
+    >div.tab {
+        display: none;
+        order: 999;
+	    width: 100%;
+	    border-top: 1px solid #f8f9fa;
+	    padding: 1em 1em;
+    }
+}
\ No newline at end of file
diff --git a/exampleSite/content/docport-theme/_index.md b/exampleSite/content/docport-theme/_index.md
index b8ef80c..2a1b81e 100644
--- a/exampleSite/content/docport-theme/_index.md
+++ b/exampleSite/content/docport-theme/_index.md
@@ -23,6 +23,7 @@ It provides a simple navigation, automatic search engine, a high level of config
 	* [Mermaid diagram]({{%relref "shortcodes/mermaid/_index.md" %}}) (flowchart, sequence, gantt)
 	* [Attachments files]({{%relref "shortcodes/attachments/_index.md" %}}), [Icons]({{%relref "shortcodes/icon/_index.md" %}}), [Buttons]({{%relref "shortcodes/button/_index.md" %}}), [Alerts]({{%relref "shortcodes/alert/_index.md" %}}), [Panels]({{%relref "shortcodes/panel/_index.md" %}}), [Tip/Note/Info/Warning boxes]({{%relref "shortcodes/notice/_index.md" %}}), [Expand]({{%relref "shortcodes/expand/_index.md" %}}), [List child pages]({{%relref "shortcodes/children/_index.md" %}})
 	* [Excerpt]({{%relref "shortcodes/excerpt/_index.md"%}}) ! Include segment of content from one page in another
+	* [columns]({{%relref "shortcodes/columns/_index.md"%}}), [tabs]({{%relref "shortcodes/tabs/_index.md"%}})
 
 
 ## Contribute to this documentation
diff --git a/exampleSite/content/shortcodes/_index.md b/exampleSite/content/shortcodes/_index.md
index 2bbfa33..7a1881d 100644
--- a/exampleSite/content/shortcodes/_index.md
+++ b/exampleSite/content/shortcodes/_index.md
@@ -3,6 +3,7 @@ title = "Shortcodes"
 description = ""
 date = "2017-04-24T18:36:24+02:00"
 weight = 30
+hide_toc = true
 +++
 
 A bunch of Shortcodes are available with this theme :
diff --git a/exampleSite/content/shortcodes/columns/_index.md b/exampleSite/content/shortcodes/columns/_index.md
new file mode 100644
index 0000000..2153bb2
--- /dev/null
+++ b/exampleSite/content/shortcodes/columns/_index.md
@@ -0,0 +1,56 @@
++++
+title = "columns"
+description = "display elements side by side"
++++
+
+the `{{</*column*/>}}` shortcode display content side by side
+
+{{< columns >}} <!-- begin columns block -->
+## Left Content
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. 
+
+<---> <!-- magic separator, between columns -->
+
+## Mid Content
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. 
+
+<---> <!-- magic separator, between columns -->
+
+## Right Content
+Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+{{< /columns >}}
+
+
+## Usage 
+```
+	{{</* columns >}} 
+	
+	## 1st column
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. 
+
+	<---> <!-- separator between columns -->
+
+	## 2nd column
+	Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. 
+
+	<---> <!-- separator between columns -->
+
+	## last column
+	Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
+	{{< /columns */>}}
+
+```
+
+
+
+
+
diff --git a/exampleSite/content/shortcodes/tabs/_index.md b/exampleSite/content/shortcodes/tabs/_index.md
new file mode 100644
index 0000000..166bb13
--- /dev/null
+++ b/exampleSite/content/shortcodes/tabs/_index.md
@@ -0,0 +1,94 @@
++++
+title = "tabs"
+description = "Tabs let you organize content by context with multiple tab."
++++
+
+Tabs let you organize content by context with multiple tab, for example HelloWorld instructions for each language.
+
+
+{{< tabs >}}
+{{% tab "PHP" %}} 
+
+This is how we do a Hello world with php 
+
+```php
+	<?php 
+	Print "Hello, World!";
+	?>
+```
+
+{{%notice%}}php runtime needed to run{{%/notice%}}
+
+{{% /tab %}}
+{{< tab "Golang" >}} 
+
+This is how we do a Hello world with go
+
+```go
+	package main
+	import "fmt"
+	func main() {
+	    fmt.Println("hello world")
+	}	
+```
+
+{{%notice%}}go needed to compile{{%/notice%}}
+
+
+{{< /tab >}}
+{{< tab "Java" >}} 
+
+This is how we do a Hello world with java
+
+```java
+	class HelloWorld {
+	    public static void main(String[] args) {
+	        System.out.println("Hello, World!"); 
+	    }
+	}
+```
+{{%notice%}}java devkit needed to compile\
+java runtime needed to run{{%/notice%}}
+
+{{< /tab >}}
+{{< /tabs >}}
+
+## Usage 
+Enclose multiple `{{%/*tab label*/%}}` in a `{{%/*tabs*/%}}` shortcode
+
+```
+	{{</* tabs */>}}
+	
+		{{%/* tab "PHP" */%}} 
+		This is how we do a Hello world with php 
+		```php
+			<?php 
+			Print "Hello, World!";
+			?>
+		```
+		{{%/* /tab */%}}
+
+		{{</* tab "Golang" */>}} 
+		This is how we do a Hello world with go
+		```go
+			package main
+			import "fmt"
+			func main() {
+			    fmt.Println("hello world")
+			}	
+		```
+		{{</* /tab */>}}
+
+		{{</* tab "Java" */>}} 
+		This is how we do a Hello world with java
+		```java
+			class HelloWorld {
+			    public static void main(String[] args) {
+			        System.out.println("Hello, World!"); 
+			    }
+			}
+		```
+		{{</* /tab */>}}
+
+	{{</* /tabs */>}}
+```
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
new file mode 100644
index 0000000..fa08e31
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -0,0 +1,10 @@
+div.columns {
+  flex-wrap: wrap;
+  display: flex; }
+  div.columns div.column {
+    flex: 1 1;
+    padding: 0 1em; }
+  div.columns :first-child {
+    padding-left: 0px !important; }
+  div.columns :last-child {
+    padding-right: 0px !important; }
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
new file mode 100644
index 0000000..eae510e
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/columns.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@@ -0,0 +1 @@
+{"Target":"sass/shortcodes/columns.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
new file mode 100644
index 0000000..7519def
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -0,0 +1,27 @@
+.tabs {
+  border: 1px solid #e9ecef;
+  border-radius: .25rem;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap; }
+  .tabs label {
+    display: inline-block;
+    padding: 0.3em 1em;
+    border-bottom: 2px transparent;
+    cursor: pointer; }
+  .tabs > input[type=radio] {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    opacity: 0;
+    position: absolute; }
+    .tabs > input[type=radio]:checked + label {
+      border-bottom: 2px solid #05b; }
+      .tabs > input[type=radio]:checked + label + .tab {
+        display: block; }
+  .tabs > div.tab {
+    display: none;
+    order: 999;
+    width: 100%;
+    border-top: 1px solid #f8f9fa;
+    padding: 1em 1em; }
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
new file mode 100644
index 0000000..3e64ae0
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/tabs.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@@ -0,0 +1 @@
+{"Target":"sass/shortcodes/tabs.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html
new file mode 100644
index 0000000..3148ff5
--- /dev/null
+++ b/layouts/shortcodes/columns.html
@@ -0,0 +1,9 @@
+<!-- https://github.com/alex-shpak/hugo-book/blob/master/layouts/shortcodes/columns.html -->
+<link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/shortcodes/columns.scss" | toCSS).Permalink }}'>
+<div class="columns">
+  {{ range split .Inner "<--->" }}
+  <div class="column">
+    {{ . | markdownify }}
+  </div>
+  {{ end }}
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
index 12d8378..ea71ace 100644
--- a/layouts/shortcodes/notice.html
+++ b/layouts/shortcodes/notice.html
@@ -1,8 +1,10 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 <link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/shortcodes/notice.scss" | toCSS).Permalink }}'>
 <div class="notices {{ with .Get 0 -}}{{.}}{{else}}primary{{end}}">
-	{{- if len .Params | eq 2 -}}
-	<label>{{- with .Get 1 -}}{{.}}{{- end -}}</label>
+	{{with .Params}}
+	{{- if len $.Params | eq 2 -}}
+	<label>{{- with $.Get 1 -}}{{.}}{{- end -}}</label>
+	{{- end -}}
 	{{- end -}}
 	{{if in  .Inner "\n" }}{{.Inner}}{{else}}<p>{{.Inner}}</p>{{end}}
 </div>
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
new file mode 100644
index 0000000..ab1601d
--- /dev/null
+++ b/layouts/shortcodes/tab.html
@@ -0,0 +1,14 @@
+<!-- https://github.com/alex-shpak/hugo-book/blame/master/layouts/shortcodes/tab.html -->
+{{ if .Parent }}
+  {{ $name := .Get 0 }}
+  {{ $group := printf "tabs-%d" .Parent.Ordinal }}
+
+  {{ 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}}
\ No newline at end of file
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
new file mode 100644
index 0000000..61958c8
--- /dev/null
+++ b/layouts/shortcodes/tabs.html
@@ -0,0 +1,18 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+<!-- https://github.com/alex-shpak/hugo-book/blob/master/layouts/shortcodes/tabs.html   -->
+<link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/shortcodes/tabs.scss" | toCSS).Permalink }}'>
+{{ if .Inner }}{{ end }}
+{{ $group := printf "tabs-%d" .Ordinal }}
+
+<div class="tabs">
+{{- range $index, $tab := .Scratch.Get $group -}}
+  <input type="radio" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
+  <label for="{{ printf "%s-%d" $group $index }}">
+    {{- $tab.Name -}}
+  </label>
+  <div class="tab">
+    {{- .Content |  markdownify -}}
+  </div>
+{{- end -}}
+</div>
+