@intlayer/docs 8.10.0-canary.1 → 8.10.1

package/docs/ar/dictionary/markdown.md

@@ -95,34 +95,34 @@ history:
     ```
 
   </Tab>
-  <Tab label="الاكتشاف التلقائي" value="automatic-detection">
-    إذا كانت السلسلة النصية تحتوي على مؤشرات Markdown شائعة (مثل العناوين والقوائم والروابط وما إلى ذلك) ، فسيقوم Intlayer بتحويلها تلقائيًا.
+  <Tab label="الملفات الخارجية" value="external-files">
+    قم باستيراد ملفات `.md` مباشرة باستخدام وظيفة `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // تمكين الاكتشاف التلقائي لمحتوى Markdown - يمكن تعيينه عالميًا في intlayer.config.ts
       content: {
-        myMarkdownContent: "## عنواني \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          ar: md(file("./myMarkdown.ar.md")),
+        }),
       },
     };
     ```
 
   </Tab>
 
-  <Tab label="الملفات الخارجية" value="external-files">
-    قم باستيراد ملفات `.md` مباشرة باستخدام وظيفة `file`.
+  <Tab label="الاكتشاف التلقائي" value="automatic-detection">
+    إذا كانت السلسلة النصية تحتوي على مؤشرات Markdown شائعة (مثل العناوين والقوائم والروابط وما إلى ذلك) ، فسيقوم Intlayer بتحويلها تلقائيًا.
 
     ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
-
     export default {
       key: "app",
+      contentAutoTransformation: true, // تمكين الاكتشاف التلقائي لمحتوى Markdown - يمكن تعيينه عالميًا في intlayer.config.ts
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          ar: md(file("./myMarkdown.ar.md")),
-        }),
+        myMarkdownContent: "## عنواني \n\nLorem Ipsum",
       },
     };
     ```
@@ -130,8 +130,6 @@ history:
   </Tab>
 </Tabs>
 
----
-
 ## عرض Markdown
 
 يوفر Intlayer طريقتين مستقلتين لعرض Markdown:
@@ -147,7 +145,7 @@ history:
 ### 1. العرض التلقائي (عبر `useIntlayer`)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     يمكن عرض عقد Markdown مباشرة كـ JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,6 +195,57 @@ history:
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    يمكن عرض عقد Markdown مباشرة كـ JSX.
+
+    ```tsx fileName="App.tsx"
+    import { useIntlayer } from "next-intlayer";
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    const AppContent = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div>{myMarkdownContent}</div>;
+    };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // مكون MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > إذا لم يكن `MarkdownProvider` موجودًا ، فسيقوم Intlayer بعرض markdown باستخدام المحلل اللغوي الافتراضي من Markdown إلى JSX.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     في Vue ، يمكن عرض محتوى Markdown باستخدام علامة `component` المضمنة أو مباشرة كعقدة.
@@ -441,7 +490,7 @@ history:
 هذه الأدوات تعرض **فقط سلاسل Markdown الخام** وهي مستقلة عن `useIntlayer`. استخدمها عندما تحتاج إلى عرض Markdown من مصادر أخرى غير قواميسك.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### مكون `<MarkdownRenderer />`
 
@@ -479,6 +528,45 @@ history:
     const jsx = renderMarkdown("# عنواني", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### مكون `<MarkdownRenderer />`
+
+    يعرض سلسلة Markdown مع خيارات محددة.
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# عنواني"}
+    </MarkdownRenderer>
+    ```
+
+    #### خطاف `useMarkdownRenderer()`
+
+    احصل على وظيفة عارض مكونة مسبقًا.
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# عنواني");
+    ```
+
+    #### أداة `renderMarkdown()`
+    أداة مستقلة للعرض خارج المكونات.
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# عنواني", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +696,12 @@ history:
   </Tab>
 </Tabs>
 
----
-
 ## التكوين العالمي باستخدام `MarkdownProvider`
 
 يقوم `MarkdownProvider` (أو ما يعادله في إطار العمل) بتكوين خط أنابيب عرض Markdown لتطبيقك بالكامل. ينطبق هذا على كل من العرض التلقائي `useIntlayer` والأدوات المساعدة. الخيارات المعينة هنا هي الإعدادات الافتراضية — يتجاوزها `.use()` على مستوى العقدة.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +719,7 @@ history:
     );
     ```
 
+
     > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
 
     يمكنك أيضًا استخدام عارض markdown الخاص بك:
@@ -643,6 +730,7 @@ history:
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
           const { renderMarkdown } = await import('react-intlayer/markdown');
           return renderMarkdown(md);
         }}
@@ -654,6 +742,48 @@ history:
 
     > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('next-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -679,6 +809,9 @@ history:
     app.mount("#app");
     ```
 
+
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
     يمكنك أيضًا استخدام عارض markdown الخاص بك:
 
     ```typescript fileName="main.ts"
@@ -720,6 +853,9 @@ history:
     </MarkdownProvider>
     ```
 
+
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
     يمكنك أيضًا استخدام عارض markdown الخاص بك:
 
     ```svelte fileName="App.svelte"
@@ -756,6 +892,9 @@ history:
     );
     ```
 
+
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
     يمكنك أيضًا استخدام عارض markdown الخاص بك:
 
     ```tsx fileName="AppProvider.tsx"
@@ -792,6 +931,9 @@ history:
     );
     ```
 
+
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
     يمكنك أيضًا استخدام عارض markdown الخاص بك:
 
     ```tsx fileName="AppProvider.tsx"
@@ -835,3 +977,191 @@ history:
 
   </Tab>
 </Tabs>
+
+## التعليق (Suspense)
+
+يتم تحميل محرك Markdown في Intlayer ديناميكيًا. على الرغم من تحسينه، يبلغ حجم الجزء الأساسي للمحلل حوالي 55 كيلوبايت. يؤدي تحميل هذا بشكل متزامن إلى تأخير عرض الصفحة الأولي ويقلل من سرعة عرض المحتوى الأول (FCP).
+
+لمنع حظر واجهة المستخدم، يتكامل Intlayer مع واجهة برمجة تطبيقات React Suspense. حيث يقوم بجلب المحلل في الخلفية ويرمي Promise أثناء التنزيل.
+
+قم بتغليف أي مكون يعرض Intlayer Markdown في حدود `<Suspense>`. يعرض هذا حالة احتياطية محلية أثناء تنزيل الجزء، مما يسمح لبقية DOM الخاص بك بالعرض على الفور.
+
+تحذير: إذا لم تقم بتوفير حدود `<Suspense>`، سيقوم React بالتعليق على مستوى الجذر أو حظر شجرة المكونات بأكملها من العرض حتى يتم تحميل جزء الـ 55 كيلوبايت بالكامل.
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+في Next.js App Router، يمكنك استخدام إما React `Suspense` لمكونات العميل أو ملف `loading.tsx` لمكونات الخادم.
+
+**مكون العميل:**
+
+```tsx fileName="components/MyComponent.tsx"
+"use client";
+import { useIntlayer } from "next-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+**مكون الخادم مع `loading.tsx`:**
+
+```tsx fileName="app/loading.tsx"
+export default function Loading() {
+  return <div>Loading...</div>;
+}
+```
+
+```tsx fileName="app/page.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+const MyPage = () => {
+  const markdownContent = useIntlayer("my-markdown");
+  return <div>{markdownContent}</div>;
+};
+
+export default MyPage;
+```
+
+  </Tab>
+
+  <Tab label="React" value="react">
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+ 
+  <Tab label="Vue" value="vue">
+
+يحتوي Vue على مكون `<Suspense>` مضمن. قم بتغليف المكون الذي يعرض محتوى Markdown في حدود `<Suspense>`.
+
+```vue fileName="MyComponent.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { markdownContent } = useIntlayer("my-markdown");
+</script>
+
+<template>
+  <Suspense>
+    <component :is="markdownContent" />
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+لا يحتوي Svelte على واجهة برمجة تطبيقات Suspense مماثلة. استخدم كتلة `{#await}` للتعامل مع العرض غير المتزامن لمحتوى Markdown.
+
+```svelte fileName="MyComponent.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my-markdown");
+</script>
+
+{#await $content.markdownContent}
+  <div>Loading...</div>
+{:then rendered}
+  {@html rendered}
+{/await}
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+يدعم Preact واجهة برمجة تطبيقات Suspense الخاصة بـ React عبر `preact/compat`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "preact-intlayer";
+import { Suspense } from "preact/compat";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+يحتوي Solid على مكون `<Suspense>` الخاص به من `solid-js`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "solid-intlayer";
+import { Suspense } from "solid-js";
+
+const MyComponent = () => {
+  const { markdownContent } = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+لا يحتوي Angular على واجهة برمجة تطبيقات Suspense. استخدم طرق العرض المؤجلة (`@defer`) للتعامل مع محتوى Markdown المحمل ببطء (يتطلب Angular 17+).
+
+```typescript fileName="my.component.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my",
+  template: `
+    @defer {
+      <div [innerHTML]="content().markdownContent"></div>
+    } @loading {
+      <div>Loading...</div>
+    }
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("my-markdown");
+}
+```
+
+  </Tab>
+</Tabs>
+
+---
+
+## مرجع الخيارات
+
+يمكن تمرير هذه الخيارات إلى `MarkdownProvider` و `MarkdownRenderer` و `useMarkdownRenderer` و `renderMarkdown`.
+
+| Option                | Type        | Default | الوصف                                                                                 |
+| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------ |
+| `forceBlock`          | `boolean`   | `false` | يجبر الإخراج على الالتفاف في عنصر على مستوى الكتلة (مثل `<div>`).                     |
+| `forceInline`         | `boolean`   | `false` | يجبر الإخراج على الالتفاف في عنصر مضمن (مثل `<span>`).                                |
+| `tagfilter`           | `boolean`   | `true`  | يمكّن عامل تصفية علامات GitHub لتحسين الأمان عن طريق إزالة علامات HTML الخطيرة.       |
+| `preserveFrontmatter` | `boolean`   | `false` | إذا كان `true`، فلن يتم إزالة البيانات الأولية (frontmatter) في بداية سلسلة Markdown. |
+| `components`          | `Overrides` | `{}`    | خريطة لعلامات HTML إلى مكونات مخصصة (مثل `{ h1: MyHeading }`).                        |
+| `wrapper`             | `Component` | `null`  | مكون مخصص لتغليف Markdown المعروض.                                                    |
+| `renderMarkdown`      | `Function`  | `null`  | وظيفة عرض مخصصة لاستبدال مترجم Markdown الافتراضي بالكامل.                            |

package/docs/ar/interest_of_intlayer.md

@@ -224,7 +224,7 @@ export const ComponentExample = () => {
 
 تعد نجوم GitHub مؤشرًا قويًا على شعبية المشروع وثقة المجتمع وأهميته على المدى الطويل. على الرغم من أنها ليست مقياسًا مباشرًا للجودة التقنية، إلا أنها تعكس عدد المطورين الذين يجدون المشروع مفيدًا ويتابعون تقدمه ومن المحتمل أن يتبنوه. لتقدير قيمة المشروع، تساعد النجوم في مقارنة الجاذبية عبر البدائل وتوفر رؤى حول نمو النظام البيئي.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---
 

package/docs/bn/interest_of_intlayer.md

@@ -224,7 +224,7 @@ export const ComponentExample = () => {
 
 GitHub স্টার হলো একটি প্রজেক্টের জনপ্রিয়তা, সম্প্রদায়ের বিশ্বাস এবং দীর্ঘমেয়াদী প্রাসঙ্গিকতার একটি শক্তিশালী সূচক। যদিও এটি প্রযুক্তিগত মানের সরাসরি পরিমাপ নয়, তবে এটি প্রতিফলিত করে যে কতজন ডেভেলপার প্রজেক্টটিকে দরকারী মনে করেন, এর অগ্রগতি অনুসরণ করেন এবং এটি গ্রহণ করার সম্ভাবনা রয়েছে। একটি প্রজেক্টের মূল্য অনুমানের জন্য, স্টারগুলি বিকল্পগুলির মধ্যে ট্র্যাকশন তুলনা করতে সাহায্য করে এবং ইকোসিস্টেমের বৃদ্ধি সম্পর্কে ধারণা প্রদান করে।
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---
 

package/docs/cs/interest_of_intlayer.md

@@ -224,7 +224,7 @@ Tento přístup vám umožňuje:
 
 Hvězdičky na GitHubu jsou silným ukazatelem popularity projektu, důvěry komunity a dlouhodobé relevance. Přestože nejsou přímým měřítkem technické kvality, odrážejí, kolik vývojářů považuje projekt za užitečný, sleduje jeho pokrok a pravděpodobně jej přijme. Pro odhad hodnoty projektu pomáhají hvězdičky porovnat zájem o alternativy a poskytují náhled na růst ekosystému.
 
-[![Star History Chart](https://api.star-history.com/svg?repos=formatjs/formatjs&repos=i18next/react-i18next&repos=i18next/i18next&repos=i18next/next-i18next&repos=lingui/js-lingui&repos=amannn/next-intl&repos=intlify/vue-i18n&repo=opral/paraglide-js&repos=aymericzip/intlayer&repos=opral/inlang&type=Date)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---