8000 feat(og-image-raster): fix social share preview (SVG -> PNG) by dominicusin · Pull Request #114 · dominicusin/dominicusin.github.io · GitHub
[go: up one dir, main page]
Skip to content

feat(og-image-raster): fix social share preview (SVG -> PNG) - #114

Merged
dominicusin merged 1 commit into
mainfrom
feat/og-image-raster
Aug 17, 2026
Merged

feat(og-image-raster): fix social share preview (SVG -> PNG)#114
dominicusin merged 1 commit into
mainfrom
feat/og-image-raster

Conversation

@dominicusin
@dominicusin dominicusin commented Aug 17, 2026
Copy link
Copy Markdown
Owner

Summary

Self-identified defect: the built site's og:image/twitter:image pointed at images/og-default.svg. Social platforms (X/Telegram/Slack/Discord/FB/LinkedIn) do NOT render SVG as a link preview — sharing the URL showed no image.

What

  • assets/images/og-default.src.svg (1200×630 brand) → assets/images/og-default.png (1200×630, 89KB) via rsvg-convert. Reproducible, no external service/secrets.
  • config/_default/params.toml defaultSocialImage → images/og-default.png. Card-thumbnail SVG untouched.
  • Root-cause fix: Blowfish emits the social image via resources.Get .Site.Params.defaultSocialImage + .RelPermalink, which resolves from the assets FS (not static/). A PNG in static/ made resources.Get return nil (no og:image). PNG placed in assets/images/ (project asset overrides theme) → both og:image and twitter:image now emit .png.

Verification

  • built public/index.html → og:image + twitter:image end in .png
  • PNG 1200×630 / 89KB (<250KB)
  • hugo 0 errors; npm run lint clean; npm run test pass; check-links 0 broken; check-perf 0 regressions

Task system (strict 4-layer)

  • BMAD: .planning/initiatives/og-image-raster.md
  • Spec Kit: .specify/og-image-raster.md
  • Beads: .beads/beads.json (T33–T36)
  • GSD: .gsd/plan.md (Phase J)

@dominicusin
feat(og-image-raster): fix social share preview (SVG -> PNG)
74f1e25 
Self-identified defect: the built site's `og:image`/`twitter:image` pointed at
`images/og-default.svg`. Social platforms (X/Telegram/Slack/Discord/FB/LinkedIn)
do NOT render SVG as a link preview, so sharing the URL showed no image.

- Authored `assets/images/og-default.src.svg` (1200×630 brand: title + tagline on
  the `dominicusin` dark scheme) and converted to `assets/images/og-default.png`
  (1200×630, 89KB) via `rsvg-convert`. Reproducible, no external service/secrets.
- Switched `config/_default/params.toml` `defaultSocialImage` to
  `images/og-default.png`. The card-thumbnail SVG is untouched (different role).

Root-cause fix: Blowfish emits the social image via `resources.Get
.Site.Params.defaultSocialImage` + `.RelPermalink`, which resolves from the
**assets** filesystem (not `static/`). The old `.svg` worked only because
`assets/images/og-default.svg` already existed; a PNG in `static/` made
`resources.Get` return nil (no og:image at all). Placing the PNG in `assets/images/`
(project asset overrides theme) restores both `og:image` and `twitter:image`.

Verified: built `public/index.html` → `og:image` + `twitter:image` end in `.png`;
PNG 1200×630 / 89KB (<250KB); `hugo` 0 errors; lint clean; test pass; check-links 0
broken; check-perf 0 regressions.

Task-system (strict 4-layer): BMAD `.planning/initiatives/og-image-raster.md`,
Spec Kit `.specify/og-image-raster.md`, Beads T33–T36, GSD `.gsd/plan.md` (Phase J).
@bolt-new-by-stackblitz
bolt-new-by-stackblitz Bot commented Aug 17, 2026
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@qodo-code-review
qodo-code-review Bot commented Aug 17, 2026
Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@vercel
vercel Bot commented Aug 17, 2026 •
edited
Loading
Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dominicusin-dominicusin.github.io Building Building Preview Aug 17, 2026 4:25am
dominicusin-dominicusin.github.io-lw64 Ready Ready Preview Aug 17, 2026 4:25am
dominicusin-github-io Building Building Preview Aug 17, 2026 4:25am

@coderabbitai
coderabbitai Bot commented Aug 17, 2026
Copy link
Copy Markdown

Warning

Review limit reached

@dominicusin, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 29 minutes

Limit details: You’ve used all 1 included review currently available under your plan.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0feb8b5-9bc6-4fbd-a3fd-e90881ecaaf9

📥 Commits

Reviewing files that changed from the base of the PR and between b1c43a8 and 74f1e25.

⛔ Files ignored due to path filters (2)
  • assets/images/og-default.png is excluded by !**/*.png
  • assets/images/og-default.src.svg is excluded by !**/*.svg
📒 Files selected for processing (5)
  • .beads/beads.json
  • .gsd/plan.md
  • .planning/initiatives/og-image-raster.md
  • .specify/og-image-raster.md
  • config/_default/params.toml

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@vercel
vercel Bot temporarily deployed to Preview – dominicusin-dominicusin.github.io-lw64 August 17, 2026 04:25 Inactive
@dominicusin
dominicusin merged commit 630c960 into main Aug 17, 2026
10 of 17 checks passed
@dominicusin
dominicusin deleted the feat/og-image-raster branch August 17, 2026 04:26
@vercel
vercel Bot temporarily deployed to Preview – dominicusin-github-io August 17, 2026 04:26 Inactive
dominicusin added a commit that referenced this pull request Aug 17, 2026
@dominicusin
chore(beads): T36 done — og-image-raster merged (#114)
d0b1390
@vercel
vercel Bot temporarily deployed to Preview – dominicusin-dominicusin.github.io August 17, 2026 04:33 Inactive
@qodo-code-review qodo-code-review Bot mentioned this pull request Sep 9, 2026
Merged
3 tasks done

This branch was previously deployed

3 inactive deployments
Preview – dominicusin-dominicusin.github.io — 74f1e251 Deployed Aug 17, 2026 by vercel[bot]
Preview – dominicusin-github-io — 74f1e251 Deployed Aug 17, 2026 by vercel[bot]
Preview – dominicusin-dominicusin.github.io-lw64 — 74f1e251 Deployed Aug 17, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@dominicusin
0