Skip to content

Website demo integration + v1.4.0-rc.11 changes#133

Merged
s-b-e-n-s-o-n merged 11 commits intomainfrom
feature/website-demo
Mar 11, 2026
Merged

Website demo integration + v1.4.0-rc.11 changes#133
s-b-e-n-s-o-n merged 11 commits intomainfrom
feature/website-demo

Conversation

@s-b-e-n-s-o-n
Copy link
Contributor

@s-b-e-n-s-o-n s-b-e-n-s-o-n commented Mar 11, 2026

Summary

  • Replace static screenshots section with interactive live demo iframe on the homepage
  • Demo app (apps/demo/) uses MSW + FakeEventSource to run the full Drydock UI with mock data
  • FLIP animation for smooth fullscreen expand/collapse transitions
  • Iframe-blocked fallback with postMessage detection and direct link
  • OG images, favicons, and social metadata for both website and demo site
  • CSP frame-ancestors headers to allow cross-origin framing
  • OS native share button in fullscreen mode
  • Convert hardcoded px font sizes to rem across UI components
  • Includes all v1.4.0-rc.11 changes (compose refactor, OIDC TLS, MQTT filters, bug fixes)

Test plan

  • Homepage loads with embedded demo iframe at demo.drydock.codeswhat.com
  • Demo iframe shows Drydock dashboard with mock data
  • "Open fullscreen" animates smoothly to fullscreen overlay
  • Escape key / close button collapses back with animation
  • "Theme Editor" navigates iframe to /config
  • Share button triggers OS share sheet (or copies link on desktop)
  • If iframe is blocked, fallback shows fish emoji + direct link after 5s
  • OG images render correctly for both drydock.codeswhat.com and demo.drydock.codeswhat.com
  • npm run build succeeds for apps/web
  • All existing tests pass (2116 app + 1578 UI + 43 e2e)

🤖 Generated with Claude Code

@s-b-e-n-s-o-n
📝 docs(oidc): add Authentik token encryption and self-signed cert gui…
707e230 
…dance

- Warn that Encryption Key must be unset in Authentik provider settings
  (Drydock does not support JWE tokens)
- Document INSECURE and CAFILE options for self-signed certificate setups
- Note that CAFILE requires the full certificate chain, not just the leaf
@s-b-e-n-s-o-n
🔧 chore(demo): add framing headers, OG image, favicons, and icon fix
5e7a5b7 
- Add CSP frame-ancestors header to allow embedding from drydock.codeswhat.com
- Add X-Frame-Options ALLOW-FROM as legacy fallback
- Add postMessage ping to parent frame on demo boot (iframe load detection)
- Add OG image, Twitter card meta tags, and full favicon set to demo index.html
- Fix Loki container using sh-grafana icon instead of sh-loki in seed data
@s-b-e-n-s-o-n
✨ feat(web): replace screenshots with interactive demo iframe
cfd2750 
- Add DemoSection client component with embedded iframe
- FLIP animation for fullscreen expand/collapse (no iframe reload)
- Fullscreen header with share (navigator.share), theme editor, close
- Iframe blocked fallback with fish emoji and direct link
- Env var NEXT_PUBLIC_DEMO_URL for local dev override
- Swap ScreenshotsSection for DemoSection on homepage
- Keep screenshots-section.tsx as unused fallback
@s-b-e-n-s-o-n
✨ feat(web): add OG image and social metadata
ba8bd6d 
- Add whale OG image (1200x630) to website public assets
- Add openGraph.images and twitter.images to root layout metadata
@s-b-e-n-s-o-n
🔧 chore: anchor demo/ gitignore pattern to repo root
f1e8ca0 
Prevents apps/demo/ from being ignored by the unanchored demo/ pattern.
@s-b-e-n-s-o-n
♻️ refactor(ui): convert hardcoded px font sizes to rem units
354cc4f 
Convert 918 text-[Npx] classes across 42 files to rem equivalents
so all font sizes scale with the --dd-font-size CSS variable:

- text-[7-9px] → text-[0.5625rem] (9px at 1x)
- text-[10px] → text-[0.625rem] (10px at 1x)
- text-[11px] → text-[0.6875rem] (11px at 1x)
- text-[12px] → text-xs (0.75rem)
- text-[13-14px] → text-sm (0.875rem)
- text-[15-16px] → text-base (1rem)
- style.css nav-tooltip 12px → 0.75rem, badge 11px → 0.6875rem
@s-b-e-n-s-o-n
📝 docs(changelog): add compose trigger and UI fix entries
f811b66 
- Compose trigger Engine API migration, self-update delegation, runtime refresh
- Container action button spinners, command palette filter clearing
- Manual update with compose triggers, compose file path fixes
- Silent error handling for recheck and env reveal failures
@s-b-e-n-s-o-n
✨ feat(demo): add MSW handlers, seed data, and build config
e9d3800 
Demo app scaffolding: Vite config, TypeScript config, MSW browser
setup, FakeEventSource SSE patch, 15 mock API handlers, and seed
data for containers, registries, watchers, triggers, agents, audit,
notifications, vulnerabilities, server, and logs.
@s-b-e-n-s-o-n
🔧 chore: fix biome lint and formatting errors
e750b7a 
- Replace `any` with `unknown` in demo mock handlers
- Remove stale biome-ignore suppression comments
- Use proper type assertion instead of `as any` for EventSource patch
- Fix a11y: use <button> for backdrop overlay instead of div with role
- Auto-format demo-section.tsx
@s-b-e-n-s-o-n
🔧 chore: fix import ordering in page.tsx
c8fefb1
@vercel
Copy link

vercel bot commented Mar 11, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
drydock-website Ready Ready Preview, Comment Mar 11, 2026 1:36pm

@codecov
Copy link

codecov bot commented Mar 11, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

github-advanced-security[bot]
github-advanced-security bot found potential problems Mar 11, 2026
View reviewed changes
apps/demo/public/mockServiceWorker.js
event.waitUntil(self.clients.claim());
});

addEventListener('message', async (event) => {

Check warning

Code scanning / CodeQL

Missing origin verification in `postMessage` handler Medium

Postmessage handler has no origin check.

Copilot Autofix

AI 2 days ago

In general, the fix is to validate that incoming "message" events originate from a trusted source before acting on their data. For a service worker, there are two practical approaches that fit within the visible code: (1) check event.origin when available (for cross-context messages that supply it), and (2) constrain handling to messages whose event.source is one of the Client objects returned by self.clients.matchAll with the same origin as the service worker. Since we must not alter broader application logic beyond this file, the most conservative fix is to early-return from the handler when the source cannot be associated with a same-origin window client.

The best targeted change within this snippet is to add an origin/same-origin check immediately after resolving the client from self.clients.get(clientId). If the client either has a different origin than the service worker’s own origin (self.location.origin) or lacks an origin property entirely, we avoid processing the message. This preserves existing behavior for legitimate, same-origin clients while stopping potentially malicious cross-origin sources from triggering the switch logic. Concretely, in apps/demo/public/mockServiceWorker.js, inside the "message" event listener, after:

30:   const client = await self.clients.get(clientId);
31: 
32:   if (!client) {
33:     return;
34:   }

we will add:

35:   if (client.origin && client.origin !== self.location.origin) {
36:     return;
37:   }

and then renumber following lines accordingly. No new imports or external libraries are needed; we only rely on standard service worker globals (self.location.origin and Client.origin where available).

Suggested changeset 1
apps/demo/public/mockServiceWorker.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/demo/public/mockServiceWorker.js b/apps/demo/public/mockServiceWorker.js
--- a/apps/demo/public/mockServiceWorker.js
+++ b/apps/demo/public/mockServiceWorker.js
@@ -33,6 +33,11 @@
     return;
   }
 
+  // Ensure that only same-origin clients can control the mock service worker.
+  if (client.origin && client.origin !== self.location.origin) {
+    return;
+  }
+
   const allClients = await self.clients.matchAll({
     type: 'window',
   });
EOF
@@ -33,6 +33,11 @@
return;
}

// Ensure that only same-origin clients can control the mock service worker.
if (client.origin && client.origin !== self.location.origin) {
return;
}

const allClients = await self.clients.matchAll({
type: 'window',
});
Copilot is powered by AI and may make mistakes. Always verify output.
@s-b-e-n-s-o-n
🔒 security(demo): validate postMessage origin and remove dead code
22b65e1 
- Add origin check to postMessage handler to reject cross-origin spoofing
- Remove unused isFullscreen variable (isFixed is used instead)
@s-b-e-n-s-o-n s-b-e-n-s-o-n merged commit 603a92f into main Mar 11, 2026
16 checks passed
@s-b-e-n-s-o-n s-b-e-n-s-o-n deleted the feature/website-demo branch March 11, 2026 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@biggest-littlest biggest-littlest biggest-littlest approved these changes

@ALARGECOMPANY ALARGECOMPANY ALARGECOMPANY approved these changes

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

@s-b-e-n-s-o-n @biggest-littlest @ALARGECOMPANY