Skip to content

Commit 364dd2b

Browse files
eth3lberteth3lbert
committed
Add support for rendering alerts in README
1 parent 8fcd3f1 commit 364dd2b

File tree

4 files changed

+153
-0
lines changed

4 files changed

+153
-0
lines changed

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,3 +152,68 @@
152152
border: 0;
153153
}
154154
}
155+
156+
/* alerts */
157+
:global(.markdown-alert) {
158+
--fg-color-info: #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+
:global(.markdown-alert-title) {
174+
display: flex;
175+
font-weight: 500;
176+
align-items: center;
177+
line-height: 1;
178+
}
179+
180+
&:global(.markdown-alert-note) {
181+
border-left-color: var(--fg-color-info);
182+
183+
:global(.markdown-alert-title) {
184+
color: var(--fg-color-info);
185+
}
186+
}
187+
188+
&:global(.markdown-alert-tip) {
189+
border-left-color: var(--fg-color-tip);
190+
191+
:global(.markdown-alert-title) {
192+
color: var(--fg-color-tip);
193+
}
194+
}
195+
196+
&:global(.markdown-alert-important) {
197+
border-left-color: var(--fg-color-important);
198+
199+
:global(.markdown-alert-title) {
200+
color: var(--fg-color-important);
201+
}
202+
}
203+
204+
&:global(.markdown-alert-warning) {
205+
border-left-color: var(--fg-color-warning);
206+
207+
:global(.markdown-alert-title) {
208+
color: var(--fg-color-warning);
209+
}
210+
}
211+
212+
&:global(.markdown-alert-caution) {
213+
border-left-color: var(--fg-color-caution);
214+
215+
:global(.markdown-alert-title) {
216+
color: var(--fg-color-caution);
217+
}
218+
}
219+
}

‎crates/crates_io_markdown/lib.rs

Lines changed: 45 additions & 0 deletions
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)
@@ -684,4 +698,35 @@ 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+
assert_snapshot!(markdown_to_html(text, None, ""), @r#"
725+
<div class="markdown-alert markdown-alert-note">
726+
<p class="markdown-alert-title">Note</p>
727+
<p>Hello,</p>
728+
<p>world!</p>
729+
</div>
730+
"#);
731+
}
687732
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,28 @@ 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+
527
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
628
<hr>
729
<p>You may be looking for:</p>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,27 @@ 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+
1233
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
1334
<hr>
1435
<p>You may be looking for:</p>

0 commit comments

Comments
 (0)