From f332aa7a9c20dc44250bdce421b297e4dd3d4e0b Mon Sep 17 00:00:00 2001 From: Hivie Date: Tue, 30 Jun 2026 19:05:23 +0100 Subject: [PATCH] add styled alerts markdown via style blocks --- app/Libraries/Markdown/OsuMarkdown.php | 18 ++++- app/Models/Wiki/Page.php | 2 +- resources/css/bem/osu-md.less | 68 +++++++++++++++++++ tests/Libraries/Markdown/ProcessorTest.php | 9 ++- .../html_markdown_examples/alert.html | 23 +++++++ .../Markdown/html_markdown_examples/alert.md | 29 ++++++++ .../html_markdown_examples/alert_inline.html | 11 +++ .../html_markdown_examples/alert_inline.md | 11 +++ .../html_markdown_examples/alert_invalid.html | 1 + .../html_markdown_examples/alert_invalid.md | 4 ++ .../indexable_markdown_examples/alert.md | 9 +++ .../indexable_markdown_examples/alert.txt | 5 ++ .../alert_inline.md | 11 +++ .../alert_inline.txt | 7 ++ 14 files changed, 204 insertions(+), 4 deletions(-) create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert.html create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert.md create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert_inline.html create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert_inline.md create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert_invalid.html create mode 100644 tests/Libraries/Markdown/html_markdown_examples/alert_invalid.md create mode 100644 tests/Libraries/Markdown/indexable_markdown_examples/alert.md create mode 100644 tests/Libraries/Markdown/indexable_markdown_examples/alert.txt create mode 100644 tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.md create mode 100644 tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.txt diff --git a/app/Libraries/Markdown/OsuMarkdown.php b/app/Libraries/Markdown/OsuMarkdown.php index 05c2ec64d4c..895945b0f06 100644 --- a/app/Libraries/Markdown/OsuMarkdown.php +++ b/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, ], diff --git a/app/Models/Wiki/Page.php b/app/Models/Wiki/Page.php index 20c0f6efde1..ef85f2dd6d2 100644 --- a/app/Models/Wiki/Page.php +++ b/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', diff --git a/resources/css/bem/osu-md.less b/resources/css/bem/osu-md.less index 450c3c025db..bfc5fa5e647 100644 --- a/resources/css/bem/osu-md.less +++ b/resources/css/bem/osu-md.less @@ -295,6 +295,74 @@ } } + @alert-title: ~"> .@{_top}__paragraph:first-child strong:first-of-type"; + @alert-inline-p: ~"> .@{_top}__paragraph:only-child:not(:has(> br))"; + @alert-inline-compact: ~":not(:has(> .@{_top}__paragraph > br)):has(> .@{_top}__paragraph:only-child)"; + + .osu-md-alert() { + padding: 10px 15px; + margin: var(--paragraph-space) 0; + border-left: 4px solid; + + > .@{_top}__paragraph { + margin: 0; + + + .@{_top}__paragraph { + margin-top: var(--paragraph-space); + } + } + + @{alert-title} { + display: block; + padding-bottom: 8px; + font-weight: bold; + + &::before { + .fas(); + .fa-fw(); + content: var(--alert-icon); + margin-right: 8px; + } + } + + @{alert-title} + br { + display: none; + } + + @{alert-inline-p} { + display: inline; + + strong:first-of-type { + display: inline; + padding-bottom: 0; + } + } + + &@{alert-inline-compact} { + padding: 5px 15px; + } + } + + @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, { + &__alert-@{key} { + .osu-md-alert(); + --alert-icon: extract(@value, 1); + border-left-color: hsla(var(extract(@value, 2)), 75%); + + @{alert-title} { + color: hsla(var(extract(@value, 2)), 75%); + } + } + }); + &__link { &--footnote-ref { font-size: @font-size--small-2; diff --git a/tests/Libraries/Markdown/ProcessorTest.php b/tests/Libraries/Markdown/ProcessorTest.php index c29398bcf03..05663cec051 100644 --- a/tests/Libraries/Markdown/ProcessorTest.php +++ b/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, diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert.html b/tests/Libraries/Markdown/html_markdown_examples/alert.html new file mode 100644 index 00000000000..bc977bcba57 --- /dev/null +++ b/tests/Libraries/Markdown/html_markdown_examples/alert.html @@ -0,0 +1,23 @@ +
+

Note
Note body text.

+
+ +
+

Tip
Tip body text.

+
+ +
+

Notice
Notice body text.

+
+ +
+

Warning
Warning body text.

+
+ +
+

Caution
Caution body text.

+
+ +
+

Good to know
Custom title body text.

+
diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert.md b/tests/Libraries/Markdown/html_markdown_examples/alert.md new file mode 100644 index 00000000000..19dd1b1dc09 --- /dev/null +++ b/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. +::: diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert_inline.html b/tests/Libraries/Markdown/html_markdown_examples/alert_inline.html new file mode 100644 index 00000000000..d02fb8af7bb --- /dev/null +++ b/tests/Libraries/Markdown/html_markdown_examples/alert_inline.html @@ -0,0 +1,11 @@ +
+

See also foo and bar.

+
+ +
+

Main page Index

+
+ +
+

Note: For other uses, see: other.

+
diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert_inline.md b/tests/Libraries/Markdown/html_markdown_examples/alert_inline.md new file mode 100644 index 00000000000..7b9d78e62e3 --- /dev/null +++ b/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). +::: diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.html b/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.html new file mode 100644 index 00000000000..51c659ed2af --- /dev/null +++ b/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.html @@ -0,0 +1 @@ +

Example
Should render without alert styling.

diff --git a/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.md b/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.md new file mode 100644 index 00000000000..ed5e32f3a8a --- /dev/null +++ b/tests/Libraries/Markdown/html_markdown_examples/alert_invalid.md @@ -0,0 +1,4 @@ +::: alert-notreal +**Example** +Should render without alert styling. +::: diff --git a/tests/Libraries/Markdown/indexable_markdown_examples/alert.md b/tests/Libraries/Markdown/indexable_markdown_examples/alert.md new file mode 100644 index 00000000000..7857b5fe641 --- /dev/null +++ b/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. +::: diff --git a/tests/Libraries/Markdown/indexable_markdown_examples/alert.txt b/tests/Libraries/Markdown/indexable_markdown_examples/alert.txt new file mode 100644 index 00000000000..0229771c2c4 --- /dev/null +++ b/tests/Libraries/Markdown/indexable_markdown_examples/alert.txt @@ -0,0 +1,5 @@ +Note Searchable note body. + +Watch out Searchable warning body. + + diff --git a/tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.md b/tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.md new file mode 100644 index 00000000000..7b9d78e62e3 --- /dev/null +++ b/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). +::: diff --git a/tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.txt b/tests/Libraries/Markdown/indexable_markdown_examples/alert_inline.txt new file mode 100644 index 00000000000..50e15e61937 --- /dev/null +++ b/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. + +