Add custom class support for mermaid and button shortcodes

assets/_markdown.scss

@@ -28,6 +28,10 @@ $block-border-radius: 0.15rem;
     }
   }
 
+  img {
+    max-width: 100%;
+  }
+
   code {
     padding: 0 $padding-4;
     background: $gray-100;

assets/_utils.scss

@@ -34,6 +34,10 @@
   margin: 0 auto;
 }
 
+.text-center {
+  text-align: center;
+}
+
 @mixin fixed {
   position: fixed;
   top: 0;

exampleSite/content/docs/shortcodes.md

@@ -34,7 +34,7 @@ Miseratus fonte Ditis conubia.
 # Buttons
 
 ```tpl
-{{</* button relref="/" */>}}Get Home{{</* /button */>}}
+{{</* button relref="/" [class="..."] */>}}Get Home{{</* /button */>}}
 {{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Contribute{{</* /button */>}}
 ```
 
@@ -134,7 +134,7 @@ Miseratus fonte Ditis conubia.
 
 {{< columns >}}
 ```tpl
-{{</* mermaid */>}}
+{{</* mermaid [class="text-center"]*/>}}
 sequenceDiagram
     Alice->>Bob: Hello Bob, how are you?
     alt is sick

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

@@ -1 +1 @@
-{"Target":"book.min.40a7a4a197e0c73ece96b2afec0d34ad394563de6f97699dd68b042cd2f5ae9e.css","MediaType":"text/css","Data":{"Integrity":"sha256-QKekoZfgxz7OlrKv7A00rTlFY95vl2md1osELNL1rp4="}}
+{"Target":"book.min.1f05d81b275a862f44a849039ab95c032a03abf4aebe5aeff5367876fc7b68ab.css","MediaType":"text/css","Data":{"Integrity":"sha256-HwXYGydahi9EqEkDmrlcAyoDq/Suvlrv9TZ4dvx7aKs="}}

layouts/shortcodes/button.html

@@ -7,4 +7,6 @@
 {{ with .Get "relref" }}
   {{ $ref = relref $ . }}
 {{ end }}
-<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="book-btn">{{ $.Inner }}</a>
+<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="book-btn{{ with .Get "class" }} {{ . }}{{ end }}">
+  {{ $.Inner }}
+</a>

layouts/shortcodes/mermaid.html

@@ -4,6 +4,6 @@
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
 
-<p class="mermaid">
+<p class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
   {{ .Inner }}
 </p>