Add template for blockquote alerts (aka callouts)

Signed-off-by: chibbyalucard <[email protected]>

site/layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,28 @@
+{{ $emojis := dict
+  "caution" ":exclamation:"
+  "important" ":information_source:"
+  "note" ":information_source:"
+  "tip" ":bulb:"
+  "warning" ":information_source:"
+}}
+
+{{ if eq .Type "alert" }}
+  <blockquote class="alert alert-{{ .AlertType }}">
+    <p class="alert-heading">
+      {{ transform.Emojify (index $emojis .AlertType) }}
+      {{ with .AlertTitle }}
+        {{ . }}
+      {{ else }}
+        {{ or (i18n .AlertType) (title .AlertType) }}
+      {{ end }}
+    </p>
+
+    <div class="alert-content">
+        {{ .Text }}
+    </div>
+  </blockquote>
+{{ else }}
+  <blockquote>
+    {{ .Text }}
+  </blockquote>
+{{ end }}

src/css/_page.scss

@@ -117,3 +117,57 @@ article {
 #content-wrap {
   padding-bottom: var(--footer-height);
 }
+
+/* Styles for blockquote alerts, aka admonitions or callouts */
+
+// Alert colors
+$alert-colors: (
+  caution:    #e64553,
+  important:  #7D4DDA,
+  note:       #096ae1,
+  tip:        #179299,
+  warning:    #df8e1d
+);
+
+// Base alert styles
+.alert {
+  margin: 1rem 0;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding: 0.8rem 1rem;
+  background: rgba(0, 0, 0, 0.05);
+  font-size: 1rem;
+
+  p {
+    margin: 0;
+  }
+}
+
+// Alert headers
+.alert-heading {
+  font-weight: bold;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+// Alert content
+.alert-content > p {
+  padding-top: 0.5rem;;
+}
+
+// Generate alert types
+@each $type, $color in $alert-colors {
+  .alert-#{$type} {
+    border-left-color: $color;
+
+    .alert-heading {
+      color: $color;
+    }
+  }
+}
+
+/* END Styles for blockquote alerts */