@intlayer/docs 8.9.8 → 8.10.0-canary.0

package/docs/en-GB/custom_domains.md

@@ -34,8 +34,8 @@ The `domains` map in `routing` associates each locale with a hostname. Intlayer
 
 The key distinction is **exclusivity**:
 
-- **Exclusive domain** — only one locale maps to that hostname (e.g. `zh → intlayer.zh`). The domain itself identifies the locale, so no locale prefix is added to the path. `https://intlayer.zh/about` serves Chinese content.
-- **Shared domain** — multiple locales map to the same hostname (e.g. `en` and `fr` both map to `intlayer.org`). Normal prefix-based routing applies. `intlayer.org/fr/about` serves French content.
+- **Exclusive domain** - only one locale maps to that hostname (e.g. `zh → intlayer.zh`). The domain itself identifies the locale, so no locale prefix is added to the path. `https://intlayer.zh/about` serves Chinese content.
+- **Shared domain** - multiple locales map to the same hostname (e.g. `en` and `fr` both map to `intlayer.org`). Normal prefix-based routing applies. `intlayer.org/fr/about` serves French content.
 
 ## Configuration
 
@@ -55,9 +55,9 @@ const config: IntlayerConfig = {
   routing: {
     mode: "prefix-no-default",
     domains: {
-      // Shared domain — en and fr use prefix routing on intlayer.org
+      // Shared domain - en and fr use prefix routing on intlayer.org
       en: "intlayer.org",
-      // Exclusive domain — zh has its own hostname, no /zh/ prefix needed
+      // Exclusive domain - zh has its own hostname, no /zh/ prefix needed
       zh: "intlayer.zh",
     },
   },
@@ -96,7 +96,7 @@ getLocalizedUrl("/about", "zh", { currentDomain: "intlayer.org" });
 ```ts
 // Current page: intlayer.zh/about
 getLocalizedUrl("/about", "zh", { currentDomain: "intlayer.zh" });
-// → "/about"  (already on the correct domain — relative URL)
+// → "/about"  (already on the correct domain - relative URL)
 
 getLocalizedUrl("/about", "fr", { currentDomain: "intlayer.zh" });
 // → "https://intlayer.org/fr/about"  (cross-domain link back to intlayer.org)
@@ -108,14 +108,14 @@ getLocalizedUrl("/about", "fr", { currentDomain: "intlayer.zh" });
 
 1. The hostname of an absolute input URL (e.g. `https://intlayer.org/about` → `intlayer.org`).
 2. `window.location.hostname` in browser environments.
-3. If neither is available (SSR without explicit option), a relative URL is returned for same-domain locales and no absolute URL is produced — this is the safe fallback.
+3. If neither is available (SSR without explicit option), a relative URL is returned for same-domain locales and no absolute URL is produced - this is the safe fallback.
 
 ```ts
-// Browser — window.location.hostname === 'intlayer.org'
+// Browser - window.location.hostname === 'intlayer.org'
 getLocalizedUrl("/about", "zh");
 // → "https://intlayer.zh/about"  (auto-detected from window)
 
-// From an absolute URL — domain detected automatically
+// From an absolute URL - domain detected automatically
 getLocalizedUrl("https://intlayer.org/about", "zh");
 // → "https://intlayer.zh/about"
 ```
@@ -151,14 +151,14 @@ export const config = {
 };
 ```
 
-**Redirect** — request arrives on the wrong domain for a given locale prefix:
+**Redirect** - request arrives on the wrong domain for a given locale prefix:
 
 ```
 GET intlayer.org/zh/about
 → 301 https://intlayer.zh/about
 ```
 
-**Rewrite** — request arrives on the locale's exclusive domain without a prefix:
+**Rewrite** - request arrives on the locale's exclusive domain without a prefix:
 
 ```
 GET intlayer.zh/about
@@ -209,7 +209,7 @@ export const LocaleSwitcher = () => {
 };
 ```
 
-No extra configuration is required — `useLocale` detects `window.location.hostname` internally and decides between `router.replace` (same domain) and `window.location.href` (cross-domain).
+No extra configuration is required - `useLocale` detects `window.location.hostname` internally and decides between `router.replace` (same domain) and `window.location.href` (cross-domain).
 
 ## SEO: `hreflang` Alternate Links
 

package/docs/en-GB/dictionary/content_file.md

@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.10.0
+    date: 2026-05-19
+    changes: "Add support of YAML and Markdown file formats"
   - version: 8.9.0
     date: 2026-05-12
     changes: "Add `plural` content node type"
@@ -793,6 +796,40 @@ You can also create content files in JSON format:
 }
 ```
 
+### Markdown Content File
+
+```markdown
+---
+key: welcome-page
+locale: en
+title: Welcome Page Content
+description: Content for the main welcome page
+tags:
+  - page
+  - welcome
+---
+
+# Welcome to Our Platform
+
+## Build amazing applications with ease
+```
+
+### YAML Content File
+
+```yaml
+key: welcome-page
+title: Welcome Page Content
+description: Content for the main welcome page
+locale: "en"
+tags:
+  - page
+  - welcome
+content:
+  hero:
+    title: Welcome to Our Platform
+    subtitle: Build amazing applications with ease
+```
+
 ### Per-Locale Content Files
 
 For per-locale dictionaries, specify the `locale` property:
@@ -844,6 +881,10 @@ By default, Intlayer watches all files with the following extensions for content
 - `.content.mjx`
 - `.content.cjs`
 - `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 
 These default extensions are suitable for most applications. However, when you have specific requirements, you can define custom extensions to streamline the build process and reduce the risk of conflicts with other components.
 

package/docs/en-GB/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-22
+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` frontmatter 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-GB/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.
 

package/docs/en-GB/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-GB/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-GB/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-GB/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"
 />
@@ -262,7 +262,7 @@ const { greeting } = getIntlayer("lit-demo", locale);
     />
   </head>
   <body>
-    <!-- Lit custom element — receives server-detected locale as a property -->
+    <!-- Lit custom element - receives server-detected locale as a property -->
     <lit-demo locale={locale}></lit-demo>
   </body>
 </html>

package/docs/en-GB/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 to link Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as the middleware to detect the user's preferred language, manage cookies, and handle URL redirects.
 
 - **preact**
-  Core Preact package — a fast, lightweight alternative to React.
+  Core Preact package - a fast, lightweight alternative to React.
 
 - **preact-intlayer**
   Package to integrate Intlayer into Preact applications. It provides the `IntlayerProvider` as well as the `useIntlayer` and `useLocale` hooks for internationalisation in Preact.
@@ -365,7 +365,7 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 > **Note on persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures the new linguistic URL is visited, allowing the Intlayer middleware to set the language cookie and remember the user's preference in future visits.
 
-> The `LocaleSwitcher` must be rendered within `IntlayerProvider` — use it in your island component (as shown in step 6).
+> The `LocaleSwitcher` must be rendered within `IntlayerProvider` - use it in your island component (as shown in step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en-GB/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"
 />
@@ -361,7 +361,7 @@ export function LocaleSwitcher() {
 > **Note on persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures the new linguistic URL is visited, allowing the Intlayer middleware to set the language cookie and remember the user's preference in future visits.
 
-> The `LocaleSwitcher` must be rendered within `IntlayerProvider` — use it in your island component (as shown in step 6).
+> The `LocaleSwitcher` must be rendered within `IntlayerProvider` - use it in your island component (as shown in step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en-GB/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"
 />
@@ -356,12 +356,12 @@ export function LocaleSwitcher() {
 ```
 
 > **Note on Solid reactivity:**
-> In Solid, `locale` is a reactive signal accessor — always invoke as `locale()` to get the current value.
+> In Solid, `locale` is a reactive signal accessor - always invoke as `locale()` to get the current value.
 
 > **Note on persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures the new linguistic URL is visited, allowing the Intlayer middleware to set the language cookie and remember the user's preference in future visits.
 
-> The `LocaleSwitcher` must be rendered within `IntlayerProvider` — use it in your island component (as shown in step 6).
+> The `LocaleSwitcher` must be rendered within `IntlayerProvider` - use it in your island component (as shown in step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en-GB/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-GB/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-GB/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-GB/intlayer_with_nextjs_14.md

@@ -37,7 +37,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"
 />
@@ -48,7 +48,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"
 />

package/docs/en-GB/intlayer_with_nextjs_15.md

@@ -43,7 +43,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-next-15-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"
 />
@@ -54,7 +54,7 @@ history:
 <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-GB/intlayer_with_nextjs_16.md

@@ -56,7 +56,7 @@ history:
 <iframe
   src="https://intlayer-next-16-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-16-template"
+  title="Demo - intlayer-next-16-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_nextjs_page_router.md

@@ -38,7 +38,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"
 />
@@ -49,7 +49,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"
 />

package/docs/en-GB/intlayer_with_nuxt.md

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

package/docs/en-GB/intlayer_with_react_native+expo.md

@@ -36,7 +36,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-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"
 />
@@ -47,7 +47,7 @@ history:
 <iframe
   src="https://intlayer-react-native.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-react-native-template"
+  title="Demo - intlayer-react-native-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_react_router_v7.md

@@ -126,7 +126,7 @@ The core package that provides internationalisation tools for configuration mana
 <iframe
   src="https://intlayer-react-router-v7.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-react-router-v7-template"
+  title="Demo - intlayer-react-router-v7-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md

@@ -125,7 +125,7 @@ The core package that provides internationalisation tools for configuration mana
 <iframe
   src="https://intlayer-react-router-v7.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-react-router-v7-template"
+  title="Demo - intlayer-react-router-v7-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_storybook.md

@@ -2,7 +2,7 @@
 createdAt: 2026-03-20
 updatedAt: 2026-05-06
 title: How to set up Intlayer with Storybook
-description: Learn how to make your design system multilingual using Intlayer with Storybook — compile content declarations, add a locale switcher, and preview your components in any language.
+description: Learn how to make your design system multilingual using Intlayer with Storybook - compile content declarations, add a locale switcher, and preview your components in any language.
 keywords:
   - Internationalisation
   - Documentation
@@ -33,7 +33,7 @@ history:
 
 ## What is Intlayer?
 
-**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications. It works at the **component level** — each component owns its content declarations — keeping translations co-located with the code that uses them.
+**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications. It works at the **component level** - each component owns its content declarations - keeping translations co-located with the code that uses them.
 
 With Intlayer you can:
 
@@ -83,9 +83,9 @@ bun add vite-intlayer --dev
 
 | Package          | Role                                                         |
 | ---------------- | ------------------------------------------------------------ |
-| `intlayer`       | Core — config, content compilation, CLI                      |
-| `react-intlayer` | React bindings — `IntlayerProvider`, `useIntlayer` hook      |
-| `vite-intlayer`  | Vite plugin — watches and compiles content declaration files |
+| `intlayer`       | Core - config, content compilation, CLI                      |
+| `react-intlayer` | React bindings - `IntlayerProvider`, `useIntlayer` hook      |
+| `vite-intlayer`  | Vite plugin - watches and compiles content declaration files |
 
 ---
 
@@ -291,7 +291,7 @@ export default config;
 
 ### Step 4: Add the `IntlayerProvider` Decorator and a Locale Toolbar
 
-Same as the Vite setup — add the decorator and global locale type in `.storybook/preview.tsx`:
+Same as the Vite setup - add the decorator and global locale type in `.storybook/preview.tsx`:
 
 ```tsx fileName=".storybook/preview.tsx" codeFormat="typescript"
 import type { Preview, StoryContext } from "@storybook/react";
@@ -411,7 +411,7 @@ const meta: Meta<typeof CopyButton> = {
 export default meta;
 type Story = StoryObj<typeof CopyButton>;
 
-/** Default story — switch the locale in the toolbar to preview translations. */
+/** Default story - switch the locale in the toolbar to preview translations. */
 export const Default: Story = {
   args: {
     content: "npm install intlayer react-intlayer",

package/docs/en-GB/intlayer_with_svelte_kit.md

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

package/docs/en-GB/intlayer_with_tanstack+solid.md

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

package/docs/en-GB/intlayer_with_tanstack.md

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

package/docs/en-GB/intlayer_with_vanilla.md

@@ -34,7 +34,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vanilla-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"
 />
@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vanilla-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-vanilla-template"
+  title="Demo - intlayer-vanilla-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_vite+lit.md

@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vite-lit-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-vite-lit-template"
+  title="Demo - intlayer-vite-lit-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -265,7 +265,7 @@ export default appContent;
 
 ### Step 6: Utilise Intlayer in Your LitElement
 
-Use `useIntlayer` inside a `LitElement`. It returns a `ReactiveController` proxy that automatically triggers re-renders whenever the active locale changes — no extra setup required.
+Use `useIntlayer` inside a `LitElement`. It returns a `ReactiveController` proxy that automatically triggers re-renders whenever the active locale changes - no extra setup required.
 
 ```typescript fileName="src/my-element.ts" codeFormat="typescript"
 import { LitElement, html } from "lit";

package/docs/en-GB/intlayer_with_vite+preact.md

@@ -52,7 +52,7 @@ history:
 <iframe
   src="https://intlayer-vite-preact-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-vite-preact-template"
+  title="Demo - intlayer-vite-preact-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

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

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

package/docs/en-GB/intlayer_with_vite+react_compiler.md

@@ -55,7 +55,7 @@ history:
 <iframe
   src="https://intlayer-vite-react-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-vite-react-template"
+  title="Demo - intlayer-vite-react-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en-GB/intlayer_with_vite+svelte.md

@@ -39,7 +39,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vite-svelte-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"
 />
@@ -50,7 +50,7 @@ history:
 <iframe
   src="https://intlayer-vite-svelte-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-vite-svelte-template"
+  title="Demo - intlayer-vite-svelte-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />