code
code copied to clipboard
modrinth
feat(utils): markdown callouts
I've added markdown callouts, with the same syntax as GitHub alerts. Behind the scenes it uses markdown-it-github-alerts. It currently uses octicons as that is default in markdown-it-github-alerts, however they can be replaced if we have replacements.
Syntax
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!TIP]
> Optional information to help a user be more successful.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]
> Negative potential consequences of an action.
Screenshot
Tasks
- [x] Add markdown-it-github-alerts
- [x] Add basic styles for the callouts
- [x] Get it working™
- [x] Make XSS filter safe-ish again
~~CI failure unrelated to this PR, a CI fix is available in modrinth/code#2296.~~
Looks good, though we should use Lucide icons for consistency and the bar on the left should be rounded to fit better
I've moved to lucide icons, however the rounded bar is a bit harder. We are currently using border-radius on the div, and a border-left. I increased the border radius since I'm not sure where to go from here, but this only makes 2 of the bar corners rounded.
I don't think it looks terrible, but if we want to make the whole bar rounded we will have to take a difference approach. What are your thoughts?
nice! thanks for contributing this, been meaning to add it for a very long time
@IMB11 someone else had a prototype where XSS protection was properly implemented by having two jsxss configs. One was ran on the user provided content, and one on the output including the SVGs.
There has been discussion in the Discord at multiple times, and I think it's best to close this for now.
