Skip to content

Commit 2c8ff86

Browse files
committed
Add support for rendering alert icon in README
1 parent af7335e commit 2c8ff86

File tree

8 files changed

+71
-0
lines changed

8 files changed

+71
-0
lines changed

app/styles/crate/version.module.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,11 +181,24 @@
181181
line-height: 1;
182182
}
183183

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+
184192
&:global(.markdown-alert-note) {
185193
border-left-color: var(--fg-color-note);
186194

187195
& > :global(.markdown-alert-title) {
188196
color: var(--fg-color-note);
197+
198+
&:before {
199+
mask: url("/assets/alert-note.svg");
200+
background-color: var(--fg-color-note);
201+
}
189202
}
190203
}
191204

@@ -194,6 +207,11 @@
194207

195208
& > :global(.markdown-alert-title) {
196209
color: var(--fg-color-tip);
210+
211+
&:before {
212+
mask: url("/assets/alert-tip.svg");
213+
background-color: var(--fg-color-tip);
214+
}
197215
}
198216
}
199217

@@ -202,6 +220,11 @@
202220

203221
& > :global(.markdown-alert-title) {
204222
color: var(--fg-color-important);
223+
224+
&:before {
225+
mask: url("/assets/alert-important.svg");
226+
background-color: var(--fg-color-important);
227+
}
205228
}
206229
}
207230

@@ -210,6 +233,11 @@
210233

211234
& > :global(.markdown-alert-title) {
212235
color: var(--fg-color-warning);
236+
237+
&:before {
238+
mask: url("/assets/alert-warning.svg");
239+
background-color: var(--fg-color-warning);
240+
}
213241
}
214242
}
215243

@@ -218,6 +246,11 @@
218246

219247
& > :global(.markdown-alert-title) {
220248
color: var(--fg-color-caution);
249+
250+
&:before {
251+
mask: url("/assets/alert-caution.svg");
252+
background-color: var(--fg-color-caution);
253+
}
221254
}
222255
}
223256
}

e2e/acceptance/readme-rendering.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@ const README_HTML = `
2323
<p>Advises about risks or negative outcomes of certain actions.</p>
2424
</div>
2525
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>
2637
2738
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
2839
<hr>

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: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,18 @@ const README_HTML = `
3030
<p>Advises about risks or negative outcomes of certain actions.</p>
3131
</div>
3232
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+
3345
<p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
3446
<hr>
3547
<p>You may be looking for:</p>

0 commit comments

Comments
 (0)