-
Notifications
You must be signed in to change notification settings - Fork 129
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: adding support for gfm alerts #249
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It pretty much matches what's being done by Github with the exception of;
- Adding opacity to the border - This is to match what we currently have going on the website for blockquotes.
- Adding a background to alert in dark mode - This is to make the alert content stand out more on the page.
|
||
/* Markdown Alerts */ | ||
.markdown-alert { | ||
@apply border-l-4 pl-4 py-1.5 my-2 dark:bg-gray-900 rounded-r-sm; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The background on when in dark mode is not something Github does. I chose to add it in so it better stood out on the page since our page's dark background makes it all blend in like regular page content.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing stuff! LGTM! Will be super helpful for our work on Tanstack forms' docs.
Adding UI support for GFM Alerts.
These GFM Alert types are supported. Below is the output of Github's Alerts.
Note
Highlights information that users should take into account, even when skimming.
Tip
Highlights information that users should take into account, even when skimming.
Important
Highlights information that users should take into account, even when skimming.
Warning
Highlights information that users should take into account, even when skimming.
Caution
Highlights information that users should take into account, even when skimming.
This is the input required to insert a GFM Alert. The options are
NOTE
,TIP
,IMPORTANT
,WARNING
, andCAUTION
.This is what it'd look like on the docs pages.