Add styled alerts to markdown#13079
Conversation
Hiviexd
force-pushed
the
markdown-styled-alerts
branch
from
bde7146 to
2b3ea14
Compare
There was a problem hiding this comment.
You can whitelist extra attributes in attributes_allowed and add attributes to blockquotes:
{data-alert=note}
> **line1**
> line2
custom inline containers are for customizing the rendering of inline elements, not abusing to make a block level element behave differently.
There's also the existing style block syntax for infoboxes that can be extended to support more customization:
::: Someotherclass
alert
:::
|
There's also the argument that |
Hiviexd
force-pushed
the
markdown-styled-alerts
branch
2 times, most recently
from
69d502f to
47937a5
Compare
Hiviexd
force-pushed
the
markdown-styled-alerts
branch
from
fff41ba to
f332aa7
Compare
|
went all in with style blocks, see PR description for the syntax I chose. |
notbakaneko
left a comment
notbakaneko
left a comment
There was a problem hiding this comment.
update createDefaultAttributesConfig to output __alert and use the type of alert as a modifier instead. Then the customizations can just be the modifiers:
&__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%);
}
});
// making these different sizes seems unnecessary
&:has(.@{_top}__paragraph:not(:only-child)), &:has(br) {
padding: 10px 15px;
}
}
&__paragraph {
.@{_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;
}
}
}
| } | ||
|
|
||
| .@{_top}__alert > & { | ||
| &:first-child strong:first-of-type { |
There was a problem hiding this comment.
this will match any bolded text inside another thing like emphasis? **Note:** Test _**thing**_
There was a problem hiding this comment.
yeah that's not good, fixed
| 'class' => static function (StyleBlock\Element $node) use ($blockClass) { | ||
| $className = $node->getClassName(); | ||
|
|
||
| if (starts_with($className, 'alert-')) { |
There was a problem hiding this comment.
php8 has str_starts_with
| $className = $node->getClassName(); | ||
|
|
||
| if (starts_with($className, 'alert-')) { | ||
| $type = explode('-', $className)[1] ?? null; |
| $type = explode('-', $className)[1] ?? null; | ||
|
|
||
| if ($type !== null) { | ||
| return class_with_modifiers("{$blockClass}__alert", [$type]); |
There was a problem hiding this comment.
also class_with_modifiers doesn't need array for single modifier
3 participants
Resolves #13064 (with applied feedback from
#osu-wiki)Enabled for wiki and news.
Also supports an inline variant per wiki maintainer request.
Preview
Initial implementation commentary
initial implementation used the GitHub custom syntax detailed in the linked issue via a custom parser. after a conversation with clayton and Wala in
#osu-wiki(link), we decided it would be best to rework this using existing syntax ofCustomContainerInline(similar to flags), and let CSS selectors do the heavy lifting, which eliminates the need of custom parsers altogether.finalized syntax is the following:
this results in an alert.
> ::{alert=note}:: **See also:** [Ranking criteria](/wiki/Ranking_criteria) and [Beatmap ranking procedure](/wiki/Beatmap_ranking_procedure)this results in an inline alert.
Available styleblock attributes are:
::: alert-note::: alert-tip::: alert-notice::: alert-warning::: alert-cautionSyntax is the following:
This results in an inline/compact alert.
This results in a regular alert.
