Skip to content

feat(announcements): add markdown support#1371

Merged
TwiN merged 11 commits intoTwiN:masterfrom
Sworyz:features/announcements-markdown
Nov 8, 2025
Merged

feat(announcements): add markdown support#1371
TwiN merged 11 commits intoTwiN:masterfrom
Sworyz:features/announcements-markdown

Conversation

@Sworyz
Copy link
Contributor

@Sworyz Sworyz commented Oct 28, 2025

Summary

Add markdown support to announcements to allow link and more format to be written here. The idea was from #1319 .


One problem that seems to stay on multi-line is this :

<div data-v-06677c1a="" class="absolute left-3 w-0.5 bg-gray-300 dark:bg-gray-600 pointer-events-none" style="top: 1.5rem; height: 9rem;"></div>

Putting height: 11rem fix the problem as we add 2 more lines.


Checklist

  • Tested and/or added tests to validate that the changes work as intended, if applicable.
    It was tested with a build.
image
  • Updated documentation in README.md, if applicable.

@Sworyz Sworyz changed the title Features/announcements markdown feat(announcements): add markdown support Oct 28, 2025
@Sworyz
Copy link
Contributor Author

Sworyz commented Oct 28, 2025

Example of announcements :

announcements:
  - timestamp: 2025-08-15T14:00:00Z
    type: outage
    message: "Scheduled maintenance on database servers from 14:00 to 16:00 UTC"
  - timestamp: 2025-08-15T16:15:00Z
    type: operational  
    message: "Database maintenance completed successfully. All systems operational. [google link](https://google.fr)"
  - timestamp: 2025-08-15T12:00:00Z
    type: information
    message: "New *monitoring* dashboard features <br />will be deployed <br />next week"

@Sworyz
Copy link
Contributor Author

Sworyz commented Oct 31, 2025

Multiline timeline resolved by #1373
image

@TwiN
Copy link
Owner

TwiN commented Nov 6, 2025

@Sworyz hah, I'm surprised somebody noticed that I fixed the multiline timeline issue.

Alright, I'm sorry for being difficult, but I'm second guessing whether it's worth it to add an entire dependency for markdown, when realistically speaking, users will likely only care about adding support for links, bold text, italic text, and maybe headers.

What do you think? Would it make sense to just create some code in the frontend to support those, as opposed to importing an entire markdown dependency?

@Sworyz
Copy link
Contributor Author

Sworyz commented Nov 7, 2025

Hi @TwiN,

Yes, the multiline issue bothered me and I was glad to seen it resolved so I really wanted to mention it!

No worries about you being difficult, it’s a good thing and I really appreciate it. 👍
I also understand wanting to avoid unnecessary complexity and dependencies.

I’m going talk about our use case for this PR : we scrape incident and issue data from Jira using a sidecar container and write it to YAML. The markdown support is really valuable for formatting this data into clear, readable announcements. Without it, we may have a harder time presenting the information effectively.

Marked and Dompurify seems to be very widely used without too much dependencies (one for dompurify only). Hence why I’ve gone with them to make this working.

I also tend to agree that many users might only need basic formatting like links, bold text, and headers. However, I'm a little concerned that limiting the markdown support too much could restrict users to a single announcement structure impacting the presentation of the information to only one or two structures that may not fit everyone use case.

I was also thinking before adding markdown this simple thing : just adding a link to the announcement yaml part and making the announcement bubble clickable, but it wasn’t enough for our use case.

@TwiN
Copy link
Owner

TwiN commented Nov 7, 2025

@Sworyz Alright, what you're saying makes sense to me. I'll review the code when I get a minute

@TwiN
Copy link
Owner

TwiN commented Nov 8, 2025

I just added support for archiving announcements (past announcements) in #1382

@Sworyz Could you please resolve the conflicts & regenerate the static assets with the new changes from the master branch? I think you'll also need to update the new PastAnnouncements.vue component to also support markdown.

image

Sorry again for the trouble!

@Sworyz
Copy link
Contributor Author

Sworyz commented Nov 8, 2025

Hi @TwiN,

I've done the resolution of the merge conflict; a quick fix for a markdown link rendering issue and the past announcement that can now use md. I've also rebuilt the static files like you wanted!

image image

Comment on lines +240 to +251
const escapeHtml = (value) => {
if (value === null || value === undefined) {
return ''
}

return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;')
}
Copy link
Owner

Choose a reason for hiding this comment

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

There's probably a more secure way to do this and I'm sure some security scan will complain, but since the content of the announcement is controlled by the configuration file, XSS isn't a concern.

const titleAttribute = resolvedTitle ? ` title="${escapeHtml(resolvedTitle)}"` : ''
const linkText = resolvedText || ''

return `<a href="${url}" target="_blank" rel="noopener noreferrer"${titleAttribute}>${linkText}</a>`
Copy link
Owner

Choose a reason for hiding this comment

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

Is there a reason why you don't specify tailwind classes here instead of using the <style> tag in the same file?

Also, now that there's two files where announcement messages are rendered with markdown, this duplicated code should probably be extracted to a shared utility file. I'll merge this and take care of it myself in a little bit

@TwiN TwiN merged commit 9077162 into TwiN:master Nov 8, 2025
3 checks passed
@TwiN
Copy link
Owner

TwiN commented Nov 8, 2025

Thank you for the contribution!

@TwiN
Copy link
Owner

TwiN commented Nov 8, 2025

Made a few improvements in 379ec29

@amai2012
Copy link

The feature basically is nice to have.
But the Past Announcements lists should be sparse, not feature an entry for each day. Otherwise the list will grow too big.

Can it be hidden?

@TwiN
Copy link
Owner

TwiN commented Nov 10, 2025

@amai2012 This comment is under the wrong PR, but to answer your question, if there are no archived announcements, the Past Announcement section is hidden. This is explained in the documentation.

alexlebens pushed a commit to alexlebens/infrastructure that referenced this pull request Nov 14, 2025
This PR contains the following updates:

| Package | Update | Change |
|---|---|---|
| [ghcr.io/twin/gatus](https://github.com/TwiN/gatus) | minor | `v5.30.0` -> `v5.31.0` |

---

### Release Notes

<details>
<summary>TwiN/gatus (ghcr.io/twin/gatus)</summary>

### [`v5.31.0`](https://github.com/TwiN/gatus/releases/tag/v5.31.0)

[Compare Source](TwiN/gatus@v5.30.0...v5.31.0)

Highlight of this release are the ability to mark announcements as "archived", which renders said announcements in a new `Past Announcements` section at the bottom of the status page (only rendered if there is at least 1 archived announcements), support for markdown in announcements and support for monitoring gRPC health endpoints.

<img width="1166" height="556" alt="image" src="https://github.com/user-attachments/assets/d22a0ea7-c035-4c35-a148-6de097a357b7" />

#### What's Changed
* feat(announcements): Add support for archived announcements and add past announcement section in UI by @&#8203;TwiN in TwiN/gatus#1382
* feat(announcements): add markdown support by @&#8203;Sworyz in TwiN/gatus#1371
* feat(client): Add support for monitoring gRPC endpoints by @&#8203;diamanat in TwiN/gatus#1376
* fix(client): update icmp/ping logic to determine pinger privileged mode by @&#8203;h3mmy in TwiN/gatus#1346
* fix(api): Escape endpoint key in URL for raw APIs by @&#8203;Nedra1998 in TwiN/gatus#1381
* docs(readme): adds ECS fargate module in README by @&#8203;GiamPy5 in TwiN/gatus#1377

#### New Contributors
* @&#8203;GiamPy5 made their first contribution in TwiN/gatus#1377
* @&#8203;h3mmy made their first contribution in TwiN/gatus#1346
* @&#8203;diamanat made their first contribution in TwiN/gatus#1376
* @&#8203;Nedra1998 made their first contribution in TwiN/gatus#1381
* @&#8203;Sworyz made their first contribution in TwiN/gatus#1371

**Full Changelog**: <TwiN/gatus@v5.30.0...v5.31.0>

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi41LjAiLCJ1cGRhdGVkSW5WZXIiOiI0Mi41LjAiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbImltYWdlIl19-->

Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/2008
Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net>
Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>
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