Merge pull request #2977 from Wryhder/alert-template

Add a template for blockquote alerts (aka callouts)

Author: kingthorin

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`. 
 

site/layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,28 @@
+{{ $emojis := dict
+  "caution" ":bangbang:"
+  "important" ":information_source:"
+  "note" ":memo:"
+  "tip" ":bulb:"
+  "warning" ":warning:"
+}}
+
+{{ if eq .Type "alert" }}
+  <blockquote class="alert alert-{{ .AlertType }}">
+    <p class="alert-heading">
+      {{ transform.Emojify (index $emojis .AlertType) }}
+      {{ with .AlertTitle }}
+        {{ . }}
+      {{ else }}
+        {{ or (i18n .AlertType) (title .AlertType) }}
+      {{ end }}
+    </p>
+    
+    <div class="alert-content">
+        {{ .Text }}
+    </div>
+  </blockquote>
+{{ else }}
+  <blockquote>
+    {{ .Text }}
+  </blockquote>
+{{ end }}

src/css/_page.scss

@@ -117,3 +117,58 @@ article {
 #content-wrap {
   padding-bottom: var(--footer-height);
 }
+
+/* Styles for blockquote alerts, aka admonitions or callouts */
+// Source: https://github.com/KKKZOZ/hugo-admonitions
+
+// 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 */