grenade/moments
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scale OG contribution graph to fill 1200x630 canvas

Browse Source 
Compute cell size from available width so the graph fills the canvas
instead of rendering at a fixed small size. Scale year labels
proportionally. Position headline and subtitle at the top with the
graph centered in the remaining space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
rob thijssen
2026-05-11 16:11:05 +03:00
parent a57682e610
commit d539892b70
1 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
crates/moments-api/src/main.rs
View File

@@ -230,14 +230,17 @@ fn render_contributions_png(
// OG image canvas: 1200x630 // OG image canvas: 1200x630
let og_w = 1200_f64; let og_w = 1200_f64;
let og_h = 630_f64; let og_h = 630_f64;
let padding = 40_f64;
let bg = "#2c3e50"; let bg = "#2c3e50";
let cell = 10_f64; let year_label_w = 50_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 max_cols = 53;
// Scale cell size to fill available width
let avail_w = og_w - 2.0 * padding - year_label_w;
let step = (avail_w / max_cols as f64).floor();
let gap = (step * 0.17).round();
let cell = step - gap;
let radius = cell / 2.0;
let colors = ["rgba(255,255,255,0.05)", "#0e4429", "#006d32", "#26a641", "#39d353"]; let colors = ["rgba(255,255,255,0.05)", "#0e4429", "#006d32", "#26a641", "#39d353"];
@@ -297,7 +300,6 @@ fn render_contributions_png(
}; };
let n_rows = rows.len(); let n_rows = rows.len();
let graph_w = year_label_w + (max_cols as f64) * step;
let graph_h = (n_rows as f64) * step; let graph_h = (n_rows as f64) * step;
let total: i64 = counts.iter().map(|d| d.count).sum(); let total: i64 = counts.iter().map(|d| d.count).sum();
@@ -307,12 +309,13 @@ fn render_contributions_png(
String::new() String::new()
}; };
// Center the graph within the 1200x630 canvas // Layout: headline at top, graph vertically centered in remaining space
let headline_h = 80_f64; let offset_x = padding;
let subtitle_h = 30_f64; let headline_y = padding + 36.0;
let content_h = headline_h + subtitle_h + graph_h; let subtitle_y = headline_y + 28.0;
let offset_x = (og_w - graph_w) / 2.0; let graph_top = subtitle_y + 16.0;
let offset_y = (og_h - content_h) / 2.0; let avail_graph_h = og_h - graph_top - padding;
let graph_y = graph_top + (avail_graph_h - graph_h).max(0.0) / 2.0;
let mut svg = format!( let mut svg = format!(
r#"<svg xmlns="http://www.w3.org/2000/svg" width="{og_w}" height="{og_h}" viewBox="0 0 {og_w} {og_h}"><rect width="100%" height="100%" fill="{bg}"/>"#, r#"<svg xmlns="http://www.w3.org/2000/svg" width="{og_w}" height="{og_h}" viewBox="0 0 {og_w} {og_h}"><rect width="100%" height="100%" fill="{bg}"/>"#,
@@ -322,24 +325,25 @@ fn render_contributions_png(
svg.push_str(&format!( svg.push_str(&format!(
r##"<text x="{x}" y="{y}" fill="#ecf0f1" font-family="sans-serif" font-size="36" font-weight="bold">rob thijssen</text>"##, r##"<text x="{x}" y="{y}" fill="#ecf0f1" font-family="sans-serif" font-size="36" font-weight="bold">rob thijssen</text>"##,
x = offset_x + year_label_w, x = offset_x + year_label_w,
y = offset_y + 40.0, y = headline_y,
)); ));
// Subtitle // Subtitle
svg.push_str(&format!( svg.push_str(&format!(
r##"<text x="{x}" y="{y}" fill="#ecf0f1" font-family="sans-serif" font-size="14" opacity="0.6">{total} contributions since {from}{repo_text}</text>"##, r##"<text x="{x}" y="{y}" fill="#ecf0f1" font-family="sans-serif" font-size="16" opacity="0.6">{total} contributions since {from}{repo_text}</text>"##,
x = offset_x + year_label_w, x = offset_x + year_label_w,
y = offset_y + headline_h + 14.0, y = subtitle_y,
)); ));
let graph_y = offset_y + headline_h + subtitle_h; let label_font_size = (step * 0.7).round().max(8.0).min(14.0);
for (row_idx, row) in rows.iter().enumerate() { for (row_idx, row) in rows.iter().enumerate() {
let y_base = graph_y + (row_idx as f64) * step; let y_base = graph_y + (row_idx as f64) * step;
svg.push_str(&format!( svg.push_str(&format!(
r##"<text x="{x}" y="{y}" text-anchor="end" dominant-baseline="central" fill="#ecf0f1" font-family="sans-serif" font-size="9" opacity="0.6">{yr}</text>"##, r##"<text x="{x}" y="{y}" text-anchor="end" dominant-baseline="central" fill="#ecf0f1" font-family="sans-serif" font-size="{fs}" opacity="0.6">{yr}</text>"##,
x = offset_x + year_label_w - 4.0, x = offset_x + year_label_w - 6.0,
y = y_base + radius, y = y_base + radius,
fs = label_font_size,
yr = row.year, yr = row.year,
)); ));
for (col, (_, _, count)) in row.weeks.iter().enumerate() { for (col, (_, _, count)) in row.weeks.iter().enumerate() {