feat: support alert icons

Author: innocenzi

src/Markdown/Alerts/AlertBlock.php

@@ -8,6 +8,7 @@ final class AlertBlock extends AbstractBlock
 {
     public function __construct(
         public readonly string $alertType,
+        public readonly ?string $icon,
         public readonly ?string $title,
     ) {
         parent::__construct();

src/Markdown/Alerts/AlertBlockParser.php

@@ -15,9 +15,10 @@ final class AlertBlockParser implements BlockContinueParserInterface
 
     public function __construct(
         protected string $alertType,
-        protected string $title,
+        protected ?string $icon,
+        protected ?string $title,
     ) {
-        $this->block = new AlertBlock($alertType, $title);
+        $this->block = new AlertBlock($alertType, $icon, $title);
     }
 
     #[\Override]

src/Markdown/Alerts/AlertBlockRenderer.php

@@ -7,6 +7,9 @@
 use League\CommonMark\Renderer\HtmlRenderer;
 use League\CommonMark\Renderer\NodeRendererInterface;
 use League\CommonMark\Util\HtmlElement;
+use Tempest\View\Components\Icon;
+
+use function Tempest\get;
 
 final class AlertBlockRenderer implements NodeRendererInterface
 {
@@ -21,19 +24,39 @@ public function render(Node $node, ChildNodeRendererInterface $childRenderer): m
             throw new \InvalidArgumentException('Incompatible renderer type: ' . get_class($childRenderer));
         }
 
-        $cssClass = 'alert alert-' . $node->alertType;
+        $iconName = match ($node->icon) {
+            'false' => null,
+            null => match ($node->alertType) {
+                'warning' => 'tabler:exclamation-circle',
+                'info' => 'tabler:info-circle',
+                'success' => 'tabler:check-circle',
+                'error' => 'tabler:exclamation-circle',
+                default => null,
+            },
+            default => $node->icon,
+        };
+
+        $icon = $iconName ? get(Icon::class)->render($iconName, class: 'alert-icon') : null;
+
         $content = new HtmlElement(
             tagName: 'div',
             attributes: ['class' => 'alert-wrapper'],
             contents: [
-                $node->title ? new HtmlElement('span', attributes: ['class' => 'alert-title'], contents: $node->title) : null,
-                $childRenderer->renderNodes($node->children()),
+                $icon ? new HtmlElement('div', attributes: ['class' => 'alert-icon-wrapper'], contents: $icon) : null,
+                new HtmlElement(
+                    tagName: 'div',
+                    attributes: ['class' => 'alert-content'],
+                    contents: [
+                        $node->title ? new HtmlElement('span', attributes: ['class' => 'alert-title'], contents: $node->title) : null,
+                        $childRenderer->renderNodes($node->children()),
+                    ],
+                ),
             ],
         );
 
         return new HtmlElement(
             'div',
-            ['class' => $cssClass],
+            ['class' => "alert alert-{$node->alertType}"],
             $content,
         );
     }

src/Markdown/Alerts/AlertBlockStartParser.php

@@ -17,17 +17,18 @@ public function tryStart(Cursor $cursor, MarkdownParserStateInterface $parserSta
             return BlockStart::none();
         }
 
-        $match = RegexHelper::matchFirst('/^:::(?!group)([a-z]+) ?(.*?)$/i', $cursor->getLine());
+        $match = RegexHelper::matchFirst('/^:::(?!group)(?<type>[a-z]+)({(?<icon>.*?)})? ?(?<title>.*?)$/i', $cursor->getLine());
 
         if ($match === null) {
             return BlockStart::none();
         }
 
         $cursor->advanceToEnd();
 
-        $alertType = $match[1];
-        $title = $match[2];
+        $alertType = $match['type'];
+        $icon = $match['icon'] ?: null;
+        $title = $match['title'] ?: null;
 
-        return BlockStart::of(new AlertBlockParser($alertType, $title))->at($cursor);
+        return BlockStart::of(new AlertBlockParser($alertType, $icon, $title))->at($cursor);
     }
 }

src/Web/assets/typography.css

@@ -23,31 +23,43 @@
 		}
 
 		div.alert-wrapper {
-			@apply flex flex-col gap-y-2;
+			@apply flex gap-x-2;
 
-			span.alert-title {
-				@apply text-sm font-semibold inline-block;
+			.alert-icon-wrapper {
+				@apply shrink-0;
+
+				svg {
+					@apply size-5;
+				}
 			}
 
-			p {
-				@apply my-0 text-sm opacity-90;
+			.alert-content {
+        @apply flex flex-col gap-y-2;
+        
+				.alert-title {
+					@apply text-sm font-semibold inline-block;
+				}
+
+				p {
+					@apply my-0 text-sm opacity-90;
+				}
 			}
 		}
 	}
 
-  .code-block {
-    @apply my-[1.71em] flex flex-col gap-y-0 p-0.5 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated)/20;
+	.code-block {
+		@apply my-[1.71em] flex flex-col gap-y-0 p-0.5 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated)/20;
 
-    &.named-code-block {
-      .code-block-name {
-        @apply mb-1.5 mt-1 px-2 font-mono text-(--ui-text-dimmed) text-sm;
-      }
-    }
+		&.named-code-block {
+			.code-block-name {
+				@apply mb-1.5 mt-1 px-2 font-mono text-(--ui-text-dimmed) text-sm;
+			}
+		}
 
-    pre {
-      @apply my-0;
-    }
-  }
+		pre {
+			@apply my-0;
+		}
+	}
 
 	code {
 		&::before,
@@ -102,16 +114,18 @@
 	h3 {
 		@apply text-xl;
 
-    a code {
-      @apply text-xl;
-    }
+		a code {
+			@apply text-xl;
+		}
 	}
 
-	h4, h5, h6 {
+	h4,
+	h5,
+	h6 {
 		@apply text-lg;
 
-    a code {
-      @apply text-lg;
-    }
+		a code {
+			@apply text-lg;
+		}
 	}
 }