From 06f287e50ccedc314da0200a8daa8968db3b368c Mon Sep 17 00:00:00 2001 From: chibbyalucard <> Date: Tue, 18 Feb 2025 20:38:06 +0100 Subject: [PATCH 1/5] Add template for blockquote alerts (aka callouts) Signed-off-by: chibbyalucard --- .../_default/_markup/render-blockquote.html | 28 ++++++++++ src/css/_page.scss | 54 +++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 site/layouts/_default/_markup/render-blockquote.html diff --git a/site/layouts/_default/_markup/render-blockquote.html b/site/layouts/_default/_markup/render-blockquote.html new file mode 100644 index 000000000..28f61a79c --- /dev/null +++ b/site/layouts/_default/_markup/render-blockquote.html @@ -0,0 +1,28 @@ +{{ $emojis := dict + "caution" ":exclamation:" + "important" ":information_source:" + "note" ":information_source:" + "tip" ":bulb:" + "warning" ":information_source:" +}} + +{{ if eq .Type "alert" }} +
+

+ {{ transform.Emojify (index $emojis .AlertType) }} + {{ with .AlertTitle }} + {{ . }} + {{ else }} + {{ or (i18n .AlertType) (title .AlertType) }} + {{ end }} +

+ +
+ {{ .Text }} +
+
+{{ else }} +
+ {{ .Text }} +
+{{ end }} diff --git a/src/css/_page.scss b/src/css/_page.scss index 067ad73a5..02c09185d 100644 --- a/src/css/_page.scss +++ b/src/css/_page.scss @@ -117,3 +117,57 @@ article { #content-wrap { padding-bottom: var(--footer-height); } + +/* Styles for blockquote alerts, aka admonitions or callouts */ + +// Alert colors +$alert-colors: ( + caution: #e64553, + important: #7D4DDA, + note: #096ae1, + tip: #179299, + warning: #df8e1d +); + +// Base alert styles +.alert { + margin: 1rem 0; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); + border-left-width: 4px; + border-left-style: solid; + padding: 0.8rem 1rem; + background: rgba(0, 0, 0, 0.05); + font-size: 1rem; + + p { + margin: 0; + } +} + +// Alert headers +.alert-heading { + font-weight: bold; + font-size: 1.1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +// Alert content +.alert-content > p { + padding-top: 0.5rem;; +} + +// Generate alert types +@each $type, $color in $alert-colors { + .alert-#{$type} { + border-left-color: $color; + + .alert-heading { + color: $color; + } + } +} + +/* END Styles for blockquote alerts */ From 8bab1f4dfff940157a2fc3cca9ee57b346f8bb95 Mon Sep 17 00:00:00 2001 From: chibbyalucard <> Date: Tue, 18 Feb 2025 21:03:12 +0100 Subject: [PATCH 2/5] Add attribution Signed-off-by: chibbyalucard --- src/css/_page.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/_page.scss b/src/css/_page.scss index 02c09185d..9a17cedab 100644 --- a/src/css/_page.scss +++ b/src/css/_page.scss @@ -119,6 +119,7 @@ article { } /* Styles for blockquote alerts, aka admonitions or callouts */ +// Source: https://github.com/KKKZOZ/hugo-admonitions // Alert colors $alert-colors: ( From e8a6638c045b19ecfbe15e6214fd49cf49a181cf Mon Sep 17 00:00:00 2001 From: chibbyalucard <> Date: Mon, 3 Mar 2025 21:20:32 +0100 Subject: [PATCH 3/5] Modify emojis in blockquote alerts Signed-off-by: chibbyalucard --- site/layouts/_default/_markup/render-blockquote.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/layouts/_default/_markup/render-blockquote.html b/site/layouts/_default/_markup/render-blockquote.html index 28f61a79c..81fd907c2 100644 --- a/site/layouts/_default/_markup/render-blockquote.html +++ b/site/layouts/_default/_markup/render-blockquote.html @@ -1,9 +1,9 @@ {{ $emojis := dict - "caution" ":exclamation:" + "caution" ":bangbang:" "important" ":information_source:" - "note" ":information_source:" + "note" ":memo:" "tip" ":bulb:" - "warning" ":information_source:" + "warning" ":warning:" }} {{ if eq .Type "alert" }} From 22702935275d232478d8a5b60fc9e66b4460921b Mon Sep 17 00:00:00 2001 From: chibbyalucard <> Date: Mon, 3 Mar 2025 22:15:30 +0100 Subject: [PATCH 4/5] Add examples for using blockquote alerts Signed-off-by: chibbyalucard --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index ce6b4d898..6671a04ee 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,30 @@ icon: --- ``` +##### Highlighting Important Content + +> [!NOTE] +> 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)). + +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:` + +``` +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes. +``` + #### Layouts For controlling what HTML is rendered, you need to work with the site templates. In the directory, `site/layouts/`, you'll find a number of HTML files with various template tags. The first file to check out is `site/layouts/_default/baseof.html` - this is the base layout Hugo uses to build your site that templates extend. Hugo has a lookup order for associating a content entry to a template. A single entry whose type is post (`type: post`), Hugo will look for a layout in `site/layouts/post/single.html`, and if that does not exist, it will fallback to `site/layouts/_default/single.html`. From 9cfb05eb3b54e4345bf8da0b2334d010434af5d5 Mon Sep 17 00:00:00 2001 From: Rick M Date: Tue, 4 Mar 2025 05:05:14 -0500 Subject: [PATCH 5/5] Tweak path to template Signed-off-by: Rick M --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6671a04ee..11b4b12cf 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ icon: > [!NOTE] > 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)). -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:` +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` ``` > [!NOTE]