Show banner translation feature#1530
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an “outdated translation” warning banner for non-English tutorial pages by consulting a generated translation-status manifest, and introduces automation to keep that manifest up to date when English tutorials change.
Changes:
- Added
checkTranslationBanner()utility that readspublic/translation-status/<contentType>.jsonand determines whether to show an outdated/missing banner for a locale. - Integrated the banner into
TutorialLayout.astroso it renders above tutorial content when indicated. - Introduced an initial translation-status manifest and a GitHub Actions workflow intended to update it automatically.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/utils/translationBanner.ts |
New server-side utility that computes the English URL and checks a cached manifest for outdated/missing translations. |
src/layouts/TutorialLayout.astro |
Calls the banner check during render and conditionally shows the banner. |
src/components/OutdatedTranslationBanner/index.astro |
New banner UI component with localized copy and links to the English page and contribution guide. |
public/translation-status/tutorials.json |
Initial manifest data for tutorial translation status. |
.github/workflows/translation-sync.yml |
New workflow intended to run a translation tracker and commit updated manifest data. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const englishPath = currentPathname.replace(`${currentLocale}/`, '/'); | ||
| const englishUrl = `${origin}${englishPath}`; |
| - name: Run translation tracker | ||
| uses: ./.github/actions/translation-tracker | ||
| with: | ||
| github-token: ${{ secrets.GITHUB_TOKEN }} |
| run: | | ||
| git config user.name "github-actions[bot]" | ||
| git config user.email "github-actions[bot]@users.noreply.github.com" | ||
| git add public/translation/status/ |
| on: | ||
| push: | ||
| branches: [main] | ||
| paths: | ||
| - 'src/content/tutorials/en/**' | ||
| pull_request: | ||
| branches: [main] | ||
| paths: | ||
| - 'src/content/tutorials/en/**' | ||
| workflow_dispatch: |
|
Hi @kramosss , sorry I missed your comment on the issue - please feel free to @ me on the #codeday channel in Discord! Plase do review the linked issue #1000 in the original description; a lot of this was adde on Eg, I have no had time to review this closely, but here is the banner component already introduced that should also be used, unless you find a bug with it: https://github.com/processing/p5.js-website/blob/v1/src/components/OutdatedTranslationBanner/index.astro Thanks for your work on this! (Lastly: since I see the copilot reviews I'd also like to draw your attention to the ai usage policy, FYI.) |
Addresses Issue #1329
Summary
Non-English tutorial pages don't currently warn readers when their translation is out of date compared to the English version. This PR adds an outdated translation banner that appears on tutorial pages when the translation is known to be outdated.
Changes
src/components/OutdatedTranslationBanner/index.astro- New banner component with localized copy fores,hi,ko, andzh-Hans. Links to the English page and to the contributing guide.src/utils/translationBanner.ts- Utility that reads a JSON manifest (public/translation-status/tutorials.json) to determine if a given tutorial is outdated or missing.src/layouts/TutorialLayout.astro- Integrates the banner check and conditionally renders the banner above tutorial content..github/workflows/translation-sync.yml- New GitHub Actions workflow that runs the translation tracker when English tutorial content changes onmain, and commits an updated status manifest.public/translation-status/tutorials.json- Initial mainfest marking thevariables-and-changetutorial as outdated forhi.