Add Open Graph meta tags for link previews in messengers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add PWA manifest, app icons, and favicon
2026-03-24 17:54:05 +01:00 · 2026-03-24 17:51:28 +01:00 · 2026-03-24 17:36:01 +01:00 · 2026-03-24 17:35:42 +01:00
11 changed files with 88 additions and 6 deletions
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -3,6 +3,15 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="theme-color" content="#0e1a2e" />
+		<link rel="manifest" href="/manifest.json" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+		<meta property="og:title" content="Initiative Tracker" />
+		<meta property="og:description" content="D&D combat initiative tracker" />
+		<meta property="og:image" content="https://initiative.dostulata.rocks/icon-512.png" />
+		<meta property="og:url" content="https://initiative.dostulata.rocks/" />
+		<meta property="og:type" content="website" />
 		<title>Initiative Tracker</title>
 	</head>
 	<body>
--- a/apps/web/public/apple-touch-icon.png
+++ b/apps/web/public/apple-touch-icon.png
--- a/apps/web/public/favicon.svg
+++ b/apps/web/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="f" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(16 15) scale(1.55)" fill="none" stroke="url(#f)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+    <polygon points="8.18 4.76 8.18 -4.74 -0.01 -9.49 -8.19 -4.74 -8.19 4.76 -0.01 9.51 8.18 4.76" fill="url(#f)" fill-opacity="0.15"/>
+    <polygon points="-0.01 -9.49 -4.75 -2.74 4.75 -2.74 -0.01 -9.49" fill="url(#f)" fill-opacity="0.25"/>
+    <polygon points="-0.01 5.44 8.18 4.76 4.75 -2.74 -0.01 5.44" fill="url(#f)" fill-opacity="0.2"/>
+    <polygon points="-0.01 5.44 -4.75 -2.74 -8.19 4.76 -0.01 5.44" fill="url(#f)" fill-opacity="0.1"/>
+    <line x1="-4.75" y1="-2.74" x2="-8.19" y2="-4.74"/>
+    <line x1="8.18" y1="-4.74" x2="4.75" y2="-2.74"/>
+    <line x1="-0.01" y1="5.44" x2="-0.01" y2="9.51"/>
+    <polygon points="8.18 4.76 8.18 -4.74 -0.01 -9.49 -8.19 -4.74 -8.19 4.76 -0.01 9.51 8.18 4.76"/>
+    <polygon points="-0.01 -9.49 -4.75 -2.74 4.75 -2.74 -0.01 -9.49"/>
+    <polygon points="-0.01 5.44 8.18 4.76 4.75 -2.74 -0.01 5.44"/>
+    <polygon points="-0.01 5.44 -4.75 -2.74 -8.19 4.76 -0.01 5.44"/>
+  </g>
+</svg>
--- a/apps/web/public/icon-192.png
+++ b/apps/web/public/icon-192.png
--- a/apps/web/public/icon-512.png
+++ b/apps/web/public/icon-512.png
--- a/apps/web/public/icon.svg
+++ b/apps/web/public/icon.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="40%" r="70%">
+      <stop offset="0%" stop-color="#1a2e4a"/>
+      <stop offset="100%" stop-color="#0e1a2e"/>
+    </radialGradient>
+    <linearGradient id="d20fill" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="d20stroke" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#93c5fd"/>
+      <stop offset="100%" stop-color="#3b82f6"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
+  <g transform="translate(256 256) scale(8.5)" fill="none" stroke="url(#d20stroke)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+    <polygon points="8.18 4.76 8.18 -4.74 -0.01 -9.49 -8.19 -4.74 -8.19 4.76 -0.01 9.51 8.18 4.76" fill="url(#d20fill)" fill-opacity="0.15"/>
+    <polygon points="-0.01 -9.49 -4.75 -2.74 4.75 -2.74 -0.01 -9.49" fill="url(#d20fill)" fill-opacity="0.25"/>
+    <polygon points="-0.01 5.44 8.18 4.76 4.75 -2.74 -0.01 5.44" fill="url(#d20fill)" fill-opacity="0.2"/>
+    <polygon points="-0.01 5.44 -4.75 -2.74 -8.19 4.76 -0.01 5.44" fill="url(#d20fill)" fill-opacity="0.1"/>
+    <line x1="-4.75" y1="-2.74" x2="-8.19" y2="-4.74"/>
+    <line x1="8.18" y1="-4.74" x2="4.75" y2="-2.74"/>
+    <line x1="-0.01" y1="5.44" x2="-0.01" y2="9.51"/>
+    <polygon points="8.18 4.76 8.18 -4.74 -0.01 -9.49 -8.19 -4.74 -8.19 4.76 -0.01 9.51 8.18 4.76"/>
+    <polygon points="-0.01 -9.49 -4.75 -2.74 4.75 -2.74 -0.01 -9.49"/>
+    <polygon points="-0.01 5.44 8.18 4.76 4.75 -2.74 -0.01 5.44"/>
+    <polygon points="-0.01 5.44 -4.75 -2.74 -8.19 4.76 -0.01 5.44"/>
+  </g>
+  <text x="256" y="278" text-anchor="middle" dominant-baseline="central" font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="52" fill="#93c5fd" letter-spacing="1">20</text>
+</svg>
--- a/apps/web/public/manifest.json
+++ b/apps/web/public/manifest.json
@@ -0,0 +1,21 @@
+{
+	"name": "Initiative Tracker",
+	"short_name": "Initiative",
+	"description": "D&D combat initiative tracker",
+	"start_url": "/",
+	"display": "standalone",
+	"background_color": "#0e1a2e",
+	"theme_color": "#0e1a2e",
+	"icons": [
+		{
+			"src": "/icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -43,10 +43,10 @@ export function App() {

 	return (
 		<div className="flex h-dvh flex-col">
-			<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4">
+			<div className="relative mx-auto flex min-h-0 w-full flex-1 flex-col gap-3 sm:max-w-2xl sm:px-4">
 				{!!actionBarAnim.showTopBar && (
 					<div
-						className={cn("shrink-0 pt-8", actionBarAnim.topBarClass)}
+						className={cn("shrink-0 sm:pt-8", actionBarAnim.topBarClass)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
 						<TurnNavigation />
@@ -85,7 +85,7 @@ export function App() {
 						</div>

 						<div
-							className={cn("shrink-0 pb-8", actionBarAnim.settlingClass)}
+							className={cn("shrink-0 sm:pb-8", actionBarAnim.settlingClass)}
 							onAnimationEnd={actionBarAnim.onSettleEnd}
 						>
 							<ActionBar
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -518,7 +518,7 @@ export function ActionBar({
 	});

 	return (
-		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 border-border border-t bg-card px-4 py-3 sm:rounded-lg sm:border">
 			<form
 				onSubmit={handleAdd}
 				className="relative flex flex-1 items-center gap-2"
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -520,7 +520,7 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 			)}
 		>
-			<div className="grid grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] items-center gap-3 py-2">
+			<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-2 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3">
 				{/* Concentration */}
 				<button
 					type="button"
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -12,7 +12,7 @@ export function TurnNavigation() {
 	const activeCombatant = encounter.combatants[encounter.activeIndex];

 	return (
-		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 border-border border-b bg-card px-4 py-3 sm:rounded-lg sm:border">
 			<Button
 				variant="ghost"
 				size="icon"
Author	SHA1	Message	Date
Lukas	4d0ec0c7b2	Add Open Graph meta tags for link previews in messengers All checks were successful CI / check (push) Successful in 1m8s Details CI / build-image (push) Successful in 15s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-24 17:54:05 +01:00
Lukas	fe62f2eb2f	Add PWA manifest, app icons, and favicon D20-themed icon in app color scheme for home screen installation, favicon, and apple-touch-icon. Standalone display mode makes the app feel native when launched from home screen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-24 17:51:28 +01:00
Lukas	7092677273	Make layout full-width on mobile with docked top/bottom bars Remove max-width constraint and horizontal padding on small screens so content goes edge-to-edge. Turn navigation and action bar lose rounded corners on mobile and dock flush to top/bottom edges. Desktop layout (sm: and up) is unchanged. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-24 17:36:01 +01:00
Lukas	e1a06c9d59	Tighten combatant row grid on mobile for better name visibility Reduce grid gap and initiative column width on small screens, restoring full layout at the sm breakpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-24 17:35:42 +01:00