#39, Finish columns shortcode, clean scss

assets/_markdown.scss

@@ -8,12 +8,12 @@ $block-border-radius: 0.15rem;
   h1, h2, h3, h4, h5 {
     font-weight: 400;
     line-height: 1.25;
+  }
 
   // remove padding at the beginning of page
-    &> :first-child { 
+  > :first-child {
     margin-top: 0;
-      line-height: 1em;
+    line-height: 1;
-    }
   }
 
   b, optgroup, strong {
@@ -72,4 +72,10 @@ $block-border-radius: 0.15rem;
       background: $gray-100;
     }
   }
+
+  hr {
+    height: $padding-1;
+    border: none;
+    background: $gray-200;
+  }
 }

assets/_shortcode.scss

@@ -1,10 +1,10 @@
 @import "variables";
 
 .markdown-inner {
-  :first-child {
+  > :first-child {
     margin-top: 0;
   }
-  :last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 }
@@ -50,3 +50,9 @@
     display: block;
   }
 }
+
+.book-columns > {
+  div + div {
+    margin-left: $padding-16 * 2;
+  }
+}

assets/_utils.scss

@@ -34,14 +34,6 @@
   margin: 0 auto;
 }
 
-.mr-auto {
-  margin-right: auto;
-}
-
-.hide {
-  display: none;
-}
-
 @mixin fixed {
   position: fixed;
   top: 0;

assets/book.scss

@@ -149,21 +149,9 @@ ul.pagination {
   }
 }
 
-.book-git-footer {
-  display: flex;
-  margin-top: $padding-16;
-  font-size: $font-size-14;
-  align-items: baseline;
-
-  img {
-    width: $font-size-14;
-    vertical-align: bottom;
-  }
-}
-
 .book-footer {
   display: flex;
-  margin-top: $padding-16;
+  padding-top: $padding-16;
   font-size: $font-size-14;
   align-items: baseline;
 

exampleSite/content/_index.md

@@ -5,6 +5,23 @@ type: docs
 
 # Acerbo datus maxime
 
+{{< columns >}}
+
+## Astris ipse furtiva
+
+Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
+olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis,
+modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
+
+<--->
+
+## Suis quot vota
+
+Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
+miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
+nunc! Fragosis suae dextra geruntur functus vulgata.
+{{< /columns >}}
+
 ## Tempora nisi nunc
 
 Lorem **markdownum** emicat gestu. Cannis sol pressit ducta. **Est** Idaei,
@@ -26,8 +43,8 @@ sequens!
 
 ## Locis suis novi cum suoque decidit eadem
 
-Idmoniae ripis, at aves, ali missa adest, ut *et autem*, et ab? Venit spes
+Idmoniae ripis, at aves, ali missa adest, ut _et autem_, et ab? Venit spes
-versus finis sermonibus patefecit murum nec est sine oculis. *Ille* inmota
+versus finis sermonibus patefecit murum nec est sine oculis. _Ille_ inmota
 macies domoque caelestia cadit tantummodo scelus procul, corde!
 
 1. Dolentem capi parte rostro alvum habentem pudor
@@ -35,22 +52,9 @@ macies domoque caelestia cadit tantummodo scelus procul, corde!
 3. E punior consurgit lentus
 4. Vox hasta eras micantes
 
-## Suis quot
-
-Ea *furtique* risere fratres edidit terrae magis. Colla tam mihi tenebat:
-miseram excita suadent es pecudes iam. Concilio *quam* velatus posset ait quod
-nunc!
-
-## Astris ipse furtiva vota collumque et habe
-
-Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
-olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis,
-modo arsit? Utinam rapta fiducia valuere litora *adicit cursu*, ad facies:
-fragosis suae dextra geruntur functus vulgata.
-
 ## Facibus pharetrae indetonsusque indulsit sic incurrite foliis
 
-Nefandam et prisci palmas! Blandita cutis flectitur montis macies, te *nati*
+Nefandam et prisci palmas! Blandita cutis flectitur montis macies, te _nati_
 Latiis; turbaque inferias. Virginis tibi peracta avidusque facies caper nec, e
 at ademptae, mira.
 

exampleSite/content/docs/shortcodes.md

@@ -80,30 +80,77 @@ Miseratus fonte Ditis conubia.
 
 # Multi-Column shortcode
 
-```tpl
+```html
-{{</* column */>}} <!-- begin columns block -->
+{{</* columns */>}} <!-- begin columns block -->
 # Left Content
-...
+Lorem markdownum insigne...
-{{</* column /*/>}} <!-- columns separator -->
+
+<---> <!-- magic sparator, between columns -->
+
+# Mid Content
+Lorem markdownum insigne...
+
+<---> <!-- magic sparator, between columns -->
+
 # Right Content
-...
+Lorem markdownum insigne...
-{{</* /column */>}} <!-- end columns block -->
+{{</* /columns */>}}
 ```
 
-{{< column >}}
+{{< columns >}}
-# Left Content
+## 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.
-{{< column />}}
+
-# Mid Content
+<--->
+
+## Mid Content
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter!
-{{< column />}}
+
-# Right Content
+<--->
+
+## 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.
-{{< /column >}}
+{{< /columns >}}
+
+
+# Mermaid Chart Shortcode
+
+{{< columns >}}
+```tpl
+{{</* 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 */>}}
+```
+
+<--->
+
+{{< 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 >}}

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

@@ -1 +1 @@
-{"Target":"book.min.c104bb061e603114d8caae951ee4fd5f4c3c731846b3f5b64e26b55524416940.css","MediaType":"text/css","Data":{"Integrity":"sha256-wQS7Bh5gMRTYyq6VHuT9X0w8cxhGs/W2Tia1VSRBaUA="}}
+{"Target":"book.min.2640646abff8284daffab17a8c1639ff1b0093a41830c30e7e8f654e2324dd9f.css","MediaType":"text/css","Data":{"Integrity":"sha256-JkBkar/4KE2v+rF6jBY5/xsAk6QYMMMOfo9lTiMk3Z8="}}

layouts/partials/docs/git-footer.html

@@ -1,5 +1,5 @@
 {{ if or .GitInfo .Site.Params.BookEditPath }}
-<div class="align-center book-git-footer {{ if not .GitInfo }}justify-end{{ else }}justify-between{{ end }}">
+<div class="book-footer {{ if not .GitInfo }}justify-end{{ else }}justify-between{{ end }}">
   {{ with .GitInfo }}
   <div>
     {{ $date := .AuthorDate.Local.Format (default "January 2, 2006" $.Site.Params.BookDateFormat) }}

layouts/shortcodes/column.html

@@ -1,10 +0,0 @@
-{{ if .Inner }}
-<div class="flex">
-  <div class="flex-even">
-    {{ .Inner | markdownify }}
-  </div>
-</div>
-{{ else }}
-  </div> <!-- close current column -->
-  <div class="flex-even"> <!-- open new column -->
-{{ end }}

layouts/shortcodes/columns.html

@@ -0,0 +1,7 @@
+<div class="book-columns flex">
+  {{ range split .Inner "<--->" }}
+  <div class="flex-even">
+    {{ . | markdownify }}
+  </div>
+  {{ end }}
+</div>

layouts/shortcodes/expand.html

@@ -6,7 +6,7 @@
     </div>
     <input type="checkbox" style="display: none" />
     <div class="book-expand-content markdown-inner">
-      {{- .Inner | markdownify -}}
+      {{ .Inner | markdownify }}
     </div>
   </label>
 </div>

layouts/shortcodes/mermaid.html

@@ -0,0 +1,9 @@
+{{ if not (.Page.Scratch.Get "mermaid") }}
+<!-- Include mermaid only first time -->
+<script src="{{ "mermaid.min.js" | absURL }}"></script>
+{{ .Page.Scratch.Set "mermaid" true }}
+{{ end }}
+
+<p class="mermaid flex align-center">
+  {{ .Inner }}
+</p>

layouts/shortcodes/tab.html

@@ -8,5 +8,5 @@
     
   {{ .Parent.Scratch.Add $group (dict "Name" $name "Content" .Inner) }}
 {{ else }}
-  {{- errorf "%q: tab shortcode must be inside tabs shortcode" .Page.Path -}}
+  {{ errorf "%q: 'tab' shortcode must be inside 'tabs' shortcode" .Page.Path }}
 {{ end}}