Add support for rendering alert icon in README

Author: eth3lbert

app/styles/crate/version.module.css

@@ -177,11 +177,24 @@
         line-height: 1;
     }
 
+    & > :global(.markdown-alert-title)::before {
+        content: '';
+        margin-right: .5rem;
+        background-color: var(--gray-border);
+        width: 1em;
+        height: 1em;
+    }
+
     &:global(.markdown-alert-note) {
         border-left-color: var(--fg-color-note);
 
         & > :global(.markdown-alert-title) {
             color: var(--fg-color-note);
+
+            &:before {
+                mask: url("/assets/alert-note.svg");
+                background-color: var(--fg-color-note);
+            }
         }
     }
 
@@ -190,6 +203,11 @@
 
         & > :global(.markdown-alert-title) {
             color: var(--fg-color-tip);
+
+            &:before {
+                mask: url("/assets/alert-tip.svg");
+                background-color: var(--fg-color-tip);
+            }
         }
     }
 
@@ -198,6 +216,11 @@
 
         & > :global(.markdown-alert-title) {
             color: var(--fg-color-important);
+
+            &:before {
+                mask: url("/assets/alert-important.svg");
+                background-color: var(--fg-color-important);
+            }
         }
     }
 
@@ -206,6 +229,11 @@
 
         & > :global(.markdown-alert-title) {
             color: var(--fg-color-warning);
+
+            &:before {
+                mask: url("/assets/alert-warning.svg");
+                background-color: var(--fg-color-warning);
+            }
         }
     }
 
@@ -214,6 +242,11 @@
 
         & > :global(.markdown-alert-title) {
             color: var(--fg-color-caution);
+
+            &:before {
+                mask: url("/assets/alert-caution.svg");
+                background-color: var(--fg-color-caution);
+            }
         }
     }
 }

e2e/acceptance/readme-rendering.spec.ts

@@ -23,6 +23,17 @@ const README_HTML = `
 <p>Advises about risks or negative outcomes of certain actions.</p>
 </div>
 
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
+<div class="markdown-alert markdown-alert-important">
+<p class="markdown-alert-title">Important</p>
+<div class="markdown-alert markdown-alert-caution">
+<p class="markdown-alert-title">Caution</p>
+<p>Rick roll</p>
+<p>Never gonna give you up</p>
+</div>
+</div>
+</div>
 
 <p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
 <hr>

public/assets/alert-caution.svg

@@ -30,6 +30,18 @@ const README_HTML = `
 <p>Advises about risks or negative outcomes of certain actions.</p>
 </div>
 
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
+<div class="markdown-alert markdown-alert-important">
+<p class="markdown-alert-title">Important</p>
+<div class="markdown-alert markdown-alert-caution">
+<p class="markdown-alert-title">Caution</p>
+<p>Rick roll</p>
+<p>Never gonna give you up</p>
+</div>
+</div>
+</div>
+
 <p><strong>Serde is a framework for <em>ser</em>ializing and <em>de</em>serializing Rust data structures efficiently and generically.</strong></p>
 <hr>
 <p>You may be looking for:</p>