Skip to content

✨ feat: add support for github-style alerts#654

Merged
welpo merged 3 commits into
welpo:mainfrom
Bnyro:github-alerts
Jun 13, 2026
Merged

✨ feat: add support for github-style alerts#654
welpo merged 3 commits into
welpo:mainfrom
Bnyro:github-alerts

Conversation

@Bnyro

@Bnyro Bnyro commented Jun 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Related issue

  • I don't think there's any?

Changes

  • Style the classes assigned to GitHub alerts by Zola (.markdown-alert-note, .markdown-alert-info, ...) similar to admonitions
  • This is a bit hacky because we use ::before two times to inject the icon and the admonition title - but I don't know if it's possible to change the HTML Zola generates, and if it's possible, it's probably more complicated
  • I've also added an example and a short explanation in the markdown documentation blog post

Accessibility

  • No accessibility tests. I think these were already done for admonitions, so as I re-use the existing code, I don't think any extra work is needed here?

Screenshots

Screenshot from 2026-06-08 22-45-26
  • on the top is the Github alert with > [!CAUTION]
  • on the bottom is the admonition with {{ admonition(type="danger", text=...) }}

Type of change

  • New feature (adds non-breaking functionality)
  • Documentation update

Checklist

  • I have verified the accessibility of my changes (opened it in a browser and looked fine :) )
  • I have tested all possible scenarios for this change
  • I have updated theme.toml with a sane default for the feature
  • I have updated config.toml in tabi-start
  • I have made corresponding changes to the documentation:
    • Updated config.toml comments
    • Updated theme.toml comments (not needed I think?)
    • Updated "Mastering tabi" post in English (the markdown post)
    • (Optional) Updated "Mastering tabi" post in Spanish
    • (Optional) Updated "Mastering tabi" post in Catalan

PS: I'm not really familiar with SASS, so if there's any cool feature in SASS to simplify the code, I'm happy to change it :)

@Bnyro Bnyro requested a review from welpo as a code owner June 8, 2026 20:57
@netlify

netlify Bot commented Jun 8, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for tabi-demo ready!

Name Link
🔨 Latest commit f7ab9df
🔍 Latest deploy log https://app.netlify.com/projects/tabi-demo/deploys/6a2d44f5a8dbf50008d29f8b
😎 Deploy Preview https://deploy-preview-654--tabi-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@welpo welpo requested a review from TheAwiteb as a code owner June 10, 2026 20:19
@welpo

welpo commented Jun 10, 2026

Copy link
Copy Markdown
Owner

Thanks, @Bnyro!

I was not aware of this Zola feature. I appreciate your trying to reuse code!

I've pushed a commit with some changes:

  • Fix some title and icon duplications
  • Fix labels
  • Render the title once per alert instead of before every paragraph
  • Localise labels (though it's in CSS; a bit ugly, but better than only-English support!)
  • Document stuff

Could you take a look? If it looks good to you, I'll merge.

Thanks!!

Bnyro
Bnyro commented Jun 10, 2026
View reviewed changes
Comment thread sass/parts/_admonitions.scss Outdated
background-size: contain;
background-repeat: no-repeat;
aspect-ratio: 1/1;
width: 1.5rem;

@Bnyro Bnyro Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally preferred the previous solution to use a mixin for sharing the common styles for icons - but you have to maintain it in the end, so that's up to you :)

We could even do something like
`scss
%admonition-icon {
inset-block-start: 0.8rem;
inset-inline-start: 0.8rem;
background-size: contain;
background-repeat: no-repeat;
aspect-ratio: 1/1;
width: 1.5rem;
}

.admonition-icon-danger,
.markdown-alert-caution::after {
@extend %admonition-icon;
-webkit-mask: ...;
}


(ref https://sass-lang.com/documentation/at-rules/extend/)

Bnyro
Bnyro commented Jun 10, 2026
View reviewed changes
Comment thread sass/parts/_admonitions.scss Outdated
Comment on lines +198 to +204
position: relative;
margin-block: 1em;
border-radius: 10px;
border-inline-start: 6px solid;
padding: 0.8rem;
color: var(--text-color-high-contrast);
font-family: var(--sans-serif-font);

@Bnyro Bnyro Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also not sure if it isn't better to not duplicate these styles because they're exactly the same as .admonition

@Bnyro

Bnyro commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Thanks, @Bnyro!

I was not aware of this Zola feature. I appreciate your trying to reuse code!

I've pushed a commit with some changes:

* Fix some title and icon duplications

* Fix labels

* Render the title once per alert instead of before every paragraph

* Localise labels (though it's in CSS; a bit ugly, but better than only-English support!)

* Document stuff

Could you take a look? If it looks good to you, I'll merge.

Thank you for looking into this!

I really appreciate your documentation changes, and your position: absolute approach for the icons is much cleaner than my ugly hack :)

My only concern is that the current code duplication between .admonition and [class^='markdown-alert-'] makes it easy to change the style of one of them, but by accident forget to change the style of the other, so that they don't look the same anymore. You're the maintainer though, it's your choice what's easier to maintain for you :)

@TheAwiteb

TheAwiteb commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

Arabic translation is good, thank you

@welpo

welpo commented Jun 13, 2026

Copy link
Copy Markdown
Owner

Thank you so much, @TheAwiteb !

@Bnyro good catch on the duplication. made some changes. thoughts?

@Bnyro

Bnyro commented Jun 13, 2026

Copy link
Copy Markdown
Contributor Author

@Bnyro good catch on the duplication. made some changes. thoughts?

Looks much better now, thanks!

Good to merge from my side :)

@welpo welpo merged commit fae50e0 into welpo:main Jun 13, 2026
7 checks passed
@Bnyro Bnyro deleted the github-alerts branch June 13, 2026 19:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@TheAwiteb TheAwiteb TheAwiteb approved these changes

@welpo welpo Awaiting requested review from welpo welpo is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Bnyro @welpo @TheAwiteb