From b3da9fbb25f7f974a088f19df5f6e020625ea730 Mon Sep 17 00:00:00 2001 From: Andy Dixon Date: Sat, 12 Sep 2026 18:47:20 +0100 Subject: [PATCH] Render email metadata as real tables and redesign the shell Metadata blocks were divs styled with display:table. Nested blocks and orphan cells created phantom columns that squeezed the value column to a character or two. Every metadata block is now a real //
, which mail clients lay out reliably, and the value column always fills the remaining width. The shared shell gets a gradient hero header, timestamp pill, dark frame, and refreshed section, card, and code-block styling. --- index.php | 28 +-- parsers/github.php | 172 +++++++++---------- parsers/grafana.php | 160 ++++++++--------- parsers/helpers.php | 141 +++++++-------- parsers/json.php | 66 +++---- parsers/wxinteract.php | 380 ++++++++++++++++++++--------------------- 6 files changed, 476 insertions(+), 471 deletions(-) diff --git a/index.php b/index.php index 1acf153..50c1934 100755 --- a/index.php +++ b/index.php @@ -152,20 +152,20 @@ if (empty($html)) {
📋 Request Information
-
-
-
IP Address
-
$ipAddressSafe
-
-
-
Method
-
$requestMethodSafe
-
-
-
Content-Type
-
$contentTypeSafe
-
-
+ + + + + + + + + + + + + +
diff --git a/parsers/github.php b/parsers/github.php index 8a45453..2811a6c 100644 --- a/parsers/github.php +++ b/parsers/github.php @@ -46,20 +46,20 @@ function githubParse($rawBody, $headers, $metadata) { $eventContent = <<
Push Details
-
-
-
Branch
-
$ref
-
-
-
Commits
-
$commitCount
-
-
-
Pusher
-
$senderSafe
-
-
+ + + + + + + + + + + + + + HTML; @@ -88,28 +88,28 @@ HTML; $eventContent = <<
Pull Request Details
-
-
-
Number
-
#$prNumber
-
-
-
Title
-
$prTitle
-
-
-
State
-
$prState
-
-
-
Branch
-
$prHead → $prBase
-
-
-
URL
-
$prUrl
-
-
+ + + + + + + + + + + + + + + + + + + + + + HTML; break; @@ -125,24 +125,24 @@ HTML; $eventContent = <<
Issue Details
-
-
-
Number
-
#$issueNumber
-
-
-
Title
-
$issueTitle
-
-
-
State
-
$issueState
-
-
-
URL
-
$issueUrl
-
-
+ + + + + + + + + + + + + + + + + + HTML; break; @@ -157,20 +157,20 @@ HTML; $eventContent = <<
Release Details
-
-
-
Tag
-
$tagName
-
-
-
Name
-
$releaseName
-
-
-
URL
-
$releaseUrl
-
-
+ + + + + + + + + + + + + + HTML; break; @@ -190,24 +190,24 @@ HTML;
📋 Repository Information
-
-
-
Repository
-
$repoSafe
-
-
-
Event
-
$eventSafe
-
-
-
Sender
-
$senderSafe
-
-
-
IP Address
-
$ipSafe
-
-
+ + + + + + + + + + + + + + + + + +
$eventContent diff --git a/parsers/grafana.php b/parsers/grafana.php index f39f543..2fb6b8a 100644 --- a/parsers/grafana.php +++ b/parsers/grafana.php @@ -47,42 +47,42 @@ function grafanaParse($rawBody, $headers, $metadata) { $alertSummary = <<
Alert Summary
-
-
-
Status
-
$statusIcon $statusSafe
-
-
-
Receiver
-
$receiverSafe
-
-
-
Alert Count
-
$alertCount
-
+ + + + + + + + + + + + + HTML; if ($truncatedAlerts > 0) { $alertSummary .= << -
Truncated Alerts
-
$truncatedAlerts
- + + + + HTML; } if ($externalURL) { $externalURLSafe = htmlspecialchars($externalURL, ENT_QUOTES, 'UTF-8'); $alertSummary .= << -
Alertmanager URL
-
$externalURLSafe
- + + + + HTML; } $alertSummary .= << +
HTML; @@ -92,33 +92,33 @@ HTML; $labelsContent .= '
Labels
'; if (!empty($groupLabels)) { - $labelsContent .= '
Group Labels
'; + $labelsContent .= '
Group Labels
'; foreach ($groupLabels as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $labelsContent .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $labelsContent .= ''; + $labelsContent .= ''; } if (!empty($commonLabels)) { - $labelsContent .= '
Common Labels
'; + $labelsContent .= '
Common Labels
'; foreach ($commonLabels as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $labelsContent .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $labelsContent .= ''; + $labelsContent .= ''; } $labelsContent .= '
'; @@ -127,18 +127,18 @@ HTML; // Build common annotations section $annotationsContent = ''; if (!empty($commonAnnotations)) { - $annotationsContent .= '
Common Annotations
'; + $annotationsContent .= '
Common Annotations
'; foreach ($commonAnnotations as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $annotationsContent .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $annotationsContent .= ''; + $annotationsContent .= '
'; } // Build individual alerts section @@ -172,83 +172,83 @@ HTML; $alertsContent .= <<
$alertIcon Alert $alertNumber - $alertStatusSafe
-
+ HTML; // Add alert labels if (!empty($alertLabels)) { - $alertsContent .= '
Labels
'; + $alertsContent .= '
Labels
'; foreach ($alertLabels as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $alertsContent .= '
'; + $alertsContent .= '
'; } // Add alert annotations if (!empty($alertAnnotations)) { - $alertsContent .= '
Annotations
'; + $alertsContent .= '
Annotations
'; foreach ($alertAnnotations as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $alertsContent .= '
'; + $alertsContent .= '
'; } // Add timing and metadata if ($startsAt) { $startsAtSafe = htmlspecialchars($startsAt, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
Started At
-
$startsAtSafe
- + + + + HTML; } if ($endsAt) { $endsAtSafe = htmlspecialchars($endsAt, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
Ended At
-
$endsAtSafe
- + + + + HTML; } if ($generatorURL) { $generatorURLSafe = htmlspecialchars($generatorURL, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
Generator URL
-
$generatorURLSafe
- + + + + HTML; } if ($fingerprint) { $fingerprintSafe = htmlspecialchars($fingerprint, ENT_QUOTES, 'UTF-8'); $alertsContent .= << -
Fingerprint
-
$fingerprintSafe
- + + + + HTML; } - $alertsContent .= ''; + $alertsContent .= '
'; } $alertsContent .= '
'; @@ -268,16 +268,16 @@ HTML;
📋 Request Information
-
-
-
Receiver
-
$receiverSafe
-
-
-
IP Address
-
$ipSafe
-
-
+ + + + + + + + + +
HTML; $html = emailShell($emailTitle, $emailStamp, $body, "This Grafana/Prometheus alert was automatically forwarded to your email address."); diff --git a/parsers/helpers.php b/parsers/helpers.php index 883e1de..410c804 100644 --- a/parsers/helpers.php +++ b/parsers/helpers.php @@ -31,26 +31,26 @@ function renderDataAsTable($data, $depth = 0) { if (is_array($item)) { $html .= '
'; $html .= '
Item ' . ($index + 1) . '
'; - $html .= '
'; + $html .= ''; foreach ($item as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); if (is_array($value)) { - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
'; + $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; } else { $valueSafe = htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8'); - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
' . $valueSafe . '
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } } - $html .= ''; + $html .= ''; $html .= '
'; } else { $valueSafe = htmlspecialchars((string)$item, ENT_QUOTES, 'UTF-8'); @@ -59,32 +59,32 @@ function renderDataAsTable($data, $depth = 0) { } } else { // Render as key-value table - $html .= '
'; + $html .= ''; foreach ($data as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); if (is_array($value) && !empty($value)) { // Close current table and start a subsection - $html .= ''; + $html .= ''; $html .= '
'; $html .= '
' . $keySafe . '
'; $html .= renderDataAsTable($value, $depth + 1); $html .= '
'; - $html .= '
'; + $html .= ''; } else if (is_array($value) && empty($value)) { - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
empty
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } else { $valueSafe = htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8'); - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
' . $valueSafe . '
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } } - $html .= ''; + $html .= ''; } return $html; @@ -102,6 +102,8 @@ function renderDataAsTable($data, $depth = 0) { function emailShell($title, $stamp, $body, $footer = 'Automatically forwarded to your inbox.') { $host = htmlspecialchars($_SERVER['HTTP_HOST'] ?? 'webhook', ENT_QUOTES, 'UTF-8'); $plainTitle = strip_tags($title); + $mono = "ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace"; + $sans = "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif"; return << @@ -109,57 +111,60 @@ function emailShell($title, $stamp, $body, $footer = 'Automatically forwarded to + $plainTitle - -
-
-
-
-

$title

-

$stamp

-
+ + + +
+ + + + + +
HTML; diff --git a/parsers/json.php b/parsers/json.php index 54959e7..cf3b3d8 100644 --- a/parsers/json.php +++ b/parsers/json.php @@ -28,20 +28,20 @@ function jsonParse($rawBody, $headers, $metadata) {
📋 Request Information
-
-
-
IP Address
-
$ipSafe
-
-
-
Method
-
$methodSafe
-
-
-
Content-Type
-
$contentTypeSafe
-
-
+ + + + + + + + + + + + + +
@@ -78,7 +78,7 @@ function renderJsonData($data, $path = '') { if (!is_array($data)) { $safe = htmlspecialchars((string)$data, ENT_QUOTES, 'UTF-8'); - return "
$safe
"; + return "
$safe
"; } // Check if it's an indexed array (numeric keys in sequence) @@ -110,18 +110,18 @@ function renderJsonData($data, $path = '') { $html .= '
'; $html .= '
Item ' . ($index + 1) . '
'; - $html .= '
'; + $html .= ''; foreach ($simpleData as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8'); - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
' . $valueSafe . '
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } - $html .= ''; + $html .= ''; $html .= '
'; } @@ -133,12 +133,12 @@ function renderJsonData($data, $path = '') { } else { // Simple value in array $valueSafe = htmlspecialchars((string)$item, ENT_QUOTES, 'UTF-8'); - $html .= '
'; - $html .= '
'; - $html .= '
Item ' . ($index + 1) . '
'; - $html .= '
' . $valueSafe . '
'; - $html .= '
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } } } else { @@ -161,18 +161,18 @@ function renderJsonData($data, $path = '') { $html .= '
' . htmlspecialchars($path, ENT_QUOTES, 'UTF-8') . '
'; } - $html .= '
'; + $html .= ''; foreach ($simpleData as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8'); - $html .= '
'; - $html .= '
' . $keySafe . '
'; - $html .= '
' . $valueSafe . '
'; - $html .= '
'; + $html .= ''; + $html .= ''; + $html .= ''; + $html .= ''; } - $html .= ''; + $html .= ''; } // Recursively render sub-arrays as separate tables with path titles diff --git a/parsers/wxinteract.php b/parsers/wxinteract.php index fdf4a1c..7c4c25c 100644 --- a/parsers/wxinteract.php +++ b/parsers/wxinteract.php @@ -88,16 +88,16 @@ function wxinteractParse($rawBody, $headers, $metadata) {
📋 Event Information
-
-
-
Event Type
-
$statusSafe
-
-
-
IP Address
-
$ipSafe
-
-
+ + + + + + + + + +
$eventContent @@ -126,28 +126,28 @@ function buildOutboundSmsSubmittedContent($data) { return <<
📤 SMS Details
-
-
-
Message ID
-
$messageId
-
-
-
To
-
$to
-
-
-
From
-
$from
-
-
-
Campaign ID
-
$campaignId
-
-
-
Submitted At
-
$submittedAt
-
-
+ + + + + + + + + + + + + + + + + + + + + +
@@ -170,28 +170,28 @@ function buildOutboundSmsDeliveredContent($data) { return <<
✅ Delivery Details
-
-
-
Message ID
-
$messageId
-
-
-
To
-
$to
-
-
-
From
-
$from
-
-
-
Campaign ID
-
$campaignId
-
-
-
Delivered At
-
$deliveredAt
-
-
+ + + + + + + + + + + + + + + + + + + + + +
HTML; } @@ -211,28 +211,28 @@ function buildOutboundSmsFailedContent($data) { return <<
❌ Failure Details
-
-
-
Message ID
-
$messageId
-
-
-
To
-
$to
-
-
-
From
-
$from
-
-
-
Campaign ID
-
$campaignId
-
-
-
Failed At
-
$failedAt
-
-
+ + + + + + + + + + + + + + + + + + + + + +
@@ -261,36 +261,36 @@ function buildShortlinkClickedContent($data) { return <<
🔗 Click Details
-
-
-
Shortlink
-
$shortlink
-
-
-
Original URL
-
$originalUrl
-
-
-
Phone Number
-
$phoneNumber
-
-
-
Message ID
-
$messageId
-
-
-
Campaign ID
-
$campaignId
-
-
-
Clicked At
-
$clickedAt
-
-
-
IP Address
-
$ipAddress
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -314,28 +314,28 @@ function buildInboundSmsContent($data) { return <<
📥 Inbound SMS Details
-
-
-
Message ID
-
$messageId
-
-
-
From
-
$from
-
-
-
To
-
$to
-
-
-
Keyword
-
$keyword
-
-
-
Received At
-
$receivedAt
-
-
+ + + + + + + + + + + + + + + + + + + + + +
@@ -358,28 +358,28 @@ function buildOptOutContent($data) { return <<
🚫 Opt Out Details
-
-
-
Phone Number
-
$phoneNumber
-
-
-
From Number
-
$from
-
-
-
Keyword
-
$keyword
-
-
-
Message ID
-
$messageId
-
-
-
Opt Out At
-
$optOutAt
-
-
+ + + + + + + + + + + + + + + + + + + + + +
HTML; } @@ -399,57 +399,57 @@ function buildContactsCallbackContent($data) { $customFieldsHtml = ''; if (isset($data['custom_fields']) && is_array($data['custom_fields']) && !empty($data['custom_fields'])) { - $customFieldsHtml = '
🏷️ Custom Fields
'; + $customFieldsHtml = '
🏷️ Custom Fields
'; foreach ($data['custom_fields'] as $key => $value) { $keySafe = htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); $valueSafe = htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); $customFieldsHtml .= << -
$keySafe
-
$valueSafe
- + + + + HTML; } - $customFieldsHtml .= ''; + $customFieldsHtml .= '
'; } return <<
👤 Contact Details
-
-
-
Contact ID
-
$contactId
-
-
-
Phone Number
-
$phoneNumber
-
-
-
First Name
-
$firstName
-
-
-
Last Name
-
$lastName
-
-
-
Email
-
$email
-
-
-
Status
-
$status
-
-
-
Created At
-
$createdAt
-
-
-
Updated At
-
$updatedAt
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$customFieldsHtml