Skip to content
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

Merged
merged 5 commits into from
Jul 9, 2024
Merged

feat: adding support for gfm alerts #249

merged 5 commits into from
Jul 9, 2024

Conversation

SeanCassiere
Copy link
Member

@SeanCassiere SeanCassiere commented Jul 8, 2024

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, and CAUTION.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

This is what it'd look like on the docs pages.

  • Light mode.
image
  • Dark mode.
image

Copy link

vercel bot commented Jul 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tanstack-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 9, 2024 2:00am

@SeanCassiere SeanCassiere marked this pull request as draft July 8, 2024 22:57
@SeanCassiere SeanCassiere marked this pull request as ready for review July 8, 2024 23:25
Copy link
Member Author

@SeanCassiere SeanCassiere left a 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;
Copy link
Member Author

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.

@SeanCassiere SeanCassiere changed the title feat: adding gfm alert support feat: adding support for gfm alerts Jul 8, 2024
Copy link

@tobySolutions tobySolutions left a 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.

@SeanCassiere SeanCassiere merged commit b3f83e3 into main Jul 9, 2024
4 checks passed
@SeanCassiere SeanCassiere deleted the gfm-alert-support branch July 9, 2024 23:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants