Skip to content

Commit 68dd327

Browse files
imfingimfing
authored
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 3a70540. * chore: redo "docs: add alerts instructions to markdown"" This reverts commit 8399373. * chore(build): bump hugo version
1 parent 0c90c1a commit 68dd327

File tree

11 files changed

+229
-33
lines changed

11 files changed

+229
-33
lines changed

‎.prettierrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2+
"plugins": [
3+
"prettier-plugin-go-template"
4+
],
25
"goTemplateBracketSpacing": true,
36
"htmlWhitespaceSensitivity": "css",
47
"printWidth": 200,

‎assets/css/compiled/main.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -952,6 +952,10 @@ video {
952952
.hx-border-t {
953953
border-top-width: 1px;
954954
}
955+
.hx-border-amber-200 {
956+
--tw-border-opacity: 1;
957+
border-color: rgb(253 230 138 / var(--tw-border-opacity));
958+
}
955959
.hx-border-black\/5 {
956960
border-color: rgb(0 0 0 / 0.05);
957961
}
@@ -967,6 +971,14 @@ video {
967971
--tw-border-opacity: 1;
968972
border-color: rgb(107 114 128 / var(--tw-border-opacity));
969973
}
974+
.hx-border-green-200 {
975+
--tw-border-opacity: 1;
976+
border-color: rgb(187 247 208 / var(--tw-border-opacity));
977+
}
978+
.hx-border-indigo-200 {
979+
--tw-border-opacity: 1;
980+
border-color: rgb(199 210 254 / var(--tw-border-opacity));
981+
}
970982
.hx-border-orange-100 {
971983
--tw-border-opacity: 1;
972984
border-color: rgb(255 237 213 / var(--tw-border-opacity));
@@ -982,6 +994,10 @@ video {
982994
--tw-border-opacity: 1;
983995
border-color: rgb(254 249 195 / var(--tw-border-opacity));
984996
}
997+
.hx-bg-amber-100 {
998+
--tw-bg-opacity: 1;
999+
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
1000+
}
9851001
.hx-bg-black\/80 {
9861002
background-color: rgb(0 0 0 / 0.8);
9871003
}
@@ -996,6 +1012,14 @@ video {
9961012
--tw-bg-opacity: 1;
9971013
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
9981014
}
1015+
.hx-bg-green-100 {
1016+
--tw-bg-opacity: 1;
1017+
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
1018+
}
1019+
.hx-bg-indigo-100 {
1020+
--tw-bg-opacity: 1;
1021+
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
1022+
}
9991023
.hx-bg-neutral-50 {
10001024
--tw-bg-opacity: 1;
10011025
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1161,6 +1185,9 @@ video {
11611185
.hx-text-center {
11621186
text-align: center;
11631187
}
1188+
.hx-align-middle {
1189+
vertical-align: middle;
1190+
}
11641191
.hx-align-text-bottom {
11651192
vertical-align: text-bottom;
11661193
}
@@ -1237,6 +1264,10 @@ video {
12371264
--tw-text-opacity: 1;
12381265
color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity));
12391266
}
1267+
.hx-text-amber-900 {
1268+
--tw-text-opacity: 1;
1269+
color: rgb(120 53 15 / var(--tw-text-opacity));
1270+
}
12401271
.hx-text-blue-900 {
12411272
--tw-text-opacity: 1;
12421273
color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1268,6 +1299,14 @@ video {
12681299
--tw-text-opacity: 1;
12691300
color: rgb(17 24 39 / var(--tw-text-opacity));
12701301
}
1302+
.hx-text-green-900 {
1303+
--tw-text-opacity: 1;
1304+
color: rgb(20 83 45 / var(--tw-text-opacity));
1305+
}
1306+
.hx-text-indigo-900 {
1307+
--tw-text-opacity: 1;
1308+
color: rgb(49 46 129 / var(--tw-text-opacity));
1309+
}
12711310
.hx-text-orange-800 {
12721311
--tw-text-opacity: 1;
12731312
color: rgb(154 52 18 / var(--tw-text-opacity));
@@ -2931,6 +2970,9 @@ body:is(html[class~="dark"] *) {
29312970
.dark\:hx-hidden:is(html[class~="dark"] *) {
29322971
display: none;
29332972
}
2973+
.dark\:hx-border-amber-200\/30:is(html[class~="dark"] *) {
2974+
border-color: rgb(253 230 138 / 0.3);
2975+
}
29342976
.dark\:hx-border-blue-200\/30:is(html[class~="dark"] *) {
29352977
border-color: rgb(191 219 254 / 0.3);
29362978
}
@@ -2941,6 +2983,12 @@ body:is(html[class~="dark"] *) {
29412983
--tw-border-opacity: 1;
29422984
border-color: rgb(156 163 175 / var(--tw-border-opacity));
29432985
}
2986+
.dark\:hx-border-green-200\/30:is(html[class~="dark"] *) {
2987+
border-color: rgb(187 247 208 / 0.3);
2988+
}
2989+
.dark\:hx-border-indigo-200\/30:is(html[class~="dark"] *) {
2990+
border-color: rgb(199 210 254 / 0.3);
2991+
}
29442992
.dark\:hx-border-neutral-700:is(html[class~="dark"] *) {
29452993
--tw-border-opacity: 1;
29462994
border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -2961,6 +3009,9 @@ body:is(html[class~="dark"] *) {
29613009
.dark\:hx-border-yellow-200\/30:is(html[class~="dark"] *) {
29623010
border-color: rgb(254 240 138 / 0.3);
29633011
}
3012+
.dark\:hx-bg-amber-900\/30:is(html[class~="dark"] *) {
3013+
background-color: rgb(120 53 15 / 0.3);
3014+
}
29643015
.dark\:hx-bg-black\/60:is(html[class~="dark"] *) {
29653016
background-color: rgb(0 0 0 / 0.6);
29663017
}
@@ -2977,6 +3028,12 @@ body:is(html[class~="dark"] *) {
29773028
.dark\:hx-bg-gray-50\/10:is(html[class~="dark"] *) {
29783029
background-color: rgb(249 250 251 / 0.1);
29793030
}
3031+
.dark\:hx-bg-green-900\/30:is(html[class~="dark"] *) {
3032+
background-color: rgb(20 83 45 / 0.3);
3033+
}
3034+
.dark\:hx-bg-indigo-900\/30:is(html[class~="dark"] *) {
3035+
background-color: rgb(49 46 129 / 0.3);
3036+
}
29803037
.dark\:hx-bg-neutral-800:is(html[class~="dark"] *) {
29813038
--tw-bg-opacity: 1;
29823039
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -3012,6 +3069,10 @@ body:is(html[class~="dark"] *) {
30123069
.dark\:hx-to-gray-400:is(html[class~="dark"] *) {
30133070
--tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
30143071
}
3072+
.dark\:hx-text-amber-200:is(html[class~="dark"] *) {
3073+
--tw-text-opacity: 1;
3074+
color: rgb(253 230 138 / var(--tw-text-opacity));
3075+
}
30153076
.dark\:hx-text-blue-200:is(html[class~="dark"] *) {
30163077
--tw-text-opacity: 1;
30173078
color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -3036,6 +3097,14 @@ body:is(html[class~="dark"] *) {
30363097
--tw-text-opacity: 1;
30373098
color: rgb(249 250 251 / var(--tw-text-opacity));
30383099
}
3100+
.dark\:hx-text-green-200:is(html[class~="dark"] *) {
3101+
--tw-text-opacity: 1;
3102+
color: rgb(187 247 208 / var(--tw-text-opacity));
3103+
}
3104+
.dark\:hx-text-indigo-200:is(html[class~="dark"] *) {
3105+
--tw-text-opacity: 1;
3106+
color: rgb(199 210 254 / var(--tw-text-opacity));
3107+
}
30393108
.dark\:hx-text-neutral-200:is(html[class~="dark"] *) {
30403109
--tw-text-opacity: 1;
30413110
color: rgb(229 229 229 / var(--tw-text-opacity));

‎exampleSite/content/docs/guide/markdown.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,44 @@ Blockquote with attribution
3535
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
3636
```
3737

38+
### Alerts
39+
40+
Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.
41+
[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.
42+
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.
43+
44+
> [!NOTE]
45+
> Useful information that users should know, even when skimming content.
46+
47+
> [!TIP]
48+
> Helpful advice for doing things better or more easily.
49+
50+
> [!IMPORTANT]
51+
> Key information users need to know to achieve their goal.
52+
53+
> [!WARNING]
54+
> Urgent info that needs immediate user attention to avoid problems.
55+
56+
> [!CAUTION]
57+
> Advises about risks or negative outcomes of certain actions.
58+
59+
```markdown {filename=Markdown}
60+
> [!NOTE]
61+
> Useful information that users should know, even when skimming content.
62+
63+
> [!TIP]
64+
> Helpful advice for doing things better or more easily.
65+
66+
> [!IMPORTANT]
67+
> Key information users need to know to achieve their goal.
68+
69+
> [!WARNING]
70+
> Urgent info that needs immediate user attention to avoid problems.
71+
72+
> [!CAUTION]
73+
> Advises about risks or negative outcomes of certain actions.
74+
```
75+
3876
### Tables
3977

4078
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.

‎exampleSite/hugo_stats.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,14 @@
141141
"dark:hover:hx-text-gray-50",
142142
"dark:hover:hx-text-neutral-50",
143143
"dark:hover:hx-text-white",
144+
"dark:hx-bg-amber-900/30",
144145
"dark:hx-bg-black/60",
145146
"dark:hx-bg-blue-900/30",
146147
"dark:hx-bg-dark",
147148
"dark:hx-bg-dark/50",
148149
"dark:hx-bg-gray-50/10",
150+
"dark:hx-bg-green-900/30",
151+
"dark:hx-bg-indigo-900/30",
149152
"dark:hx-bg-neutral-800",
150153
"dark:hx-bg-neutral-900",
151154
"dark:hx-bg-orange-400/20",
@@ -155,9 +158,12 @@
155158
"dark:hx-bg-red-900/30",
156159
"dark:hx-bg-yellow-700/30",
157160
"dark:hx-block",
161+
"dark:hx-border-amber-200/30",
158162
"dark:hx-border-blue-200/30",
159163
"dark:hx-border-gray-100/20",
160164
"dark:hx-border-gray-400",
165+
"dark:hx-border-green-200/30",
166+
"dark:hx-border-indigo-200/30",
161167
"dark:hx-border-neutral-700",
162168
"dark:hx-border-neutral-800",
163169
"dark:hx-border-orange-400/30",
@@ -171,12 +177,15 @@
171177
"dark:hx-shadow-[0_-12px_16px_#111]",
172178
"dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
173179
"dark:hx-shadow-none",
180+
"dark:hx-text-amber-200",
174181
"dark:hx-text-blue-200",
175182
"dark:hx-text-gray-100",
176183
"dark:hx-text-gray-200",
177184
"dark:hx-text-gray-300",
178185
"dark:hx-text-gray-400",
179186
"dark:hx-text-gray-50",
187+
"dark:hx-text-green-200",
188+
"dark:hx-text-indigo-200",
180189
"dark:hx-text-neutral-200",
181190
"dark:hx-text-neutral-400",
182191
"dark:hx-text-orange-300",
@@ -256,15 +265,19 @@
256265
"hover:hx-text-primary-600",
257266
"hx-absolute",
258267
"hx-align-[-2.5px]",
268+
"hx-align-middle",
259269
"hx-align-text-bottom",
260270
"hx-appearance-none",
261271
"hx-aspect-auto",
272+
"hx-bg-amber-100",
262273
"hx-bg-black/80",
263274
"hx-bg-black/[.05]",
264275
"hx-bg-blue-100",
265276
"hx-bg-clip-text",
266277
"hx-bg-gradient-to-r",
267278
"hx-bg-gray-100",
279+
"hx-bg-green-100",
280+
"hx-bg-indigo-100",
268281
"hx-bg-neutral-50",
269282
"hx-bg-orange-50",
270283
"hx-bg-primary-100",
@@ -277,12 +290,15 @@
277290
"hx-bg-yellow-50",
278291
"hx-block",
279292
"hx-border",
293+
"hx-border-amber-200",
280294
"hx-border-b",
281295
"hx-border-b-2",
282296
"hx-border-black/5",
283297
"hx-border-blue-200",
284298
"hx-border-gray-200",
285299
"hx-border-gray-500",
300+
"hx-border-green-200",
301+
"hx-border-indigo-200",
286302
"hx-border-orange-100",
287303
"hx-border-red-200",
288304
"hx-border-t",
@@ -468,6 +484,7 @@
468484
"hx-text-[.65rem]",
469485
"hx-text-[10px]",
470486
"hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
487+
"hx-text-amber-900",
471488
"hx-text-base",
472489
"hx-text-blue-900",
473490
"hx-text-center",
@@ -479,6 +496,8 @@
479496
"hx-text-gray-700",
480497
"hx-text-gray-800",
481498
"hx-text-gray-900",
499+
"hx-text-green-900",
500+
"hx-text-indigo-900",
482501
"hx-text-left",
483502
"hx-text-lg",
484503
"hx-text-orange-800",

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{{- if not (in (slice "note" "tip" "important" "warning" "caution") .AlertType) -}}
2+
{{- warnf "Alert type %s is not supported" .AlertType -}}
3+
{{- end -}}
4+
5+
{{- $content := .Text -}}
6+
{{- $alertType := .AlertType -}}
7+
{{- $alertTitle := .AlertTitle -}}
8+
9+
{{- partial "components/github-style-alert.html" (dict "content" $content "alertType" $alertType "alertTitle" $alertTitle) -}}

‎layouts/_default/_markup/render-blockquote-regular.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<blockquote>
2+
{{ .Text }}
3+
</blockquote>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{{- $content := .content -}}
2+
{{- $alertType := .alertType -}}
3+
{{- $alertTitle := .alertTitle -}}
4+
5+
{{- $icons := dict
6+
"note" "information-circle"
7+
"tip" "light-bulb"
8+
"important" "information-circle"
9+
"warning" "exclamation"
10+
"caution" "exclamation-circle"
11+
-}}
12+
13+
{{- $icon := index $icons $alertType -}}
14+
{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
15+
16+
{{- $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" }}
17+
18+
{{- $alertClasses := dict
19+
"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"
20+
"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"
21+
"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"
22+
"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"
23+
"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"
24+
-}}
25+
26+
{{- $class := index $alertClasses $alertType | default $defaultClass -}}
27+
28+
29+
<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 }}">
30+
<p class="hx-flex hx-items-center hx-font-medium">
31+
{{- with $icon -}}
32+
{{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}}
33+
{{- end -}}
34+
{{- $title -}}
35+
</p>
36+
37+
<div class="hx-w-full hx-min-w-0 hx-leading-7">
38+
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
39+
{{- $content -}}
40+
</div>
41+
</div>
42+
</div>

‎layouts/partials/shortcodes/callout.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{{- $content := .content -}}
2+
{{- $emoji := .emoji -}}
3+
{{- $icon := .icon -}}
4+
5+
{{- $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" -}}
6+
7+
{{- $class := .class | default $defaultClass -}}
8+
9+
10+
<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
11+
<div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
12+
{{- with $emoji -}}
13+
<div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
14+
{{- . -}}
15+
</div>
16+
{{- else -}}
17+
{{- with $icon -}}
18+
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
19+
{{- end -}}
20+
{{- end -}}
21+
</div>
22+
23+
<div class="hx-w-full hx-min-w-0 hx-leading-7">
24+
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
25+
{{- $content -}}
26+
</div>
27+
</div>
28+
</div>

0 commit comments

Comments
 (0)