From 68dd3273128d56c84ee6c714e77a3d64f1717526 Mon Sep 17 00:00:00 2001 From: Xin Date: Sat, 14 Dec 2024 23:44:10 +0000 Subject: [PATCH] feat: support github style alerts (#513) * feat: basic github style alerts support * feat: implement github style alert * chore: re-generate css * chore: add missing prettier config * docs: add alerts instructions to markdown * chore: revert "docs: add alerts instructions to markdown" This reverts commit 3a70540e0b5651e485612209ee22e04b26432e72. * chore: redo "docs: add alerts instructions to markdown"" This reverts commit 8399373747f081ff7164c4dd60ac5598a1a0c121. * chore(build): bump hugo version --- .prettierrc | 3 + assets/css/compiled/main.css | 69 +++++++++++++++++++ exampleSite/content/docs/guide/markdown.md | 38 ++++++++++ exampleSite/hugo_stats.json | 19 +++++ .../_markup/render-blockquote-alert.html | 9 +++ .../_markup/render-blockquote-regular.html | 3 + .../components/github-style-alert.html | 42 +++++++++++ layouts/partials/shortcodes/callout.html | 28 ++++++++ layouts/shortcodes/callout.html | 46 ++++--------- netlify.toml | 2 +- tailwind.config.js | 3 + 11 files changed, 229 insertions(+), 33 deletions(-) create mode 100644 layouts/_default/_markup/render-blockquote-alert.html create mode 100644 layouts/_default/_markup/render-blockquote-regular.html create mode 100644 layouts/partials/components/github-style-alert.html create mode 100644 layouts/partials/shortcodes/callout.html diff --git a/.prettierrc b/.prettierrc index e0956e4..28eaa1e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,7 @@ { + "plugins": [ + "prettier-plugin-go-template" + ], "goTemplateBracketSpacing": true, "htmlWhitespaceSensitivity": "css", "printWidth": 200, diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index dc3c35d..f4c238d 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -952,6 +952,10 @@ video { .hx-border-t { border-top-width: 1px; } +.hx-border-amber-200 { + --tw-border-opacity: 1; + border-color: rgb(253 230 138 / var(--tw-border-opacity)); +} .hx-border-black\/5 { border-color: rgb(0 0 0 / 0.05); } @@ -967,6 +971,14 @@ video { --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity)); } +.hx-border-green-200 { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity)); +} +.hx-border-indigo-200 { + --tw-border-opacity: 1; + border-color: rgb(199 210 254 / var(--tw-border-opacity)); +} .hx-border-orange-100 { --tw-border-opacity: 1; border-color: rgb(255 237 213 / var(--tw-border-opacity)); @@ -982,6 +994,10 @@ video { --tw-border-opacity: 1; border-color: rgb(254 249 195 / var(--tw-border-opacity)); } +.hx-bg-amber-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 243 199 / var(--tw-bg-opacity)); +} .hx-bg-black\/80 { background-color: rgb(0 0 0 / 0.8); } @@ -996,6 +1012,14 @@ video { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.hx-bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} +.hx-bg-indigo-100 { + --tw-bg-opacity: 1; + background-color: rgb(224 231 255 / var(--tw-bg-opacity)); +} .hx-bg-neutral-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity)); @@ -1161,6 +1185,9 @@ video { .hx-text-center { text-align: center; } +.hx-align-middle { + vertical-align: middle; +} .hx-align-text-bottom { vertical-align: text-bottom; } @@ -1237,6 +1264,10 @@ video { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity)); } +.hx-text-amber-900 { + --tw-text-opacity: 1; + color: rgb(120 53 15 / var(--tw-text-opacity)); +} .hx-text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity)); @@ -1268,6 +1299,14 @@ video { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } +.hx-text-green-900 { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} +.hx-text-indigo-900 { + --tw-text-opacity: 1; + color: rgb(49 46 129 / var(--tw-text-opacity)); +} .hx-text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); @@ -2931,6 +2970,9 @@ body:is(html[class~="dark"] *) { .dark\:hx-hidden:is(html[class~="dark"] *) { display: none; } +.dark\:hx-border-amber-200\/30:is(html[class~="dark"] *) { + border-color: rgb(253 230 138 / 0.3); +} .dark\:hx-border-blue-200\/30:is(html[class~="dark"] *) { border-color: rgb(191 219 254 / 0.3); } @@ -2941,6 +2983,12 @@ body:is(html[class~="dark"] *) { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); } +.dark\:hx-border-green-200\/30:is(html[class~="dark"] *) { + border-color: rgb(187 247 208 / 0.3); +} +.dark\:hx-border-indigo-200\/30:is(html[class~="dark"] *) { + border-color: rgb(199 210 254 / 0.3); +} .dark\:hx-border-neutral-700:is(html[class~="dark"] *) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); @@ -2961,6 +3009,9 @@ body:is(html[class~="dark"] *) { .dark\:hx-border-yellow-200\/30:is(html[class~="dark"] *) { border-color: rgb(254 240 138 / 0.3); } +.dark\:hx-bg-amber-900\/30:is(html[class~="dark"] *) { + background-color: rgb(120 53 15 / 0.3); +} .dark\:hx-bg-black\/60:is(html[class~="dark"] *) { background-color: rgb(0 0 0 / 0.6); } @@ -2977,6 +3028,12 @@ body:is(html[class~="dark"] *) { .dark\:hx-bg-gray-50\/10:is(html[class~="dark"] *) { background-color: rgb(249 250 251 / 0.1); } +.dark\:hx-bg-green-900\/30:is(html[class~="dark"] *) { + background-color: rgb(20 83 45 / 0.3); +} +.dark\:hx-bg-indigo-900\/30:is(html[class~="dark"] *) { + background-color: rgb(49 46 129 / 0.3); +} .dark\:hx-bg-neutral-800:is(html[class~="dark"] *) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); @@ -3012,6 +3069,10 @@ body:is(html[class~="dark"] *) { .dark\:hx-to-gray-400:is(html[class~="dark"] *) { --tw-gradient-to: #9ca3af var(--tw-gradient-to-position); } +.dark\:hx-text-amber-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(253 230 138 / var(--tw-text-opacity)); +} .dark\:hx-text-blue-200:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(191 219 254 / var(--tw-text-opacity)); @@ -3036,6 +3097,14 @@ body:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } +.dark\:hx-text-green-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity)); +} +.dark\:hx-text-indigo-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(199 210 254 / var(--tw-text-opacity)); +} .dark\:hx-text-neutral-200:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity)); diff --git a/exampleSite/content/docs/guide/markdown.md b/exampleSite/content/docs/guide/markdown.md index 3d6563d..029b2b2 100644 --- a/exampleSite/content/docs/guide/markdown.md +++ b/exampleSite/content/docs/guide/markdown.md @@ -35,6 +35,44 @@ Blockquote with attribution [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. ``` +### Alerts + +Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. +[GitHub-style alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are supported. +Please make sure you are using the latest version of Hextra and [Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0) or later. + +> [!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 of certain actions. + +```markdown {filename=Markdown} +> [!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 of certain actions. +``` + ### Tables Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box. diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 2d498b3..788b37d 100644 --- a/exampleSite/hugo_stats.json +++ b/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", diff --git a/layouts/_default/_markup/render-blockquote-alert.html b/layouts/_default/_markup/render-blockquote-alert.html new file mode 100644 index 0000000..66518fc --- /dev/null +++ b/layouts/_default/_markup/render-blockquote-alert.html @@ -0,0 +1,9 @@ +{{- if not (in (slice "note" "tip" "important" "warning" "caution") .AlertType) -}} + {{- warnf "Alert type %s is not supported" .AlertType -}} +{{- end -}} + +{{- $content := .Text -}} +{{- $alertType := .AlertType -}} +{{- $alertTitle := .AlertTitle -}} + +{{- partial "components/github-style-alert.html" (dict "content" $content "alertType" $alertType "alertTitle" $alertTitle) -}} diff --git a/layouts/_default/_markup/render-blockquote-regular.html b/layouts/_default/_markup/render-blockquote-regular.html new file mode 100644 index 0000000..652cb51 --- /dev/null +++ b/layouts/_default/_markup/render-blockquote-regular.html @@ -0,0 +1,3 @@ +
+ {{ .Text }} +
diff --git a/layouts/partials/components/github-style-alert.html b/layouts/partials/components/github-style-alert.html new file mode 100644 index 0000000..9b8e71c --- /dev/null +++ b/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 -}} + + +
+

+ {{- with $icon -}} + {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}} + {{- end -}} + {{- $title -}} +

+ +
+
+ {{- $content -}} +
+
+
diff --git a/layouts/partials/shortcodes/callout.html b/layouts/partials/shortcodes/callout.html new file mode 100644 index 0000000..417f631 --- /dev/null +++ b/layouts/partials/shortcodes/callout.html @@ -0,0 +1,28 @@ +{{- $content := .content -}} +{{- $emoji := .emoji -}} +{{- $icon := .icon -}} + +{{- $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" -}} + +{{- $class := .class | default $defaultClass -}} + + +
+
+ {{- with $emoji -}} +
+ {{- . -}} +
+ {{- else -}} + {{- with $icon -}} + {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}} + {{- end -}} + {{- end -}} +
+ +
+
+ {{- $content -}} +
+
+
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html index 6b56bcb..9c9361a 100644 --- a/layouts/shortcodes/callout.html +++ b/layouts/shortcodes/callout.html @@ -1,37 +1,19 @@ -{{ $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" }} -{{ $type := .Get "type" | default "default" }} +{{- $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" -}} +{{- $type := .Get "type" | default "default" -}} {{/* If emoji is not set, use the emoji from dict */}} -{{ $emoji := .Get "emoji" }} -{{ if eq $emoji "" }} - {{ $emoji = index $calloutEmojiDict $type }} -{{ end }} +{{- $emoji := .Get "emoji" -}} +{{- if eq $emoji "" -}} + {{- $emoji = index $calloutEmojiDict $type -}} +{{- end -}} {{/* Also allow using "icon" */}} -{{ $icon := .Get "icon" }} +{{- $icon := .Get "icon" -}} +{{- $content := .InnerDeindent | markdownify -}} -{{ $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" }} -{{ $infoClass := "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" }} -{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }} -{{ $errorClass := "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" }} +{{- $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" -}} +{{- $infoClass := "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" -}} +{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}} +{{- $errorClass := "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 := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }} +{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}} - -
-
- {{- with $emoji -}} -
- {{ . }} -
- {{- else -}} - {{- with $icon }} - {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}} - {{- end -}} - {{- end -}} -
- -
-
- {{ .InnerDeindent | markdownify }} -
-
-
+{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}} diff --git a/netlify.toml b/netlify.toml index 3b30205..4b5d13d 100644 --- a/netlify.toml +++ b/netlify.toml @@ -7,6 +7,6 @@ command = "cd exampleSite && hugo --gc --minify --themesDir ../.. -b ${DEPLOY_PR ignore = "false" [build.environment] -HUGO_VERSION = "0.132.2" +HUGO_VERSION = "0.138.0" GO_VERSION = "1.22.3" NODE_VERSION = "22.2.0" diff --git a/tailwind.config.js b/tailwind.config.js index 0eee071..0331f72 100644 --- a/tailwind.config.js +++ b/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),