Use Docsy-style callouts

Adopt callout (notices) that match the Docsy theme we use.

Co-authored-by: Dipesh Rawat <[email protected]>

Author: Tim Bannister

assets/scss/_custom.scss

@@ -497,14 +497,33 @@ body {
       border-left-width: calc(max(0.5em, 4px));
       border-top-left-radius: calc(max(0.5em, 4px));
       border-bottom-left-radius: calc(max(0.5em, 4px));
+      padding-top: 0.75rem;
   }
-  .alert.callout.caution {
+  .alert.alert-caution {
     border-left-color: #f0ad4e;
   }
-  .alert.callout.note {
+  .alert.alert-info {
     border-left-color: #428bca;
+    h4, h4.alert-heading {
+      color: #000;
+      display: block;
+      float: left;
+      font-size: 1rem;
+      padding: 0;
+      padding-right: 0.5rem;
+      margin: 0;
+      line-height: 1.5;
+      font-weight: bolder;
+    }
+  }
+  .alert.alert-caution {
+    border-left-color: #f0ad4e;
+    h4, h4.alert-heading {
+      font-size: 1em;
+      font-weight: bold;
+    }
   }
-  .alert.callout.warning {
+  .alert.alert-warning {
     border-left-color: #d9534f;
   }
   .alert.third-party-content {

layouts/shortcodes/caution.html

@@ -1,3 +1,11 @@
-<div class="alert alert-warning caution callout" role="alert">
-  <strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}
+<!-- adapted from Docsy alert shortcode -->
+{{- $_hugo_config := `{ "version": 1 }` -}}
+{{- $color := "caution" -}}
+<div class="alert alert-{{- $color -}}" role="alert">
+{{- with ( T "caution" ) -}}<h4 class="alert-heading">{{- . | safeHTML -}}</h4>{{- end -}}
+{{- if eq .Page.File.Ext "md" -}}
+    {{- .Inner | markdownify -}}
+{{- else -}}
+    {{- .Inner | htmlUnescape | safeHTML -}}
+{{- end -}}
 </div>

layouts/shortcodes/note.html

@@ -1,3 +1,11 @@
-<div class="alert alert-info note callout" role="alert">
-  <strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}
-</div>
+<!-- adapted from Docsy alert shortcode -->
+{{- $_hugo_config := `{ "version": 1 }` -}}
+{{ $color := "info" }}
+<div class="alert alert-{{- $color -}}" role="alert">
+{{- with ( T "note" ) -}}<h4 class="alert-heading">{{- . | safeHTML -}}</h4>{{- end -}}
+{{- if eq .Page.File.Ext "md" -}}
+    {{- .Inner | markdownify -}}
+{{- else -}}
+    {{- .Inner | htmlUnescape | safeHTML -}}
+{{- end -}}
+</div>

layouts/shortcodes/warning.html

@@ -1,4 +1,11 @@
-<div class="alert alert-danger warning callout" role="alert">
-  <strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}
+<!-- adapted from Docsy alert shortcode -->
+{{- $_hugo_config := `{ "version": 1 }` -}}
+{{- $color := "danger" -}}
+<div class="alert alert-{{- $color -}}" role="alert">
+{{- with ( T "warning" ) -}}<h4 class="alert-heading">{{- . | safeHTML -}}</h4>{{- end -}}
+{{- if eq .Page.File.Ext "md" -}}
+    {{- .Inner | markdownify -}}
+{{- else -}}
+    {{- .Inner | htmlUnescape | safeHTML -}}
+{{- end -}}
 </div>
-