From bd55783d8e7b730ad8a77c37c2fb16cd8967b79a Mon Sep 17 00:00:00 2001
From: Evan Jarrett <evan@evanjarrett.com>
Date: Thu, 18 Dec 2025 14:03:49 -0600
Subject: [PATCH] more style fixes for the og cards

---
 pkg/appview/handlers/opengraph.go     | 28 +++++++++++++++++++++++++++
 pkg/appview/ogcard/card.go            | 12 ++++++------
 pkg/appview/routes/routes.go          |  2 ++
 pkg/appview/templates/pages/home.html | 14 ++++++++++++++
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/pkg/appview/handlers/opengraph.go b/pkg/appview/handlers/opengraph.go
index e576a9d..57ec827 100644
--- a/pkg/appview/handlers/opengraph.go
+++ b/pkg/appview/handlers/opengraph.go
@@ -120,6 +120,34 @@ func (h *RepoOGHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// DefaultOGHandler generates the default OpenGraph image for the home page
+type DefaultOGHandler struct{}
+
+func (h *DefaultOGHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	// Generate the OG image
+	card := ogcard.NewCard()
+	card.Fill(ogcard.ColorBackground)
+
+	// Draw large centered "ATCR" title
+	centerY := float64(ogcard.CardHeight) / 2
+	card.DrawText("ATCR", float64(ogcard.CardWidth)/2, centerY-20, 96.0, ogcard.ColorText, ogcard.AlignCenter, true)
+
+	// Draw tagline below
+	card.DrawText("Distributed Container Registry", float64(ogcard.CardWidth)/2, centerY+60, ogcard.FontDescription, ogcard.ColorMuted, ogcard.AlignCenter, false)
+
+	// Draw subtitle
+	card.DrawText("Push and pull Docker images on the AT Protocol", float64(ogcard.CardWidth)/2, centerY+110, ogcard.FontStats, ogcard.ColorMuted, ogcard.AlignCenter, false)
+
+	// Set cache headers and content type (cache longer since it's static content)
+	w.Header().Set("Content-Type", "image/png")
+	w.Header().Set("Cache-Control", "public, max-age=86400")
+
+	if err := card.EncodePNG(w); err != nil {
+		slog.Error("Failed to encode default OG image", "error", err)
+		http.Error(w, "Failed to generate image", http.StatusInternalServerError)
+	}
+}
+
 // UserOGHandler generates OpenGraph images for user profile pages
 type UserOGHandler struct {
 	DB *sql.DB
diff --git a/pkg/appview/ogcard/card.go b/pkg/appview/ogcard/card.go
index aea6b06..b1b55a2 100644
--- a/pkg/appview/ogcard/card.go
+++ b/pkg/appview/ogcard/card.go
@@ -44,16 +44,16 @@ const (
 	// Font sizes
 	FontTitle       = 48.0
 	FontDescription = 32.0
-	FontStats       = 24.0
-	FontBadge       = 20.0
+	FontStats       = 40.0 // Larger for visibility when scaled down
+	FontBadge       = 32.0 // Larger for visibility when scaled down
 	FontBranding    = 28.0
 
 	// Spacing
 	LineSpacingLarge = 65 // Gap after title
 	LineSpacingSmall = 60 // Gap between description lines
-	StatsIconGap     = 30 // Gap between stat icon and text
-	StatsItemGap     = 40 // Gap between stat items
-	BadgeGap         = 15 // Gap between badges
+	StatsIconGap     = 48 // Gap between stat icon and text
+	StatsItemGap     = 60 // Gap between stat items
+	BadgeGap         = 20 // Gap between badges
 )
 
 // Layout holds computed positions for a standard OG card layout
@@ -403,7 +403,7 @@ func createCircleMask(diameter int) *image.Alpha {
 
 // Common colors
 var (
-	ColorBackground  = color.RGBA{R: 13, G: 17, B: 23, A: 255}   // #0d1117 - GitHub dark
+	ColorBackground  = color.RGBA{R: 22, G: 27, B: 34, A: 255}   // #161b22 - GitHub dark elevated
 	ColorText        = color.RGBA{R: 230, G: 237, B: 243, A: 255} // #e6edf3 - Light text
 	ColorMuted       = color.RGBA{R: 125, G: 133, B: 144, A: 255} // #7d8590 - Muted text
 	ColorAccent      = color.RGBA{R: 47, G: 129, B: 247, A: 255}  // #2f81f7 - Blue accent
diff --git a/pkg/appview/routes/routes.go b/pkg/appview/routes/routes.go
index e2d4afc..709f8a2 100644
--- a/pkg/appview/routes/routes.go
+++ b/pkg/appview/routes/routes.go
@@ -142,6 +142,8 @@ func RegisterUIRoutes(router chi.Router, deps UIDependencies) {
 	).ServeHTTP)
 
 	// OpenGraph image generation (public, cacheable)
+	router.Get("/og/home", (&uihandlers.DefaultOGHandler{}).ServeHTTP)
+
 	router.Get("/og/u/{handle}", (&uihandlers.UserOGHandler{
 		DB: deps.ReadOnlyDB,
 	}).ServeHTTP)
diff --git a/pkg/appview/templates/pages/home.html b/pkg/appview/templates/pages/home.html
index ca49e2a..c98adcf 100644
--- a/pkg/appview/templates/pages/home.html
+++ b/pkg/appview/templates/pages/home.html
@@ -3,6 +3,20 @@
 <html lang="en">
 <head>
     <title>ATCR - Distributed Container Registry</title>
+    <!-- Open Graph -->
+    <meta property="og:title" content="ATCR - Distributed Container Registry">
+    <meta property="og:description" content="Push and pull Docker images on the AT Protocol. Same Docker, decentralized.">
+    <meta property="og:image" content="https://{{ .RegistryURL }}/og/home">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://{{ .RegistryURL }}">
+    <meta property="og:site_name" content="ATCR">
+    <!-- Twitter Card (used by Discord) -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="ATCR - Distributed Container Registry">
+    <meta name="twitter:description" content="Push and pull Docker images on the AT Protocol. Same Docker, decentralized.">
+    <meta name="twitter:image" content="https://{{ .RegistryURL }}/og/home">
     {{ template "head" . }}
 </head>
 <body>