chore: update Cargo.lock for fontdb dependency

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat(ui): add meta description, og:locale, and og:site_name
2026-05-11 16:35:08 +03:00 · 2026-05-11 16:32:33 +03:00 · 2026-05-11 16:29:40 +03:00 · 2026-05-11 16:27:47 +03:00 · 2026-05-11 16:17:17 +03:00 · 2026-05-11 16:11:05 +03:00
7 changed files with 134 additions and 56 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1271,6 +1271,7 @@ dependencies = [
 "axum",
 "chrono",
 "clap",
+ "fontdb",
 "moments-core",
 "moments-data",
 "moments-entities",
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -31,6 +31,7 @@ reqwest = { version = "0.12", default-features = false, features = ["rustls-tls"
 figment = { version = "0.10", features = ["toml", "env"] }
 clap = { version = "4", features = ["derive", "env"] }
 resvg = "0.45"
+fontdb = "0.23"

 # internal
 moments-entities = { path = "crates/moments-entities", version = "=0.1.0" }
--- a/crates/moments-api/Cargo.toml
+++ b/crates/moments-api/Cargo.toml
@@ -22,3 +22,4 @@ chrono.workspace = true
 clap.workspace = true
 reqwest.workspace = true
 resvg.workspace = true
+fontdb.workspace = true
--- a/crates/moments-api/src/main.rs
+++ b/crates/moments-api/src/main.rs
@@ -227,14 +227,21 @@ fn render_contributions_png(

    let count_map: HashMap<NaiveDate, i64> = counts.iter().map(|d| (d.date, d.count)).collect();

-    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;
+    // OG image canvas: 1200x630
+    let og_w = 1200_f64;
+    let og_h = 630_f64;
+    let padding = 40_f64;
    let bg = "#2c3e50";

+    let year_label_w = 50_f64;
+    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"];

    // Build weekly data per year
@@ -253,7 +260,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 +300,54 @@ 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_h = (n_rows as f64) * step;

    let total: i64 = counts.iter().map(|d| d.count).sum();
-
-    let mut svg = format!(
-        r#"<svg xmlns="http://www.w3.org/2000/svg" width="{svg_w}" height="{svg_h}" viewBox="0 0 {svg_w} {svg_h}"><rect width="100%" height="100%" fill="{bg}"/>"#,
-    );
    let repo_text = if repo_count > 0 {
        format!(" in {repo_count} repositories")
    } else {
        String::new()
    };
+
+    // Layout: headline at top, graph vertically centered in remaining space
+    let offset_x = padding;
+    let headline_y = padding + 36.0;
+    let subtitle_y = headline_y + 28.0;
+    let graph_top = subtitle_y + 16.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!(
+        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}"/>"#,
+    );
+
+    // Headline
    svg.push_str(&format!(
-        r##"<text x="{x}" y="18" fill="#ecf0f1" font-size="12" opacity="0.6">{total} contributions since {from}{repo_text}</text>"##,
-        x = year_label_w,
+        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,
+        y = headline_y,
    ));

+    // Subtitle
+    svg.push_str(&format!(
+        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,
+        y = subtitle_y,
+    ));
+
+    let label_font_size = (step * 0.7).round().max(8.0).min(14.0);
+
    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##"<text x="{x}" y="{y}" text-anchor="end" dominant-baseline="central" fill="#ecf0f1" font-size="9" opacity="0.6">{yr}</text>"##,
-            x = year_label_w - 4.0,
+            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 - 6.0,
            y = y_base + radius,
+            fs = label_font_size,
            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 +359,17 @@ fn render_contributions_png(

    svg.push_str("</svg>");

-    // Rasterize with resvg
-    let tree = resvg::usvg::Tree::from_str(&svg, &resvg::usvg::Options::default())
+    // Rasterize at 1200x630
+    let mut fontdb = fontdb::Database::new();
+    fontdb.load_system_fonts();
+    let mut opts = resvg::usvg::Options::default();
+    opts.fontdb = std::sync::Arc::new(fontdb);
+    opts.font_family = "Noto Sans".to_owned();
+    let tree = resvg::usvg::Tree::from_str(&svg, &opts)
        .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());

--- a/ui/index.html
+++ b/ui/index.html
@@ -1,25 +1,74 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>rob.tn</title>
-    <meta property="og:title" content="rob thijssen" />
-    <meta property="og:description" content="contribution history across github, gitea, and mozilla hg" />
-    <meta property="og:image" content="https://rob.tn/api/v1/og/contributions.png" />
-    <meta property="og:type" content="website" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content="https://rob.tn/api/v1/og/contributions.png" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
-    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
-    <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>rob.tn</title>
+        <meta
+            name="description"
+            content="a timeline of open source contributions across github, gitea, and mozilla hg. ranked projects, language trends, and commit activity since 2012."
+        />
+        <meta
+            property="og:title"
+            content="rob thijssen: developer activity and contribution history"
+        />
+        <meta
+            property="og:description"
+            content="a timeline of open source contributions across github, gitea, and mozilla hg. ranked projects, language trends, and commit activity since 2012."
+        />
+        <meta
+            property="og:image"
+            content="https://rob.tn/api/v1/og/contributions.png"
+            width="1200"
+            height="630"
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://rob.tn/" />
+        <meta property="og:site_name" content="rob.tn" />
+        <meta property="og:locale" content="en_US" />
+        <meta property="og:logo" content="https://rob.tn/icon-512.png" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+            name="twitter:image"
+            content="https://rob.tn/api/v1/og/contributions.png"
+            width="1200"
+            height="630"
+        />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="48x48"
+            href="/favicon-48.png"
+        />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="/icon-192.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="512x512"
+            href="/icon-512.png"
+        />
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
--- a/ui/src/components/ContributionStats.tsx
+++ b/ui/src/components/ContributionStats.tsx
@@ -120,22 +120,21 @@ export function ContributionStats() {
        </div>
        <div className="mt-1">
          <span style={{ opacity: 0.7, fontSize: '0.75rem' }}>avg by weekday</span>
-          <div className="d-flex flex-column gap-1 mt-1">
+          <div className="d-flex align-items-end gap-1 mt-1" style={{ height: 64 }}>
            {stats.dayAvgs.map(({ name, avg }) => (
-              <div key={name} className="d-flex align-items-center gap-2" style={{ fontSize: '0.75rem' }}>
-                <span style={{ width: 24, textAlign: 'right', opacity: 0.7 }}>{name}</span>
-                <div style={{ flex: 1, height: 8, borderRadius: 3, background: 'rgba(255,255,255,0.05)' }}>
+              <div key={name} className="d-flex flex-column align-items-center" style={{ flex: 1, height: '100%', justifyContent: 'flex-end' }}>
+                <span style={{ fontSize: '0.65rem', opacity: 0.6, marginBottom: 2 }}>{avg.toFixed(1)}</span>
+                <div style={{ width: '100%', maxWidth: 20, borderRadius: 3, background: 'rgba(255,255,255,0.05)', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
                  <div
                    style={{
-                      width: stats.maxAvg > 0 ? `${(avg / stats.maxAvg) * 100}%` : '0%',
-                      height: '100%',
+                      height: stats.maxAvg > 0 ? `${(avg / stats.maxAvg) * 100}%` : '0%',
                      borderRadius: 3,
                      backgroundColor: '#39d353',
                      opacity: 0.7,
                    }}
                  />
                </div>
-                <span style={{ width: 28, textAlign: 'right', opacity: 0.6 }}>{avg.toFixed(1)}</span>
+                <span style={{ fontSize: '0.65rem', opacity: 0.7, marginTop: 2 }}>{name}</span>
              </div>
            ))}
          </div>
--- a/ui/src/components/TopLanguages.tsx
+++ b/ui/src/components/TopLanguages.tsx
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';

 import { fetchRepoLanguages } from '../api/client';

-const MAX_LANGS = 10;
+const MAX_LANGS = 14;

 export function TopLanguages() {
  const langsQ = useQuery({
Author	SHA1	Message	Date
rob thijssen	2130032d46	chore: update Cargo.lock for fontdb dependency Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:35:08 +03:00
rob thijssen	92a66422ab	feat(ui): add meta description, og:locale, and og:site_name Adds the standard HTML meta description (for SEO), og:locale, and og:site_name tags flagged by Open Graph validators. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:32:33 +03:00
rob thijssen	94b6fbe42d	feat(ui): add og:logo meta tag pointing to 512px icon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:29:40 +03:00
rob thijssen	048646a7c1	feat(ui): add og:url meta tag for canonical URL Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:27:47 +03:00
rob thijssen	1f2fea3427	fix: load system fonts for OG image text rendering usvg's default Options creates an empty fontdb, so no fonts are found for text rendering regardless of what's installed. Load system fonts into a fontdb::Database and set the default font family to Noto Sans. Also picks up a formatting change to index.html from a linter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:17:17 +03:00
rob thijssen	d539892b70	fix: scale OG contribution graph to fill 1200x630 canvas 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>	2026-05-11 16:11:05 +03:00
rob thijssen	a57682e610	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) <noreply@anthropic.com>	2026-05-11 16:08:29 +03:00
rob thijssen	22c80fd7af	feat(ui): transpose weekday averages to vertical bar chart Show days on the X axis and volume on the Y axis, replacing the horizontal bar layout with vertical bars for a more natural time-series reading direction. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 16:02:30 +03:00
rob thijssen	8b5656ef26	fix: specify sans-serif font in OG image SVG text elements The SVG text elements had no font-family, causing usvg to default to Times New Roman which isn't installed on the server. Specifying sans-serif uses the system default and silences the warnings. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 15:56:24 +03:00
rob thijssen	dd1de38b2f	feat(ui): show more languages in top languages chart Increase from 10 to 14 rows so languages visible in the contribution graph (e.g. Svelte, C++) also appear in the legend. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-05-11 15:52:33 +03:00