@intlayer/docs 8.4.10 → 8.5.0

package/docs/vi/dictionary/html.md

@@ -240,7 +240,7 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
   <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "react-intlayer";
+    import { HTMLProvider } from "react-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -280,7 +280,7 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
-      import { HTMLProvider } from "svelte-intlayer";
+      import { HTMLProvider } from "svelte-intlayer/html";
       import MyCustomP from "./MyCustomP.svelte";
     </script>
 
@@ -297,7 +297,7 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
   <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "preact-intlayer";
+    import { HTMLProvider } from "preact-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -314,7 +314,7 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
   <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "solid-intlayer";
+    import { HTMLProvider } from "solid-intlayer/html";
 
     export const AppProvider = (props) => (
       <HTMLProvider
@@ -331,11 +331,11 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
   <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer";
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
 
     export const appConfig: ApplicationConfig = {
       providers: [
-        createIntlayerMarkdownProvider({
+        createIntlayerHTMLProvider({
           components: {
             p: { class: "prose" },
             CustomLink: { href: "/details" },
@@ -360,7 +360,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     Kết xuất một chuỗi HTML sử dụng các component cụ thể.
 
     ```tsx
-    import { HTMLRenderer } from "react-intlayer";
+    import { HTMLRenderer } from "react-intlayer/html";
 
     <HTMLRenderer components={{ p: MyCustomP }}>
       {"<p>Hello World</p>"}
@@ -372,7 +372,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     Lấy một hàm renderer đã được cấu hình sẵn.
 
     ```tsx
-    import { useHTMLRenderer } from "react-intlayer";
+    import { useHTMLRenderer } from "react-intlayer/html";
 
     const renderHTML = useHTMLRenderer({
       components: { strong: (props) => <strong {...props} className="text-red-500" /> }
@@ -386,7 +386,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     Tiện ích độc lập để render bên ngoài các component.
 
     ```tsx
-    import { renderHTML } from "react-intlayer";
+    import { renderHTML } from "react-intlayer/html";
 
     const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
     ```
@@ -398,7 +398,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
    
     ```vue
     <script setup>
-    import { HTMLRenderer } from "vue-intlayer";
+    import { HTMLRenderer } from "vue-intlayer/html";
     </script>
 
     <template>
@@ -413,7 +413,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
    
     ```svelte
     <script lang="ts">
-    import { HTMLRenderer } from "svelte-intlayer";
+    import { HTMLRenderer } from "svelte-intlayer/html";
     </script>
 
     <HTMLRenderer value="<p>Hello World</p>" />
@@ -423,7 +423,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
     ```svelte
     <script lang="ts">
-    import { useHTMLRenderer } from "svelte-intlayer";
+    import { useHTMLRenderer } from "svelte-intlayer/html";
     const render = useHTMLRenderer();
     </script>
 
@@ -434,7 +434,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
     ```svelte
     <script lang="ts">
-    import { renderHTML } from "svelte-intlayer";
+    import { renderHTML } from "svelte-intlayer/html";
     </script>
 
     {@html renderHTML("<p>Hello World</p>")}
@@ -446,7 +446,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Thành phần `<HTMLRenderer />`
    
     ```tsx
-    import { HTMLRenderer } from "preact-intlayer";
+    import { HTMLRenderer } from "preact-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -456,7 +456,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Hook `useHTMLRenderer()`
 
     ```tsx
-    import { useHTMLRenderer } from "preact-intlayer";
+    import { useHTMLRenderer } from "preact-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -466,7 +466,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Tiện ích `renderHTML()`
 
     ```tsx
-    import { renderHTML } from "preact-intlayer";
+    import { renderHTML } from "preact-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
@@ -477,7 +477,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Thành phần `<HTMLRenderer />`
    
     ```tsx
-    import { HTMLRenderer } from "solid-intlayer";
+    import { HTMLRenderer } from "solid-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -487,7 +487,7 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Hook `useHTMLRenderer()`
 
     ```tsx
-    import { useHTMLRenderer } from "solid-intlayer";
+    import { useHTMLRenderer } from "solid-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -497,21 +497,21 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     #### Tiện ích `renderHTML()`
 
     ```tsx
-    import { renderHTML } from "solid-intlayer";
+    import { renderHTML } from "solid-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    #### Dịch vụ `IntlayerMarkdownService`
+    #### Dịch vụ `IntlayerHTMLService`
     Render một chuỗi HTML bằng cách sử dụng dịch vụ.
 
     ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer";
 
     export class MyComponent {
-      constructor(private markdownService: IntlayerMarkdownService) {}
+      constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
         return this.markdownService.renderMarkdown(html);

package/docs/vi/dictionary/markdown.md

@@ -213,7 +213,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     Kết xuất một chuỗi Markdown với các tùy chọn cụ thể.
 
     ```tsx
-    import { MarkdownRenderer } from "react-intlayer";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true} tagfilter={true}>
       {"# My Title"}
@@ -225,7 +225,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     Lấy một hàm renderer đã được cấu hình sẵn.
 
     ```tsx
-    import { useMarkdownRenderer } from "react-intlayer";
+    import { useMarkdownRenderer } from "react-intlayer/markdown";
 
     const renderMarkdown = useMarkdownRenderer({
       forceBlock: true,
@@ -239,7 +239,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     Tiện ích độc lập để render bên ngoài các component.
 
     ```tsx
-    import { renderMarkdown } from "react-intlayer";
+    import { renderMarkdown } from "react-intlayer/markdown";
 
     const jsx = renderMarkdown("# My Title", { forceBlock: true });
     ```
@@ -251,7 +251,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
 
     ```vue
     <script setup>
-    import { MarkdownRenderer } from "vue-intlayer";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
     </script>
 
     <template>
@@ -266,7 +266,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
 
     ```svelte
     <script lang="ts">
-    import { MarkdownRenderer } from "svelte-intlayer";
+    import { MarkdownRenderer } from "svelte-intlayer/markdown";
     </script>
 
     <MarkdownRenderer forceBlock={true} value="# My Title" />
@@ -276,7 +276,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
 
     ```svelte
     <script lang="ts">
-    import { useMarkdownRenderer } from "svelte-intlayer";
+    import { useMarkdownRenderer } from "svelte-intlayer/markdown";
     const render = useMarkdownRenderer();
     </script>
 
@@ -287,7 +287,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
 
     ```svelte
     <script lang="ts">
-    import { renderMarkdown } from "svelte-intlayer";
+    import { renderMarkdown } from "svelte-intlayer/markdown";
     </script>
 
     {@html renderMarkdown("# My Title")}
@@ -298,7 +298,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Thành phần `<MarkdownRenderer />`
 
     ```tsx
-    import { MarkdownRenderer } from "preact-intlayer";
+    import { MarkdownRenderer } from "preact-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# My Title"}
@@ -308,7 +308,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Hook `useMarkdownRenderer()`
 
     ```tsx
-    import { useMarkdownRenderer } from "preact-intlayer";
+    import { useMarkdownRenderer } from "preact-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -318,7 +318,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Tiện ích `renderMarkdown()`
 
     ```tsx
-    import { renderMarkdown } from "preact-intlayer";
+    import { renderMarkdown } from "preact-intlayer/markdown";
 
     return <div>{renderMarkdown("# My Title")}</div>;
     ```
@@ -328,7 +328,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Thành phần `<MarkdownRenderer />`
 
     ```tsx
-    import { MarkdownRenderer } from "solid-intlayer";
+    import { MarkdownRenderer } from "solid-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# My Title"}
@@ -338,7 +338,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Hook `useMarkdownRenderer()`
 
     ```tsx
-    import { useMarkdownRenderer } from "solid-intlayer";
+    import { useMarkdownRenderer } from "solid-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -348,7 +348,7 @@ Nếu bạn cần render chuỗi Markdown thô hoặc muốn kiểm soát nhiề
     #### Tiện ích `renderMarkdown()`
 
     ```tsx
-    import { renderMarkdown } from "solid-intlayer";
+    import { renderMarkdown } from "solid-intlayer/markdown";
 
     return <div>{renderMarkdown("# My Title")}</div>;
     ```
@@ -383,7 +383,7 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
   <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "react-intlayer";
+    import { MarkdownProvider } from "react-intlayer/markdown";
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
@@ -429,7 +429,7 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
-      import { MarkdownProvider } from "svelte-intlayer";
+      import { MarkdownProvider } from "svelte-intlayer/markdown";
       import MyHeading from "./MyHeading.svelte";
     </script>
 
@@ -448,7 +448,7 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
   <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "preact-intlayer";
+    import { MarkdownProvider } from "preact-intlayer/markdown";
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
@@ -467,7 +467,7 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
   <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "solid-intlayer";
+    import { MarkdownProvider } from "solid-intlayer/markdown";
 
     export const AppProvider = (props) => (
       <MarkdownProvider
@@ -486,7 +486,7 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
   <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer";
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
 
     export const appConfig: ApplicationConfig = {
       providers: [

package/docs/vi/intlayer_with_analog.md

@@ -14,7 +14,7 @@ slugs:
   - doc
   - environment
   - analog
-applicationTemplate: https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template
+applicationTemplate: https://github.com/aymericzip/intlayer-analog-template
 history:
   - version: 8.0.4
     date: 2026-01-26
@@ -56,7 +56,7 @@ Với Intlayer, bạn có thể:
   </Tab>
 </Tabs>
 
-Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template) trên GitHub.
+Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-analog-template) trên GitHub.
 
 ### Bước 1: Cài đặt các phụ thuộc
 
@@ -273,17 +273,6 @@ import { useLocale } from "angular-intlayer";
       </select>
     </div>
   `,
-  styles: [
-    `
-      .locale-switcher {
-        margin: 1rem;
-        padding: 0.5rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        width: fit-content;
-      }
-    `,
-  ],
 })
 export class LocaleSwitcherComponent {
   localeCtx = useLocale();

package/docs/vi/intlayer_with_angular.md

@@ -201,7 +201,7 @@ import { mergeConfig } from "angular-intlayer/webpack";
 export default mergeConfig({});
 ```
 
-> Hàm `mergeConfig` cấu hình Webpack với Intlayer. Nó chèn `IntlayerWebpackPlugin` (để xử lý các tệp khai báo nội dung) và thiết lập các biệt danh (aliases) để đạt hiệu suất tối ưu.
+> Hàm `mergeConfig` cấu hình Webpack với Intlayer. Nó chèn `IntlayerPlugin` (để xử lý các tệp khai báo nội dung) và thiết lập các biệt danh (aliases) để đạt hiệu suất tối ưu.
 
 ### Bước 4: Khai báo nội dung của bạn
 
@@ -328,17 +328,6 @@ import { useLocale } from "angular-intlayer";
       </select>
     </div>
   `,
-  styles: [
-    `
-      .locale-switcher {
-        margin: 1rem;
-        padding: 0.5rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        width: fit-content;
-      }
-    `,
-  ],
 })
 export class LocaleSwitcherComponent {
   localeCtx = useLocale();

package/docs/vi/intlayer_with_nextjs_14.md

@@ -1441,7 +1441,7 @@ Link.displayName = "Link";
 
 import { getLocalizedUrl } from 'intlayer';
 import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import { useLocale } from 'next-intlayer';
+import { useLocale } from "next-intlayer";
 import { forwardRef, PropsWithChildren, type ForwardedRef } from 'react';
 
 /**

package/docs/vi/intlayer_with_nextjs_page_router.md

@@ -1348,7 +1348,7 @@ Link.displayName = "Link";
 
 import { getLocalizedUrl } from 'intlayer';
 import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import { useLocale } from 'next-intlayer';
+import { useLocale } from "next-intlayer";
 import { forwardRef, PropsWithChildren, type ForwardedRef } from 'react';
 
 /**

package/docs/vi/intlayer_with_react_router_v7.md

@@ -750,7 +750,12 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    reactRouter(),
+    tsconfigPaths(),
+    intlayer(),
+  ],
 });
 ```
 

package/docs/vi/intlayer_with_react_router_v7_fs_routes.md

@@ -696,7 +696,12 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    reactRouter(),
+    tsconfigPaths(),
+    intlayer(),
+  ],
 });
 ```
 

package/docs/vi/intlayer_with_storybook.md

@@ -265,7 +265,7 @@ export default config;
 
 ```typescript fileName=".storybook/main.ts" codeFormat="typescript"
 import type { StorybookConfig } from "@storybook/react-webpack5";
-import { IntlayerWebpackPlugin } from "@intlayer/webpack";
+import { IntlayerPlugin } from "@intlayer/webpack";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -276,10 +276,7 @@ const config: StorybookConfig = {
   },
 
   webpackFinal: async (baseConfig) => {
-    baseConfig.plugins = [
-      ...(baseConfig.plugins ?? []),
-      new IntlayerWebpackPlugin(),
-    ];
+    baseConfig.plugins = [...(baseConfig.plugins ?? []), new IntlayerPlugin()];
     return baseConfig;
   },
 };

package/docs/vi/intlayer_with_svelte_kit.md

@@ -552,7 +552,7 @@ export const load: Load = ({ params }) => {
 ```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useIntlayer, setupIntlayer } from 'svelte-intlayer';
+	import { useIntlayer, setupIntlayer } from "svelte-intlayer";
 	import Header from './Header.svelte';
 	import type { LayoutData } from './$types';
 
@@ -591,7 +591,7 @@ export const prerender = true;
 
 ```svelte fileName="src/routes/[[locale=locale]]/+page.svelte"
 <script lang="ts">
-	import { useIntlayer } from 'svelte-intlayer';
+	import { useIntlayer } from "svelte-intlayer";
 
 	// Sử dụng từ điển nội dung trang chủ
 	const homeContent = useIntlayer('home');
@@ -619,7 +619,7 @@ export const prerender = true;
 ```svelte fileName="src/lib/components/LocalizedLink.svelte"
 <script lang="ts">
   import { getLocalizedUrl } from "intlayer";
-  import { useLocale } from 'svelte-intlayer';
+  import { useLocale } from "svelte-intlayer";
 
   let { href = "" } = $props();
   const { locale } = useLocale();
@@ -652,7 +652,7 @@ goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy
 ```svelte fileName="src/lib/components/LanguageSwitcher.svelte"
 <script lang="ts">
   import { getLocalizedUrl, getLocaleName } from 'intlayer';
-  import { useLocale } from 'svelte-intlayer';
+  import { useLocale } from "svelte-intlayer";
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
 
@@ -697,7 +697,11 @@ import { sveltekit } from "@sveltejs/kit/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [intlayer(), intlayerProxy(), sveltekit()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    intlayer(),
+    sveltekit(),
+  ],],
 });
 ```