feat: suppot alert blocks

Author: innocenzi

src/Markdown/Alerts/AlertBlock.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Markdown\Alerts;
+
+use League\CommonMark\Node\Block\AbstractBlock;
+
+final class AlertBlock extends AbstractBlock
+{
+    public function __construct(
+        public readonly string $alertType,
+        public readonly ?string $title,
+    ) {
+        parent::__construct();
+    }
+}

src/Markdown/Alerts/AlertBlockParser.php

@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Markdown\Alerts;
+
+use League\CommonMark\Node\Block\AbstractBlock;
+use League\CommonMark\Parser\Block\BlockContinue;
+use League\CommonMark\Parser\Block\BlockContinueParserInterface;
+use League\CommonMark\Parser\Cursor;
+use League\CommonMark\Util\RegexHelper;
+
+final class AlertBlockParser implements BlockContinueParserInterface
+{
+    protected $block;
+    protected $finished = false;
+
+    public function __construct(
+        protected string $alertType,
+        protected string $title,
+    ) {
+        $this->block = new AlertBlock($alertType, $title);
+    }
+
+    public function addLine(string $line): void
+    {
+    }
+
+    public function getBlock(): AbstractBlock
+    {
+        return $this->block;
+    }
+
+    public function isContainer(): bool
+    {
+        return true;
+    }
+
+    public function canContain(AbstractBlock $childBlock): bool
+    {
+        return true;
+    }
+
+    public function canHaveLazyContinuationLines(): bool
+    {
+        return false;
+    }
+
+    public function parseInlines(): bool
+    {
+        return true;
+    }
+
+    public function tryContinue(Cursor $cursor, BlockContinueParserInterface $activeBlockParser): ?BlockContinue
+    {
+        if ($cursor->isIndented()) {
+            return BlockContinue::at($cursor);
+        }
+
+        $match = RegexHelper::matchFirst('/^:::$/', $cursor->getLine());
+        if ($match !== null) {
+            $this->finished = true;
+            return BlockContinue::finished();
+        }
+
+        return BlockContinue::at($cursor);
+    }
+
+    public function closeBlock(): void
+    {
+        // Nothing to do here
+    }
+
+    public function isFinished(): bool
+    {
+        return $this->finished;
+    }
+}

src/Markdown/Alerts/AlertBlockRenderer.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Markdown\Alerts;
+
+use League\CommonMark\Node\Node;
+use League\CommonMark\Renderer\ChildNodeRendererInterface;
+use League\CommonMark\Renderer\HtmlRenderer;
+use League\CommonMark\Renderer\NodeRendererInterface;
+use League\CommonMark\Util\HtmlElement;
+
+final class AlertBlockRenderer implements NodeRendererInterface
+{
+    public function render(Node $node, ChildNodeRendererInterface $htmlRenderer)
+    {
+        if (! ($node instanceof AlertBlock)) {
+            throw new \InvalidArgumentException('Incompatible node type: ' . get_class($node));
+        }
+
+        if (! ($htmlRenderer instanceof HtmlRenderer)) {
+            throw new \InvalidArgumentException('Incompatible renderer type: ' . get_class($htmlRenderer));
+        }
+
+        $cssClass = 'alert alert-' . $node->alertType;
+        $content = new HtmlElement(
+            tagName: 'div',
+            attributes: ['class' => 'alert-wrapper'],
+            contents: [
+                $node->title ? new HtmlElement('span', attributes: ['class' => 'alert-title'], contents: $node->title) : null,
+                $htmlRenderer->renderNodes($node->children()),
+            ],
+        );
+
+        return new HtmlElement(
+            'div',
+            ['class' => $cssClass],
+            $content,
+        );
+    }
+}

src/Markdown/Alerts/AlertBlockStartParser.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Markdown\Alerts;
+
+use League\CommonMark\Parser\Block\BlockStart;
+use League\CommonMark\Parser\Block\BlockStartParserInterface;
+use League\CommonMark\Parser\Cursor;
+use League\CommonMark\Parser\MarkdownParserStateInterface;
+use League\CommonMark\Util\RegexHelper;
+
+final class AlertBlockStartParser implements BlockStartParserInterface
+{
+    public function tryStart(Cursor $cursor, MarkdownParserStateInterface $parserState): ?BlockStart
+    {
+        if ($cursor->isIndented()) {
+            return BlockStart::none();
+        }
+
+        $match = RegexHelper::matchFirst('/^:::([a-z]+) ?(.*?)$/i', $cursor->getLine());
+        if ($match === null) {
+            return BlockStart::none();
+        }
+
+        $cursor->advanceToEnd();
+
+        $alertType = $match[1];
+        $title = $match[2];
+
+        return BlockStart::of(new AlertBlockParser($alertType, $title))->at($cursor);
+    }
+}

src/Markdown/Alerts/AlertExtension.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Markdown\Alerts;
+
+use League\CommonMark\Environment\EnvironmentBuilderInterface;
+use League\CommonMark\Extension\ExtensionInterface;
+
+final class AlertExtension implements ExtensionInterface
+{
+    public function register(EnvironmentBuilderInterface $environment): void
+    {
+        $environment->addBlockStartParser(new AlertBlockStartParser());
+        $environment->addRenderer(AlertBlock::class, new AlertBlockRenderer());
+    }
+}

src/Markdown/MarkdownInitializer.php

@@ -4,6 +4,7 @@
 
 namespace App\Markdown;
 
+use App\Markdown\Alerts\AlertExtension;
 use App\Markdown\CodeBlockRenderer;
 use League\CommonMark\Environment\Environment;
 use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
@@ -30,6 +31,7 @@ public function initialize(Container $container): MarkdownConverter
         $environment
             ->addExtension(new CommonMarkCoreExtension())
             ->addExtension(new FrontMatterExtension())
+            ->addExtension(new AlertExtension())
             ->addInlineParser(new TempestPackageParser())
             ->addInlineParser(new FqcnParser())
             ->addInlineParser(new HandleParser())

src/Web/assets/typography.css

@@ -7,6 +7,30 @@
 		@apply !mt-0;
 	}
 
+	.alert {
+		@apply my-4 relative overflow-hidden w-full rounded-md p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented);
+
+		&.alert-warning {
+			@apply bg-(--ui-warning)/10 text-(--ui-warning) ring-(--ui-warning)/25;
+		}
+
+		&.alert-success {
+			@apply bg-(--ui-success)/10 text-(--ui-success) ring-(--ui-success)/25;
+		}
+
+		div.alert-wrapper {
+			@apply flex flex-col gap-y-2;
+
+			span.alert-title {
+				@apply text-sm font-semibold inline-block;
+			}
+
+			p {
+				@apply my-0 text-sm opacity-90;
+			}
+		}
+	}
+
 	.has-pre {
 		@apply my-0;
 	}