feat: implement github style alert

exampleSite/hugo_stats.json

@@ -141,11 +141,14 @@
       "dark:hover:hx-text-gray-50",
       "dark:hover:hx-text-neutral-50",
       "dark:hover:hx-text-white",
+      "dark:hx-bg-amber-900/30",
       "dark:hx-bg-black/60",
       "dark:hx-bg-blue-900/30",
       "dark:hx-bg-dark",
       "dark:hx-bg-dark/50",
       "dark:hx-bg-gray-50/10",
+      "dark:hx-bg-green-900/30",
+      "dark:hx-bg-indigo-900/30",
       "dark:hx-bg-neutral-800",
       "dark:hx-bg-neutral-900",
       "dark:hx-bg-orange-400/20",
@@ -155,9 +158,12 @@
       "dark:hx-bg-red-900/30",
       "dark:hx-bg-yellow-700/30",
       "dark:hx-block",
+      "dark:hx-border-amber-200/30",
       "dark:hx-border-blue-200/30",
       "dark:hx-border-gray-100/20",
       "dark:hx-border-gray-400",
+      "dark:hx-border-green-200/30",
+      "dark:hx-border-indigo-200/30",
       "dark:hx-border-neutral-700",
       "dark:hx-border-neutral-800",
       "dark:hx-border-orange-400/30",
@@ -171,12 +177,15 @@
       "dark:hx-shadow-[0_-12px_16px_#111]",
       "dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
       "dark:hx-shadow-none",
+      "dark:hx-text-amber-200",
       "dark:hx-text-blue-200",
       "dark:hx-text-gray-100",
       "dark:hx-text-gray-200",
       "dark:hx-text-gray-300",
       "dark:hx-text-gray-400",
       "dark:hx-text-gray-50",
+      "dark:hx-text-green-200",
+      "dark:hx-text-indigo-200",
       "dark:hx-text-neutral-200",
       "dark:hx-text-neutral-400",
       "dark:hx-text-orange-300",
@@ -256,15 +265,19 @@
       "hover:hx-text-primary-600",
       "hx-absolute",
       "hx-align-[-2.5px]",
+      "hx-align-middle",
       "hx-align-text-bottom",
       "hx-appearance-none",
       "hx-aspect-auto",
+      "hx-bg-amber-100",
       "hx-bg-black/80",
       "hx-bg-black/[.05]",
       "hx-bg-blue-100",
       "hx-bg-clip-text",
       "hx-bg-gradient-to-r",
       "hx-bg-gray-100",
+      "hx-bg-green-100",
+      "hx-bg-indigo-100",
       "hx-bg-neutral-50",
       "hx-bg-orange-50",
       "hx-bg-primary-100",
@@ -277,12 +290,15 @@
       "hx-bg-yellow-50",
       "hx-block",
       "hx-border",
+      "hx-border-amber-200",
       "hx-border-b",
       "hx-border-b-2",
       "hx-border-black/5",
       "hx-border-blue-200",
       "hx-border-gray-200",
       "hx-border-gray-500",
+      "hx-border-green-200",
+      "hx-border-indigo-200",
       "hx-border-orange-100",
       "hx-border-red-200",
       "hx-border-t",
@@ -468,6 +484,7 @@
       "hx-text-[.65rem]",
       "hx-text-[10px]",
       "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
+      "hx-text-amber-900",
       "hx-text-base",
       "hx-text-blue-900",
       "hx-text-center",
@@ -479,6 +496,8 @@
       "hx-text-gray-700",
       "hx-text-gray-800",
       "hx-text-gray-900",
+      "hx-text-green-900",
+      "hx-text-indigo-900",
       "hx-text-left",
       "hx-text-lg",
       "hx-text-orange-800",

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

@@ -1,20 +1,9 @@
-{{- $supportedAlertTypes := slice "note" "tip" "important" "warning" "caution" -}}
+{{- if not (in (slice "note" "tip" "important" "warning" "caution") .AlertType) -}}
-{{- $emojis := dict
+  {{- warnf "Alert type %s is not supported" .AlertType -}}
-  "note" ":memo:"
-  "tip" ":bulb:"
-  "important" ":information_source:"
-  "warning" ":warning:"
-  "caution" ":exclamation:"
--}}
-
-{{- if not (in $supportedAlertTypes .AlertType) -}}
-  <blockquote>
-    {{- .Text -}}
-  </blockquote>
-{{- else -}}
-  {{- $emoji := emojify (index $emojis .AlertType) -}}
-  {{- $content := .Text -}}
-  {{- $icon := "" -}}
-  {{- $class := "" -}}
-  {{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}
 {{- end -}}
+
+{{- $content := .Text -}}
+{{- $alertType := .AlertType -}}
+{{- $alertTitle := .AlertTitle -}}
+
+{{- partial "components/github-style-alert.html" (dict "content" $content "alertType" $alertType "alertTitle" $alertTitle) -}}

layouts/partials/components/github-style-alert.html

@@ -0,0 +1,42 @@
+{{- $content := .content -}}
+{{- $alertType := .alertType -}}
+{{- $alertTitle := .alertTitle -}}
+
+{{- $icons := dict
+  "note" "information-circle"
+  "tip" "light-bulb"
+  "important" "information-circle"
+  "warning" "exclamation"
+  "caution" "exclamation-circle"
+-}}
+
+{{- $icon := index $icons $alertType -}}
+{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
+
+{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
+
+{{- $alertClasses := dict
+  "note" "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200"
+  "tip" "hx-border-green-200 hx-bg-green-100 hx-text-green-900 dark:hx-border-green-200/30 dark:hx-bg-green-900/30 dark:hx-text-green-200"
+  "important" "hx-border-indigo-200 hx-bg-indigo-100 hx-text-indigo-900 dark:hx-border-indigo-200/30 dark:hx-bg-indigo-900/30 dark:hx-text-indigo-200"
+  "warning" "hx-border-amber-200 hx-bg-amber-100 hx-text-amber-900 dark:hx-border-amber-200/30 dark:hx-bg-amber-900/30 dark:hx-text-amber-200"
+  "caution" "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200"
+-}}
+
+{{- $class := index $alertClasses $alertType | default $defaultClass -}}
+
+
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-flex-col hx-rounded-lg hx-border hx-py-4 hx-px-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <p class="hx-flex hx-items-center hx-font-medium">
+    {{- with $icon -}}
+      {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}}
+    {{- end -}}
+    {{- $title -}}
+  </p>
+
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

tailwind.config.js

@@ -61,8 +61,11 @@ module.exports = {
       neutral: colors.neutral,
       red: colors.red,
       orange: colors.orange,
+      green: colors.green,
+      indigo: colors.indigo,
       blue: colors.blue,
       yellow: colors.yellow,
+      amber: colors.amber,
       primary: {
         50: makePrimaryColor(97),
         100: makePrimaryColor(94),