Skip to content

Commit 721b46e

Browse files
Turbo87Turbo87
authored
Merge pull request #11441 from eth3lbert/markdown-render-alert
Add support for rendering alerts in README
2 parents a520ad0 + 26d3e61 commit 721b46e

File tree

9 files changed

+230
-1
lines changed

9 files changed

+230
-1
lines changed

‎app/styles/crate/version.module.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,3 +152,105 @@
152152
border: 0;
153153
}
154154
}
155+
156+
/* alerts */
157+
:global(.markdown-alert) {
158+
--fg-color-note: #4494f8;
159+
--fg-color-tip: #3fb950;
160+
--fg-color-important: #ab7df8;
161+
--fg-color-warning: #d29922;
162+
--fg-color-caution: #f85149;
163+
164+
padding: 0.5rem 1rem;
165+
margin-bottom: 1rem;
166+
color: inherit;
167+
border-left: .25em solid var(--gray-border);
168+
169+
& > :first-child {
170+
margin-top: 0;
171+
}
172+
173+
& > :last-child {
174+
margin-bottom: 0;
175+
}
176+
177+
:global(.markdown-alert-title) {
178+
display: flex;
179+
font-weight: 500;
180+
align-items: center;
181+
line-height: 1;
182+
}
183+
184+
& > :global(.markdown-alert-title)::before {
185+
content: '';
186+
margin-right: .5rem;
187+
background-color: var(--gray-border);
188+
width: 1em;
189+
height: 1em;
190+
}
191+
192+
&:global(.markdown-alert-note) {
193+
border-left-color: var(--fg-color-note);
194+
195+
& > :global(.markdown-alert-title) {
196+
color: var(--fg-color-note);
197+
198+
&:before {
199+
mask: url("/assets/alert-note.svg");
200+
background-color: var(--fg-color-note);
201+
}
202+
}
203+
}
204+
205+
&:global(.markdown-alert-tip) {
206+
border-left-color: var(--fg-color-tip);
207+
208+
& > :global(.markdown-alert-title) {
209+
color: var(--fg-color-tip);
210+
211+
&:before {
212+
mask: url("/assets/alert-tip.svg");
213+
background-color: var(--fg-color-tip);
214+
}
215+
}
216+
}
217+
218+
&:global(.markdown-alert-important) {
219+
border-left-color: var(--fg-color-important);
220+
221+
& > :global(.markdown-alert-title) {
222+
color: var(--fg-color-important);
223+
224+
&:before {
225+
mask: url("/assets/alert-important.svg");
226+
background-color: var(--fg-color-important);
227+
}
228+
}
229+
}
230+
231+
&:global(.markdown-alert-warning) {
232+
border-left-color: var(--fg-color-warning);
233+
234+
& > :global(.markdown-alert-title) {
235+
color: var(--fg-color-warning);
236+
237+
&:before {
238+
mask: url("/assets/alert-warning.svg");
239+
background-color: var(--fg-color-warning);
240+
}
241+
}
242+
}
243+
244+
&:global(.markdown-alert-caution) {
245+
border-left-color: var(--fg-color-caution);
246+
247+
& > :global(.markdown-alert-title) {
248+
color: var(--fg-color-caution);
249+
250+
&:before {
251+
mask: url("/assets/alert-caution.svg");
252+
background-color: var(--fg-color-caution);
253+
}
254+
}
255+
}
256+
}

‎crates/crates_io_markdown/lib.rs

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ impl<'a> MarkdownRenderer<'a> {
4646
]),
4747
),
4848
("section", hashset(&["footnotes"])),
49+
(
50+
"div",
51+
hashset(&[
52+
"markdown-alert",
53+
"markdown-alert-note",
54+
"markdown-alert-tip",
55+
"markdown-alert-important",
56+
"markdown-alert-warning",
57+
"markdown-alert-caution",
58+
]),
59+
),
60+
("p", hashset(&["markdown-alert-title"])),
4961
]);
5062
let sanitize_url = UrlRelative::Custom(Box::new(SanitizeUrl::new(base_url, base_dir)));
5163

@@ -77,7 +89,9 @@ impl<'a> MarkdownRenderer<'a> {
7789
.build();
7890

7991
let extension_options = ComrakExtensionOptions::builder()
92+
.alerts(true)
8093
.autolink(true)
94+
.multiline_block_quotes(true)
8195
.strikethrough(true)
8296
.table(true)
8397
.tagfilter(true)
@@ -429,7 +443,7 @@ mod tests {
429443
#[test]
430444
fn text_with_forbidden_class_attribute() {
431445
let text = "<p class='bad-class'>Hello World!</p>";
432-
assert_snapshot!(markdown_to_html(text, None, ""), @"<p>Hello World!</p>");
446+
assert_snapshot!(markdown_to_html(text, None, ""), @r#"<p class="">Hello World!</p>"#);
433447
}
434448

435449
#[test]
@@ -684,4 +698,36 @@ There can also be some text in between!
684698
</ul>
685699
"##);
686700
}
701+
702+
#[test]
703+
fn alerts_note() {
704+
let text = r#"
705+
> [!note]
706+
> Hello, world!
707+
"#;
708+
assert_snapshot!(markdown_to_html(text, None, ""), @r#"
709+
<div class="markdown-alert markdown-alert-note">
710+
<p class="markdown-alert-title">Note</p>
711+
<p>Hello, world!</p>
712+
</div>
713+
"#);
714+
}
715+
716+
#[test]
717+
fn alerts_note_multiline_block_quotes() {
718+
let text = r#"
719+
>>> [!note]
720+
Hello,
721+
722+
world!
723+
>>>
724+
"#;
725+
assert_snapshot!(markdown_to_html(text, None, ""), @r#"
726+
<div class="markdown-alert markdown-alert-note">
727+
<p class="markdown-alert-title">Note</p>
728+
<p>Hello,</p>
729+
<p>world!</p>
730+
</div>
731+
"#);
732+
}
687733
}

‎e2e/acceptance/readme-rendering.spec.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,39 @@ import { expect, test } from '@/e2e/helper';
22
import { http, HttpResponse } from 'msw';
33

44
const README_HTML = `
5+
<div class="markdown-alert markdown-alert-note">
6+
<p class="markdown-alert-title">Note</p>
7+
<p>Useful information that users should know, even when skimming content.</p>
8+
</div>
9+
<div class="markdown-alert markdown-alert-tip">
10+
<p class="markdown-alert-title">Tip</p>
11+
<p>Helpful advice for doing things better or more easily.</p>
12+
</div>
13+
<div class="markdown-alert markdown-alert-important">
14+
<p class="markdown-alert-title">Important</p>
15+
<p>Key information users need to know to achieve their goal.</p>
16+
</div>
17+
<div class="markdown-alert markdown-alert-warning">
18+
<p class="markdown-alert-title">Warning</p>
19+
<p>Urgent info that needs immediate user attention to avoid problems.</p>
20+
</div>
21+
<div class="markdown-alert markdown-alert-caution">
22+
<p class="markdown-alert-title">Caution</p>
23+
<p>Advises about risks or negative outcomes of certain actions.</p>
24+
</div>
25+
26+
<div class="markdown-alert markdown-alert-note">
27+
<p class="markdown-alert-title">Note</p>
28+
<div class="markdown-alert markdown-alert-important">
29+
<p class="markdown-alert-title">Important</p>
30+
<div class="markdown-alert markdown-alert-caution">
31+
<p class="markdown-alert-title">Caution</p>
32+
<p>Rick roll</p>
33+
<p>Never gonna give you up</p>
34+
</div>
35+
</div>
36+
</div>
37+
538
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
639
<hr>
740
<p>You may be looking for:</p>

‎public/assets/alert-caution.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/alert-important.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/alert-note.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/alert-tip.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/alert-warning.svg

Lines changed: 3 additions & 0 deletions
Loading

‎tests/acceptance/readme-rendering-test.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,39 @@ import { setupApplicationTest } from 'crates-io/tests/helpers';
99
import { visit } from '../helpers/visit-ignoring-abort';
1010

1111
const README_HTML = `
12+
<div class="markdown-alert markdown-alert-note">
13+
<p class="markdown-alert-title">Note</p>
14+
<p>Useful information that users should know, even when skimming content.</p>
15+
</div>
16+
<div class="markdown-alert markdown-alert-tip">
17+
<p class="markdown-alert-title">Tip</p>
18+
<p>Helpful advice for doing things better or more easily.</p>
19+
</div>
20+
<div class="markdown-alert markdown-alert-important">
21+
<p class="markdown-alert-title">Important</p>
22+
<p>Key information users need to know to achieve their goal.</p>
23+
</div>
24+
<div class="markdown-alert markdown-alert-warning">
25+
<p class="markdown-alert-title">Warning</p>
26+
<p>Urgent info that needs immediate user attention to avoid problems.</p>
27+
</div>
28+
<div class="markdown-alert markdown-alert-caution">
29+
<p class="markdown-alert-title">Caution</p>
30+
<p>Advises about risks or negative outcomes of certain actions.</p>
31+
</div>
32+
33+
<div class="markdown-alert markdown-alert-note">
34+
<p class="markdown-alert-title">Note</p>
35+
<div class="markdown-alert markdown-alert-important">
36+
<p class="markdown-alert-title">Important</p>
37+
<div class="markdown-alert markdown-alert-caution">
38+
<p class="markdown-alert-title">Caution</p>
39+
<p>Rick roll</p>
40+
<p>Never gonna give you up</p>
41+
</div>
42+
</div>
43+
</div>
44+
1245
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
1346
<hr>
1447
<p>You may be looking for:</p>

0 commit comments

Comments
 (0)