Skip to content

Commit 6fa84e5

Browse files
wenchywenchy
committed
feat: support GitHub Markdown Flavored Alerts
1 parent 15c3f22 commit 6fa84e5

22 files changed

Lines changed: 401 additions & 81 deletions

‎assets/js/app.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,83 @@ document.addEventListener('DOMContentLoaded', function () {
8888
});
8989
});
9090

91+
// Transform GFM-style blockquote alerts (> [!NOTE], > [!TIP], etc.) into styled alert divs.
92+
// Supported types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
93+
document.addEventListener('DOMContentLoaded', function () {
94+
var alertTypes = {
95+
NOTE: {
96+
label: 'Note',
97+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm6.5-.25A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75zM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>',
98+
},
99+
TIP: {
100+
label: 'Tip',
101+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"/></svg>',
102+
},
103+
IMPORTANT: {
104+
label: 'Important',
105+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>',
106+
},
107+
WARNING: {
108+
label: 'Warning',
109+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>',
110+
},
111+
CAUTION: {
112+
label: 'Caution',
113+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>',
114+
},
115+
};
116+
117+
var blockquotes = document.querySelectorAll('blockquote');
118+
blockquotes.forEach(function (bq) {
119+
// Find the first <p> inside the blockquote
120+
var firstP = bq.querySelector('p');
121+
if (!firstP) return;
122+
123+
// Check if it starts with [!TYPE]
124+
var text = firstP.textContent;
125+
var match = text.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]/i);
126+
if (!match) return;
127+
128+
var type = match[1].toUpperCase();
129+
var config = alertTypes[type];
130+
131+
// Build the alert div
132+
var alertDiv = document.createElement('div');
133+
alertDiv.className = 'gfm-alert gfm-alert-' + type.toLowerCase();
134+
135+
// Title row
136+
var titleDiv = document.createElement('div');
137+
titleDiv.className = 'gfm-alert-title';
138+
titleDiv.innerHTML = config.icon + '<span>' + config.label + '</span>';
139+
alertDiv.appendChild(titleDiv);
140+
141+
// Remove the [!TYPE] prefix from the first paragraph
142+
var remaining = firstP.innerHTML.replace(
143+
/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/i,
144+
'',
145+
);
146+
147+
// Content: collect all children of blockquote, replace first <p> text
148+
var contentDiv = document.createElement('div');
149+
contentDiv.className = 'gfm-alert-content';
150+
151+
Array.from(bq.childNodes).forEach(function (child) {
152+
if (child === firstP) {
153+
if (remaining.trim() !== '') {
154+
var newP = document.createElement('p');
155+
newP.innerHTML = remaining;
156+
contentDiv.appendChild(newP);
157+
}
158+
} else {
159+
contentDiv.appendChild(child.cloneNode(true));
160+
}
161+
});
162+
163+
alertDiv.appendChild(contentDiv);
164+
bq.parentNode.replaceChild(alertDiv, bq);
165+
});
166+
});
167+
91168
// Adds scroll position lock for default docs sidebar
92169

93170
if (document.querySelector('#sidebar-default') !== null) {

‎assets/scss/common/_global.scss‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ body {
122122
border-right: 1px solid $gray-200;
123123
}
124124

125-
@supports ((position:-webkit-sticky) or (position:sticky)) {
125+
@supports ((position: -webkit-sticky) or (position: sticky)) {
126126
.docs-sidebar {
127127
position: -webkit-sticky;
128128
position: sticky;
@@ -165,7 +165,7 @@ body {
165165
order: 2;
166166
}
167167

168-
@supports ((position:-webkit-sticky) or (position:sticky)) {
168+
@supports ((position: -webkit-sticky) or (position: sticky)) {
169169
.docs-toc {
170170
position: -webkit-sticky;
171171
position: sticky;
@@ -178,6 +178,77 @@ body {
178178
.docs-content {
179179
padding-bottom: 3rem;
180180
order: 1;
181+
line-height: 1.6;
182+
183+
// Inline code
184+
code:not([class]) {
185+
padding: 0.2em 0.4em;
186+
font-size: 85%;
187+
background-color: rgba(175, 184, 193, 0.2);
188+
border-radius: 6px;
189+
font-family: $font-family-monospace;
190+
}
191+
192+
// Blockquote (non-GFM-alert)
193+
blockquote {
194+
padding: 0 1em;
195+
color: $gray-600;
196+
border-left: 0.25em solid $gray-300;
197+
margin: 0 0 1rem;
198+
199+
> :first-child {
200+
margin-top: 0;
201+
}
202+
203+
> :last-child {
204+
margin-bottom: 0;
205+
}
206+
}
207+
208+
// Horizontal rule
209+
hr {
210+
height: 0.25em;
211+
padding: 0;
212+
margin: 1.5rem 0;
213+
background-color: $gray-200;
214+
border: 0;
215+
}
216+
217+
// Headings — GitHub style sizes & weights
218+
h1 {
219+
font-size: 2em;
220+
font-weight: 600;
221+
padding-bottom: 0.3em;
222+
border-bottom: 1px solid $gray-200;
223+
}
224+
225+
h2 {
226+
font-size: 1.5em;
227+
font-weight: 600;
228+
padding-bottom: 0.3em;
229+
border-bottom: 1px solid $gray-200;
230+
}
231+
232+
h3 {
233+
font-size: 1.25em;
234+
font-weight: 600;
235+
}
236+
237+
h4 {
238+
font-size: 1em;
239+
font-weight: 600;
240+
}
241+
242+
h5 {
243+
font-size: 0.875em;
244+
font-weight: 600;
245+
}
246+
247+
h6 {
248+
font-size: 0.85em;
249+
font-weight: 600;
250+
color: $gray-600;
251+
}
181252
}
182253

183254
.docs-navigation {

‎assets/scss/common/_variables.scss‎

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Color system
22

3-
$white: #fff;
3+
$white: #fff;
44
$gray-100: #f8f9fa;
55
$gray-200: #e9ecef;
66
$gray-300: #dee2e6;
@@ -10,15 +10,15 @@ $gray-600: #6c757d;
1010
$gray-700: #495057;
1111
$gray-800: #343a40;
1212
$gray-900: #212529;
13-
$black: #000;
13+
$black: #000;
1414

15-
$yellow: #ffe000;
16-
$black: #1d2d35;
17-
$beige: #fbf7f0;
15+
$yellow: #ffe000;
16+
$black: #1d2d35;
17+
$beige: #fbf7f0;
1818

1919
// $red: #e55235;
20-
$purple: #5d2f86;
21-
$brown: #aa9c84;
20+
$purple: #5d2f86;
21+
$brown: #aa9c84;
2222

2323
$blue-300: #8ed6fb;
2424
$pink-100: #fcfaff;
@@ -34,20 +34,20 @@ $color-btn-text: $white;
3434
//
3535
// Quickly modify global styling by enabling or disabling optional features.
3636

37-
$enable-caret: true;
38-
$enable-rounded: true;
39-
$enable-shadows: false;
40-
$enable-gradients: false;
41-
$enable-transitions: true;
42-
$enable-reduced-motion: true;
43-
$enable-smooth-scroll: true;
44-
$enable-grid-classes: true;
45-
$enable-button-pointers: true;
46-
$enable-rfs: true;
47-
$enable-validation-icons: true;
48-
$enable-negative-margins: true;
37+
$enable-caret: true;
38+
$enable-rounded: true;
39+
$enable-shadows: false;
40+
$enable-gradients: false;
41+
$enable-transitions: true;
42+
$enable-reduced-motion: true;
43+
$enable-smooth-scroll: true;
44+
$enable-grid-classes: true;
45+
$enable-button-pointers: true;
46+
$enable-rfs: true;
47+
$enable-validation-icons: true;
48+
$enable-negative-margins: true;
4949
$enable-deprecation-messages: true;
50-
$enable-important-utilities: true;
50+
$enable-important-utilities: true;
5151

5252
/** Bootstrap navbar fix (https://git.io/fADqW) */
5353
$navbar-dark-toggler-icon-bg: none;
@@ -63,15 +63,15 @@ $navbar-light-toggler-icon-bg: none;
6363
//
6464
// Settings for the `<body>` element.
6565

66-
$body-bg: $white;
67-
$body-color: $black;
66+
$body-bg: $white;
67+
$body-color: $black;
6868

6969
// Links
7070
//
7171
// Style anchor elements.
7272

73-
$link-color: $primary;
74-
$link-decoration: none;
73+
$link-color: $primary;
74+
$link-decoration: none;
7575

7676
// Grid containers
7777
//
@@ -82,7 +82,7 @@ $container-max-widths: (
8282
md: 720px,
8383
lg: 960px,
8484
xl: 1240px,
85-
xxl: 1320px
85+
xxl: 1320px,
8686
);
8787

8888
@include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -91,38 +91,42 @@ $container-max-widths: (
9191
//
9292
// Set the number of columns and specify the width of the gutters.
9393

94-
$grid-columns: 16;
95-
$grid-gutter-width: 48px;
96-
$grid-row-columns: 6;
94+
$grid-columns: 16;
95+
$grid-gutter-width: 48px;
96+
$grid-row-columns: 6;
9797

9898
// Components
9999
//
100100
// Define common padding and border radius sizes and more.
101101

102-
$border-color: $gray-200;
102+
$border-color: $gray-200;
103103

104104
// Typography
105105
//
106106
// Font, line-height, and color for body text, headings, and more.
107107

108108
// stylelint-disable value-keyword-case
109-
$font-family-sans-serif: "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
110-
$font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
111-
$font-family-base: $font-family-sans-serif;
109+
$font-family-sans-serif:
110+
-apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans", helvetica, arial,
111+
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
112+
$font-family-monospace:
113+
ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono",
114+
monospace;
115+
$font-family-base: $font-family-sans-serif;
112116
// stylelint-enable value-keyword-case
113117

114-
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
115-
$font-size-xl: $font-size-base * 1.375;
116-
$font-size-lg: $font-size-base * 1.25;
117-
$font-size-md: $font-size-base * 1.125;
118-
$font-size-sm: $font-size-base * 0.875;
118+
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
119+
$font-size-xl: $font-size-base * 1.375;
120+
$font-size-lg: $font-size-base * 1.25;
121+
$font-size-md: $font-size-base * 1.125;
122+
$font-size-sm: $font-size-base * 0.875;
119123

120124
// $line-height-base: 1.5;
121125

122-
$headings-font-family: null;
123-
$headings-font-weight: 700;
126+
$headings-font-family: null;
127+
$headings-font-weight: 600;
124128

125-
$lead-font-weight: 400;
129+
$lead-font-weight: 400;
126130

127131
// Spacing
128132
//
@@ -134,33 +138,33 @@ $spacer: 1rem;
134138

135139
// Navbar
136140

137-
$navbar-padding-y: $spacer / 2;
138-
$navbar-padding-x: null;
141+
$navbar-padding-y: $spacer / 2;
142+
$navbar-padding-x: null;
139143

140-
$navbar-nav-link-padding-x: 0.5rem;
144+
$navbar-nav-link-padding-x: 0.5rem;
141145

142-
$navbar-light-color: $black;
143-
$navbar-light-hover-color: $primary;
144-
$navbar-light-active-color: $primary;
146+
$navbar-light-color: $black;
147+
$navbar-light-hover-color: $primary;
148+
$navbar-light-active-color: $primary;
145149

146150
// Cards
147151

148-
$card-border-color: $gray-200;
152+
$card-border-color: $gray-200;
149153

150154
// Alerts
151155
//
152156
// Define alert colors, border radius, and padding.
153157

154-
$alert-padding-y: $spacer;
155-
$alert-padding-x: $spacer * 1.5;
156-
$alert-margin-bottom: 0;
157-
$alert-border-radius: 0;
158-
$alert-link-font-weight: $headings-font-weight;
159-
$alert-border-width: 0;
158+
$alert-padding-y: $spacer;
159+
$alert-padding-x: $spacer * 1.5;
160+
$alert-margin-bottom: 0;
161+
$alert-border-radius: 0;
162+
$alert-link-font-weight: $headings-font-weight;
163+
$alert-border-width: 0;
160164

161-
$alert-bg-scale: 0;
162-
$alert-border-scale: 0;
163-
$alert-color-scale: 0;
165+
$alert-bg-scale: 0;
166+
$alert-border-scale: 0;
167+
$alert-color-scale: 0;
164168

165169
// docsearch
166170
$dropdown-config: (
@@ -184,7 +188,7 @@ $dropdown-config: (
184188
text-color: $black,
185189
highlight-color: $purple,
186190
highlight-opacity: 0.1,
187-
highlight-type: underline
191+
highlight-type: underline,
188192
);
189193

190-
$input-btn-focus-width: 0;
194+
$input-btn-focus-width: 0;

0 commit comments

Comments
 (0)