Skip to content

Commit 267aa23

Browse files
nginx-jacknginx-jack
committed
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
1 parent 6311910 commit 267aa23

File tree

13 files changed

+222
-46
lines changed

13 files changed

+222
-46
lines changed

‎assets/css/v2/style.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,8 +1091,7 @@ blockquote.note {
10911091
}
10921092

10931093
blockquote.note:before {
1094-
content: "Note";
1095-
text-transform: uppercase;
1094+
content: attr(data-title);
10961095
font-size: 1rem;
10971096
font-weight: 600;
10981097
font-variation-settings: "wght" 600;

‎exampleSite/content/test-product/call-out/all-callouts.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,23 @@ This is a Warning callout with a custom title. There was previously a bug with *
6565
{{</call-out>}}
6666

6767

68+
69+
70+
## Old "plain" callouts
71+
The following will not have special styling, but are pre-existing shortcodes.
72+
6873
{{<note>}}
69-
This is a note. In oldframe it should have `note:` in bold, at the start.
70-
{{</note>}}
74+
This is `<note>`. In oldframe it should have `note:` in bold, at the start.
75+
{{</note>}}
76+
77+
{{<tip>}}
78+
This is `<tip>`. In oldframe it should have `tip:` in bold, at the start.
79+
{{</tip>}}
80+
81+
{{<before-you-begin>}}
82+
This is `<before-you-begin>`.
83+
{{</before-you-begin>}}
84+
85+
{{<see-also>}}
86+
This is `<see-also>`.
87+
{{</see-also>}}

‎exampleSite/content/test-product/call-out/call-out-param-types.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
---
3+
description: Callout - Param types
4+
title: Callout - Param types
5+
weight: 100
6+
---
7+
8+
Hugo supports named an unnamed params.
9+
Named are more readable.
10+
The callout shortcode aims to support both, but **not** in the same shortcode instance.
11+
12+
13+
## The two callouts below using **unnamed** params
14+
15+
{{<call-out "" "Custom title" "fa fa-check-circle" "true">}}
16+
This callout uses the icon check-circle. **This should be an inline callout.**
17+
{{</call-out>}}
18+
19+
{{<call-out "" "Custom title" "fa fa-check-circle" "false">}}
20+
This callout uses the icon check-circle. **This should be an sideline callout.**
21+
{{</call-out>}}
22+
23+
## The two callouts below using **named** params
24+
This should work exactly the same as the two callouts above
25+
26+
{{<call-out title="Custom title" icon="fa fa-check-circle" inline="true">}}
27+
This callout uses the icon check-circle. **This should be an inline callout.**
28+
{{</call-out>}}
29+
30+
{{<call-out title="Custom title" icon="fa fa-check-circle" inline="asdas">}}
31+
This callout uses the icon check-circle. **This should be an sideline callout.**
32+
{{</call-out>}}

‎layouts/partials/callout.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{{- /* Extract parameters with defaults and validation */ -}}
2+
{{ $class := .class | default "" }}
3+
{{ $title := .title | default "" }}
4+
{{ $icon := .icon | default "" }}
5+
{{ $inlineParam := .inline | default "false" | lower }}
6+
7+
{{ if not (in (slice "true" "false") $inlineParam) }}
8+
{{ errorf "Invalid parameter 'inline'='%s' passed to blockquote partial from '%s'. Allowed values: true, false" $inlineParam .Page.Path }}
9+
{{ end }}
10+
11+
{{/* Figure out inline/side and set class accordingly */}}
12+
{{ $inline := eq $inlineParam "true" }}
13+
{{ $sideOption := "side-callout" }}
14+
{{ $inlineOption := "inline-callout" }}
15+
16+
{{ if $inline }}
17+
{{ $class = printf "%s %s" $class $sideOption }}
18+
{{ else }}
19+
{{ $class = printf "%s %s" $class $inlineOption }}
20+
{{ end }}
21+
22+
23+
24+
{{/* Old frame callout */}}
25+
<blockquote class="{{ $class }}" data-mf="false">
26+
<div>
27+
{{ with $icon }}
28+
<i class="{{ . }}"></i>
29+
{{ end }}
30+
<strong>{{ $title }}</strong>
31+
{{ .content | markdownify }}
32+
</div>
33+
</blockquote>
34+
35+
36+
{{/* Render a different block, if "loud" callouts are used */}}
37+
{{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
38+
{{ $isSpecialTitle := in $specialTitles $title }}
39+
{{ if $isSpecialTitle }}
40+
{{/* Loud callouts */}}
41+
<blockquote class="{{ $class }}" data-mf="true" style="display: none;">
42+
<div>
43+
{{ with $icon }}
44+
<i class="{{ . }}"></i>
45+
{{ end }}
46+
<div class="call-out-type">
47+
{{ $title }}
48+
</div>
49+
<div class="special-content">
50+
{{ .content | markdownify }}
51+
</div>
52+
</div>
53+
</blockquote>
54+
55+
{{ else }}
56+
57+
{{/* "Generic" mf callout */}}
58+
59+
{{ $cleanTitle := strings.TrimSuffix ":" $title}}
60+
61+
<blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
62+
<div>
63+
{{ with $icon }}
64+
<i class="{{ . }}"></i>
65+
{{ end }}
66+
{{ .content | markdownify }}
67+
</div>
68+
</blockquote>
69+
70+
{{ end }}

‎layouts/shortcodes/before-you-begin.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<blockquote class="tip">
2-
<div><strong>Before you begin:</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "tip"
3+
"title" "Before you begin:"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}
8+
{{ warnf "'<before-you-begin></before-you-begin>' is being deprecated. Use generic 'call-out' shortcode instead."}}

‎layouts/shortcodes/call-out.html

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,45 @@
1-
{{ $class := .Get 0 }}
1+
{{/*
2+
3+
Usage:
4+
{{<call-out title="Custom title" icon="fa fa-check-circle" inline="true">}}
5+
This callout uses the icon check-circle. **This should be an inline callout.**
6+
{{</call-out>}}
7+
8+
Backwards compatibility usage:
9+
{{<call-out "warning" "Custom title""fa fa-check-circle" "true">}}
10+
This callout uses the icon check-circle. **This should be an inline callout.**
11+
{{</call-out>}}
12+
13+
Depends on `callout.html` partial.
14+
15+
*/}}
16+
17+
{{ $class := .Get 0 | default (.Get "class") | default "" }}
18+
{{ $title := .Get 1 | default (.Get "title") | default "" }}
19+
{{ $icon := .Get 2 | default (.Get "icon") | default "" }}
20+
21+
{{/* Handle different versions of booleans */}}
22+
{{ $inlineParam := (.Get 3) | default (.Get "inline") | default "false" | lower }}
23+
{{- /* Validate the parameter strictly */ -}}
24+
{{ if not (in (slice "true" "false") $inlineParam) }}
25+
{{ warnf "The '<call-out>' Shortcode parameter 'inline' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $inlineParam}}
26+
{{ end }}
27+
28+
{{ $inline := eq $inlineParam "true" }}
29+
230
{{ $sideOption := "side-callout" }}
331
{{ $inlineOption := "inline-callout" }}
432

5-
<!-- Add default option for callouts that are "sideline" if one is not provided -->
6-
{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }}
7-
{{ $class = printf "%s %s" $class $sideOption }}
33+
{{ if $inline }}
34+
{{ $class = printf "%s %s" $class $inlineOption }}
35+
{{ else }}
36+
{{ $class = printf "%s %s" $class $sideOption }}
837
{{ end }}
938

10-
<!-- Blockquote element with a class that is the first parameter passed to the shortcode -->
11-
<blockquote class="{{ $class }}">
12-
<div>
13-
<!-- Check if the third parameter (icon class) is provided -->
14-
{{ with .Get 2 }}
15-
<!-- If the icon class is provided, render an <i> element with the given class -->
16-
<i class="{{ . }}"></i>
17-
{{ end }}
18-
<!-- Render the second parameter (title) as a strong element -->
19-
<strong>{{ .Get 1 }}</strong><br/>
20-
<!-- Render the inner content of the shortcode, converting it from Markdown to HTML -->
21-
{{ .Inner | markdownify }}
22-
</div>
23-
</blockquote>
39+
{{ partial "callout.html" (dict
40+
"class" $class
41+
"title" $title
42+
"icon" $icon
43+
"inline" $inline
44+
"content" .Inner
45+
) }}

‎layouts/shortcodes/caution.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<blockquote class="caution call-out">
2-
<div><strong class="call-out-type">Caution</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "caution call-out"
3+
"title" "Caution"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}

‎layouts/shortcodes/deprecated.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<blockquote class="warning call-out">
2-
<div><strong class="call-out-type">Deprecated</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "warning call-out"
3+
"title" "Deprecated"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}

‎layouts/shortcodes/important.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<blockquote class="important call-out">
2-
<div><strong class="call-out-type">Important</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "important call-out"
3+
"title" "Important"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}

‎layouts/shortcodes/note.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<blockquote class="note">
2-
<div><strong>Note:</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "note"
3+
"title" "Note:"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}
8+
{{ warnf "'<note></note>' is being deprecated. Use generic 'call-out' shortcode instead."}}

‎layouts/shortcodes/see-also.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<blockquote class="tip">
2-
<div><strong>See Also:</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "tip"
3+
"title" "See Also:"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}
8+
{{ warnf "'<see-also></see-also>' is being deprecated. Use generic 'call-out' shortcode instead."}}

‎layouts/shortcodes/tip.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<blockquote class="tip">
2-
<div><strong>Tip:</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "tip"
3+
"title" "Tip:"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}
8+
{{ warnf "'<tip></tip>' is being deprecated. Use generic 'call-out' shortcode instead."}}

‎layouts/shortcodes/warning.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<blockquote class="warning call-out">
2-
<div><strong class="call-out-type">Warning</strong><br/> {{ .Inner | markdownify }}</div>
3-
</blockquote>
1+
{{ partial "callout.html" (dict
2+
"class" "warning call-out"
3+
"title" "Warning"
4+
"icon" ""
5+
"inline" "false"
6+
"content" .Inner
7+
) }}

0 commit comments

Comments
 (0)