Add support for custom attributes in blockquote alerts

assets/scss/_alerts.scss

@@ -1,4 +1,4 @@
-// Style alert boxes.
+// Bootstrap alert style adjustments:
 
 .alert {
   font-weight: $font-weight-medium;
@@ -22,9 +22,19 @@
   }
 }
 
-// The following is a placeholder class:
+// ------------------------------
+// Docsy alert styles
+// ------------------------------
+
+// Placeholder class(es):
+// .td-alert {}
+// .td-alert--md {}
 // .td-alert-body {}
 
+.td-alert-heading {
+  @extend .h4;
+}
+
 // Styles for GFM blockquote-alert types
 .alert-caution {
   @extend .alert-warning;

docsy.dev/content/en/docs/content/lookandfeel.md

@@ -587,11 +587,11 @@ To change the styling of an alert of type `abc`, override the CSS class
 }
 ```
 
-For example, to hide alert titles, use:
+For example, to make alert headings `h3` (the default is `h4`), use:
 
 ```scss
-.td-alert-body .alert-heading {
-  display: none;
+.td-alert-heading {
+  @extend .h3;
 }
 ```
 

docsy.dev/content/en/tests/index.md

@@ -5,10 +5,13 @@ type: docs
 description: Tests of Docsy features
 params:
   hide_feedback: true
+cSpell:ignore: thumbsup
 ---
 
 ## Alerts
 
+### Shortcode alerts
+
 {{% alert title="Primary alert heading" color="primary" %}}
 A simple primary alert.
 {{% /alert %}}
@@ -40,3 +43,51 @@ A simple light alert.
 {{% alert title="Dark alert heading" color="dark" %}}
 A simple dark alert.
 {{% /alert %}}
+
+{{% alert %}} A _nota bene_ alert. {{% /alert %}}
+
+{{% alert title="Centered note" color="primary text-center" %}}
+Illustrating use of custom classes via the `color` parameter.
+{{% /alert %}}
+
+### Blockquote alerts
+
+> [!NOTE] Primary alert heading
+>
+> A simple primary alert.
+
+> [!SECONDARY] Secondary alert heading
+>
+> A simple secondary alert.
+
+> [!TIP] Success alert heading
+>
+> A simple success alert.
+
+> [!DANGER] Danger alert heading
+>
+> A simple danger alert.
+
+> [!WARNING] Warning alert heading
+>
+> A simple warning alert.
+
+> [!INFO] Info alert heading
+>
+> A simple info alert.
+
+> [!LIGHT] Light alert heading
+>
+> A simple light alert.
+
+> [!DARK] Dark alert heading
+>
+> A simple dark alert.
+
+> [!NB] A _nota bene_ alert.
+
+<!-- prettier-ignore -->
+> [!PRIMARY] Centered note
+>
+> Illustrating the use of element attributes.
+{.text-center #alert-id data-debug="testing"}

layouts/_markup/render-blockquote-alert.html

@@ -14,9 +14,19 @@
   {{ $title = "" -}}
 {{ end -}}
 
-<div class="td-alert td-alert__md alert alert-{{ .AlertType }}" role="alert">
+{{ $classes := printf "td-alert td-alert--md alert alert-%s" .AlertType -}}
+{{ with .Attributes.class }}
+  {{ $classes = printf "%s %s" $classes . -}}
+{{ end -}}
+
+<div class="{{ $classes }}" role="alert"
+  {{- range $key, $value := .Attributes -}}
+    {{ if eq $key "class" }}{{ continue -}}{{ end -}}
+    {{ printf " %s=%q" $key (string $value) | safeHTMLAttr -}}
+  {{ end -}}
+>
   {{- with $title -}}
-    <div class="h4 alert-heading" role="heading">
+    <div class="td-alert-heading alert-heading" role="heading">
       {{- . -}}
     </div>
   {{- end }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsy",
-  "version": "0.14.0-dev+26-ga1075cf",
+  "version": "0.14.0-dev+27-gc9f4299",
   "repository": "github:google/docsy",
   "homepage": "https://www.docsy.dev",
   "license": "Apache-2.0",