Rework alert shortcode

CHANGELOG.md

@@ -18,16 +18,19 @@ Useful links:
 [releases]: https://github.com/google/docsy/releases
 [tags]: https://github.com/google/docsy/tags
 
-## 0.9.2 or 0.10.0
+## 0.10.0
 
 > ### UNRELEASED: this planned version is still under development
 
 For the full list of changes, see the [0.x.y] release notes.
 
 **Breaking changes**:
 
-- Removed shortcode `card-code` that was [deprecated in 0.7.0](#070); use
-  shortcode `card` with named parameter `code=true` instead.
+- **Shortcodes**:
+  - Removed shortcode `card-code` that was [deprecated in 0.7.0](#070); use
+    shortcode `card` with named parameter `code=true` instead.
+  - The alert shortcode has been reworked to address [#906] and [#939]. For
+    details, see [#941].
 
 **New**:
 
@@ -126,6 +129,7 @@ For the full list of changes, see the [0.8.0] release notes.
   have been dropped. Instead use the more general SASS/SCSS list `join()`
   function ([#1385]).
 
+[#941]: https://github.com/google/docsy/pull/941
 [#1120]: https://github.com/google/docsy/issues/1120
 [#1385]: https://github.com/google/docsy/issues/1385
 [#1726]: https://github.com/google/docsy/pull/1726

assets/scss/_alerts.scss

@@ -5,12 +5,15 @@
   color: inherit;
   border-radius: 0;
 
+  :last-child {
+    margin-bottom: 0;
+  }
+
   @each $color, $value in $theme-colors {
     &-#{$color} {
       & .alert-heading {
         color: $value;
       }
-
       border-style: solid;
       border-color: $value;
       border-width: 0 0 0 4px;

layouts/shortcodes/alert.md

@@ -0,0 +1,11 @@
+{{ $color := .Get "color" | default "primary" -}}
+
+<div class="alert alert-{{ $color }}" role="alert">
+{{- with .Get "title" -}}
+  <div class="h4 alert-heading" role="heading">
+    {{- . | safeHTML -}}
+  </div>
+{{/* Do **not** remove this comment! It ends the previous HTML block; see https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
+{{- end -}}
+{{ .Inner -}}
+</div>

userguide/content/en/docs/deployment/_index.md

@@ -52,7 +52,7 @@ Then follow the instructions in [Host on Netlify](https://gohugo.io/hosting-and-
    If you don't want your site to be indexed by search engines, you can add an environment flag to your build command to specify a non-`production` environment, as described in [Build environments and indexing](#build-environments-and-indexing).
 1. Click **Deploy site**.
 
-{{% alert title="Note" color="primary" %}}
+{{% alert title="Note" %}}
 Netlify uses your site repo's `package.json` file to install any JavaScript dependencies (like `postcss`) before building your site. If you haven't just copied our example site's version of this file, make sure that you've specified all our [prerequisites](/docs/get-started/docsy-as-module/installation-prerequisites/#install-postcss).
 
 For example, if you want to use a version of `postcss-cli` later than version 8.0.0, you need to ensure that your `package.json` also specifies `postcss` separately:
@@ -138,11 +138,11 @@ deployment:
 
 For more information about the Hugo `deploy` command, including command line options, see this [synopsis](https://gohugo.io/commands/hugo_deploy). In particular, you may find the `--maxDeletes int` option or the `--force` option (which forces upload of all files) useful.
 
-{{% alert title="Automated deployment with GitHub actions" color="primary" %}}
+{{% alert title="Automated deployment with GitHub actions" %}}
 If the source of your site lives in a GitHub repository, you can use [GitHub Actions](https://docs.github.com/en/actions) to deploy the site to your S3 bucket as soon as you commit changes to your GitHub repo. Setup of this workflow is described in this [blog post](https://capgemini.github.io/development/Using-GitHub-Actions-and-Hugo-Deploy-to-Deploy-to-AWS/).
 {{% /alert %}}
 
-{{% alert title="Handling aliases" color="primary" %}}
+{{% alert title="Handling aliases" %}}
 If you are using [aliases](https://gohugo.io/content-management/urls/#aliases) for URL management, you should have a look at this [blog post](https://blog.cavelab.dev/2021/10/hugo-aliases-to-s3-redirects/). It explains how to turn aliases into proper `301` redirects when using Amazon S3.
 {{% /alert %}}