Callout: Add feather support to mf loud callouts

Author: nginx-jack

assets/css/v2/style.css

@@ -1157,6 +1157,9 @@ blockquote.caution {
     background-color: oklch(var(--color-callout-caution-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
   }
+  .call-out-type .feather {
+    color: oklch(var(--color-callout-caution-primary));
+  }
 }
 
 blockquote.warning {
@@ -1167,6 +1170,9 @@ blockquote.warning {
     background-color: oklch(var(--color-callout-warning-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
   }
+  .call-out-type .feather {
+    color: oklch(var(--color-callout-warning-primary));
+  }
 }
 
 blockquote.important {

layouts/partials/callout.html

@@ -35,18 +35,24 @@
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
 {{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
+{{ $specialTitleIcons := dict
+  "Caution"    "alert-triangle"
+  "Warning"    "alert-octagon"
+  "Deprecated" "alert-octagon"
+  "Important"  "arrow-right-circle"
+}}
+{{ $icon := index $specialTitleIcons $title | default "" }}
+
 {{ $isSpecialTitle := in $specialTitles $title }}
 {{ if $isSpecialTitle }}
   {{/*  Loud callouts  */}}
   <blockquote class="{{ $class }}" data-mf="true" style="display: none;">
     <div>
-      {{ with $icon }}
-        <i class="{{ . }}"></i>
-      {{ end }}
       <div class="call-out-type">
+        {{ partial "feather" (dict "context" . "icon" $icon) .}}
        {{ $title }}
       </div>
-      <div class="special-content">
+      <div>
         {{ .content | markdownify }}
       </div>
     </div>

layouts/shortcodes/call-out.html

@@ -6,7 +6,7 @@
 {{</call-out>}}
 
 Backwards compatibility usage:
-{{<call-out "warning" "Custom title""fa fa-check-circle" "true">}}
+{{<call-out "warning" "Custom title" "fa fa-check-circle" "true">}}
 This callout uses the icon check-circle. **This should be an inline callout.**
 {{</call-out>}}