feat: add Arabic-first i18n with locale switcher by abdelrhmanehab10 · Pull Request #21 · BLEU-IO/BLEU-Website

abdelrhmanehab10 · 2026-04-07T23:10:00Z

Summary

Closes #17

This PR adds an Arabic-first internationalization flow for the BLEU website.

What changed

added Arabic-first routing:
- / for Arabic
- /en/ for English
added a language switcher in the navbar
translated shared UI copy to Arabic and English
generated localized versions of shared pages and blog post routes
added RTL support for Arabic UI
kept authored blog content unchanged
forced post metadata and tags to render LTR for readability on Arabic post pages
updated contribute links to point to the localized contributing page instead of GitHub
added build-time translation validation and localized build verification

Technical notes

uses i18next with split JSON translation files
uses shared Eleventy templates for both locales
validates translation key parity during build
verifies localized output routes during build

How to test

Run npm install
Run npm run build
Run npm run dev
Verify these routes:
- /
- /en/
- /blogs/
- /en/blogs/
Verify the language switcher maps between equivalent pages
Verify blog cards appear in both Arabic and English listing pages
Verify Arabic pages use RTL UI
Verify blog post metadata and tags remain LTR on Arabic post pages
Verify contribute links open the localized contributing

Scope notes

shared UI is translated
authored blog content, titles, excerpts, and tags remain as-authored
third-party widget UI is only localized where supported

Copilot

Pull request overview

This PR introduces an Arabic-first internationalization setup for the Eleventy site, with / serving Arabic and /en/ serving English, plus shared translated UI and RTL support.

Changes:

Added i18next-based build-time i18n loading + translation parity validation, with per-locale page generation via Eleventy pagination.
Updated templates (home, blogs, contributing, layout/components) to use translation keys and locale-aware URLs.
Added RTL/LTR styling adjustments, a navbar language switcher, and build verification scripts to ensure localized outputs exist.

Reviewed changes

Copilot reviewed 34 out of 35 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`.eleventy.js`	Initializes i18n globals (`t`, `localeUrl`) and validates dictionaries during build.
`src/i18n/index.js`	Loads translation resources, validates parity, and localizes URLs.
`src/_data/locales.js`	Defines supported locales and routing prefixes.
`src/index.njk` + `src/index.11tydata.js`	Converts home page to localized metadata + localized routing.
`src/blogs.njk` + `src/blogs.11tydata.js`	Converts blogs listing page to localized metadata + localized routing.
`content/blogs/blogs.11tydata.js`	Generates localized blog post routes for both locales.
`src/contributing.njk` + `src/contributing.11tydata.js`	Localizes the contributing page and routes.
`src/_includes/layouts/base.njk`	Adds locale-aware `<html lang/dir>`, localized meta, and hreflang alternates.
`src/_includes/layouts/blog.njk`	Localizes blog UI strings and improves RTL/LTR handling for metadata/tags.
`src/_includes/components/*`	Localizes header/footer/widget/giscus and adds a language switcher.
`src/assets/css/input.css`	Adds RTL support, bidi handling, and language switcher styling; adds Arabic/Latin fonts.
`src/assets/js/main.js`	Adds language switcher navigation + stores locale; keeps tag filtering enhancement.
`scripts/check-i18n.js` + `scripts/verify-localized-build.js`	Adds translation validation and localized output verification during build.
`package.json` + `package-lock.json`	Adds i18next dependency and build steps for i18n validation/verification.
`src/_data/site.json`	Removes hardcoded tagline/description in favor of translated equivalents.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/index.njk

Copilot · 2026-04-08T06:10:39Z

src/blogs.njk

-permalink: /blogs/
 ---

+{% set posts = collections.blogs %}


Same issue as the home page: iterating over collections.blogs will likely render each blog post twice (Arabic + English generated pages). Filter the collection by post.data.locale === locale (or create per-locale collections) so /blogs/ and /en/blogs/ show a single set of posts.

Suggested change

{% set posts = collections.blogs %}

{% set posts = (collections.blogs or []) | selectattr("data.locale", "equalto", locale) | list %}

I validated this one as well, and it does not reproduce with the current Eleventy setup.
collections.blogs is built from the source markdown files in .eleventy.js, so it is not currently doubled by localized output generation. I verified the generated listing pages and both of these render a single set of posts:

_site/blogs/index.html → 3 cards

_site/en/blogs/index.html → 3 cards

So /blogs/ and /en/blogs/ are not rendering duplicate posts in the current implementation. Because of that, I’m not applying the suggested locale filter here.

Copilot · 2026-04-08T06:10:40Z

src/_includes/layouts/blog.njk

-    <a 
-      href="https://github.com/{{ site.repo }}/edit/main/content/blogs/{{ page.fileSlug }}.md"
+    <a
+      href="https://github.com/{{ site.repo }}/edit/master/content/blogs/{{ page.fileSlug }}.md"


The “Edit on GitHub” link switched from /edit/main/... to /edit/master/.... If the repository default branch is main (as previously assumed), this link will 404. Consider reverting to main or making the branch configurable (e.g., site.defaultBranch).

Suggested change

href="https://github.com/{{ site.repo }}/edit/master/content/blogs/{{ page.fileSlug }}.md"

href="https://github.com/{{ site.repo }}/edit/main/content/blogs/{{ page.fileSlug }}.md"

I validated this against the local git metadata, and master is the current default branch in this repository context.

Local refs show:

remotes/origin/HEAD -> origin/master

remotes/origin/master

remotes/upstream/master

So switching the edit link to master was intentional and matches the branch this repo is currently using. Because of that, I’m not reverting this to main.

src/_includes/layouts/blog.njk

src/assets/css/input.css

fahdfady

Really nice work overall. And the font is really cool!
I just had some comments on the translation itself. We can work on this together and get this merged.

fahdfady · 2026-04-08T15:19:47Z

src/i18n/ar/home.json

+    "title": "انضم إلى ديسكورد الخاص بنا",
+    "members": "عضو",
+    "online": "متصل الآن",
+    "joinServer": "انضم إلى الخادم"


كلمة "سيرفر" منطقية أكتر من "الخادم" .. على الأقل في السياق الحالي .. كلمة خادم لا تستخدم إطلاقا على حد احتكاكي.

تمام عملتها دي

fahdfady · 2026-04-08T15:21:56Z

src/i18n/ar/home.json

+    "description": "منصة BLEU المجتمعية لمشاركة المعرفة، والتعلّم، وبناء مستقبل التقنية معًا."
+  },
+  "hero": {
+    "title": "نبني ونتعلّم ونستكشف ونتّحد",


ترجمة ممتازة
حقيقي ممكن اكون أمضيت بعض الوقت في محاولة لترجمة BLEU
هل في إمكانية نضيف بخط صغير تحتها الجملة الأصلية بالإنجليزية؟
Building Learning Exploring Uniting
لو في إمكانية تمام. لو شعرت إن التعديل ده خارج حدود الـ PR
ممكن نتخطاه ونركز في الباقي

تمام عملتها برده

fahdfady · 2026-04-08T15:23:03Z

src/i18n/ar/home.json

+        "description": "انسخ المستودع وأضف ملف Markdown الخاص بك داخل content/blogs/."
+      },
+      "pr": {
+        "title": "افتح طلب سحب",


كلمة "طلب سحب" غريبة جدا بالنسبة لي. لا أستطيع في التفكير لمقابل ليها بالعربية لكن أنا مستنكر جدا الجملة دي. محتاجين نفكر لها في بديل. عندك فكرة تانية؟

ممكن نسيب PR بالأنجليزي تبقي افتح PR اي رأيك؟

fahdfady · 2026-04-08T15:23:41Z

src/i18n/ar/home.json

+        "description": "أرسل طلب السحب الخاص بك. سيقوم المجتمع بمراجعته وتقديم الملاحظات."
+      },
+      "publish": {
+        "title": "الدمج = النشر",


وكذلك مع كلمة دمج. مع إنها ترجمة جيدة لـ Merge
ولكنها في وجهة نظري ترجمة حرفية .. ممكن نشتغل عليها أكتر في ظني ونطلع بحاجة دقيقة أكتر

ممكن نبدلها بالنشر بما انها بتنشر المقالة؟

fahdfady · 2026-04-08T15:24:47Z

src/i18n/ar/common.json

@@ -0,0 +1,29 @@
+{
+  "site": {
+    "communityLabel": "المجتمع",


من المفترض تتتكتب "مجتمع" بدون ألف ولام التعريف
لأنها في السياق الكامل "مجتمع بلو" وليس "المجتمع بلو"

fahdfady · 2026-04-08T15:27:01Z

src/i18n/ar/blogs.json

+    "label": "التصفية حسب الوسم:"
+  },
+  "empty": {
+    "title": "لا توجد مقالات منشورة بعد.",


"مدونات" وليس مقالات"

غيرتها فالويبسايت كله

fahdfady · 2026-04-08T15:27:02Z

src/i18n/ar/blogs.json

+    "submitViaPr": "أرسل مقالة عبر طلب سحب"
+  },
+  "filter": {
+    "label": "التصفية حسب الوسم:"


محتاجين نشتغل برضو على كلمة "الوسم"

تصنيف حلوه؟

fahdfady · 2026-04-08T15:29:25Z

src/i18n/en/contributing.json

+    "guideline3": "Include code examples where helpful",
+    "guideline4": "Use clear, descriptive titles",
+    "guideline5": "Add a thumbnail image if possible (16:9 ratio recommended)",
+    "guideline6": "Images should be added to /src/assets/images/",


code block for /src/assets/images/

fahdfady · 2026-04-08T15:29:34Z

src/i18n/ar/contributing.json

+    "guideline3": "أضف أمثلة برمجية عند الحاجة",
+    "guideline4": "استخدم عناوين واضحة ومعبرة",
+    "guideline5": "أضف صورة مصغرة إن أمكن (يُفضّل نسبة 16:9)",
+    "guideline6": "أضف الصور داخل /src/assets/images/",


code block for /src/assets/images/

عملتها دي برده

feat: add Arabic-first i18n with locale switcher

af006d1

fahdfady requested review from AbdalrahmanWael, Copilot, fahdfady and hossamkhero April 8, 2026 06:05

Copilot started reviewing on behalf of fahdfady April 8, 2026 06:05 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

abdelrhmanehab10 added 2 commits April 8, 2026 10:55

fix: use ISO date for blog post datetime attribute

40ee2e9

perf: move font loading from CSS import to head

f7edec2

fahdfady requested changes Apr 8, 2026

View reviewed changes

chore: refine localized copy and contributing content

ba7a9d0

	{% set posts = collections.blogs %}
	{% set posts = (collections.blogs or []) \| selectattr("data.locale", "equalto", locale) \| list %}

	href="https://github.com/{{ site.repo }}/edit/master/content/blogs/{{ page.fileSlug }}.md"
	href="https://github.com/{{ site.repo }}/edit/main/content/blogs/{{ page.fileSlug }}.md"

Conversation

abdelrhmanehab10 commented Apr 7, 2026

Summary

What changed

Technical notes

How to test

Scope notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

fahdfady left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants