@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/docs/en/intlayer_with_nextjs_16.md

@@ -27,8 +27,25 @@ history:
 
 # Translate your Next.js 16 website using Intlayer | Internationalization (i18n)
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
 <iframe title="The best i18n solution for Next.js? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-16-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
 See [Application Template](https://github.com/aymericzip/intlayer-next-16-template) on GitHub.
 
 ## Table of Contents

package/docs/en/intlayer_with_nuxt.md

@@ -44,6 +44,14 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Nuxt Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:

package/docs/en/intlayer_with_react_native+expo.md

@@ -26,8 +26,6 @@ history:
 
 # Translate your React Native and Expo website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-react-native-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -47,6 +45,16 @@ With Intlayer, you can:
 
 ## Step 1: Install Dependencies
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-native-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-react-native-template) on GitHub.
+
 From your React Native project, install the following packages:
 
 ```bash packageManager="npm"

package/docs/en/intlayer_with_react_router_v7.md

@@ -51,6 +51,14 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a React Router v7 Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-router-v7-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using your preferred package manager:

package/docs/en/intlayer_with_tanstack.md

@@ -50,6 +50,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Tanstack Start Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-tanstack-start-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-tanstack-start-template) on GitHub.
+
 ### Step 1: Create Project
 
 Start by creating a new TanStack Start project by following the [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) guide on the TanStack Start website.

package/docs/en/intlayer_with_vite+preact.md

@@ -28,8 +28,6 @@ history:
 
 > This package is in development. See the [issue](https://github.com/aymericzip/intlayer/issues/118) for more information. Show your interest in Intlayer for Preact by liking the issue
 
-See [Application Template](https://github.com/aymericzip/intlayer-vite-preact-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -49,6 +47,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and Preact Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-preact-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-preact-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:

package/docs/en/intlayer_with_vite+react.md

@@ -25,10 +25,6 @@ history:
 
 # Translate your Vite and React website using Intlayer | Internationalization (i18n)
 
-<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-See [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -48,6 +44,27 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and React Application
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-react-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:

package/docs/en/intlayer_with_vite+vue.md

@@ -23,8 +23,6 @@ history:
 
 # Translate your Vite and Vue website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-vite-vue-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -44,6 +42,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and Vue Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-vue-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-vue-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:

package/docs/en-GB/component_i18n.md

@@ -181,6 +181,6 @@ See the comparisons and patterns in the Next.js-focused roundup: https://intlaye
 - React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
 - TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
 - Next.js setup: https://intlayer.org/doc/environment/nextjs
-- Why Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+- Why Intlayer vs. next-intl vs. next-i18next - https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
 
 These pages include end-to-end setup, providers, routing, and SEO helpers.

package/docs/en-GB/configuration.md

@@ -39,6 +39,12 @@ Intlayer configuration files allow customisation of various aspects of the plugi
 
 ---
 
+## Table of Contents
+
+<TOC/>
+
+---
+
 ## Configuration File Support
 
 Intlayer accepts JSON, JS, MJS, and TS configuration file formats:

package/docs/en-GB/intlayer_cli.md

@@ -27,6 +27,14 @@ history:
 
 # Intlayer CLI
 
+---
+
+## Table of Contents
+
+<TOC/>
+
+---
+
 ## Install Package
 
 Install the necessary packages using npm:
@@ -373,7 +381,6 @@ npx intlayer doc translate
   > Example: `npx intlayer doc translate --excluded-glob-pattern "docs/internal/**"`
 
 - **`--skip-if-modified-before [skipIfModifiedBefore]`**: Skip the file if it has been modified before the specified time.
-
   - Can be an absolute time such as "2025-12-05" (string or Date)
   - Can be a relative time in ms `1 * 60 * 60 * 1000` (1 hour)
   - This option checks the update time of the file using the `fs.stat` method. Therefore, it could be affected by Git or other tools that modify the file.
@@ -381,7 +388,6 @@ npx intlayer doc translate
   > Example: `npx intlayer doc translate --skip-if-modified-before "2025-12-05"`
 
 - **`--skip-if-modified-after [skipIfModifiedAfter]`**: Skip the file if it has been modified within the specified time.
-
   - Can be an absolute time such as "2025-12-05" (string or Date)
   - Can be a relative time in ms `1 * 60 * 60 * 1000` (1 hour)
   - This option checks the update time of the file using the `fs.stat` method. Therefore, it could be affected by Git or other tools that modify the file.
@@ -432,7 +438,6 @@ npx intlayer doc translate
 **Custom instructions options:**
 
 - **`--custom-instructions [customInstructions]`**: Custom instructions added to the prompt. Useful to apply specific rules regarding formatting, URLs translation, etc.
-
   - Can be an absolute time such as "2025-12-05" (string or Date)
   - Can be a relative time in ms `1 * 60 * 60 * 1000` (1 hour)
   - This option checks the update time of the file using the `fs.stat` method. So it could be impacted by Git or other tools that modify the file.

package/docs/en-GB/intlayer_with_angular.md

@@ -278,26 +278,26 @@ const appContent = {
       es: "Hola",
     }),
     congratulations: t({
-      en-GB: "Congratulations! Your app is running.",
+      "en-GB": "Congratulations! Your app is running.",
       en: "Congratulations! Your app is running.",
       fr: "Félicitations! Votre application est en cours d'exécution. ",
       es: "¡Felicidades! Tu aplicación está en ejecución.",
     }),
     exploreDocs: t({
-      en-GB: "Explore the Docs",
+      "en-GB": "Explore the Docs",
       en: "Explore the Docs",
       fr: "Explorer les Docs",
       es: "Explorar los Docs",
     }),
     learnWithTutorials: t({
-      en-GB: "Learn with Tutorials",
+      "en-GB": "Learn with Tutorials",
       en: "Learn with Tutorials",
       fr: "Apprendre avec les Tutoriels",
       es: "Aprender con los Tutorios",
     }),
     cliDocs: "CLI Docs",
     angularLanguageService: t({
-      en-GB: "Angular Language Service",
+      "en-GB": "Angular Language Service",
       en: "Angular Language Service",
       fr: "Service de Langage Angular",
       es: "Servicio de Lenguaje Angular",

package/docs/en-GB/intlayer_with_express.md

@@ -129,7 +129,7 @@ const indexContent = {
   key: "index",
   content: {
     exampleOfContent: t({
-      en-GB: "Example of returned content in English",
+      "en-GB": "Example of returned content in English",
       en: "Example of returned content in English",
       fr: "Exemple de contenu renvoyé en français",
       "es-ES": "Ejemplo de contenido devuelto en español (España)",
@@ -149,7 +149,7 @@ const indexContent = {
   key: "index",
   content: {
     exampleOfContent: t({
-      en-GB: "Example of returned content in English",
+      "en-GB": "Example of returned content in English",
       en: "Example of returned content in English",
       fr: "Exemple de contenu renvoyé en français",
       "es-ES": "Ejemplo de contenido devuelto en español (España)",
@@ -222,7 +222,7 @@ app.use(intlayer());
 app.get("/t_example", (_req, res) => {
   res.send(
     t({
-      en-GB: "Example of returned content in English",
+      "en-GB": "Example of returned content in English",
       en: "Example of returned content in English",
       fr: "Exemple de contenu renvoyé en français",
       "es-ES": "Ejemplo de contenido devuelto en español (España)",
@@ -257,7 +257,7 @@ app.use(intlayer());
 app.get("/t_example", (_req, res) => {
   res.send(
     t({
-      en-GB: "Example of returned content in English",
+      "en-GB": "Example of returned content in English",
       en: "Example of returned content in English",
       fr: "Exemple de contenu renvoyé en français",
       "es-ES": "Ejemplo de contenido devuelto en español (España)",

package/docs/en-GB/intlayer_with_lynx+react.md

@@ -224,28 +224,28 @@ const appContent = {
   content: {
     title: "React",
     subtitle: t({
-      en-GB: "on Lynx",
+      "en-GB": "on Lynx",
       en: "on Lynx",
       fr: "sur Lynx",
       fr: "sur Lynx",
       es: "en Lynx",
     }),
     description: t({
-      en-GB: "Tap the logo and have fun!",
+      "en-GB": "Tap the logo and have fun!",
       en: "Tap the logo and have fun!",
       fr: "Appuyez sur le logo et amusez-vous!",
       es: "¡Toca el logo y diviértete!",
     }),
     hint: [
       t({
-        en-GB: "Edit",
+        "en-GB": "Edit",
         en: "Edit",
         fr: "Modifier",
         es: "Editar",
       }),
       " src/App.tsx ",
       t({
-        en-GB: "to see updates!",
+        "en-GB": "to see updates!",
         en: "to see updates!",
         fr: "pour voir les mises à jour!",
         es: "para ver actualizaciones!",
@@ -265,27 +265,27 @@ const appContent = {
   content: {
     title: "React",
     subtitle: t({
-      en-GB: "on Lynx",
+      "en-GB": "on Lynx",
       en: "on Lynx",
       fr: "sur Lynx",
       es: "en Lynx",
     }),
     description: t({
-      en-GB: "Tap the logo and have fun!",
+      "en-GB": "Tap the logo and have fun!",
       en: "Tap the logo and have fun!",
       fr: "Appuyez sur le logo et amusez-vous!",
       es: "¡Toca el logo y diviértete!",
     }),
     hint: [
       t({
-        en-GB: "Edit",
+        "en-GB": "Edit",
         en: "Edit",
         fr: "Modifier",
         es: "Editar",
       }),
       " src/App.tsx ",
       t({
-        en-GB: "to see updates!",
+        "en-GB": "to see updates!",
         en: "to see updates!",
         fr: "pour voir les mises à jour!",
         es: "para ver actualizaciones!",
@@ -306,27 +306,27 @@ const appContent = {
   content: {
     title: "React",
     subtitle: t({
-      en-GB: "on Lynx",
+      "en-GB": "on Lynx",
       en: "on Lynx",
       fr: "sur Lynx",
       es: "en Lynx",
     }),
     description: t({
-      en-GB: "Tap the logo and have fun!",
+      "en-GB": "Tap the logo and have fun!",
       en: "Tap the logo and have fun!",
       fr: "Appuyez sur le logo et amusez-vous!",
       es: "¡Toca el logo y diviértete!",
     }),
     hint: [
       t({
-        en-GB: "Edit",
+        "en-GB": "Edit",
         en: "Edit",
         fr: "Modifier",
         es: "Editar",
       }),
       " src/App.tsx ",
       t({
-        en-GB: "to see updates!",
+        "en-GB": "to see updates!",
         en: "to see updates!",
         fr: "pour voir les mises à jour!",
         es: "para ver actualizaciones!",