Add styled alerts to markdown

app/Libraries/Markdown/OsuMarkdown.php

@@ -30,7 +30,7 @@ class OsuMarkdown
 {
     use Memoizes;
 
-    const VERSION = 14;
+    const VERSION = 15;
 
     const DEFAULT_COMMONMARK_CONFIG = [
         'allow_unsafe_links' => false,
@@ -96,6 +96,13 @@ class OsuMarkdown
                 'fix_wiki_url' => true,
                 'generate_toc' => true,
                 'record_first_image' => true,
+                'style_block_allowed_classes' => [
+                    'alert-caution',
+                    'alert-note',
+                    'alert-notice',
+                    'alert-tip',
+                    'alert-warning',
+                ],
             ],
             'osu_markdown' => [
                 'block_modifiers' => ['news'],
@@ -125,7 +132,14 @@ class OsuMarkdown
                 'custom_container_inline' => true,
                 'fix_wiki_url' => true,
                 'generate_toc' => true,
-                'style_block_allowed_classes' => ['infobox'],
+                'style_block_allowed_classes' => [
+                    'alert-caution',
+                    'alert-note',
+                    'alert-notice',
+                    'alert-tip',
+                    'alert-warning',
+                    'infobox',
+                ],
                 'title_from_document' => true,
                 'with_gallery' => true,
             ],
@@ -365,7 +379,19 @@ private function createDefaultAttributesConfig(): array
                 'class' => "{$blockClass}__paragraph",
             ],
             StyleBlock\Element::class => [
-                'class' => static fn (StyleBlock\Element $node) => "{$blockClass}__{$node->getClassName()}",
+                'class' => static function (StyleBlock\Element $node) use ($blockClass) {
+                    $className = $node->getClassName();
+
+                    if (starts_with($className, 'alert-')) {
+                        $type = explode('-', $className)[1] ?? null;
+
+                        if ($type !== null) {
+                            return class_with_modifiers("{$blockClass}__alert", [$type]);
+                        }
+                    }
+
+                    return "{$blockClass}__{$className}";
+                },
             ],
             Table::class => [
                 'class' => "{$blockClass}__table",

app/Models/Wiki/Page.php

@@ -27,7 +27,7 @@ class Page implements WikiObject
     use Memoizes, Traits\Es\WikiPageSearch;
 
     const CACHE_DURATION = 5 * 60 * 60;
-    const VERSION = 9;
+    const VERSION = 10;
 
     const TEMPLATES = [
         'markdown_page' => 'wiki.show',

resources/css/bem/osu-md.less

@@ -295,6 +295,32 @@
     }
   }
 
+  &__alert {
+    padding: 5px 15px;
+    margin: var(--paragraph-space) 0;
+    border-left: 4px solid;
+    border-left-color: var(--alert-colour);
+
+    @alert-types: {
+      note: @fa-var-info-circle, --hsl-blue-2;
+      tip: @fa-var-lightbulb, --hsl-lime-2;
+      notice: @fa-var-bullhorn, --hsl-pink-2;
+      warning: @fa-var-exclamation, --hsl-red-2;
+      caution: @fa-var-exclamation-triangle, --hsl-orange-2;
+    };
+    each(@alert-types, {
+      &--@{key} {
+        --alert-icon: extract(@value, 1);
+        --alert-colour: hsla(var(extract(@value, 2)), 75%);
+      }
+    });
+
+    &:has(.@{_top}__paragraph:not(:only-child)),
+    &:has(br) {
+      padding: 10px 15px;
+    }
+  }
+
   &__link {
     &--footnote-ref {
       font-size: @font-size--small-2;
@@ -364,6 +390,28 @@
       min-width: 0;
       line-height: inherit;
     }
+
+    .@{_top}__alert > & {
+      &:first-child strong:first-of-type {
+        display: inline-block;
+        color: var(--alert-colour);
+
+        &:has(+ br) {
+          margin-bottom: 5px;
+        }
+
+        &::before {
+          .fas();
+          .fa-fw();
+          content: var(--alert-icon);
+          margin-right: 5px;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   // not actual table but its container

tests/Libraries/Markdown/ProcessorTest.php

@@ -73,7 +73,14 @@ private function loadOutputTest(string $name, string $path, string $extension)
                 osuExtensionConfig: [
                     'attributes_allowed' => ['flag', 'id'],
                     'custom_container_inline' => true,
-                    'style_block_allowed_classes' => ['class-name'],
+                    'style_block_allowed_classes' => [
+                        'alert-caution',
+                        'alert-note',
+                        'alert-notice',
+                        'alert-tip',
+                        'alert-warning',
+                        'class-name',
+                    ],
                 ],
                 osuMarkdownConfig: [
                     'enable_footnote' => true,

tests/Libraries/Markdown/html_markdown_examples/alert.html

@@ -0,0 +1,23 @@
+<div class="osu-md__alert osu-md__alert--note">
+  <p class="osu-md__paragraph"><strong>Note</strong><br />Note body text.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--tip">
+  <p class="osu-md__paragraph"><strong>Tip</strong><br />Tip body text.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--notice">
+  <p class="osu-md__paragraph"><strong>Notice</strong><br />Notice body text.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--warning">
+  <p class="osu-md__paragraph"><strong>Warning</strong><br />Warning body text.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--caution">
+  <p class="osu-md__paragraph"><strong>Caution</strong><br />Caution body text.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--note">
+  <p class="osu-md__paragraph"><strong>Good to know</strong><br />Custom title body text.</p>
+</div>

tests/Libraries/Markdown/html_markdown_examples/alert.md

@@ -0,0 +1,29 @@
+::: alert-note
+**Note**
+Note body text.
+:::
+
+::: alert-tip
+**Tip**
+Tip body text.
+:::
+
+::: alert-notice
+**Notice**
+Notice body text.
+:::
+
+::: alert-warning
+**Warning**
+Warning body text.
+:::
+
+::: alert-caution
+**Caution**
+Caution body text.
+:::
+
+::: alert-note
+**Good to know**
+Custom title body text.
+:::

tests/Libraries/Markdown/html_markdown_examples/alert_inline.html

@@ -0,0 +1,11 @@
+<div class="osu-md__alert osu-md__alert--note">
+  <p class="osu-md__paragraph"><strong>See also</strong> <a class="osu-md__link" href="/link">foo</a> and <a class="osu-md__link" href="/link2">bar</a>.</p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--note">
+  <p class="osu-md__paragraph"><strong>Main page</strong> <a class="osu-md__link" href="/wiki/Main">Index</a></p>
+</div>
+
+<div class="osu-md__alert osu-md__alert--note">
+  <p class="osu-md__paragraph"><strong>Note:</strong> For other uses, see: <a class="osu-md__link" href="/wiki/other">other</a>.</p>
+</div>

tests/Libraries/Markdown/html_markdown_examples/alert_inline.md

@@ -0,0 +1,11 @@
+::: alert-note
+**See also** [foo](/link) and [bar](/link2).
+:::
+
+::: alert-note
+**Main page** [Index](/wiki/Main)
+:::
+
+::: alert-note
+**Note:** For other uses, see: [other](/wiki/other).
+:::

tests/Libraries/Markdown/html_markdown_examples/alert_invalid.html

@@ -0,0 +1 @@
+<p class="osu-md__paragraph"><strong>Example</strong><br />Should render without alert styling.</p>

tests/Libraries/Markdown/html_markdown_examples/alert_invalid.md

@@ -0,0 +1,4 @@
+::: alert-notreal
+**Example**
+Should render without alert styling.
+:::

tests/Libraries/Markdown/indexable_markdown_examples/alert.md

@@ -0,0 +1,9 @@
+::: alert-note
+**Note**
+Searchable note body.
+:::
+
+::: alert-warning
+**Watch out**
+Searchable warning body.
+:::

tests/Libraries/Markdown/indexable_markdown_examples/alert.txt

@@ -0,0 +1,5 @@
+Note Searchable note body.
+
+Watch out Searchable warning body.
+
+

tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.md

@@ -0,0 +1,11 @@
+::: alert-note
+**See also** [foo](/link) and [bar](/link2).
+:::
+
+::: alert-note
+**Main page** [Index](/wiki/Main)
+:::
+
+::: alert-note
+**Note:** For other uses, see: [other](/wiki/other).
+:::

tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.txt

@@ -0,0 +1,7 @@
+See also foo and bar.
+
+Main page Index
+
+Note: For other uses, see: other.
+
+