@intlayer/docs 9.4.0-canary.0 → 9.4.0

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

@@ -29,174 +29,8 @@ In Intlayer, the `file` function allows embedding external file content into a d
 
 ## How File Embedding Works
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use embedded file content in a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This retrieves the content from the specified key and allows it to be displayed dynamically.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myFile } = useIntlayer("my_key");
-</script>
-
-<template>
-  <div>
-    <pre>{{ myFile }}</pre>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("my_key");
-</script>
-
-<div>
-  <pre>{$content.myFile}</pre>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const FileComponent: Component = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-file",
-  template: `
-    <div>
-      <pre>{{ content().myFile }}</pre>
-    </div>
-  `,
-})
-export class FileComponent {
-  content = useIntlayer("my_key");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("my_key").onChange((newContent) => {
-  document.getElementById("file-content")!.textContent = newContent.myFile;
-});
-
-// Initial render
-document.getElementById("file-content")!.textContent = content.myFile;
-```
-
-  </Tab>
-</Tabs>
 ## Setting Up File Content
 
 To embed file content in your Intlayer project, use the `file` function in a content module. Below are examples demonstrating different implementations.

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

@@ -27,220 +27,8 @@ author: aymericzip
 
 ## How Gender Works
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To utilize gender-based content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Output: my content for male users */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for female users */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for male users */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for female users */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when gender is not specified */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when gender is not specified */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To utilize gender-based content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To utilize gender-based content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myGender } = useIntlayer("my_key");
-</script>
-
-<template>
-  <div>
-    <p>{{ myGender("male") }}</p>
-    <p>{{ myGender("female") }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To utilize gender-based content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("my_key");
-</script>
-
-<div>
-  <p>{$content.myGender("male")}</p>
-  <p>{$content.myGender("female")}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To utilize gender-based content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To utilize gender-based content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const GenderComponent: Component = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To utilize gender-based content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-gender",
-  template: `
-    <div>
-      <p>{{ content().myGender("male") }}</p>
-      <p>{{ content().myGender("female") }}</p>
-    </div>
-  `,
-})
-export class GenderComponent {
-  content = useIntlayer("my_key");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To utilize gender-based content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("my_key").onChange((newContent) => {
-  document.getElementById("gender-male")!.textContent =
-    newContent.myGender("male");
-  document.getElementById("gender-female")!.textContent =
-    newContent.myGender("female");
-});
-
-// Initial render
-document.getElementById("gender-male")!.textContent = content.myGender("male");
-document.getElementById("gender-female")!.textContent =
-  content.myGender("female");
-```
-
-  </Tab>
-</Tabs>
 ## Setting Up Gender-Based Content
 
 To set up gender-based content in your Intlayer project, create a content module that includes your gender-specific definitions. Below are examples in various formats.

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

@@ -246,7 +246,7 @@ You can configure HTML rendering globally for your entire application. This is i
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-  
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer/html";
 
@@ -264,7 +264,7 @@ You can configure HTML rendering globally for your entire application. This is i
 
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
     import { intlayer } from "vue-intlayer";
@@ -286,7 +286,7 @@ You can configure HTML rendering globally for your entire application. This is i
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-   
+
     ```svelte fileName="App.svelte"
     <script lang="ts">
       import { HTMLProvider } from "svelte-intlayer/html";
@@ -304,7 +304,7 @@ You can configure HTML rendering globally for your entire application. This is i
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer/html";
 
@@ -321,7 +321,7 @@ You can configure HTML rendering globally for your entire application. This is i
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer/html";
 
@@ -354,6 +354,8 @@ You can configure HTML rendering globally for your entire application. This is i
     };
     ```
 
+> Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
 </Tabs>
 
@@ -402,9 +404,9 @@ If you need to render raw HTML strings or have more control over the component m
 
   </Tab>
   <Tab label="Vue" value="vue">
-   
+
     #### `<HTMLRenderer />` Component
-   
+
     ```vue
     <script setup>
     import { HTMLRenderer } from "vue-intlayer/html";
@@ -417,9 +419,9 @@ If you need to render raw HTML strings or have more control over the component m
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     #### `<HTMLRenderer />` Component
-   
+
     ```svelte
     <script lang="ts">
     import { HTMLRenderer } from "svelte-intlayer/html";
@@ -451,9 +453,9 @@ If you need to render raw HTML strings or have more control over the component m
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     #### `<HTMLRenderer />` Component
-   
+
     ```tsx
     import { HTMLRenderer } from "preact-intlayer/html";
 
@@ -482,9 +484,9 @@ If you need to render raw HTML strings or have more control over the component m
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     #### `<HTMLRenderer />` Component
-   
+
     ```tsx
     import { HTMLRenderer } from "solid-intlayer/html";
 
@@ -517,13 +519,13 @@ If you need to render raw HTML strings or have more control over the component m
     Render an HTML string using the service.
 
     ```typescript
-    import { IntlayerHTMLService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer/html";
 
     export class MyComponent {
       constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
-        return this.markdownService.renderMarkdown(html);
+        return this.markdownService.renderHTML(html);
       }
     }
     ```

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

@@ -34,10 +34,6 @@ In Intlayer, insertion content is achieved through the `insertion` function, whi
 
 When integrated with React Intlayer or Next Intlayer, you can simply provide the data object containing the values for each placeholder, and Intlayer will automatically render the content with the placeholders replaced.
 
-In Intlayer, insertion content is achieved through the `insertion` function, which identifies placeholder fields in a string (such as `{{name}}` or `{{age}}`) that can be replaced dynamically at runtime. This approach allows you to create flexible, template-like strings where specific parts of the content are determined by data passed in from your application.
-
-When integrated with React Intlayer or Next Intlayer, you can simply provide the data object containing the values for each placeholder, and Intlayer will automatically render the content with the placeholders replaced.
-
 ## Setting Up Insertion Content
 
 To set up insertion content in your Intlayer project, create a content module that includes your insertion definitions.

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

@@ -495,7 +495,7 @@ These utilities render **only raw Markdown strings** and are independent of `use
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### `<MarkdownRenderer />` Component
 
     Renders a Markdown string with specific options.
@@ -534,7 +534,7 @@ These utilities render **only raw Markdown strings** and are independent of `use
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### `<MarkdownRenderer />` Component
 
     Renders a Markdown string with specific options.
@@ -960,6 +960,10 @@ The `MarkdownProvider` (or its framework equivalent) configures the Markdown ren
   </Tab>
   <Tab label="Angular" value="angular">
 
+> 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:
+
     ```typescript fileName="app.module.ts"
     import { NgModule } from '@angular/core';
     import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
@@ -1050,7 +1054,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue has a built-in `<Suspense>` component. Wrap the component rendering Markdown content in a `<Suspense>` boundary.