@intlayer/docs 9.4.3 → 9.5.0

package/blog/ar/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,352 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "كيفية جعل تطبيق Vite و React الحالي متعدد اللغات (i18n) لاحقاً (دليل i18n لعام 2026)"
+description: "دليل عام 2026 لإضافة دعم تعدد اللغات (i18n) إلى تطبيق Vite و React قائم دون إعادة بناء معقدة. استخراج تلقائي للمحتوى، ترجمة بالذكاء الاصطناعي وباقة مصغرة مع Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - تدويل
+  - ترجمة تطبيق Vite قائم
+  - ترجمة تطبيق React قائم
+  - Intlayer
+  - متعدد اللغات
+  - مترجم
+  - ترجمة الذكاء الاصطناعي
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# كيفية جعل تطبيق Vite و React الحالي متعدد اللغات (i18n) لاحقاً (دليل i18n لعام 2026)
+
+يعد تضمين التدويل (i18n) في مشروع Vite و React منذ البداية أمراً بسيطاً نسبياً. ولكن ماذا يحدث عندما يكون لديك بالفعل تطبيق ناضج ويعمل في بيئة الإنتاج بلغة واحدة، وتحتاج إلى جعله متعدد اللغات **لاحقاً**؟
+
+إذا حاولت القيام بذلك باستخدام المكتبات التقليدية مثل `react-i18next` أو `react-intl`، فأنت تدرك حجم المشقة:
+
+- البحث اليدوي عن النصوص الثابتة داخل مئات ملفات JSX و TSX.
+- إنشاء ملفات JSON المتداخلة يدوياً وابتكار مفاتيح ترجمة عشوائية (`components.header.title` وغيرها).
+- استبدال نصوص الواجهة باستدعاءات دوال الترجمة (`t('...')`).
+- إعادة هيكلة التوجيه من جانب العميل، إدارة الحالة ومنطق تبديل اللغة.
+
+في عام 2026، لا يتعين عليك إعادة كتابة التعليمات البرمجية لتطبيقك. باستخدام **Intlayer**، يمكنك إضافة التدويل إلى تطبيق Vite و React القائم في دقائق معدودة، عبر الاستخراج التلقائي، والترجمة المدعومة بالذكاء الاصطناعي، والتكامل السلس مع Vite.
+
+> هل تبحث عن الدليل الفني الشامل خطوة بخطوة لـ Vite و React؟ راجع وثائقنا المخصصة: [ترجمة Vite و React باستخدام Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+react.md).
+
+## جدول المحتويات
+
+<TOC/>
+
+## معضلة التعديل اللاحق: لماذا يصعب جعل التطبيق القائم متعدد اللغات؟
+
+عند إضافة التدويل إلى تطبيق Vite و React موجود مسبقاً، يواجه المطورون ثلاث عقبات رئيسية:
+
+1. **اضطراب الكود البرمجي**: يتطلب الاستخراج اليدوي للنصوص إلى قواميس JSON تعديل كل ملف مكوّن تقريباً. ينتج عن ذلك فوارق Git هائلة ومخاطر تعارضات الدمج وخلل في التخطيط.
+2. **عبء إدارة المفاتيح**: ابتكار مفاتيح مثل `dashboard.hero.ctaButton` لكل نص يؤدي إلى إبطاء سير العمل وزيادة العبء الذهني مع كل تعديل في الواجهة.
+3. **أعمال الترجمة المرهقة**: بعد استخراج النصوص، يتطلب تعبئة القواميس بـ 5 أو 10 أو 20 لغة عمليات نسخ ولصق لا نهائية أو خدمات ترجمة خارجية مكلفة.
+
+يعالج Intlayer هذه التحديات هندسياً عبر **الاستخراج بمساعدة المترجم**، **القواميس التوضيحية على مستوى المكون**، و**التكامل المباشر مع Vite**.
+
+## الاستخراج التلقائي للمحتوى (وداعاً للبحث اليدوي عن النصوص)
+
+بدلاً من استخراج كل نص يدوي من كود JSX، يوفر Intlayer مسارين فائقَي السهولة:
+
+### الخيار أ: أداة الاستخراج عبر السطر البرمجي (`npx intlayer extract`)
+
+يمكنك تشغيل أداة الاستخراج الخاصة بـ Intlayer مباشرة على كود تطبيقك:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+يقوم هذا الأمر بفحص مكونات React، واكتشاف النصوص المعروضة للمستخدمين، وإنشاء ملفات تعريف المحتوى (`.content.ts`) تلقائياً بجانب كل مكون. يظل منطق المكونات واضحاً وآمناً برمجياً دون الحاجة إلى كتابة مفتاح ترجمة يدوي واحد.
+
+### الخيار ب: مترجم Intlayer (الاستخراج أثناء البناء)
+
+عند تفعيل مترجم Intlayer في إعداداتك، يمكنك ببساطة الاستمرار في كتابة مكوناتك بنصوص عادية بلغتك الافتراضية. في وقت البناء، يستخرج المترجم النص ويدمج المحتوى المترجم تلقائياً:
+
+```tsx fileName="src/App.tsx"
+// اكتب كود React عادي. يستخرج المترجم النصوص تلقائياً
+export default function App() {
+  return (
+    <section>
+      <h1>مرحباً بك في منصتنا</h1>
+      <p>ابدأ استكشاف الميزات الحديثة اليوم.</p>
+    </section>
+  );
+}
+```
+
+في الخلفية، يقوم Intlayer بإنشاء القاموس وربط المكون بالمحتوى المترجم، مما يلغي خطوة إعادة الهيكلة اليدوية بالكامل.
+
+في هذه الحالة، ينشئ ملف إعلان `src/App.content.ts` بالهيكل التالي:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    marhabanBikaFiManasatina: t({
+      ar: "مرحباً بك في منصتنا",
+    }),
+    ibdaIstikshafAlmizat: t({
+      ar: "ابدأ استكشاف الميزات الحديثة اليوم.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## الترجمة المدعومة بالذكاء الاصطناعي مع نموذجك المفضل
+
+بمجرد استخراج المحتوى، لا ينبغي أن تستغرق ترجمته إلى عشرات اللغات أياماً طويلة. يحتوي Intlayer على سطر أوامر مدمج للترجمة بالذكاء الاصطناعي يتصل مباشرة مع OpenAI أو Anthropic أو DeepSeek أو Mistral باستخدام مفاتيح API الخاصة بك:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+قم بتهيئة اللغات ومزود الذكاء الاصطناعي في `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.ARABIC],
+    defaultLocale: Locales.ARABIC,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext: "تطبيق SaaS ولوحة تحكم حديثة مبنية بواسطة Vite و React",
+  },
+};
+
+export default config;
+```
+
+يؤدي تشغيل `npx intlayer fill` إلى ملء ملفات المحتوى بترجمات عالية الجودة لجميع اللغات المحددة:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    marhabanBikaFiManasatina: t({
+      ar: "مرحباً بك في منصتنا",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    ibdaIstikshafAlmizat: t({
+      ar: "ابدأ استكشاف الميزات الحديثة اليوم.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+نظراً لأن Intlayer يمرر سياق التطبيق `applicationContext` إلى النموذج، فإن الترجمات الناتجة تحافظ على المصطلحات التقنية وهوية العلامة التجارية والتفاصيل النحوية بصورة أدق بكثير من الأدوات العادية.
+
+للتحقق من اكتمال كافة النصوص قبل النشر في بيئة الإنتاج:
+
+```bash
+npx intlayer test
+```
+
+## التكامل مع Vite وإعداد الـ Provider
+
+يتطلب دمج Intlayer في Vite مجرد إضافة المكوّن الإضافي إلى `vite.config.ts` وإحاطة المكون الرئيسي بـ `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> بدءاً من Intlayer v9، أصبح المترجم مدمجاً مباشرة في إضافة `intlayer()` ويتم تفعيله تلقائياً عند ضبط `compiler.enabled` في `intlayer.config.ts`.
+
+أحط تطبيقك بـ `IntlayerProvider` في المكون الجذر:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### تغيير اللغة ديناميكياً
+
+قم بتبديل اللغة بسهولة في أي مكان داخل تطبيقك باستخدام خطاف `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## تحسين محركات البحث متعدد اللغات (Sitemap و Robots.txt)
+
+يتضمن Intlayer أدوات مساعدة مثل `generateSitemap` و `getMultilingualUrls` لإنشاء ملفات `sitemap.xml` و `robots.txt` متعددة اللغات ومتوافقة مع محركات البحث لمشاريع Vite الثابتة:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("تم إنشاء ملفات SEO بنجاح.");
+```
+
+أضف خطاف `prebuild` في `package.json` لتشغيل هذا السكربت قبل تنفيذ `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## تعمق أكثر: هل أنت مستعد للتنفيذ خطوة بخطوة؟
+
+قدم هذا الدليل نظرة عامة وشاملة حول كيفية إضافة التدويل إلى تطبيق Vite و React قائم في عام 2026 دون تعقيدات بنية الكود.
+
+إذا كنت مستعداً لتهيئة كل جزء من تطبيقك بالتفصيل، بما في ذلك أمان الأنواع الكامل مع TypeScript والقواميس الديناميكية والمحرر المرئي، تفضل بالانتقال إلى دليلنا التفصيلي:
+
+👉 **[الدليل الكامل لترجمة Vite و React باستخدام Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+react.md)**
+
+## الأسئلة الشائعة (FAQ)
+
+<FAQ>
+
+<Question title="هل يمكنني جعل تطبيق Vite و React متعدد اللغات دون إعادة كتابة كل النصوص يدوياً؟">
+
+نعم. يمكنك تشغيل `npx intlayer extract` لاكتشاف النصوص الثابتة واستخراجها تلقائياً في ملفات تعريف محتوى محلية، أو استخدام مترجم Intlayer لتحويل المكونات أثناء البناء مع استمرارك في كتابة JSX القياسي.
+
+</Question>
+<Question title="كيف يقلل Intlayer من حجم حزمة Vite مقارنة بـ react-i18next أو react-intl؟">
+
+يستخدم Intlayer تعريفات القواميس على مستوى المكون والتحسين باستخدام الماكرو أثناء البناء. لا تتلقى الحزم سوى النصوص المحددة التي تحتاجها المكونات المعروضة على الصفحة بدلاً من استيراد ملفات JSON ضخمة. كما تتيح القواميس الديناميكية تحميل اللغات عند الطلب فقط.
+
+</Question>
+<Question title="هل يمكنني استخدام الذكاء الاصطناعي لترجمة المكونات الحالية إلى لغات متعددة؟">
+
+نعم. يتضمن سطر أوامر Intlayer أمر `npx intlayer fill` الذي يتصل بمزود الذكاء الاصطناعي المفضل لديك (OpenAI, Anthropic, Mistral, DeepSeek) لتوليد ترجمات متوافقة مع السياق لجميع اللغات المطلوبة.
+
+</Question>
+<Question title="هل يمكنني الترحيل من react-i18next أو react-intl دون إعادة كتابة المكونات؟">
+
+نعم. يوفر Intlayer محولات توافق لـ `react-i18next` و `react-intl`، بالإضافة إلى إضافات لمزامنة ملفات ترجمة JSON الحالية في الاتجاهين (`sync-json`).
+
+</Question>
+
+</FAQ>

package/blog/ar/vue-i18n_vs_intlayer.md

@@ -33,15 +33,11 @@ author: aymericzip
 
 > **ملخص**: كلاهما يمكنه تعريب تطبيقات Vue. إذا كنت تريد **محتوى مخصص للمكونات**، **أنواع TypeScript صارمة**، **فحوصات مفاتيح مفقودة أثناء البناء**، **قواميس معزولة بشجرة الاهتزاز (tree-shaken)**، و**مساعدات مدمجة للتوجيه وSEO** بالإضافة إلى **محرر بصري وترجمات مدعومة بالذكاء الاصطناعي**، فإن **Intlayer** هو الخيار الأكثر تكاملاً وحداثة.
 
----
-
 ## التموقع على مستوى عالٍ
 
 - **vue-i18n** - مكتبة التدويل الافتراضية لـ Vue. تنسيق رسائل مرن (نمط ICU)، كتل `<i18n>` في ملفات المكونات المفردة (SFC) للرسائل المحلية، ونظام بيئي كبير. الأمان والصيانة على نطاق واسع تقع بشكل رئيسي على عاتقك.
 - **Intlayer** - نموذج محتوى يركز على المكونات لـ Vue/Vite/Nuxt مع **أنواع TypeScript صارمة**، **فحوصات أثناء وقت البناء**، **عزل القواميس بشجرة الاهتزاز (tree-shaking)**، **مساعدات التوجيه وSEO**، محرر بصري/نظام إدارة محتوى اختياري، وترجمات مدعومة بالذكاء الاصطناعي.
 
----
-
 ## مقارنة الميزات جنبًا إلى جنب (مركزة على Vue)
 
 | الميزة                                                                   | **Intlayer**                                                              | **vue-i18n**                                                           |
@@ -65,8 +61,6 @@ author: aymericzip
 | **قابلية صيانة المشاريع الكبيرة**                                        | ✅ يشجع على هيكلية معيارية وصديقة لأنظمة التصميم                          | ✅ ممكن، لكنه يحتاج إلى انضباط قوي في الملفات/المساحات الاسمية         |
 | **النظام البيئي / المجتمع**                                              | ⚠️ أصغر لكنه ينمو بسرعة                                                   | ✅ كبير وناضج في نظام Vue البيئي                                       |
 
----
-
 ## مقارنة متعمقة
 
 ### 1) البنية القابلة للتوسع والمرونة
@@ -76,8 +70,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** في تطبيقات Vue الكبيرة أو أنظمة التصميم، **المحتوى المعياري** يتوسع بشكل أفضل من الكتالوجات الأحادية.
 
----
-
 ### 2) TypeScript والأمان
 
 - **vue-i18n**: دعم جيد لـ TS؛ **الكتابة الصارمة للمفاتيح** عادة ما تحتاج إلى مخططات/جنيريكس مخصصة واتفاقيات دقيقة.
@@ -85,8 +77,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** الكتابة الصارمة تكتشف المشاكل **قبل** وقت التشغيل.
 
----
-
 ### 3) التعامل مع الترجمات المفقودة
 
 - **vue-i18n**: تحذيرات/استرجاعات **وقت التشغيل** (مثل الرجوع إلى لغة أو مفتاح بديل).
@@ -94,8 +84,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** فرض القواعد وقت البناء يحافظ على واجهة المستخدم في الإنتاج نظيفة ومتسقة.
 
----
-
 ### 4) التوجيه واستراتيجية عناوين URL (Vue Router/Nuxt)
 
 - **كلاهما** يمكن أن يعمل مع مسارات محلية.
@@ -103,8 +91,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** تقليل طبقات الربط المخصصة و**تحسين SEO أنظف** عبر اللغات.
 
----
-
 ### 5) الأداء وسلوك التحميل
 
 - **vue-i18n**: يدعم رسائل اللغة غير المتزامنة؛ تجنب التجميع الزائد مسؤوليتك (قسّم الكتالوجات بعناية).
@@ -112,8 +98,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** حزم أصغر وتشغيل أسرع لتطبيقات Vue متعددة اللغات.
 
----
-
 ### 6) تجربة المطور والأدوات
 
 - **vue-i18n**: وثائق ومجتمع ناضج؛ ستعتمد عادةً على **منصات الترجمة الخارجية** لسير العمل التحريري.
@@ -121,8 +105,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** تقليل تكلفة العمليات ودورة تطوير-محتوى أقصر.
 
----
-
 ### 7) تحسين محركات البحث (SEO)، العرض من جانب الخادم (SSR) والتوليد الثابت للموقع (SSG)
 
 - **كلاهما** يعمل مع Vue SSR وNuxt.
@@ -130,8 +112,6 @@ author: aymericzip
 
 **لماذا هذا مهم:** تحسين SEO دولي بدون تعقيدات خاصة.
 
----
-
 ## لماذا Intlayer؟ (المشكلة والمنهجية)
 
 تبدأ معظم حزم i18n (بما في ذلك **vue-i18n**) من **كتالوجات مركزية**:
@@ -221,8 +201,6 @@ const { greeting } = useIntlayer("component-example");
 - **تجنب المفاتيح الميتة** (المكونات غير المستخدمة لا تستورد المحتوى).
 - **تحسين التحميل** (المكونات المحملة عند الطلب تجلب محتواها معها).
 
----
-
 ## ميزات إضافية لـ Intlayer (ذات صلة بـ Vue)
 
 - **دعم عبر الأُطُر المختلفة**: يعمل مع Vue، Nuxt، Vite، React، Express، والمزيد.
@@ -240,23 +218,17 @@ const { greeting } = useIntlayer("component-example");
 - **خادم MCP وامتداد VSCode**: أتمتة سير عمل i18n والتأليف داخل بيئة التطوير المتكاملة الخاصة بك.
 - **التشغيل البيني**: جسور مع **vue-i18n**، **react-i18next**، و **react-intl** عند الحاجة.
 
----
-
 ## متى تختار أيهما؟
 
 - **اختر vue-i18n** إذا كنت تريد **النهج القياسي لـ Vue**، وتشعر بالراحة في إدارة الكتالوجات/المساحات الاسمية بنفسك، وكان تطبيقك **صغير إلى متوسط الحجم** (أو تعتمد بالفعل على Nuxt i18n).
 - **اختر Intlayer** إذا كنت تقدر **المحتوى المخصص للمكونات**، و**TypeScript الصارم**، و**ضمانات وقت البناء**، و**الاقتصاص الشجري (tree-shaking)**، وأدوات التوجيه/SEO/المحرر المدمجة-خاصةً لـ **قواعد كود Vue/Nuxt الكبيرة والمودولارية**.
 
----
-
 ## التوافقية مع vue-i18n
 
 يمكن لـ `intlayer` أيضًا أن يساعدك في إدارة مساحات أسماء `vue-i18n` الخاصة بك.
 
 باستخدام `intlayer`، يمكنك التصريح عن محتواك بصيغة مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## ملاحظات عملية للترحيل (من vue-i18n إلى Intlayer)
 
 - **ابدأ لكل ميزة على حدة**: انقل مسارًا/عرضًا/مكونًا واحدًا في كل مرة إلى قواميس Intlayer المحلية.
@@ -265,8 +237,6 @@ const { greeting } = useIntlayer("component-example");
 - **اعتمد مساعدي التوجيه/SEO**: قم بتوحيد اكتشاف اللغة وعلامات `hreflang`.
 - **قِس الحزم**: توقع **انخفاض حجم الحزمة** مع استبعاد المحتوى غير المستخدم.
 
----
-
 ## الخلاصة
 
 كلا من **vue-i18n** و **Intlayer** يقومان بتوطين تطبيقات Vue بشكل جيد. الفرق هو **مدى ما يجب عليك بناؤه بنفسك** لتحقيق إعداد قوي وقابل للتوسع:

package/blog/ar/what_is_internationalization.md

@@ -101,8 +101,6 @@ author: aymericzip
 - **الحساسيات الثقافية**  
   قد تحمل الرموز والألوان والرموز معاني مختلفة عبر الثقافات. من المهم تكييف المحتوى البصري والنصي لإحترام التعقيدات الثقافية المحلية.
 
----
-
 ## أفضل الممارسات لتنفيذ i18n
 
 - **خطط مبكرًا**  
@@ -117,8 +115,6 @@ author: aymericzip
 - **إعادة استخدام الترجمات**  
   نظم ملفات الترجمة الخاصة بك لتكون قابلة لإعادة الاستخدام عبر مواقع أو تطبيقات متعددة. على سبيل المثال، إذا كان لديك تذييل أو رأس متعدد اللغات، يمكنك إعداد ملفات ترجمة مخصصة بحيث يمكن تطبيق العناصر المشتركة بسهولة على جميع المشاريع.
 
----
-
 ## إعلان محتوى اللغة مقابل استخراج محتوى من نظام إدارة المحتوى
 
 عند إنشاء موقع ويب، فإن **نظام إدارة محتوى (CMS) مثل WordPress أو Wix أو Drupal يقدم عمومًا قابلية صيانة محسّنة**. خاصةً للمدونات أو صفحات الهبوط، بسبب ميزاتها المدمجة في التدويل.
@@ -136,8 +132,6 @@ author: aymericzip
 
 من المهم اختيار الأداة المناسبة لاحتياجاتك وتخطيط استراتيجيتك للتدويل من البداية. **تقدم Intlayer حلاً جذابًا من خلال الجمع بين إعلان محتوى اللغة ونظام إدارة محتوى غير متصل حيث يتم دمجهما بشكل وثيق، مما يوفر أفضل ما في العالمين.**
 
----
-
 ### راجع قائمة بمكتبات وأدوات i18n حسب التكنولوجيا
 
 إذا كنت تبحث عن قائمة بمكتبات وأدوات i18n حسب التكنولوجيا، تحقق من الموارد التالية:
@@ -155,8 +149,6 @@ author: aymericzip
 - Svelte: [راجع قائمة بمكتبات وأدوات i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [راجع قائمة بمكتبات وأدوات i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## الخاتمة
 
 التدويل (i18n) هو أكثر من مجرد عمل تقني؛ إنه **استثمار استراتيجي** يمكّن برنامجك من التحدث بلغة مستخدميك - حرفياً. من خلال تجريد العناصر الحساسة للغة، واستيعاب الاختلافات اللغوية والثقافية، والتخطيط للتوسع المستقبلي، تمكّن منتجك من الازدهار في السوق العالمية.

package/blog/de/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ Du hast deine App übersetzt. Du hast `/en`, `/fr`, `/es` deployed. Und französ
 
 Die Übersetzung ist die einfache Hälfte. Die schwierige Hälfte besteht darin, Suchmaschinen mitzuteilen, dass diese Seiten die **gleiche Seite in einer anderen Sprache** sind, nicht drei Dokumente, die miteinander konkurrieren. Das ist das, was `hreflang` tut, und hier verlieren die meisten mehrsprachigen Websites stillschweigend ihren Traffic.
 
----
-
 ## Was hreflang wirklich ist
 
 Eine Anmerkung auf einer Seite, die besagt: _diese URL hat äquivalente Versionen dort drüben, für diese Sprachen._
@@ -42,8 +40,6 @@ Es bringt dir zwei Dinge: die richtige Version, die dem richtigen Benutzer angez
 
 Es ist wichtig zu verdeutlichen, was es nicht ist. Es ist **keine Umleitung** — es ist ein Hinweis, und Google kann ihn überschreiben. Es ist **kein Ranking-Boost** — es ändert _welche_ Version rankt, nicht _ob_ du rankst. Und Bing ignoriert es ganz, stattdessen auf `content-language` und Geo-Targeting verlassend.
 
----
-
 ## Wo man es deklariert
 
 Drei Platzierungen, alle gültig. Wähle eine und bleibe dabei — derselbe Cluster, der an zwei Stellen deklariert wird, ist wie Sets auseinanderdriften.
@@ -54,8 +50,6 @@ Drei Platzierungen, alle gültig. Wähle eine und bleibe dabei — derselbe Clus
 
 **HTTP `Link` Header** ist die einzige Option für Nicht-HTML-Dateien wie PDFs.
 
----
-
 ## Die Regeln
 
 ### Selbstreferenz und Gegenseitigkeit
@@ -107,8 +101,6 @@ Was die Leute falsch verstehen, ist seine Bedeutung. `x-default` ist **nicht "di
 
 Zwei Dinge sind wichtig: `x-default` ist ein zusätzlicher Eintrag im Set, kein Ersatz für den selbstreferenzierenden, und wie jeder andere Eintrag muss er identisch auf jeder Seite im Cluster erscheinen.
 
----
-
 ## Die kanonische Falle
 
 Jede lokalisierte Seite muss **ihr eigenes kanonisches Element sein**:
@@ -131,8 +123,6 @@ sagt, dass die französische Seite ein Duplikat ist, das nicht indexiert werden
 
 **Canonical ist selbstreferenziell pro Locale. `hreflang` beschreibt den Cluster.**
 
----
-
 ## URL-Struktur wählen
 
 `hreflang` annotiert URLs, daher kommt die Struktur zuerst.
@@ -149,14 +139,11 @@ Die eine Struktur, die Sie vermeiden sollten: Verschiedene Sprachen auf der **gl
 
 > Intlayer deckt alle drei Optionen durch `routing.mode` und `routing.domains` ab. Siehe [benutzerdefinierte Domains](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/custom_domains.md) und die [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
----
-
 ## Implementierung
 
 Das manuelle Schreiben dieser Tags überlebt den Kontakt mit einer zweiten Sprache nicht. Leiten Sie sie stattdessen von Ihrer Locale-Liste ab.
 
 <Steps>
-
 <Step number={1} title="Emit the cluster auf jeder Seite">
 
 Gleicher Satz überall, canonical pro Locale, absolute URLs, `x-default` inbegriffen.
@@ -245,7 +232,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="Oder verschiebe es alles in die Sitemap">
 
 In großem Maßstab solltest du die Annotationen ganz aus deinen Seiten heraushalten. `generateSitemap` gibt `xhtml:link`-Alternates pro Eintrag aus und liest Locales und Routing-Modus aus deiner Konfiguration:
@@ -268,7 +254,6 @@ Zwei wissenswerte Optionen:
 - `entryPerLocale` (Standard `false`) — standardmäßig trägt ein `<url>`-Eintrag alle Alternates. Beide Formen sind gültig, aber nur eine als `<loc>` aufgelistete URL zählt als _eingereicht_ in der Search Console; Alternate-only-Sprachen bleiben auffindbar, werden aber keinem Sitemap zugeordnet. Durch Aktivierung erhält jede lokalisierte URL einen eigenen Eintrag mit dem vollständigen Alternate-Set wiederholt. Dies vervielfacht die Einträge um die Sprachenanzahl, daher sollte das Limit von 50.000 URLs / 50 MB beachtet werden und bei Überschreitung in einen Sitemap-Index aufgeteilt werden.
 
 </Step>
-
 <Step number={3} title="Überprüfen Sie, was der Crawler erhält">
 
 `hreflang` schlägt lautlos fehl, daher sollten Sie es überprüfen, statt es anzunehmen.
@@ -281,8 +266,6 @@ Für einen mehrsprachigen Crawl überprüft der [Intlayer SEO Scanner](https://i
 
 </Steps>
 
----
-
 ## Checkliste
 
 - [ ] Jedes Locale hat eine unterschiedliche, crawlbare URL
@@ -296,8 +279,6 @@ Für einen mehrsprachigen Crawl überprüft der [Intlayer SEO Scanner](https://i
 - [ ] An genau einer Stelle deklariert
 - [ ] Keine Alternate-Weiterleitungen
 
----
-
 ## Zusammenfassung
 
 `hreflang` ist einfach und unerbittlich. Ein fehlendes Return-Tag, eine relative URL, ein locale-übergreifender Canonical, und der Cluster wird ohne Fehlermeldung irgendwo verworfen. Jedes davon kommt vom manuellen Schreiben der Tags.

package/blog/de/i18n_meaning.md

@@ -92,8 +92,6 @@ Nun, da wir die wahre **i18n Bedeutung** etabliert haben, wie wenden Sie sie an?
 - **Abstrahieren Sie alle benutzerseitigen Texte:** Stellen Sie sicher, dass in Ihren UI-Komponenten kein fest kodierter Text vorhanden ist.
 - **Nutzen Sie ein robustes Übersetzungsmanagementsystem:** Tools wie **Intlayer** schließen die Lücke zwischen Entwicklern und Übersetzern. Intlayer fungiert als Headless CMS, das eng in Ihre Codebasis integriert ist und es Content-Managern ermöglicht, Übersetzungen visuell zu aktualisieren, ohne dass ein Entwickler einen neuen Build auslösen muss.
 
----
-
 ### Liste der i18n-Bibliotheken und Tools pro Technologie anzeigen
 
 Wenn Sie nach einer Liste von i18n-Bibliotheken und Tools pro Technologie suchen, sehen Sie sich die folgenden Ressourcen an:
@@ -112,8 +110,6 @@ Wenn Sie nach einer Liste von i18n-Bibliotheken und Tools pro Technologie suchen
 - Svelte: [Liste der i18n-Bibliotheken und Tools anzeigen](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Liste der i18n-Bibliotheken und Tools anzeigen](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Fazit
 
 Die **i18n Bedeutung** ist ein grundlegendes Konzept für jedes moderne digitale Unternehmen, das auf globale Wirkung abzielt. Weit davon entfernt, nur eine eigenwillige Tech-Abkürzung für "Internationalisierung" zu sein, repräsentiert i18n die technische Architektur, die erforderlich ist, um Ihre Software nahtlos an verschiedene Sprachen, Kulturen und regionale Standards anzupassen.