feat: add icons to readme md alerts (#260)

Author: mikouaji

app/assets/main.css

@@ -317,6 +317,7 @@ html.light .shiki span {
   background: var(--bg-subtle);
   font-style: normal;
   color: var(--fg-subtle);
+  position: relative;
 }
 
 .readme-content blockquote[data-callout]::before {
@@ -327,6 +328,15 @@ html.light .shiki span {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.readme-content blockquote[data-callout]::after {
+  content: '';
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  top: 1rem;
 }
 
 .readme-content blockquote[data-callout] > p:first-child {
@@ -346,6 +356,11 @@ html.light .shiki span {
   content: 'Note';
   color: #3b82f6;
 }
+.readme-content blockquote[data-callout='note']::after {
+  background-color: #3b82f6;
+  -webkit-mask: icon('i-lucide-info') no-repeat;
+  mask: icon('i-lucide-info') no-repeat;
+}
 
 /* Tip - green */
 .readme-content blockquote[data-callout='tip'] {
@@ -356,6 +371,11 @@ html.light .shiki span {
   content: 'Tip';
   color: #22c55e;
 }
+.readme-content blockquote[data-callout='tip']::after {
+  background-color: #22c55e;
+  -webkit-mask: icon('i-lucide-lightbulb') no-repeat;
+  mask: icon('i-lucide-lightbulb') no-repeat;
+}
 
 /* Important - purple */
 .readme-content blockquote[data-callout='important'] {
@@ -366,6 +386,11 @@ html.light .shiki span {
   content: 'Important';
   color: var(--syntax-fn);
 }
+.readme-content blockquote[data-callout='important']::after {
+  background-color: var(--syntax-fn);
+  -webkit-mask: icon('i-lucide-pin') no-repeat;
+  mask: icon('i-lucide-pin') no-repeat;
+}
 
 /* Warning - yellow/orange */
 .readme-content blockquote[data-callout='warning'] {
@@ -376,6 +401,11 @@ html.light .shiki span {
   content: 'Warning';
   color: #eab308;
 }
+.readme-content blockquote[data-callout='warning']::after {
+  background-color: #eab308;
+  -webkit-mask: icon('i-lucide-triangle-alert') no-repeat;
+  mask: icon('i-lucide-triangle-alert') no-repeat;
+}
 
 /* Caution - red */
 .readme-content blockquote[data-callout='caution'] {
@@ -386,6 +416,11 @@ html.light .shiki span {
   content: 'Caution';
   color: #ef4444;
 }
+.readme-content blockquote[data-callout='caution']::after {
+  background-color: #ef4444;
+  -webkit-mask: icon('i-lucide-circle-alert') no-repeat;
+  mask: icon('i-lucide-circle-alert') no-repeat;
+}
 
 /* Table wrapper for horizontal scroll on mobile */
 .readme-content table {

package.json

@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",
+    "@iconify-json/lucide": "^1.2.87",
     "@iconify-json/solar": "1.2.5",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@npm/types": "2.1.0",