Skip to content

Translate CO2e share image footnote - #939

Merged
ngm merged 12 commits into
developfrom
fix-936-co2e-graphic-translation
Oct 26, 2026
Merged

ngm merged 12 commits into
developfrom
fix-936-co2e-graphic-translation

Conversation

@edwh

@edwh edwh commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator

The CO2e equivalence share image is now in the current user's language: the footnote and the "generated by restarters.net" line, in en, fr and fr-BE. Other languages show English instead of translation key names.

  • Missing keys fall back to English. The Vue translator (lang-utils.js) now falls back to English for any key a locale doesn't have, the same as Laravel's fallback_locale. Before, it only fell back when the whole locale was missing, so Italian (and every other locale without the new strings) showed the key name. This applies across the app, not just the share image.
  • Footnote. The background images carry the English footnote, so the canvas covers that strip with the image's own background colour and draws the translated footnote on top. Ranges 1-4 use partials.share_modal_footnote (urban trees), range 5 (hectares) uses partials.share_modal_footnote_hectares (broadleaf seedlings). Range 6 images have no footnote.
  • Branding. "generated by restarters.net" is baked into every range, 6 included. It is covered and redrawn the same way from partials.share_modal_generated_by ("généré par :site" in French). restarters.net is passed in as :site, so it is never translated. Centred below the footnote on square images, bottom right on landscape ones.
  • The font shrinks if a translation is too wide.
  • The cover rectangles were checked against all 268 ImpactRange images: they hold only the background and the baked text.
  • The translation check scans resources/js/misc, where the footnote keys are used, and ignores *.test.js files. Strings it found unused are removed: the two group search placeholders, and partials.emissions_equivalent_consume_{low,high}_explanation (no longer used since 95b4636).
  • Tests: Jest covers the per-key fallback (including plurals and placeholders), the strip layouts against the measured image positions, the footnote key for each range, and the strings in each language.

Screenshots

Close-up of the bottom strip, square (Instagram) and landscape (Facebook), in English, French and Italian:

bottom strips

Square Landscape
French
Italian (English fallback)

Fixes #936

edwh and others added 2 commits October 19, 2026 18:39
The footnote was baked into the background PNGs in English. It is now painted over and redrawn from the share_modal_footnote string (en, fr, fr-BE) in the current locale.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…cover

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@edwh edwh added the preview Deploy a Fly.io preview for this PR label Oct 19, 2026
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ion test

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

Preview: https://restarters-pr-939.fly.dev

✅ Ready - restore and migrations succeeded.

  • Password-protected test environment (usual dev gate password); commit 10e7bf6cad7c1e1a28a81f24c48ea92a012368b7 merged with develop.
  • If you see a "warming up" page, give it a few minutes - it refreshes itself.
  • The preview database is refreshed on every deploy and may reset at any time; anything you create here is disposable.
  • Emails go to shared Mailpit, never to real recipients. Image uploads are disabled.
  • The app suspends when idle; the first request after a pause can take a moment.

@ngm

ngm commented Oct 21, 2026

Copy link
Copy Markdown
Contributor

@edwh Looks great in English and French! However I see in other languages (perhaps if the translation key doesn't exist?) then it just shows the translation key name.

e.g. in Italian:

stats(5)

It also always say 'generated by restarters.net' in English, regardless of language. That's less of an issue though.

@ngm ngm assigned edwh Oct 21, 2026
edwh and others added 4 commits October 23, 2026 14:00
The Vue translator only fell back to English when the whole locale was missing. A key missing from an existing
locale (e.g. a new string in Italian) came back as the key name, which is what showed on the share image. It now
falls back per key, the same as Laravel's fallback_locale.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The line is baked into every ImpactRange image, range 6 included, in English. Cover it and draw it in the user's
language, the same way as the footnote. restarters.net is passed in as :site so it is never translated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
95b4636 stopped using partials.emissions_equivalent_consume_{low,high}_explanation, so translations:check
failed on them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Develop shows them again (4b0c3da), in the info popover beside the CO2e comparison.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@edwh
edwh deployed to preview October 26, 2026 11:21 — with GitHub Actions Active
@sonarqubecloud

Copy link
Copy Markdown

@ngm

ngm commented Oct 26, 2026

Copy link
Copy Markdown
Contributor

Great, looks good to me. The 'generated by' is now translatable, and the text falls back to English if no translation exists.

@ngm
ngm merged commit 88b58fe into develop Oct 26, 2026
5 checks passed

This branch was successfully deployed

1 active deployment
preview — 10e7bf6c Deployed Oct 26, 2026 by edwh via Deploy preview #700
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview Deploy a Fly.io preview for this PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CO2e equivalence shareable graphic is only partially translated

2 participants