From 267aa231f3cdf82ed990c73bebf43f52e2e9ffbc Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 16 Apr 2025 14:00:16 +0100
Subject: [PATCH 1/2] Callout: Add reusable callout partial

Refactor old blockquote shortcodes to reuse partial
Treat Warning Caution Deprecated and Important as special cases
which render different HTML to simplify styling
Remove ':' from mf titles
---
 assets/css/v2/style.css                       |  3 +-
 .../test-product/call-out/all-callouts.md     | 21 +++++-
 .../call-out/call-out-param-types.md          | 32 +++++++++
 layouts/partials/callout.html                 | 70 +++++++++++++++++++
 layouts/shortcodes/before-you-begin.html      | 11 ++-
 layouts/shortcodes/call-out.html              | 58 ++++++++++-----
 layouts/shortcodes/caution.html               | 10 ++-
 layouts/shortcodes/deprecated.html            | 10 ++-
 layouts/shortcodes/important.html             | 10 ++-
 layouts/shortcodes/note.html                  | 11 ++-
 layouts/shortcodes/see-also.html              | 11 ++-
 layouts/shortcodes/tip.html                   | 11 ++-
 layouts/shortcodes/warning.html               | 10 ++-
 13 files changed, 222 insertions(+), 46 deletions(-)
 create mode 100644 exampleSite/content/test-product/call-out/call-out-param-types.md
 create mode 100644 layouts/partials/callout.html

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 3f61224b..c036f9ba 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1091,8 +1091,7 @@ blockquote.note {
 }
 
 blockquote.note:before {
-  content: "Note";
-  text-transform: uppercase;
+  content: attr(data-title);
   font-size: 1rem;
   font-weight: 600;
   font-variation-settings: "wght" 600;
diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md
index db1bb522..d09f70c2 100644
--- a/exampleSite/content/test-product/call-out/all-callouts.md
+++ b/exampleSite/content/test-product/call-out/all-callouts.md
@@ -65,6 +65,23 @@ This is a Warning callout with a custom title. There was previously a bug with *
 {{</call-out>}}
 
 
+
+
+## Old "plain" callouts
+The following will not have special styling, but are pre-existing shortcodes.
+
 {{<note>}}
-This is a note. In oldframe it should have `note:` in bold, at the start.
-{{</note>}}
\ No newline at end of file
+This is `<note>`. In oldframe it should have `note:` in bold, at the start.
+{{</note>}}
+
+{{<tip>}}
+This is `<tip>`. In oldframe it should have `tip:` in bold, at the start.
+{{</tip>}}
+
+{{<before-you-begin>}}
+This is `<before-you-begin>`.
+{{</before-you-begin>}}
+
+{{<see-also>}}
+This is `<see-also>`.
+{{</see-also>}}
\ No newline at end of file
diff --git a/exampleSite/content/test-product/call-out/call-out-param-types.md b/exampleSite/content/test-product/call-out/call-out-param-types.md
new file mode 100644
index 00000000..86e694c3
--- /dev/null
+++ b/exampleSite/content/test-product/call-out/call-out-param-types.md
@@ -0,0 +1,32 @@
+
+---
+description: Callout - Param types
+title: Callout - Param types
+weight: 100
+---
+
+Hugo supports named an unnamed params.
+Named are more readable.
+The callout shortcode aims to support both, but **not** in the same shortcode instance.
+
+
+## The two callouts below using **unnamed** params
+
+{{<call-out "" "Custom title" "fa fa-check-circle" "true">}}
+This callout uses the icon check-circle. **This should be an inline callout.**
+{{</call-out>}}
+
+{{<call-out "" "Custom title" "fa fa-check-circle" "false">}}
+This callout uses the icon check-circle. **This should be an sideline callout.**
+{{</call-out>}}
+
+## The two callouts below using **named** params
+This should work exactly the same as the two callouts above
+
+{{<call-out title="Custom title" icon="fa fa-check-circle" inline="true">}}
+This callout uses the icon check-circle. **This should be an inline callout.**
+{{</call-out>}}
+
+{{<call-out title="Custom title" icon="fa fa-check-circle" inline="asdas">}}
+This callout uses the icon check-circle. **This should be an sideline callout.**
+{{</call-out>}}
diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html
new file mode 100644
index 00000000..23192fb3
--- /dev/null
+++ b/layouts/partials/callout.html
@@ -0,0 +1,70 @@
+{{- /* Extract parameters with defaults and validation */ -}}
+{{ $class := .class | default "" }}
+{{ $title := .title | default "" }}
+{{ $icon  := .icon  | default "" }}
+{{ $inlineParam := .inline | default "false" | lower }}
+
+{{ if not (in (slice "true" "false") $inlineParam) }}
+  {{ errorf "Invalid parameter 'inline'='%s' passed to blockquote partial from '%s'. Allowed values: true, false" $inlineParam .Page.Path }}
+{{ end }}
+
+{{/*  Figure out inline/side and set class accordingly  */}}
+{{ $inline := eq $inlineParam "true" }}
+{{ $sideOption := "side-callout" }}
+{{ $inlineOption := "inline-callout" }}
+
+{{ if $inline }}
+  {{ $class = printf "%s %s" $class $sideOption }}
+{{ else }}
+  {{ $class = printf "%s %s" $class $inlineOption }}
+{{ end }}
+
+
+
+{{/*  Old frame callout  */}}
+<blockquote class="{{ $class }}" data-mf="false">
+  <div>
+    {{ with $icon }}
+      <i class="{{ . }}"></i>
+    {{ end }}
+    <strong>{{ $title }}</strong>
+    {{ .content | markdownify }}
+  </div>
+</blockquote>
+
+
+{{/*  Render a different block, if "loud" callouts are used  */}}
+{{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
+{{ $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">
+       {{ $title }}
+      </div>
+      <div class="special-content">
+        {{ .content | markdownify }}
+      </div>
+    </div>
+  </blockquote>
+  
+{{ else }}
+
+{{/*  "Generic" mf callout  */}}
+
+{{ $cleanTitle := strings.TrimSuffix ":" $title}}
+
+<blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
+  <div>
+    {{ with $icon }}
+      <i class="{{ . }}"></i>
+    {{ end }}
+    {{ .content | markdownify }}
+  </div>
+</blockquote>
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/before-you-begin.html b/layouts/shortcodes/before-you-begin.html
index cd947956..e3c14fba 100644
--- a/layouts/shortcodes/before-you-begin.html
+++ b/layouts/shortcodes/before-you-begin.html
@@ -1,3 +1,8 @@
-<blockquote class="tip">
-   <div><strong>Before you begin:</strong><br/> {{ .Inner | markdownify }}</div>
- </blockquote>
\ No newline at end of file
+ {{ partial "callout.html" (dict
+ "class" "tip"
+ "title" "Before you begin:"
+ "icon"  ""
+ "inline" "false"
+ "content" .Inner
+) }}
+{{ warnf "'<before-you-begin></before-you-begin>' is being deprecated. Use generic 'call-out' shortcode instead."}}
\ No newline at end of file
diff --git a/layouts/shortcodes/call-out.html b/layouts/shortcodes/call-out.html
index 5aa0a1a9..31132af9 100644
--- a/layouts/shortcodes/call-out.html
+++ b/layouts/shortcodes/call-out.html
@@ -1,23 +1,45 @@
-{{ $class := .Get 0 }}
+{{/*  
+
+Usage:
+{{<call-out title="Custom title" icon="fa fa-check-circle" inline="true">}}
+This callout uses the icon check-circle. **This should be an inline callout.**
+{{</call-out>}}
+
+Backwards compatibility usage:
+{{<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>}}
+
+Depends on `callout.html` partial.
+
+*/}}
+
+{{ $class := .Get 0 | default (.Get "class") | default "" }}
+{{ $title := .Get 1 | default (.Get "title") | default "" }}
+{{ $icon := .Get 2 | default (.Get "icon") | default "" }}
+
+{{/*  Handle different versions of booleans  */}}
+{{ $inlineParam := (.Get 3) | default (.Get "inline") | default "false" | lower }}
+{{- /* Validate the parameter strictly */ -}}
+{{ if not (in (slice "true" "false") $inlineParam) }}
+  {{ warnf "The '<call-out>' Shortcode parameter 'inline' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $inlineParam}}
+{{ end }}
+
+{{ $inline := eq $inlineParam "true" }}
+
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
-<!-- Add default option for callouts that are "sideline" if one is not provided -->
-{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }}
-{{ $class = printf "%s %s" $class $sideOption }}
+{{ if $inline }}
+  {{ $class = printf "%s %s" $class $inlineOption }}
+{{ else }}
+  {{ $class = printf "%s %s" $class $sideOption }}
 {{ end }}
 
-<!-- Blockquote element with a class that is the first parameter passed to the shortcode -->
-<blockquote class="{{ $class }}">
-   <div>
-     <!-- Check if the third parameter (icon class) is provided -->
-     {{ with .Get 2 }}
-       <!-- If the icon class is provided, render an <i> element with the given class -->
-       <i class="{{ . }}"></i>
-     {{ end }}
-     <!-- Render the second parameter (title) as a strong element -->
-     <strong>{{ .Get 1 }}</strong><br/>
-     <!-- Render the inner content of the shortcode, converting it from Markdown to HTML -->
-     {{ .Inner | markdownify }}
-   </div>
- </blockquote>
\ No newline at end of file
+{{ partial "callout.html" (dict
+    "class" $class
+    "title" $title
+    "icon"  $icon
+    "inline" $inline
+    "content" .Inner
+) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/caution.html b/layouts/shortcodes/caution.html
index 7aff8c24..866fba3b 100644
--- a/layouts/shortcodes/caution.html
+++ b/layouts/shortcodes/caution.html
@@ -1,3 +1,7 @@
-<blockquote class="caution call-out">
-  <div><strong class="call-out-type">Caution</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
\ No newline at end of file
+{{ partial "callout.html" (dict
+"class" "caution call-out"
+"title" "Caution"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/deprecated.html b/layouts/shortcodes/deprecated.html
index 9fcd7204..512092d5 100644
--- a/layouts/shortcodes/deprecated.html
+++ b/layouts/shortcodes/deprecated.html
@@ -1,3 +1,7 @@
-<blockquote class="warning call-out">
-  <div><strong class="call-out-type">Deprecated</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
\ No newline at end of file
+{{ partial "callout.html" (dict
+"class" "warning call-out"
+"title" "Deprecated"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/important.html b/layouts/shortcodes/important.html
index 55f6ade8..ee48cd7b 100644
--- a/layouts/shortcodes/important.html
+++ b/layouts/shortcodes/important.html
@@ -1,3 +1,7 @@
-<blockquote class="important call-out">
-  <div><strong class="call-out-type">Important</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
+{{ partial "callout.html" (dict
+"class" "important call-out"
+"title" "Important"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
index 95b0ebf2..08f1209d 100644
--- a/layouts/shortcodes/note.html
+++ b/layouts/shortcodes/note.html
@@ -1,3 +1,8 @@
-<blockquote class="note">
-  <div><strong>Note:</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
+{{ partial "callout.html" (dict
+"class" "note"
+"title" "Note:"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
+{{ warnf "'<note></note>' is being deprecated. Use generic 'call-out' shortcode instead."}}
\ No newline at end of file
diff --git a/layouts/shortcodes/see-also.html b/layouts/shortcodes/see-also.html
index fdd71603..505f94dc 100644
--- a/layouts/shortcodes/see-also.html
+++ b/layouts/shortcodes/see-also.html
@@ -1,3 +1,8 @@
-<blockquote class="tip">
-  <div><strong>See Also:</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
+{{ partial "callout.html" (dict
+"class" "tip"
+"title" "See Also:"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
+{{ warnf "'<see-also></see-also>' is being deprecated. Use generic 'call-out' shortcode instead."}}
\ No newline at end of file
diff --git a/layouts/shortcodes/tip.html b/layouts/shortcodes/tip.html
index 93ec44b0..a0659e9d 100644
--- a/layouts/shortcodes/tip.html
+++ b/layouts/shortcodes/tip.html
@@ -1,3 +1,8 @@
-<blockquote class="tip">
-  <div><strong>Tip:</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
+{{ partial "callout.html" (dict
+"class" "tip"
+"title" "Tip:"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
+{{ warnf "'<tip></tip>' is being deprecated. Use generic 'call-out' shortcode instead."}}
\ No newline at end of file
diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html
index 9e036855..ca08971f 100644
--- a/layouts/shortcodes/warning.html
+++ b/layouts/shortcodes/warning.html
@@ -1,3 +1,7 @@
-<blockquote class="warning call-out">
-  <div><strong class="call-out-type">Warning</strong><br/> {{ .Inner | markdownify }}</div>
-</blockquote>
+{{ partial "callout.html" (dict
+"class" "warning call-out"
+"title" "Warning"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}
\ No newline at end of file

From dd8067244d61968667912177605ae1afec7b6f2b Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 16 Apr 2025 14:18:38 +0100
Subject: [PATCH 2/2] Callout: Add feather support to mf loud callouts

---
 assets/css/v2/style.css          | 20 ++++++++++++++++----
 layouts/partials/callout.html    | 20 +++++++++++++++-----
 layouts/shortcodes/call-out.html |  2 +-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index c036f9ba..2df9d531 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1083,6 +1083,10 @@ blockquote {
     /* Removes negative margins from multi-line codeblocks */
     margin: 0;
   }
+
+  .callout-content {
+    margin: 0;
+  }
 }
 
 blockquote.note {
@@ -1134,14 +1138,16 @@ li > blockquote {
 }
 
 blockquote.call-out {
-  padding: 0.5rem;
+  --padding: 0.75rem;
+  padding: var(--padding);
 
   .call-out-type {
     display: block;
-    padding: 0.25rem 0.5rem;
-    margin: -0.5rem 0 0.5rem -0.5rem;
-    width: calc(100% + 1rem);
     font-weight: 500;
+    margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
+      calc(-1 * var(--padding));
+
+    padding: 0.25rem var(--padding);
   }
 
   br {
@@ -1157,6 +1163,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 +1176,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 {
diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html
index 23192fb3..9cb4796f 100644
--- a/layouts/partials/callout.html
+++ b/layouts/partials/callout.html
@@ -35,22 +35,30 @@
 
 {{/*  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  */}}
+  <div>
   <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 class="callout-content">
         {{ .content | markdownify }}
       </div>
     </div>
   </blockquote>
+</div>
   
 {{ else }}
 
@@ -59,11 +67,13 @@
 {{ $cleanTitle := strings.TrimSuffix ":" $title}}
 
 <blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
-  <div>
+  <div class="callout-content">
     {{ with $icon }}
       <i class="{{ . }}"></i>
     {{ end }}
+    <div class="callout-content">
     {{ .content | markdownify }}
+    </div>
   </div>
 </blockquote>
 
diff --git a/layouts/shortcodes/call-out.html b/layouts/shortcodes/call-out.html
index 31132af9..fe0b3872 100644
--- a/layouts/shortcodes/call-out.html
+++ b/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>}}