Feat/callout partial

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 {
@@ -1091,8 +1095,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;
@@ -1135,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 {
@@ -1158,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 {
@@ -1168,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 {

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>}}
+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>}}

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>}}

layouts/partials/callout.html

@@ -0,0 +1,80 @@
+{{- /* 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" }}
+{{ $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>
+      <div class="call-out-type">
+        {{ partial "feather" (dict "context" . "icon" $icon) .}}
+       {{ $title }}
+      </div>
+      <div class="callout-content">
+        {{ .content | markdownify }}
+      </div>
+    </div>
+  </blockquote>
+</div>
+
+{{ else }}
+
+{{/*  "Generic" mf callout  */}}
+
+{{ $cleanTitle := strings.TrimSuffix ":" $title}}
+
+<blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
+  <div class="callout-content">
+    {{ with $icon }}
+      <i class="{{ . }}"></i>
+    {{ end }}
+    <div class="callout-content">
+    {{ .content | markdownify }}
+    </div>
+  </div>
+</blockquote>
+
+{{ end }}

layouts/shortcodes/before-you-begin.html

@@ -1,3 +1,8 @@
-<blockquote class="tip">
-   <div><strong>Before you begin:</strong><br/> {{ .Inner | markdownify }}</div>
- </blockquote>
+ {{ 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."}}

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>
+{{ partial "callout.html" (dict
+    "class" $class
+    "title" $title
+    "icon"  $icon
+    "inline" $inline
+    "content" .Inner
+) }}

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>
+{{ partial "callout.html" (dict
+"class" "caution call-out"
+"title" "Caution"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}

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>
+{{ partial "callout.html" (dict
+"class" "warning call-out"
+"title" "Deprecated"
+"icon"  ""
+"inline" "false"
+"content" .Inner
+) }}

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
+) }}

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."}}

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."}}

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."}}

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
+) }}