From a57682e61090d33286be7b6465828011dc478ef3 Mon Sep 17 00:00:00 2001 From: rob thijssen Date: Mon, 11 May 2026 16:08:29 +0300 Subject: [PATCH] feat: improve OG image and meta tags for social sharing - Resize OG image from ~676x216 to 1200x630 (recommended size) - Add "rob thijssen" headline text overlay to the OG image - Center the contribution graph within the canvas - Expand og:title to 55 chars and og:description to 148 chars to meet social platform optimal lengths Co-Authored-By: Claude Opus 4.6 (1M context) --- crates/moments-api/src/main.rs | 56 ++++++++++++++++++++++------------ ui/index.html | 4 +-- 2 files changed, 39 insertions(+), 21 deletions(-) diff --git a/crates/moments-api/src/main.rs b/crates/moments-api/src/main.rs index 612dbbe..84ea8af 100644 --- a/crates/moments-api/src/main.rs +++ b/crates/moments-api/src/main.rs @@ -227,13 +227,17 @@ fn render_contributions_png( let count_map: HashMap = counts.iter().map(|d| (d.date, d.count)).collect(); + // OG image canvas: 1200x630 + let og_w = 1200_f64; + let og_h = 630_f64; + let bg = "#2c3e50"; + let cell = 10_f64; let gap = 2_f64; let step = cell + gap; let radius = cell / 2.0; let year_label_w = 40_f64; let max_cols = 53; - let bg = "#2c3e50"; let colors = ["rgba(255,255,255,0.05)", "#0e4429", "#006d32", "#26a641", "#39d353"]; @@ -253,7 +257,6 @@ fn render_contributions_png( } else { NaiveDate::from_ymd_opt(yr, 12, 31).unwrap() }; - // Align to preceding Sunday (weekday 6 = Sunday in chrono's Mon=0 scheme) let offset = year_start.weekday().num_days_from_sunday(); let mut cursor = year_start - chrono::Duration::days(offset as i64); @@ -294,35 +297,53 @@ fn render_contributions_png( }; let n_rows = rows.len(); - let title_h = 28_f64; - let svg_w = year_label_w + (max_cols as f64) * step; - let svg_h = title_h + (n_rows as f64) * step + 8.0; + let graph_w = year_label_w + (max_cols as f64) * step; + let graph_h = (n_rows as f64) * step; let total: i64 = counts.iter().map(|d| d.count).sum(); - - let mut svg = format!( - r#""#, - ); let repo_text = if repo_count > 0 { format!(" in {repo_count} repositories") } else { String::new() }; + + // Center the graph within the 1200x630 canvas + let headline_h = 80_f64; + let subtitle_h = 30_f64; + let content_h = headline_h + subtitle_h + graph_h; + let offset_x = (og_w - graph_w) / 2.0; + let offset_y = (og_h - content_h) / 2.0; + + let mut svg = format!( + r#""#, + ); + + // Headline svg.push_str(&format!( - r##"{total} contributions since {from}{repo_text}"##, - x = year_label_w, + r##"rob thijssen"##, + x = offset_x + year_label_w, + y = offset_y + 40.0, )); + // Subtitle + svg.push_str(&format!( + r##"{total} contributions since {from}{repo_text}"##, + x = offset_x + year_label_w, + y = offset_y + headline_h + 14.0, + )); + + let graph_y = offset_y + headline_h + subtitle_h; + for (row_idx, row) in rows.iter().enumerate() { - let y_base = title_h + (row_idx as f64) * step; + let y_base = graph_y + (row_idx as f64) * step; svg.push_str(&format!( r##"{yr}"##, - x = year_label_w - 4.0, + x = offset_x + year_label_w - 4.0, y = y_base + radius, yr = row.year, )); for (col, (_, _, count)) in row.weeks.iter().enumerate() { - let cx = year_label_w + (col as f64) * step + radius; + let cx = offset_x + year_label_w + (col as f64) * step + radius; let cy = y_base + radius; let fill = color_for(*count); svg.push_str(&format!( @@ -334,15 +355,12 @@ fn render_contributions_png( svg.push_str(""); - // Rasterize with resvg + // Rasterize at 1200x630 let tree = resvg::usvg::Tree::from_str(&svg, &resvg::usvg::Options::default()) .map_err(|e| format!("svg parse: {e}"))?; - let size = tree.size(); - let w = size.width().ceil() as u32; - let h = size.height().ceil() as u32; let mut pixmap = - resvg::tiny_skia::Pixmap::new(w, h).ok_or_else(|| "pixmap alloc failed".to_string())?; + resvg::tiny_skia::Pixmap::new(og_w as u32, og_h as u32).ok_or_else(|| "pixmap alloc failed".to_string())?; resvg::render(&tree, resvg::tiny_skia::Transform::default(), &mut pixmap.as_mut()); diff --git a/ui/index.html b/ui/index.html index 7376297..73b1f26 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,8 +4,8 @@ rob.tn - - + +