Skip to content

Commit c53e61a

Browse files
chibbyalucardWryhder
chibbyalucard
authored and
Wryhder
committed
Add support for blockquote alerts in layout files
Signed-off-by: chibbyalucard <[email protected]>
1 parent 2c412b0 commit c53e61a

File tree

3 files changed

+168
-11
lines changed

3 files changed

+168
-11
lines changed

‎README.md‎

Lines changed: 123 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -122,23 +122,135 @@ icon:
122122
> [!NOTE]
123123
> You can highlight important information in your articles or docs using different types of callouts (also known as admonitions – or alerts, as used in [the Hugo docs](https://gohugo.io/render-hooks/blockquotes/#alerts)).
124124
125-
The examples below use the same syntax as in Github Markdown. The template responsible for rendering them is at `site/layouts/_default/_markup/render-blockquote.html`
125+
For compatibility with HTML and Markdown in both content and layout files, we use a mix of shortcodes and partials to display blockquote alerts. Shortcodes on their own don't work in layout files, so you'll want to call a partial in layout files but use a shortcode (that calls the partial) in Markdown and HTML content files.
126+
127+
The partial is at `site/layouts/partials/blockquote-alert.html`, and the shortcode is at `site/layouts/shortcodes/blockquote-alert.html`.
128+
129+
There are five alert types. You can use these directly in Markdown and HTML cotent files. Omit the `title` parameter to keep the alert type as the default title (for example, a note alert will have "Note" as its title):
126130

127131
```
128-
> [!NOTE]
129-
> Useful information that users should know, even when skimming content.
132+
{{< blockquote-alert type="note" title="Optional custom title">}}
133+
Useful information that users should know, even when skimming content.
134+
{{< /blockquote-alert >}}
135+
136+
----------------
137+
138+
{{< blockquote-alert type="tip" title="Optional custom title">}}
139+
Helpful advice for doing things better or more easily.
140+
{{< /blockquote-alert >}}
141+
142+
----------------
143+
144+
{{< blockquote-alert type="important" title="Optional custom title">}}
145+
Key information users need to know to achieve their goal.
146+
{{< /blockquote-alert >}}
147+
148+
----------------
149+
150+
{{< blockquote-alert type="warning" title="This is the title">}}
151+
Urgent info that needs immediate user attention to avoid problems.
152+
{{< /blockquote-alert >}}
153+
154+
----------------
155+
156+
{{< blockquote-alert type="caution" title="This is the title">}}
157+
Advises about risks or negative outcomes.
158+
{{< /blockquote-alert >}}
159+
```
160+
161+
You can include both simple string content, as shown above, and complex nested content with multiple paragraphs and HTML elements:
162+
163+
Shortcode:
164+
165+
```
166+
{{< blockquote-alert type="tip" title="Custom Title" >}}
167+
This is a tip with **bold text** and _italic_ text.
168+
169+
This is a second paragraph in the same alert.
170+
171+
- List item 1
172+
- List item 2
173+
{{< /blockquote-alert >}}
174+
```
130175

131-
> [!TIP]
132-
> Helpful advice for doing things better or more easily.
176+
For layout files, you can call the partial like so::
133177

134-
> [!IMPORTANT]
135-
> Key information users need to know to achieve their goal.
178+
```
179+
{{ partial "blockquote-alert.html" (dict
180+
"type" "tip"
181+
"title" "Pro Tip"
182+
"content" "<p>Use partials to avoid repeating logic.</p>"
183+
) }}
184+
```
185+
186+
187+
**In Layout Files (calling partial directly)**
188+
189+
```go-html-template
190+
<!-- Simple text -->
191+
{{ partial "blockquote-alert" (dict "type" "important" "content" "This is an important message.") }}
136192
137-
> [!WARNING]
138-
> Urgent info that needs immediate user attention to avoid problems.
193+
<!-- HTML content -->
194+
{{ partial "blockquote-alert" (dict
195+
"type" "caution"
196+
"title" "Be Careful!"
197+
"content" "<p>This is a <strong>caution</strong> message.</p><p>It has multiple paragraphs.</p>"
198+
) }}
139199
140-
> [!CAUTION]
141-
> Advises about risks or negative outcomes.
200+
<!-- Dynamic content -->
201+
{{ $alertContent := printf "<p>Page last updated: %s</p><p>Author: %s</p>" (.Lastmod.Format "January 2, 2006") .Params.author }}
202+
{{ partial "blockquote-alert" (dict "type" "note" "title" "Page Info" "content" $alertContent) }}
203+
```
204+
205+
**In Other Partials:**
206+
207+
```go-html-template
208+
{{ define "partials/footer-notice.html" }}
209+
{{ partial "blockquote-alert" (dict
210+
"type" "important"
211+
"title" "Subscribe"
212+
"content" "<p>Want to stay updated? <a href='/subscribe'>Join our newsletter</a>.</p>"
213+
) }}
214+
{{ end }}
215+
```
216+
217+
**NOTE:**
218+
219+
You'll want to handle line breaks properly within the HTML content string when working with complex content. For example, the following will throw a parse error (`html: overlay: parse failed unterminated quoted string in action`):
220+
221+
```
222+
{{ partial "blockquote-alert" (dict
223+
"type" "caution"
224+
"title" "Be Careful!"
225+
"content" "<p>This is a <strong>caution</strong> message.</p>
226+
<p>It has multiple paragraphs.</p>"
227+
) }}
228+
```
229+
230+
To fix this, you can:
231+
232+
- Keep everything on a single line
233+
- Use string concatenation (whether in a variable or directly)
234+
235+
```
236+
{{ partial "blockquote-alert" (dict
237+
"type" "caution"
238+
"title" "Be Careful!"
239+
"content" "<p>This is a <strong>caution</strong> message.</p><p>It has multiple paragraphs.</p>"
240+
) }}
241+
242+
---------------
243+
244+
{{ $alertContent := add
245+
"<p>This is a <strong>caution</strong> message.</p>"
246+
"<p>It has multiple paragraphs.</p>"
247+
}}
248+
249+
{{ partial "blockquote-alert.html" (dict
250+
"type" "caution"
251+
"title" "Be Careful!"
252+
"content" $alertContent
253+
) }}
142254
```
143255

144256
#### Layouts

‎site/layouts/partials/blockquote-alert.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{{ $emojis := dict
2+
"caution" ":bangbang:"
3+
"important" ":information_source:"
4+
"note" ":memo:"
5+
"tip" ":bulb:"
6+
"warning" ":warning:"
7+
}}
8+
9+
{{ $type := .type | default "note" }}
10+
{{ $title := .title | default "" }}
11+
{{ $content := .content | default "" }}
12+
13+
{{/* Handle inner content from shortcodes */}}
14+
{{ if .inner }}
15+
{{ $content = .inner }}
16+
{{ end }}
17+
18+
{{ if $type }}
19+
<blockquote class="alert alert-{{ $type }}">
20+
<p class="alert-heading">
21+
{{ transform.Emojify (index $emojis $type) }}
22+
{{ if $title }}
23+
{{ $title }}
24+
{{ else }}
25+
{{ or (i18n $type) (title $type) }}
26+
{{ end }}
27+
</p>
28+
<div class="alert-content">
29+
{{ $content | safeHTML }}
30+
</div>
31+
</blockquote>
32+
{{ else }}
33+
<blockquote>
34+
{{ $content | safeHTML }}
35+
</blockquote>
36+
{{ end }}

‎site/layouts/shortcodes/blockquote-alert.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{{ $type := .Get "type" | default "note" }}
2+
{{ $title := .Get "title" | default "" }}
3+
{{ $inner := .Inner | markdownify }}
4+
5+
{{ partial "blockquote-alert" (dict
6+
"type" $type
7+
"title" $title
8+
"inner" $inner
9+
) }}

0 commit comments

Comments
 (0)