refactor(announcements): Move duplicate markdown code into utils/markdown.js

feat(announcements): add markdown support (#1371 )
* feat(announcements): add markdown support * feat(announcements): add information about announcement formatting in readme * feat(announcements): bump packages versions for marked and dompurify * feat(announcements): bump versions for marked and dompurify in package-lock.json * fix(announcements): md to link was not working since the conflict merge * fix(announcements): fix time before message and not after * feat(announcements): past announcements add markdown support * feat(announcements): static files
2026-08-23 15:46:03 +00:00 · 2025-11-08 13:54:36 -05:00 · 2025-11-08 13:28:57 -05:00 · 2025-11-07 19:42:48 -05:00 · 2025-11-07 19:35:39 -05:00 · 2025-11-07 18:20:10 -05:00
27 changed files with 874 additions and 103 deletions
@@ -109,6 +109,8 @@ Have any feedback or questions? [Create a discussion](https://github.com/TwiN/ga
  - [Docker](#docker)
  - [Helm Chart](#helm-chart)
  - [Terraform](#terraform)
+    - [Kubernetes](#kubernetes)
+    - [ECS Fargate](#ecs-fargate)
 - [Running the tests](#running-the-tests)
 - [Using in Production](#using-in-production)
 - [FAQ](#faq)
@@ -119,6 +121,7 @@ Have any feedback or questions? [Create a discussion](https://github.com/TwiN/ga
  - [Monitoring a UDP endpoint](#monitoring-a-udp-endpoint)
  - [Monitoring a SCTP endpoint](#monitoring-a-sctp-endpoint)
  - [Monitoring a WebSocket endpoint](#monitoring-a-websocket-endpoint)
+  - [Monitoring an endpoint using gRPC](#monitoring-an-endpoint-using-grpc)
  - [Monitoring an endpoint using ICMP](#monitoring-an-endpoint-using-icmp)
  - [Monitoring an endpoint using DNS queries](#monitoring-an-endpoint-using-dns-queries)
  - [Monitoring an endpoint using SSH](#monitoring-an-endpoint-using-ssh)
@@ -371,13 +374,13 @@ Where:
  - Using the example configuration above, the key would be `core_ext-ep-test`.
 - `{success}` is a boolean (`true` or `false`) value indicating whether the health check was successful or not.
 - `{error}` (optional): a string describing the reason for a failed health check. If {success} is false, this should contain the error message; if the check is successful.
- `{duration}` (optional): the time that the request took as a duration string (e.g. 10s). 
+- `{duration}` (optional): the time that the request took as a duration string (e.g. 10s).

 You must also pass the token as a `Bearer` token in the `Authorization` header.


 ### Suites (ALPHA)
-Suites are collections of endpoints that are executed sequentially with a shared context. 
+Suites are collections of endpoints that are executed sequentially with a shared context.
 This allows you to create complex monitoring scenarios where the result from one endpoint can be used in subsequent endpoints, enabling workflow-style monitoring.

 Here are a few cases in which suites could be useful:
@@ -419,7 +422,7 @@ suites:
    context:
      price: "19.99"  # Initial static value in context
    endpoints:
-      # Step 1: Create an item and store the item ID 
+      # Step 1: Create an item and store the item ID
      - name: create-item
        url: https://api.example.com/items
        method: POST
@@ -433,7 +436,7 @@ suites:
        alerts:
          - type: slack
            description: "Failed to create item"
-            
+
      # Step 2: Update the item using the stored item ID
      - name: update-item
        url: https://api.example.com/items/[CONTEXT].itemId
@@ -444,7 +447,7 @@ suites:
        alerts:
          - type: slack
            description: "Failed to update item"
-        
+
      # Step 3: Fetch the item and validate the price
      - name: get-item
        url: https://api.example.com/items/[CONTEXT].itemId
@@ -455,7 +458,7 @@ suites:
        alerts:
          - type: slack
            description: "Item price did not update correctly"
-            
+
      # Step 4: Delete the item (always-run: true to ensure cleanup even if step 2 or 3 fails)
      - name: delete-item
        url: https://api.example.com/items/[CONTEXT].itemId
@@ -523,18 +526,21 @@ Here are some examples of conditions you can use:


 ### Announcements
-System-wide announcements allow you to display important messages at the top of the status page. These can be used to inform users about planned maintenance, ongoing issues, or general information.
+System-wide announcements allow you to display important messages at the top of the status page. These can be used to inform users about planned maintenance, ongoing issues, or general information. You can use markdown to format your announcements.

-| Parameter                   | Description                                                                                   | Default  |
-|:----------------------------|:----------------------------------------------------------------------------------------------|:---------|
-| `announcements`             | List of announcements to display                                                              | `[]`     |
-| `announcements[].timestamp` | UTC timestamp when the announcement was made (RFC3339 format)                                 | Required |
-| `announcements[].type`      | Type of announcement. Valid values: `outage`, `warning`, `information`, `operational`, `none` | `"none"` |
-| `announcements[].message`   | The message to display to users                                                               | Required |
+This is essentially what some status page calls "incident communications".
+
+| Parameter                   | Description                                                                                                              | Default  |
+|:----------------------------|:-------------------------------------------------------------------------------------------------------------------------|:---------|
+| `announcements`             | List of announcements to display                                                                                         | `[]`     |
+| `announcements[].timestamp` | UTC timestamp when the announcement was made (RFC3339 format)                                                            | Required |
+| `announcements[].type`      | Type of announcement. Valid values: `outage`, `warning`, `information`, `operational`, `none`                            | `"none"` |
+| `announcements[].message`   | The message to display to users                                                                                          | Required |
+| `announcements[].archived`  | Whether to archive the announcement. Archived announcements show at the bottom of the status page instead of at the top. | `false`  |

 Types:
 - **outage**: Indicates service disruptions or critical issues (red theme)
- **warning**: Indicates potential issues or important notices (yellow theme)  
+- **warning**: Indicates potential issues or important notices (yellow theme)
 - **information**: General information or updates (blue theme)
 - **operational**: Indicates resolved issues or normal operations (green theme)
 - **none**: Neutral announcements with no specific severity (gray theme, default if none are specified)
@@ -542,17 +548,24 @@ Types:
 Example Configuration:
 ```yaml
 announcements:
-  - timestamp: 2025-08-15T14:00:00Z
+  - timestamp: 2025-11-07T14: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  
+  - timestamp: 2025-11-07T16:15:00Z
+    type: operational
    message: "Database maintenance completed successfully. All systems operational."
-  - timestamp: 2025-08-15T12:00:00Z
+  - timestamp: 2025-11-07T12:00:00Z
    type: information
    message: "New monitoring dashboard features will be deployed next week"
+  - timestamp: 2025-11-06T09:00:00Z
+    type: warning
+    message: "Elevated API response times observed for US customers"
+    archived: true
 ```

+If at least one announcement is archived, a **Past Announcements** section will be rendered at the bottom of the status page:
+![Gatus past announcements section](.github/assets/past-announcements.jpg)
+

 ### Storage
 | Parameter                           | Description                                                                                                                                        | Default    |
@@ -707,7 +720,7 @@ endpoints:
 > 📝 Note that if running in a container, you must volume mount the certificate and key into the container.

 ### Tunneling
-Gatus supports SSH tunneling to monitor internal services through jump hosts or bastion servers. 
+Gatus supports SSH tunneling to monitor internal services through jump hosts or bastion servers.
 This is particularly useful for monitoring services that are not directly accessible from where Gatus is deployed.

 SSH tunnels are defined globally in the `tunneling` section and then referenced by name in endpoint client configurations.
@@ -744,7 +757,7 @@ endpoints:
      - "[STATUS] == 200"
 ```

-> ⚠️ **WARNING**:: Tunneling may introduce additional latency, especially if the connection to the tunnel is retried frequently. 
+> ⚠️ **WARNING**:: Tunneling may introduce additional latency, especially if the connection to the tunnel is retried frequently.
 > This may lead to inaccurate response time measurements.


@@ -2180,7 +2193,7 @@ Here's an example of what the notifications look like:
 | `alerting.telegram`                   | Configuration for alerts of type `telegram`                                                | `{}`                       |
 | `alerting.telegram.token`             | Telegram Bot Token                                                                         | Required `""`              |
 | `alerting.telegram.id`                | Telegram User ID                                                                           | Required `""`              |
-| `alerting.telegram.topic-id`          | Telegram Topic ID in a group corresponds to `message_thread_id` in the Telegram API        | `""`                       |    
+| `alerting.telegram.topic-id`          | Telegram Topic ID in a group corresponds to `message_thread_id` in the Telegram API        | `""`                       |
 | `alerting.telegram.api-url`           | Telegram API URL                                                                           | `https://api.telegram.org` |
 | `alerting.telegram.client`            | Client configuration. <br />See [Client configuration](#client-configuration).             | `{}`                       |
 | `alerting.telegram.default-alert`     | Default alert configuration. <br />See [Setting a default alert](#setting-a-default-alert) | N/A                        |
@@ -2791,8 +2804,14 @@ To get more details, please check [chart's configuration](https://github.com/Twi


 ### Terraform
-Gatus can be deployed on Terraform by using the following module: [terraform-kubernetes-gatus](https://github.com/TwiN/terraform-kubernetes-gatus).

+#### Kubernetes
+
+Gatus can be deployed on Kubernetes using Terraform by using the following module: [terraform-kubernetes-gatus](https://github.com/TwiN/terraform-kubernetes-gatus).
+
+#### ECS Fargate
+
+Gatus can be deployed on ECS Fargate using Terraform by using the following module: [terraform-aws-gatus-ecs](https://github.com/GiamPy5/terraform-aws-gatus-ecs).

 ## Running the tests
 ```console
@@ -2836,7 +2855,7 @@ will send a `POST` request to `http://localhost:8080/playground` with the follow


 ### Recommended interval
-To ensure that Gatus provides reliable and accurate results (i.e. response time), Gatus limits the number of 
+To ensure that Gatus provides reliable and accurate results (i.e. response time), Gatus limits the number of
 endpoints/suites that can be evaluated at the same time.
 In other words, even if you have multiple endpoints with the same interval, they are not guaranteed to run at the same time.

@@ -2944,8 +2963,47 @@ endpoints:
 ```

 The `[BODY]` placeholder contains the output of the query, and `[CONNECTED]`
-shows whether the connection was successfully established. You can use Go template 
-syntax. 
+shows whether the connection was successfully established. You can use Go template
+syntax.
+
+
+### Monitoring an endpoint using gRPC
+You can monitor gRPC services by prefixing `endpoints[].url` with `grpc://` or `grpcs://`.
+Gatus executes the standard `grpc.health.v1.Health/Check` RPC against the target.
+
+```yaml
+endpoints:
+  - name: my-grpc
+    url: grpc://localhost:50051
+    interval: 30s
+    conditions:
+      - "[CONNECTED] == true"
+      - "[BODY].status == SERVING"  # BODY is read only when referenced
+    client:
+      timeout: 5s
+```
+
+For TLS-enabled servers, use `grpcs://` and configure client TLS if necessary:
+
+```yaml
+endpoints:
+  - name: my-grpcs
+    url: grpcs://example.com:443
+    conditions:
+      - "[CONNECTED] == true"
+      - "[BODY].status == SERVING"
+    client:
+      timeout: 5s
+      insecure: false          # set true to skip cert verification (not recommended)
+      tls:
+        certificate-file: /path/to/cert.pem      # optional mTLS client cert
+        private-key-file: /path/to/key.pem       # optional mTLS client key
+```
+
+Notes:
+- The health check targets the default service (`service: ""`). Support for a custom service name can be added later if needed.
+- The response body is exposed as a minimal JSON object like `{"status":"SERVING"}` only when required by conditions or suite store mappings.
+- Timeouts, custom DNS resolvers and SSH tunnels are honored via the existing [`client` configuration](#client-configuration).


 ### Monitoring an endpoint using ICMP
@@ -2962,7 +3020,7 @@ endpoints:
 Only the placeholders `[CONNECTED]`, `[IP]` and `[RESPONSE_TIME]` are supported for endpoints of type ICMP.
 You can specify a domain prefixed by `icmp://`, or an IP address prefixed by `icmp://`.

-If you run Gatus on Linux, please read the Linux section on https://github.com/prometheus-community/pro-bing#linux
+If you run Gatus on Linux, please read the Linux section on [https://github.com/prometheus-community/pro-bing#linux]
 if you encounter any problems.


@@ -3080,7 +3138,7 @@ endpoints:
      - "[CERTIFICATE_EXPIRATION] > 240h"
 ```

-> ⚠ The usage of the `[DOMAIN_EXPIRATION]` placeholder requires Gatus to use RDAP, or as a fallback, send a request to the official IANA WHOIS service 
+> ⚠ The usage of the `[DOMAIN_EXPIRATION]` placeholder requires Gatus to use RDAP, or as a fallback, send a request to the official IANA WHOIS service
 > [through a library](https://github.com/TwiN/whois) and in some cases, a secondary request to a TLD-specific WHOIS server (e.g. `whois.nic.sh`).
 > To prevent the WHOIS service from throttling your IP address if you send too many requests, Gatus will prevent you from
 > using the `[DOMAIN_EXPIRATION]` placeholder on an endpoint with an interval of less than `5m`.
@@ -3109,7 +3167,7 @@ concurrency: 0

 **Use cases for higher concurrency:**
 - You have a large number of endpoints to monitor
- You want to monitor endpoints at very short intervals (< 5s)  
+- You want to monitor endpoints at very short intervals (< 5s)
 - You're using Gatus for load testing scenarios

 **Legacy configuration:**
@@ -3193,7 +3251,7 @@ ui:
  default-sort-by: group
 ```
 Note that if a user has already sorted the dashboard by a different field, the default sort will not be applied unless the user
-clears their browser's localstorage. 
+clears their browser's localstorage.


 ### Exposing Gatus on a custom path
@@ -3,6 +3,7 @@ package api
 import (
 	"errors"
 	"fmt"
+	"net/url"
 	"time"

 	"github.com/TwiN/gatus/v5/storage/store"
@@ -25,7 +26,10 @@ func UptimeRaw(c *fiber.Ctx) error {
 	default:
 		return c.Status(400).SendString("Durations supported: 30d, 7d, 24h, 1h")
 	}
-	key := c.Params("key")
+	key, err := url.QueryUnescape(c.Params("key"))
+	if err != nil {
+		return c.Status(400).SendString("invalid key encoding")
+	}
 	uptime, err := store.Get().GetUptimeByKey(key, from, time.Now())
 	if err != nil {
 		if errors.Is(err, common.ErrEndpointNotFound) {
@@ -57,7 +61,10 @@ func ResponseTimeRaw(c *fiber.Ctx) error {
 	default:
 		return c.Status(400).SendString("Durations supported: 30d, 7d, 24h, 1h")
 	}
-	key := c.Params("key")
+	key, err := url.QueryUnescape(c.Params("key"))
+	if err != nil {
+		return c.Status(400).SendString("invalid key encoding")
+	}
 	responseTime, err := store.Get().GetAverageResponseTimeByKey(key, from, time.Now())
 	if err != nil {
 		if errors.Is(err, common.ErrEndpointNotFound) {
@@ -13,6 +13,7 @@ import (
 	"net"
 	"net/http"
 	"net/smtp"
+	"os"
 	"runtime"
 	"strings"
 	"time"
@@ -343,12 +344,7 @@ func Ping(address string, config *Config) (bool, time.Duration) {
 	pinger := ping.New(address)
 	pinger.Count = 1
 	pinger.Timeout = config.Timeout
-	// Set the pinger's privileged mode to true for every GOOS except darwin
-	// See https://github.com/TwiN/gatus/issues/132
-	//
-	// Note that for this to work on Linux, Gatus must run with sudo privileges.
-	// See https://github.com/prometheus-community/pro-bing#linux
-	pinger.SetPrivileged(runtime.GOOS != "darwin")
+	pinger.SetPrivileged(ShouldRunPingerAsPrivileged())
 	pinger.SetNetwork(config.Network)
 	err := pinger.Run()
 	if err != nil {
@@ -364,6 +360,25 @@ func Ping(address string, config *Config) (bool, time.Duration) {
 	return true, 0
 }

+// ShouldRunPingerAsPrivileged will determine whether or not to run pinger in privileged mode.
+// It should be set to privileged when running as root, and always on windows. See https://pkg.go.dev/github.com/macrat/go-parallel-pinger#Pinger.SetPrivileged
+func ShouldRunPingerAsPrivileged() bool {
+	// Set the pinger's privileged mode to false for darwin
+	// See https://github.com/TwiN/gatus/issues/132
+	// linux should also be set to false, but there are potential complications
+	// See https://github.com/TwiN/gatus/pull/748 and https://github.com/TwiN/gatus/issues/697#issuecomment-2081700989
+	//
+	// Note that for this to work on Linux, Gatus must run with sudo privileges. (in certain cases)
+	// See https://github.com/prometheus-community/pro-bing#linux
+	if runtime.GOOS == "windows" {
+		return true
+	}
+	// To actually check for cap_net_raw capabilities, we would need to add "kernel.org/pub/linux/libs/security/libcap/cap" to gatus.
+	// Or use a syscall and check for permission errors, but this requires platform specific compilation
+	// As a backstop we can simply check the effective user id and run as privileged when running as root
+	return os.Geteuid() == 0
+}
+
 // QueryWebSocket opens a websocket connection, write `body` and return a message from the server
 func QueryWebSocket(address, body string, headers map[string]string, config *Config) (bool, []byte, error) {
 	const (
@@ -6,6 +6,8 @@ import (
 	"io"
 	"net/http"
 	"net/netip"
+	"os"
+	"runtime"
 	"testing"
 	"time"

@@ -129,6 +131,33 @@ func TestPing(t *testing.T) {
 	}
 }

+func TestShouldRunPingerAsPrivileged(t *testing.T) {
+	// Don't run in parallel since we're testing system-dependent behavior
+	if runtime.GOOS == "windows" {
+		result := ShouldRunPingerAsPrivileged()
+		if !result {
+			t.Error("On Windows, ShouldRunPingerAsPrivileged() should return true")
+		}
+		return
+	}
+
+	// Non-Windows tests
+	result := ShouldRunPingerAsPrivileged()
+	isRoot := os.Geteuid() == 0
+
+	// Test cases based on current environment
+	if isRoot {
+		if !result {
+			t.Error("When running as root, ShouldRunPingerAsPrivileged() should return true")
+		}
+	} else {
+		// When not root, the result depends on raw socket creation
+		// We can at least verify the function runs without panic
+		t.Logf("Non-root privileged result: %v", result)
+	}
+}
+
+
 func TestCanPerformStartTLS(t *testing.T) {
 	type args struct {
 		address     string
@@ -0,0 +1,71 @@
+package client
+
+import (
+	"context"
+	"crypto/tls"
+	"net"
+	"time"
+
+	"github.com/TwiN/logr"
+	"google.golang.org/grpc"
+	"google.golang.org/grpc/credentials"
+	"google.golang.org/grpc/credentials/insecure"
+	health "google.golang.org/grpc/health/grpc_health_v1"
+)
+
+// PerformGRPCHealthCheck dials a gRPC target and performs the standard Health/Check RPC.
+// Returns whether a connection was established, the serving status string, an error (if any), and the elapsed duration.
+func PerformGRPCHealthCheck(address string, useTLS bool, cfg *Config) (bool, string, error, time.Duration) {
+	if cfg == nil {
+		cfg = GetDefaultConfig()
+	}
+	ctx, cancel := context.WithTimeout(context.Background(), cfg.Timeout)
+	defer cancel()
+
+	var opts []grpc.DialOption
+	// Transport credentials
+	if useTLS {
+		tlsCfg := &tls.Config{InsecureSkipVerify: cfg.Insecure}
+		if cfg.HasTLSConfig() && cfg.TLS.isValid() == nil {
+			tlsCfg = configureTLS(tlsCfg, *cfg.TLS)
+		}
+		opts = append(opts, grpc.WithTransportCredentials(credentials.NewTLS(tlsCfg)))
+	} else {
+		opts = append(opts, grpc.WithTransportCredentials(insecure.NewCredentials()))
+	}
+	// Custom dialer for DNS resolver or SSH tunnel
+	opts = append(opts, grpc.WithContextDialer(func(ctx context.Context, addr string) (net.Conn, error) {
+		if cfg.ResolvedTunnel != nil {
+			return cfg.ResolvedTunnel.Dial("tcp", addr)
+		}
+		if cfg.HasCustomDNSResolver() {
+			resolverCfg, err := cfg.parseDNSResolver()
+			if err != nil {
+				// Shouldn't happen because already validated; log and fall back
+				logr.Errorf("[client.PerformGRPCHealthCheck] invalid DNS resolver: %v", err)
+			} else {
+				d := &net.Dialer{Resolver: &net.Resolver{PreferGo: true, Dial: func(ctx context.Context, network, _ string) (net.Conn, error) {
+					d := net.Dialer{}
+					return d.DialContext(ctx, resolverCfg.Protocol, resolverCfg.Host+":"+resolverCfg.Port)
+				}}}
+				return d.DialContext(ctx, "tcp", addr)
+			}
+		}
+		var d net.Dialer
+		return d.DialContext(ctx, "tcp", addr)
+	}))
+
+	start := time.Now()
+	conn, err := grpc.DialContext(ctx, address, opts...)
+	if err != nil {
+		return false, "", err, time.Since(start)
+	}
+	defer conn.Close()
+
+	client := health.NewHealthClient(conn)
+	resp, err := client.Check(ctx, &health.HealthCheckRequest{Service: ""})
+	if err != nil {
+		return false, "", err, time.Since(start)
+	}
+	return true, resp.GetStatus().String(), nil, time.Since(start)
+}
@@ -53,6 +53,10 @@ type Announcement struct {

 	// Message is the user-facing text describing the announcement
 	Message string `yaml:"message" json:"message"`
+
+	// Archived indicates whether the announcement should be displayed in the historical section
+	// instead of at the top of the status page
+	Archived bool `yaml:"archived,omitempty" json:"archived,omitempty"`
 }

 // ValidateAndSetDefaults validates the announcement and sets default values if necessary
@@ -0,0 +1,241 @@
+package announcement
+
+import (
+	"errors"
+	"testing"
+	"time"
+)
+
+func TestAnnouncement_ValidateAndSetDefaults(t *testing.T) {
+	now := time.Now()
+	scenarios := []struct {
+		name          string
+		announcement  *Announcement
+		expectedError error
+		expectedType  string
+	}{
+		{
+			name: "valid-announcement-with-all-fields",
+			announcement: &Announcement{
+				Timestamp: now,
+				Type:      TypeWarning,
+				Message:   "This is a test announcement",
+				Archived:  false,
+			},
+			expectedError: nil,
+			expectedType:  TypeWarning,
+		},
+		{
+			name: "valid-announcement-with-archived-true",
+			announcement: &Announcement{
+				Timestamp: now,
+				Type:      TypeOperational,
+				Message:   "This is an archived announcement",
+				Archived:  true,
+			},
+			expectedError: nil,
+			expectedType:  TypeOperational,
+		},
+		{
+			name: "valid-announcement-with-empty-type-should-default-to-none",
+			announcement: &Announcement{
+				Timestamp: now,
+				Message:   "This announcement has no type",
+			},
+			expectedError: nil,
+			expectedType:  TypeNone,
+		},
+		{
+			name: "invalid-announcement-with-empty-message",
+			announcement: &Announcement{
+				Timestamp: now,
+				Type:      TypeWarning,
+				Message:   "",
+			},
+			expectedError: ErrEmptyMessage,
+		},
+		{
+			name: "invalid-announcement-with-zero-timestamp",
+			announcement: &Announcement{
+				Timestamp: time.Time{},
+				Type:      TypeWarning,
+				Message:   "Test message",
+			},
+			expectedError: ErrMissingTimestamp,
+		},
+		{
+			name: "invalid-announcement-with-invalid-type",
+			announcement: &Announcement{
+				Timestamp: now,
+				Type:      "invalid-type",
+				Message:   "Test message",
+			},
+			expectedError: ErrInvalidAnnouncementType,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run(scenario.name, func(t *testing.T) {
+			err := scenario.announcement.ValidateAndSetDefaults()
+			if !errors.Is(err, scenario.expectedError) {
+				t.Errorf("expected error %v, got %v", scenario.expectedError, err)
+			}
+			if scenario.expectedError == nil && scenario.announcement.Type != scenario.expectedType {
+				t.Errorf("expected type %s, got %s", scenario.expectedType, scenario.announcement.Type)
+			}
+		})
+	}
+}
+
+func TestAnnouncement_ValidateAndSetDefaults_AllTypes(t *testing.T) {
+	now := time.Now()
+	validTypes := []string{TypeOutage, TypeWarning, TypeInformation, TypeOperational, TypeNone}
+	for _, validType := range validTypes {
+		t.Run("type-"+validType, func(t *testing.T) {
+			announcement := &Announcement{
+				Timestamp: now,
+				Type:      validType,
+				Message:   "Test message",
+			}
+			if err := announcement.ValidateAndSetDefaults(); err != nil {
+				t.Errorf("expected no error for type %s, got %v", validType, err)
+			}
+			if announcement.Type != validType {
+				t.Errorf("expected type %s, got %s", validType, announcement.Type)
+			}
+		})
+	}
+}
+
+func TestSortByTimestamp(t *testing.T) {
+	now := time.Now()
+	earlier := now.Add(-1 * time.Hour)
+	later := now.Add(1 * time.Hour)
+	announcements := []*Announcement{
+		{Timestamp: now, Message: "now"},
+		{Timestamp: later, Message: "later"},
+		{Timestamp: earlier, Message: "earlier"},
+	}
+	SortByTimestamp(announcements)
+	if announcements[0].Timestamp != later {
+		t.Error("expected first announcement to be the latest")
+	}
+	if announcements[1].Timestamp != now {
+		t.Error("expected second announcement to be the middle one")
+	}
+	if announcements[2].Timestamp != earlier {
+		t.Error("expected third announcement to be the earliest")
+	}
+}
+
+func TestSortByTimestamp_WithArchivedField(t *testing.T) {
+	now := time.Now()
+	earlier := now.Add(-1 * time.Hour)
+	later := now.Add(1 * time.Hour)
+	announcements := []*Announcement{
+		{Timestamp: now, Message: "now", Archived: false},
+		{Timestamp: later, Message: "later", Archived: true},
+		{Timestamp: earlier, Message: "earlier", Archived: false},
+	}
+	SortByTimestamp(announcements)
+	// Sorting should be by timestamp only, not affected by archived status
+	if announcements[0].Timestamp != later {
+		t.Error("expected first announcement to be the latest, regardless of archived status")
+	}
+	if !announcements[0].Archived {
+		t.Error("expected first announcement to be archived")
+	}
+	if announcements[1].Timestamp != now {
+		t.Error("expected second announcement to be the middle one")
+	}
+	if announcements[2].Timestamp != earlier {
+		t.Error("expected third announcement to be the earliest")
+	}
+}
+
+func TestValidateAndSetDefaults_Slice(t *testing.T) {
+	now := time.Now()
+	scenarios := []struct {
+		name           string
+		announcements  []*Announcement
+		expectedError  error
+		shouldValidate bool
+	}{
+		{
+			name: "all-valid-announcements",
+			announcements: []*Announcement{
+				{Timestamp: now, Type: TypeWarning, Message: "First announcement"},
+				{Timestamp: now, Type: TypeOperational, Message: "Second announcement"},
+			},
+			expectedError:  nil,
+			shouldValidate: true,
+		},
+		{
+			name: "mixed-archived-announcements",
+			announcements: []*Announcement{
+				{Timestamp: now, Type: TypeWarning, Message: "Active announcement", Archived: false},
+				{Timestamp: now, Type: TypeOperational, Message: "Archived announcement", Archived: true},
+			},
+			expectedError:  nil,
+			shouldValidate: true,
+		},
+		{
+			name: "one-invalid-announcement-in-slice",
+			announcements: []*Announcement{
+				{Timestamp: now, Type: TypeWarning, Message: "Valid announcement"},
+				{Timestamp: now, Type: TypeOperational, Message: ""},
+			},
+			expectedError:  ErrEmptyMessage,
+			shouldValidate: false,
+		},
+		{
+			name: "announcement-with-missing-timestamp",
+			announcements: []*Announcement{
+				{Timestamp: now, Type: TypeWarning, Message: "Valid announcement"},
+				{Timestamp: time.Time{}, Type: TypeOperational, Message: "Invalid announcement"},
+			},
+			expectedError:  ErrMissingTimestamp,
+			shouldValidate: false,
+		},
+		{
+			name: "announcement-with-invalid-type",
+			announcements: []*Announcement{
+				{Timestamp: now, Type: TypeWarning, Message: "Valid announcement"},
+				{Timestamp: now, Type: "bad-type", Message: "Invalid announcement"},
+			},
+			expectedError:  ErrInvalidAnnouncementType,
+			shouldValidate: false,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run(scenario.name, func(t *testing.T) {
+			err := ValidateAndSetDefaults(scenario.announcements)
+			if !errors.Is(err, scenario.expectedError) {
+				t.Errorf("expected error %v, got %v", scenario.expectedError, err)
+			}
+		})
+	}
+}
+
+func TestAnnouncement_ArchivedFieldDefaults(t *testing.T) {
+	now := time.Now()
+	announcement := &Announcement{
+		Timestamp: now,
+		Type:      TypeWarning,
+		Message:   "Test announcement",
+		// Archived not set, should default to false
+	}
+	if err := announcement.ValidateAndSetDefaults(); err != nil {
+		t.Errorf("expected no error, got %v", err)
+	}
+	// Zero value for bool is false
+	if announcement.Archived {
+		t.Error("expected Archived to default to false")
+	}
+}
+
+func TestValidateAndSetDefaults_EmptySlice(t *testing.T) {
+	announcements := []*Announcement{}
+	if err := ValidateAndSetDefaults(announcements); err != nil {
+		t.Errorf("expected no error for empty slice, got %v", err)
+	}
+}
@@ -50,6 +50,7 @@ const (
 	TypeSTARTTLS Type = "STARTTLS"
 	TypeTLS      Type = "TLS"
 	TypeHTTP     Type = "HTTP"
+	TypeGRPC     Type = "GRPC"
 	TypeWS       Type = "WEBSOCKET"
 	TypeSSH      Type = "SSH"
 	TypeUNKNOWN  Type = "UNKNOWN"
@@ -177,6 +178,8 @@ func (e *Endpoint) Type() Type {
 		return TypeTLS
 	case strings.HasPrefix(e.URL, "http://") || strings.HasPrefix(e.URL, "https://"):
 		return TypeHTTP
+	case strings.HasPrefix(e.URL, "grpc://") || strings.HasPrefix(e.URL, "grpcs://"):
+		return TypeGRPC
 	case strings.HasPrefix(e.URL, "ws://") || strings.HasPrefix(e.URL, "wss://"):
 		return TypeWS
 	case strings.HasPrefix(e.URL, "ssh://"):
@@ -528,6 +531,19 @@ func (e *Endpoint) call(result *Result) {
 			result.Body = output
 		}
 		result.Duration = time.Since(startTime)
+	} else if endpointType == TypeGRPC {
+		useTLS := strings.HasPrefix(e.URL, "grpcs://")
+		address := strings.TrimPrefix(strings.TrimPrefix(e.URL, "grpcs://"), "grpc://")
+		connected, status, err, duration := client.PerformGRPCHealthCheck(address, useTLS, e.ClientConfig)
+		if err != nil {
+			result.AddError(err.Error())
+			return
+		}
+		result.Connected = connected
+		result.Duration = duration
+		if e.needsToReadBody() {
+			result.Body = []byte(fmt.Sprintf("{\"status\":\"%s\"}", status))
+		}
 	} else {
 		response, err = client.GetHTTPClient(e.ClientConfig).Do(request)
 		result.Duration = time.Since(startTime)
@@ -33,6 +33,7 @@ require (
 	golang.org/x/oauth2 v0.32.0
 	golang.org/x/sync v0.17.0
 	google.golang.org/api v0.252.0
+	google.golang.org/grpc v1.75.1
 	gopkg.in/mail.v2 v2.3.1
 	gopkg.in/yaml.v3 v3.0.1
 	modernc.org/sqlite v1.39.1
@@ -95,7 +96,6 @@ require (
 	golang.org/x/text v0.30.0 // indirect
 	golang.org/x/tools v0.37.0 // indirect
 	google.golang.org/genproto/googleapis/rpc v0.0.0-20251002232023-7c0ddcbb5797 // indirect
-	google.golang.org/grpc v1.75.1 // indirect
 	google.golang.org/protobuf v1.36.10 // indirect
 	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
 	modernc.org/libc v1.66.10 // indirect
@@ -15,7 +15,9 @@
        "clsx": "^2.1.1",
        "core-js": "^3.45.0",
        "date-fns": "^4.1.0",
+        "dompurify": "^3.3.0",
        "lucide-vue-next": "^0.539.0",
+        "marked": "^16.4.1",
        "tailwind-merge": "^3.3.1",
        "vue": "^3.5.18",
        "vue-chartjs": "^5.3.2",
@@ -2366,6 +2368,13 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -5171,6 +5180,15 @@
        "url": "https://github.com/fb55/domhandler?sponsor=1"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/domutils": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -7672,6 +7690,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
    "node_modules/mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -13539,6 +13569,12 @@
        "@types/node": "*"
      }
    },
+    "@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
    "@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -15621,6 +15657,14 @@
        "domelementtype": "^2.2.0"
      }
    },
+    "dompurify": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
+      "requires": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "domutils": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -17470,6 +17514,11 @@
        "semver": "^6.0.0"
      }
    },
+    "marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA=="
+    },
    "mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -15,7 +15,9 @@
    "clsx": "^2.1.1",
    "core-js": "^3.45.0",
    "date-fns": "^4.1.0",
+    "dompurify": "^3.3.0",
    "lucide-vue-next": "^0.539.0",
+    "marked": "^16.4.1",
    "tailwind-merge": "^3.3.1",
    "vue": "^3.5.18",
    "vue-chartjs": "^5.3.2",
@@ -47,7 +47,7 @@
              <!-- Date Header -->
              <div class="flex items-center gap-3 mb-2 relative">
                <div class="relative z-10 bg-white dark:bg-gray-800 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-600">
-                  <time class="text-xs font-medium text-gray-600 dark:text-gray-300">
+                  <time class="text-sm font-medium text-gray-600 dark:text-gray-300">
                    {{ formatDate(date) }}
                  </time>
                </div>
@@ -94,25 +94,28 @@
                  ></div>

                  <!-- Announcement Card -->
-                  <div 
+                  <div
                    :class="[
                      'rounded-md border p-3 transition-all duration-200 hover:shadow-sm',
                      getTypeClasses(announcement.type).background
                    ]"
                  >
-                    <div class="flex items-center justify-between gap-3">
-                      <div class="flex-1 min-w-0">
-                        <p class="text-sm leading-relaxed text-gray-900 dark:text-gray-100">{{ announcement.message }}</p>
-                      </div>
-                      <time 
+                    <div class="flex items-center gap-3">
+                      <time
                        :class="[
-                          'text-xs font-mono whitespace-nowrap',
+                          'text-sm font-mono whitespace-nowrap flex-shrink-0',
                          getTypeClasses(announcement.type).text
                        ]"
                        :title="formatFullTimestamp(announcement.timestamp)"
                      >
                        {{ formatTime(announcement.timestamp) }}
                      </time>
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-sm leading-relaxed text-gray-900 dark:text-gray-100"
+                          v-html="formatAnnouncementMessage(announcement.message)"
+                        ></p>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -128,6 +131,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { XCircle, AlertTriangle, Info, CheckCircle, Circle, ChevronDown } from 'lucide-vue-next'
+import { formatAnnouncementMessage } from '@/utils/markdown'

 // Props
 const props = defineProps({
@@ -295,4 +299,4 @@ const formatFullTimestamp = (timestamp) => {
    margin-left: 1.5rem;
  }
 }
-</style>
+</style>
@@ -0,0 +1,212 @@
+<template>
+  <div v-if="announcements && announcements.length" class="past-announcements">
+    <h2 class="text-2xl font-semibold text-foreground mb-6">Past Announcements</h2>
+
+    <div class="space-y-8">
+      <div
+        v-for="(group, date) in displayedAnnouncements"
+        :key="date"
+      >
+        <!-- Date Header -->
+        <div class="mb-3">
+          <h3 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
+            {{ formatDate(date) }}
+          </h3>
+        </div>
+
+        <!-- Announcements for this date or empty state -->
+        <div v-if="group.length > 0" class="space-y-3">
+          <div
+            v-for="(announcement, index) in group"
+            :key="`${date}-${index}-${announcement.timestamp}`"
+            :class="[
+              'border-l-4 p-4 transition-all duration-200',
+              getTypeClasses(announcement.type).background,
+              getTypeClasses(announcement.type).borderColor
+            ]"
+          >
+            <div class="flex items-start gap-3">
+              <component
+                :is="getTypeIcon(announcement.type)"
+                :class="['w-5 h-5 flex-shrink-0 mt-0.5', getTypeClasses(announcement.type).iconColor]"
+              />
+              <time
+                :class="[
+                  'text-sm font-mono whitespace-nowrap flex-shrink-0 mt-0.5',
+                  getTypeClasses(announcement.type).text
+                ]"
+                :title="formatFullTimestamp(announcement.timestamp)"
+              >
+                {{ formatTime(announcement.timestamp) }}
+              </time>
+              <div class="flex-1 min-w-0">
+                <p
+                  class="text-sm leading-relaxed text-gray-900 dark:text-gray-100"
+                  v-html="formatAnnouncementMessage(announcement.message)"
+                ></p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty state for dates without announcements -->
+        <div v-else class="py-2">
+          <p class="text-sm italic text-muted-foreground/60">
+            No incidents reported on this day
+          </p>
+        </div>
+      </div>
+
+      <!-- View Older Announcements Link -->
+      <div v-if="hasOlderAnnouncements && !showAllAnnouncements">
+        <button @click="showAllAnnouncements = true" class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer group">
+          <ChevronDown class="w-4 h-4 group-hover:translate-y-0.5 transition-transform duration-200" />
+          <span class="group-hover:underline">View older announcements</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { XCircle, AlertTriangle, Info, CheckCircle, Circle, ChevronDown } from 'lucide-vue-next'
+import { formatAnnouncementMessage } from '@/utils/markdown'
+
+// Props
+const props = defineProps({
+  announcements: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// State
+const showAllAnnouncements = ref(false)
+
+// Type configurations (consistent with AnnouncementBanner)
+const typeConfigs = {
+  outage: {
+    icon: XCircle,
+    background: 'bg-red-50 dark:bg-red-900/20',
+    borderColor: 'border-red-500 dark:border-red-400',
+    iconColor: 'text-red-600 dark:text-red-400',
+    text: 'text-red-700 dark:text-red-300'
+  },
+  warning: {
+    icon: AlertTriangle,
+    background: 'bg-yellow-50 dark:bg-yellow-900/20',
+    borderColor: 'border-yellow-500 dark:border-yellow-400',
+    iconColor: 'text-yellow-600 dark:text-yellow-400',
+    text: 'text-yellow-700 dark:text-yellow-300'
+  },
+  information: {
+    icon: Info,
+    background: 'bg-blue-50 dark:bg-blue-900/20',
+    borderColor: 'border-blue-500 dark:border-blue-400',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    text: 'text-blue-700 dark:text-blue-300'
+  },
+  operational: {
+    icon: CheckCircle,
+    background: 'bg-green-50 dark:bg-green-900/20',
+    borderColor: 'border-green-500 dark:border-green-400',
+    iconColor: 'text-green-600 dark:text-green-400',
+    text: 'text-green-700 dark:text-green-300'
+  },
+  none: {
+    icon: Circle,
+    background: 'bg-gray-50 dark:bg-gray-800/20',
+    borderColor: 'border-gray-500 dark:border-gray-400',
+    iconColor: 'text-gray-600 dark:text-gray-400',
+    text: 'text-gray-700 dark:text-gray-300'
+  }
+}
+
+// Helper to normalize date to start of day
+const normalizeDate = (date) => {
+  const normalized = new Date(date)
+  normalized.setHours(0, 0, 0, 0)
+  return normalized
+}
+
+// Computed properties
+const displayedAnnouncements = computed(() => {
+  if (!props.announcements?.length) return {}
+
+  // Group announcements by date and find oldest
+  const grouped = {}
+  let oldest = new Date()
+
+  props.announcements.forEach(announcement => {
+    const date = new Date(announcement.timestamp)
+    const key = date.toDateString()
+    grouped[key] = grouped[key] || []
+    grouped[key].push(announcement)
+    if (date < oldest) oldest = date
+  })
+
+  // Calculate date range
+  const today = normalizeDate(new Date())
+  const endDate = showAllAnnouncements.value
+    ? normalizeDate(oldest)
+    : new Date(today.getTime() - 14 * 24 * 60 * 60 * 1000)
+
+  // Build result: today (if has announcements) + yesterday backwards
+  const result = {}
+  const todayKey = today.toDateString()
+  if (grouped[todayKey]) result[todayKey] = grouped[todayKey]
+
+  for (let date = new Date(today.getTime() - 24 * 60 * 60 * 1000); date >= endDate; date.setDate(date.getDate() - 1)) {
+    result[date.toDateString()] = grouped[date.toDateString()] || []
+  }
+
+  return result
+})
+
+// Check if there are announcements older than 14 days
+const hasOlderAnnouncements = computed(() => {
+  if (!props.announcements?.length) return false
+  const fourteenDaysAgo = new Date(normalizeDate(new Date()).getTime() - 14 * 24 * 60 * 60 * 1000)
+  return props.announcements.some(a => new Date(a.timestamp) < fourteenDaysAgo)
+})
+
+// Helper functions
+const getTypeIcon = (type) => {
+  return typeConfigs[type]?.icon || Circle
+}
+
+const getTypeClasses = (type) => {
+  return typeConfigs[type] || typeConfigs.none
+}
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+const formatTime = (timestamp) => {
+  return new Date(timestamp).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  })
+}
+
+const formatFullTimestamp = (timestamp) => {
+  return new Date(timestamp).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short'
+  })
+}
+</script>
@@ -7,7 +7,7 @@
 <script setup>
 /* eslint-disable no-undef */
 import { cva } from 'class-variance-authority'
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'

 defineProps({
  variant: {
@@ -10,7 +10,7 @@
 <script setup>
 /* eslint-disable no-undef */
 import { cva } from 'class-variance-authority'
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'

 defineProps({
  variant: {
@@ -5,5 +5,5 @@
 </template>

 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>
@@ -5,5 +5,5 @@
 </template>

 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>
@@ -5,5 +5,5 @@
 </template>

 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>
@@ -5,5 +5,5 @@
 </template>

 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>
@@ -11,7 +11,7 @@

 <script setup>
 /* eslint-disable no-undef */
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'

 defineProps({
  modelValue: {
@@ -0,0 +1,46 @@
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+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;')
+}
+
+const renderer = new marked.Renderer()
+
+renderer.link = (tokenOrHref, title, text) => {
+  const tokenObject = typeof tokenOrHref === 'object' && tokenOrHref !== null
+    ? tokenOrHref
+    : null
+  const href = tokenObject ? tokenObject.href : tokenOrHref
+  const resolvedTitle = tokenObject ? tokenObject.title : title
+  const resolvedText = tokenObject ? tokenObject.text : text
+  const url = escapeHtml(href || '')
+  const titleAttribute = resolvedTitle ? ` title="${escapeHtml(resolvedTitle)}"` : ''
+  const linkText = resolvedText || ''
+  return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline font-medium"${titleAttribute}>${linkText}</a>`
+}
+
+marked.use({
+  renderer,
+  breaks: true,
+  gfm: true,
+  headerIds: false,
+  mangle: false
+})
+
+export const formatAnnouncementMessage = (message) => {
+  if (!message) {
+    return ''
+  }
+  const markdown = String(message)
+  const html = marked.parse(markdown)
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] })
+}
@@ -22,8 +22,8 @@
            </Button>
          </div>
        </div>
-        <!-- Announcement Banner -->
-        <AnnouncementBanner :announcements="props.announcements" />
+        <!-- Announcement Banner (Active Announcements) -->
+        <AnnouncementBanner :announcements="activeAnnouncements" />
        <!-- Search bar -->
        <SearchBar
          @search="handleSearch"
@@ -170,6 +170,11 @@
          </Button>
        </div>
      </div>
+
+      <!-- Past Announcements Section -->
+      <div v-if="archivedAnnouncements.length > 0" class="mt-12 pb-8">
+        <PastAnnouncements :announcements="archivedAnnouncements" />
+      </div>
    </div>

    <Settings @refreshData="fetchData" />
@@ -187,6 +192,7 @@ import SearchBar from '@/components/SearchBar.vue'
 import Settings from '@/components/Settings.vue'
 import Loading from '@/components/Loading.vue'
 import AnnouncementBanner from '@/components/AnnouncementBanner.vue'
+import PastAnnouncements from '@/components/PastAnnouncements.vue'
 import { SERVER_URL } from '@/main.js'

 const props = defineProps({
@@ -196,6 +202,15 @@ const props = defineProps({
  }
 })

+// Computed properties for active and archived announcements
+const activeAnnouncements = computed(() => {
+  return props.announcements ? props.announcements.filter(a => !a.archived) : []
+})
+
+const archivedAnnouncements = computed(() => {
+  return props.announcements ? props.announcements.filter(a => a.archived) : []
+})
+
 const emit = defineEmits(['showTooltip'])

 const endpointStatuses = ref([])
Author	SHA1	Message	Date
TwiN	379ec2983d	refactor(announcements): Move duplicate markdown code into utils/markdown.js	2025-11-08 13:54:36 -05:00
SworyzandGitHub	907716289c	feat(announcements): add markdown support (#1371 ) * feat(announcements): add markdown support * feat(announcements): add information about announcement formatting in readme * feat(announcements): bump packages versions for marked and dompurify * feat(announcements): bump versions for marked and dompurify in package-lock.json * fix(announcements): md to link was not working since the conflict merge * fix(announcements): fix time before message and not after * feat(announcements): past announcements add markdown support * feat(announcements): static files	2025-11-08 13:28:57 -05:00
TwiN	7c6b5539c1	docs: Add past-announcements.jpg	2025-11-07 19:42:48 -05:00
TwiNandGitHub	607f3c5549	feat(announcements): Add support for archived announcements and add past announcement section in UI (#1382 ) * feat(announcements): Add support for archived announcements and add past announcement section in UI * Add missing field	2025-11-07 19:35:39 -05:00
Arden RasmussenandGitHub	9e97efaba1	fix(api): Escape endpoint key in URL for raw APIs (#1381 )	2025-11-07 18:20:10 -05:00
diamanatandGitHub	8912b4b3e3	feat(client): Add support for monitoring gRPC endpoints (#1376 ) * add grpc * add gRPC to readme	2025-11-07 15:19:13 -05:00
Zee Aslam GitHub TwiN	5fdc489113	fix(client): update icmp/ping logic to determine pinger privileged mode (#1346 ) * fix(pinger): update logic to determine pinger privileged mode * add some unit tests for pinger Signed-off-by: Zee Aslam <zeet6613@gmail.com> * undo accidental removal Signed-off-by: Zee Aslam <zeet6613@gmail.com> * check for cap_net_raw by trying to open a raw socket and checking for permission error Signed-off-by: Zee Aslam <zeet6613@gmail.com> * revert syscall after testing. It is unable to build a binary on windows Signed-off-by: Zee Aslam <zeet6613@gmail.com> * remove extra import * review icmp section of readme. No changes required Signed-off-by: Zee Aslam <zeet6613@gmail.com> * Update client/client.go Co-authored-by: TwiN <twin@linux.com> * Update client/client.go Match function name Co-authored-by: TwiN <twin@linux.com> * Update client/client.go Remove extra line Co-authored-by: TwiN <twin@linux.com> --------- Signed-off-by: Zee Aslam <zeet6613@gmail.com> Co-authored-by: TwiN <twin@linux.com>	2025-11-04 20:42:20 -05:00
GiampaoloandGitHub	2ebb74ae1e	docs: Add ECS fargate module in README (#1377 )	2025-11-02 00:04:28 -04:00