@intlayer/docs 8.9.8 → 8.10.0-canary.1

package/docs/en/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-03-24
+updatedAt: 2026-05-19
 title: Markdown
 description: Learn how to declare and use Markdown content in your multilingual website with Intlayer. Follow the steps in this online documentation to integrate Markdown seamlessly into your project.
 keywords:
@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.10.0
+    date: 2026-05-19
+    changes: "Add `.content.md` files support"
   - version: 8.5.0
     date: 2026-03-24
     changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
@@ -43,6 +46,39 @@ Intlayer supports rich text content defined using Markdown syntax. This allows y
 You can declare Markdown content using the `md` function or simply as a string (if it contains Markdown syntax).
 
 <Tabs>
+  <Tab label=".content.md" value=".content.md">
+    Since version `8.10.0`, you can declare Markdown content directly in `.content.md` files. Intlayer will
+    automatically detect and parse the Markdown content.
+
+    ```md fileName="markdown-file.en.content.md"
+    ---
+    key: my-markdown-content
+    description: My content
+    locale: en
+    ---
+
+    # My content
+
+    Here an example of markdown content
+    ```
+
+    The `locale` front-matter field is the field that define the locale of the content. It is optional. If not provided, Intlayer will use the default locale, which is also used as fallback locale if no translation is available for a specific locale.
+
+    Example of file structure:
+
+    ```text
+    content/
+    ├── en/
+    │   └── markdown-file.en.content.md
+    ├── fr/
+    │   └── markdown-file.fr.content.md
+    └── es/
+        └── markdown-file.es.content.md
+    ```
+
+    You can add in front-matter any properties defined in the [Dictionary definition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
+
+  </Tab>
   <Tab label="Manual Wrapping" value="manual-wrapping">
     Use the `md` function to explicitly declare Markdown content. This is useful if you want to ensure a string is treated as Markdown even if it doesn't contain obvious syntax.
 
@@ -74,6 +110,7 @@ You can declare Markdown content using the `md` function or simply as a string (
     ```
 
   </Tab>
+
   <Tab label="External Files" value="external-files">
     Import `.md` files directly using the `file` function.
 
@@ -98,11 +135,17 @@ You can declare Markdown content using the `md` function or simply as a string (
 
 ## Rendering Markdown
 
-Rendering can be handled automatically by Intlayer's content system or manually using specialized tools.
+Intlayer provides two independent ways to render Markdown:
+
+1. **Via `useIntlayer`**
+   — Intlayer automatically transforms the `md` node into the framework's native output (JSX, VNode, HTML string).
+   - Frontmatter is parsed and exposed as `.metadata`. You can override rendering at two levels — globally with `MarkdownProvider` (or the framework equivalent) and locally per-node with `.use()`. Both can be combined; `.use()` takes priority over `MarkdownProvider`, which takes priority over the default.
 
-### 1. Automatic Rendering (using `useIntlayer`)
+2. **Helper utilities** — `<MarkdownRenderer />`, `useMarkdownRenderer()`, and `renderMarkdown()` are standalone tools that accept **raw Markdown strings only**. They are independent of `useIntlayer` and do not work with the decorated nodes it returns.
 
-When you access content via `useIntlayer`, Markdown nodes are already prepared for rendering.
+Markdown rendering supports **MDX** — use any JSX/framework component by name directly in your Markdown.
+
+### 1. Automatic Rendering (via `useIntlayer`)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -110,21 +153,51 @@ When you access content via `useIntlayer`, Markdown nodes are already prepared f
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "react-intlayer";
+    import { MarkdownProvider } from "react-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 component
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
     ```
 
+    > If `MarkdownProvider` not present, intlayer will render the markdown using the default Markdown to JSX parser.
+
     You can also provide local overrides for specific nodes using the `.use()` method:
 
     ```tsx
     {myMarkdownContent.use({
-      h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
     })}
     ```
 
+    You can retrieve the Markdown as string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     In Vue, Markdown content can be rendered using the `component` built-in or directly as a node.
@@ -140,43 +213,183 @@ When you access content via `useIntlayer`, Markdown nodes are already prepared f
     </template>
     ```
 
+    Configure globally via the `intlayerMarkdown` plugin (supports MDX custom components):
+
+    ```ts fileName="main.ts"
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
+
+    app.use(intlayerMarkdown, {
+      components: {
+        h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
+        MyButton: (props) => h('button', props), // MDX component
+      },
+    });
+    ```
+
+    > If the `intlayerMarkdown` plugin is not installed, Intlayer will render using the default compiler.
+
+    You can also provide local overrides for specific nodes using the `.use()` method:
+
+    ```vue
+    <component :is="myMarkdownContent.use({
+      h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
+    })" />
+    ```
+
+    You can retrieve the Markdown as string:
+
+    ```vue
+    {{ myMarkdownContent.value }}
+    {{ String(myMarkdownContent) }}
+    {{ myMarkdownContent.toString() }}
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```vue
+    <component :is="myMarkdownContent.metadata" />
+    <component :is="myMarkdownContent.metadata.title" />
+    ```
+
   </Tab>
   <Tab label="Svelte" value="svelte">
     Svelte renders Markdown as an HTML string by default. Use `{@html}` to render it.
 
-    ```svelte
+    ```svelte fileName="App.svelte"
     <script lang="ts">
     import { useIntlayer } from "svelte-intlayer";
+    import { MarkdownProvider } from "svelte-intlayer/markdown";
+    import MyHeading from "./MyHeading.svelte";
+
     const content = useIntlayer("app");
     </script>
 
-    {@html $content.myMarkdownContent}
+    <MarkdownProvider components={{ h1: MyHeading }}>
+      {@html $content.myMarkdownContent}
+    </MarkdownProvider>
+    ```
+
+    > If `MarkdownProvider` is not present, Intlayer will render the markdown using the default compiler.
+
+    You can also provide local overrides for specific nodes using the `.use()` method:
+
+    ```svelte
+    {@html $content.myMarkdownContent.use({ ... })}
+    ```
+
+    You can retrieve the Markdown as string:
+
+    ```svelte
+    {$content.myMarkdownContent.value}
+    {String($content.myMarkdownContent)}
+    {$content.myMarkdownContent.toString()}
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```svelte
+    {$content.myMarkdownContent.metadata}
+    {$content.myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Preact" value="preact">
-    Preact supports Markdown nodes directly in the JSX.
+    Preact supports Markdown nodes directly in JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "preact-intlayer";
+    import { MarkdownProvider } from "preact-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 component
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > If `MarkdownProvider` not present, intlayer will render the markdown using the default Markdown to JSX parser.
+
+    You can also provide local overrides for specific nodes using the `.use()` method:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    You can retrieve the Markdown as string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Solid" value="solid">
-    Solid supports Markdown nodes directly in the JSX.
+    Solid supports Markdown nodes directly in JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "solid-intlayer";
+    import { MarkdownProvider } from "solid-intlayer/markdown";
 
     const AppContent = () => {
       const { myMarkdownContent } = useIntlayer("app");
       return <div>{myMarkdownContent}</div>;
     };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+          MyButton: (props) => <button {...props} />, // MDX component
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > If `MarkdownProvider` not present, intlayer will render the markdown using the default Markdown to JSX parser.
+
+    You can also provide local overrides for specific nodes using the `.use()` method:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+    })}
+    ```
+
+    You can retrieve the Markdown as string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
@@ -196,6 +409,8 @@ When you access content via `useIntlayer`, Markdown nodes are already prepared f
     }
     ```
 
+    > If the IntlayerMarkdown provider is not configured, Intlayer will render using the default compiler.
+
     You can also provide local overrides for specific nodes using the `.use()` method:
 
     ```typescript
@@ -204,12 +419,27 @@ When you access content via `useIntlayer`, Markdown nodes are already prepared f
     })
     ```
 
+    You can retrieve the Markdown as string:
+
+    ```typescript
+    content().myMarkdownContent.value
+    String(content().myMarkdownContent)
+    content().myMarkdownContent.toString()
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```typescript
+    content().myMarkdownContent.metadata
+    content().myMarkdownContent.metadata.title
+    ```
+
   </Tab>
 </Tabs>
 
-### 2. Manual Rendering & Advanced Tools
+### 2. Helper Utilities (Markdown Strings Only)
 
-If you need to render raw Markdown strings or have more control over the rendering process, use the following tools.
+These utilities render **raw Markdown strings** and are independent of `useIntlayer`. Use them when you need to render Markdown from sources other than your dictionaries.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -383,7 +613,7 @@ If you need to render raw Markdown strings or have more control over the renderi
 
 ## Global Configuration with `MarkdownProvider`
 
-You can configure Markdown rendering globally for your entire application. This avoids passing the same props to every renderer.
+`MarkdownProvider` (or its framework equivalent) configures the Markdown rendering pipeline for your entire application. It applies to both the automatic `useIntlayer` rendering and the helper utilities. Options set here are the defaults — `.use()` overrides them at the node level.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -394,8 +624,9 @@ You can configure Markdown rendering globally for your entire application. This
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         components={{
-          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
-          a: ({ href, children }) => <Link to={href}>{children}</Link>,
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
         }}
       >
         {children}
@@ -403,6 +634,8 @@ You can configure Markdown rendering globally for your entire application. This
     );
     ```
 
+    > MDX is supported — any component name used inside your Markdown (e.g. `<MyCustomJSXComponent />`) is resolved against the `components` map.
+
     You can also use your own markdown renderer:
 
     ```tsx fileName="AppProvider.tsx"
@@ -411,8 +644,8 @@ You can configure Markdown rendering globally for your entire application. This
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('react-intlayer/markdown');
-          return compileMarkdown(md);
+          const { renderMarkdown } = await import('react-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {children}
@@ -460,8 +693,8 @@ You can configure Markdown rendering globally for your entire application. This
     app.use(intlayer);
     app.use(intlayerMarkdown, {
       renderMarkdown: async (md) => {
-        const { compileMarkdown } = await import('vue-intlayer/markdown');
-        return compileMarkdown(md);
+        const { renderMarkdown } = await import('vue-intlayer/markdown');
+        return renderMarkdown(md);
       },
     });
 
@@ -497,8 +730,8 @@ You can configure Markdown rendering globally for your entire application. This
 
     <MarkdownProvider
       renderMarkdown={async (md) => {
-        const { compileMarkdown } = await import('svelte-intlayer/markdown');
-        return compileMarkdown(md);
+        const { renderMarkdown } = await import('svelte-intlayer/markdown');
+        return renderMarkdown(md);
       }}
     >
       <slot />
@@ -532,8 +765,8 @@ You can configure Markdown rendering globally for your entire application. This
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('preact-intlayer/markdown');
-          return compileMarkdown(md);
+          const { renderMarkdown } = await import('preact-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {children}
@@ -568,8 +801,8 @@ You can configure Markdown rendering globally for your entire application. This
     export const AppProvider = (props) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('solid-intlayer/markdown');
-          return compileMarkdown(md);
+          const { renderMarkdown } = await import('solid-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {props.children}
@@ -605,8 +838,8 @@ You can configure Markdown rendering globally for your entire application. This
       providers: [
         createIntlayerMarkdownProvider({
           renderMarkdown: async (md) => {
-            const { compileMarkdown } = await import('angular-intlayer/markdown');
-            return compileMarkdown(md);
+            const { renderMarkdown } = await import('angular-intlayer/markdown');
+            return renderMarkdown(md);
           },
         }),
       ],

package/docs/en/intlayer_with_analog.md

@@ -44,7 +44,7 @@ history:
 <iframe
   src="https://intlayer-analog-template.vercel.app"
   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 — intlayer-analog-template"
+  title="Demo - intlayer-analog-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_angular.md

@@ -68,7 +68,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-angular-template.vercel.app"
   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 — intlayer-angular-template"
+  title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro.md

@@ -48,7 +48,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_lit.md

@@ -47,7 +47,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -259,7 +259,7 @@ const { greeting } = getIntlayer("lit-demo", locale);
     />
   </head>
   <body>
-    <!-- The Lit custom element — receives the server-detected locale as a property -->
+    <!-- The Lit custom element - receives the server-detected locale as a property -->
     <lit-demo locale={locale}></lit-demo>
   </body>
 </html>
@@ -361,7 +361,7 @@ customElements.define("lit-demo", LitDemo);
 
 > The `locale` property is passed from the Astro page (server-detected) and used in `connectedCallback` to initialise `installIntlayer`, making it the initial locale for all `ReactiveController` hooks in the element.
 
-> `useIntlayer` registers itself as a `ReactiveController`. The element re-renders automatically when the locale changes — no extra setup required.
+> `useIntlayer` registers itself as a `ReactiveController`. The element re-renders automatically when the locale changes - no extra setup required.
 
 ### Step 7: Add a Locale Switcher
 
@@ -404,7 +404,7 @@ override render() {
 ```
 
 > **Note on Lit Reactivity:**
-> `useLocale` returns a `ReactiveController`. When `setLocale` is called, the controller schedules a re-render automatically — so the active button state updates without manual DOM manipulation.
+> `useLocale` returns a `ReactiveController`. When `setLocale` is called, the controller schedules a re-render automatically - so the active button state updates without manual DOM manipulation.
 
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.

package/docs/en/intlayer_with_astro_preact.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -110,7 +110,7 @@ bun x intlayer init
   Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
 
 - **preact**
-  The core Preact package — a fast, lightweight alternative to React.
+  The core Preact package - a fast, lightweight alternative to React.
 
 - **preact-intlayer**
   The package that integrates Intlayer with Preact applications. It provides `IntlayerProvider`, `useIntlayer`, and `useLocale` hooks for Preact internationalization.
@@ -362,7 +362,7 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_react.md

@@ -49,7 +49,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -359,7 +359,7 @@ export function LocaleSwitcher() {
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_solid.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -354,12 +354,12 @@ export function LocaleSwitcher() {
 ```
 
 > **Note on Solid Reactivity:**
-> In Solid, `locale` is a reactive signal accessor — always call it as `locale()` when reading its current value.
+> In Solid, `locale` is a reactive signal accessor - always call it as `locale()` when reading its current value.
 
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_svelte.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_vanilla.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_vue.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_14.md

@@ -82,7 +82,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-next-14-template.vercel.app"
   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 — intlayer-next-14-template"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_15.md

@@ -97,7 +97,7 @@ With Intlayer, you can:
 <iframe
   src="https://next-15-intlayer-template-xt83.vercel.app"
   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 — intlayer-next-15-template"
+  title="Demo - intlayer-next-15-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_page_router.md

@@ -41,7 +41,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?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 — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -52,7 +52,7 @@ history:
 <iframe
   src="https://intlayer-next-14-template.vercel.app"
   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 — intlayer-next-14-template"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />