feat: add alert blockquote support

The syntax below is now supported:

> [!alertType]
> content

This was meant to replace {{< callout >}} shortcode

2 files changed, 28 insertions, 13 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index bb30f455..31ee8f5a 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -34,19 +34,6 @@ $em-text-color: #889E73;
     }
   }
 
-  blockquote {
-    color: var(--secondary-text-color);
-    padding: 0;
-    margin: 0;
-    &:not(blockquote > blockquote) {
-        margin-left: 1em;
-    }
-    & > blockquote {
-        border-left: 2px solid $border-color;
-        padding-left: 1em;
-    }
-  }
-
   code {
     font-size: 90%;
     color: var(--secondary-text-color);
diff --git a/layouts/_markup/render-blockquote.html b/layouts/_markup/render-blockquote.html
new file mode 100644
index 00000000..6295663e
--- /dev/null
+++ b/layouts/_markup/render-blockquote.html
@@ -0,0 +1,28 @@
+{{ $emojis := dict
+  "caution" "🚨"
+  "important" "☝️"
+  "note" "ℹ️"
+  "tip" "💡"
+  "warning" "⚠️"
+}}
+
+{{ if eq .Type "alert" }}
+  <blockquote class="rounded-1 leading-[1.75] mx-0 px-5
+      flex gap-3 my-2 alert-{{ .AlertType }}"
+      style="background-color: rgba(var(--block-background-color-rgb), 0.5)"
+  >
+    <div class="py-5">
+      {{ index $emojis .AlertType }}
+    </div>
+    <div>
+        {{ with .AlertTitle }}
+            <h4 class="mt-5 -mb-5 font-extrabold text-inherit">{{ . }}</h4>
+        {{ end }}
+        {{ .Text }}
+    </div>
+  </blockquote>
+{{ else }}
+  <blockquote class="text-secondary p-0 m-0 ml-[1em]">
+    {{ .Text }}
+  </blockquote>
+{{ end }}