more style fixes for the og cards

This commit is contained in:
Evan Jarrett
2025-12-18 14:03:49 -06:00
parent 3b343c9fdb
commit bd55783d8e
4 changed files with 50 additions and 6 deletions
+28
View File
@@ -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
+6 -6
View File
@@ -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
+2
View File
@@ -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)
+14
View File
@@ -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>