@intlayer/docs 8.4.10 → 8.5.1

package/docs/hi/dictionary/markdown.md

@@ -17,6 +17,12 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/markdown`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "MarkdownRenderer / useMarkdownRenderer / renderMarkdown यूटिलिटी और forceInline विकल्प जोड़ें"
@@ -32,7 +38,7 @@ history:
 
 Intlayer मार्कडाउन सिंटैक्स का उपयोग करके परिभाषित रिच टेक्स्ट सामग्री का समर्थन करता है। यह आपको ब्लॉग, लेख और बहुत कुछ जैसे समृद्ध स्वरूपण के साथ सामग्री को आसानी से लिखने और बनाए रखने की अनुमति देता है।
 
-## भाग 1: मार्कडाउन सामग्री घोषित करना
+## मार्कडाउन सामग्री घोषित करना
 
 आप `md` फ़ंक्शन का उपयोग करके या केवल एक स्ट्रिंग के रूप में मार्कडाउन सामग्री घोषित कर सकते हैं (यदि इसमें मार्कडाउन सिंटैक्स है)।
 
@@ -90,7 +96,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
 ---
 
-## भाग 2: मार्कडाउन रेंडरिंग
+## मार्कडाउन रेंडरिंग
 
 रेंडरिंग को Intlayer के सामग्री सिस्टम द्वारा स्वचालित रूप से या विशेष टूल्स का उपयोग करके मैन्युअल रूप से संभाला जा सकता है।
 
@@ -213,7 +219,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     विशिष्ट विकल्पों के साथ मार्कडाउन स्ट्रिंग रेंडर करें।
 
     ```tsx
-    import { MarkdownRenderer } from "react-intlayer";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true} tagfilter={true}>
       {"# मेरा शीर्षक"}
@@ -225,7 +231,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     एक पूर्व-कॉन्फ़िगर रेंडरर फ़ंक्शन प्राप्त करें।
 
     ```tsx
-    import { useMarkdownRenderer } from "react-intlayer";
+    import { useMarkdownRenderer } from "react-intlayer/markdown";
 
     const renderMarkdown = useMarkdownRenderer({
       forceBlock: true,
@@ -239,7 +245,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     घटकों के बाहर रेंडरिंग के लिए स्टैंडअलोन यूटिलिटी।
 
     ```tsx
-    import { renderMarkdown } from "react-intlayer";
+    import { renderMarkdown } from "react-intlayer/markdown";
 
     const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });
     ```
@@ -251,7 +257,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```vue
     <script setup>
-    import { MarkdownRenderer } from "vue-intlayer";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
     </script>
 
     <template>
@@ -266,7 +272,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```svelte
     <script lang="ts">
-    import { MarkdownRenderer } from "svelte-intlayer";
+    import { MarkdownRenderer } from "svelte-intlayer/markdown";
     </script>
 
     <MarkdownRenderer forceBlock={true} value="# मेरा शीर्षक" />
@@ -276,7 +282,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```svelte
     <script lang="ts">
-    import { useMarkdownRenderer } from "svelte-intlayer";
+    import { useMarkdownRenderer } from "svelte-intlayer/markdown";
     const render = useMarkdownRenderer();
     </script>
 
@@ -287,7 +293,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```svelte
     <script lang="ts">
-    import { renderMarkdown } from "svelte-intlayer";
+    import { renderMarkdown } from "svelte-intlayer/markdown";
     </script>
 
     {@html renderMarkdown("# मेरा शीर्षक")}
@@ -298,7 +304,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `<MarkdownRenderer />` घटक
 
     ```tsx
-    import { MarkdownRenderer } from "preact-intlayer";
+    import { MarkdownRenderer } from "preact-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# मेरा शीर्षक"}
@@ -308,7 +314,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `useMarkdownRenderer()` हुक
 
     ```tsx
-    import { useMarkdownRenderer } from "preact-intlayer";
+    import { useMarkdownRenderer } from "preact-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -318,7 +324,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `renderMarkdown()` यूटिलिटी
 
     ```tsx
-    import { renderMarkdown } from "preact-intlayer";
+    import { renderMarkdown } from "preact-intlayer/markdown";
 
     return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;
     ```
@@ -328,7 +334,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `<MarkdownRenderer />` घटक
 
     ```tsx
-    import { MarkdownRenderer } from "solid-intlayer";
+    import { MarkdownRenderer } from "solid-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# मेरा शीर्षक"}
@@ -338,7 +344,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `useMarkdownRenderer()` हुक
 
     ```tsx
-    import { useMarkdownRenderer } from "solid-intlayer";
+    import { useMarkdownRenderer } from "solid-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -348,7 +354,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     #### `renderMarkdown()` यूटिलिटी
 
     ```tsx
-    import { renderMarkdown } from "solid-intlayer";
+    import { renderMarkdown } from "solid-intlayer/markdown";
 
     return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;
     ```
@@ -383,12 +389,10 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
   <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
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
           a: ({ href, children }) => <Link to={href}>{children}</Link>,
@@ -404,20 +408,20 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
-      forceBlock: true,
-      tagfilter: true,
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       components: {
-        h1: {
-          component: "h1",
-          props: { class: "text-2xl font-bold" },
-        },
+        h1: (props) =>
+        h('h1', { style: { color: 'orange' }, ...props }, props.children),
+        ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
+        bold: (props) => h('strong', props),
+        code: (props) => h('code', props),
       },
     });
 
@@ -429,13 +433,11 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
-      import { MarkdownProvider } from "svelte-intlayer";
+      import { MarkdownProvider } from "svelte-intlayer/markdown";
       import MyHeading from "./MyHeading.svelte";
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -448,12 +450,10 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
   <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
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -467,12 +467,10 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
   <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
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}
@@ -486,7 +484,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
   <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/hi/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
@@ -23,6 +23,14 @@ history:
 
 # Intlayer का उपयोग करके अपने Analog (Angular) ऐप का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## विषय सूची
 
 <TOC/>
@@ -42,21 +50,7 @@ Intlayer के साथ, आप यह कर सकते हैं:
 
 ## Analog एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-<Tabs defaultTab="code">
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer/tree/main/examples/vite-analog-app?embed=1&ctl=1&file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template) देखें।
+GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-analog-template) देखें।
 
 ### चरण 1: निर्भरताएँ स्थापित करें
 
@@ -273,17 +267,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/hi/intlayer_with_angular.md

@@ -203,7 +203,7 @@ import { mergeConfig } from "angular-intlayer/webpack";
 export default mergeConfig({});
 ```
 
-> `mergeConfig` फ़ंक्शन Webpack को Intlayer के साथ कॉन्फ़िगर करता है। यह `IntlayerWebpackPlugin` को इंजेक्ट करता है (सामग्री घोषणा फ़ाइलों को संभालने के लिए) और इष्टतम प्रदर्शन के लिए उपनाम (aliases) सेट करता है।
+> `mergeConfig` फ़ंक्शन Webpack को Intlayer के साथ कॉन्फ़िगर करता है। यह `IntlayerPlugin` को इंजेक्ट करता है (सामग्री घोषणा फ़ाइलों को संभालने के लिए) और इष्टतम प्रदर्शन के लिए उपनाम (aliases) सेट करता है।
 
 ### चरण 4: अपनी सामग्री घोषित करें
 
@@ -330,17 +330,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/hi/intlayer_with_nextjs_14.md

@@ -1191,7 +1191,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/hi/intlayer_with_nextjs_page_router.md

@@ -1329,7 +1329,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/hi/intlayer_with_react_router_v7.md

@@ -744,7 +744,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/hi/intlayer_with_react_router_v7_fs_routes.md

@@ -691,7 +691,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/hi/intlayer_with_storybook.md

@@ -265,7 +265,7 @@ Webpack-आधारित Storybook सेटअप (जैसे `@storybook/r
 
 ```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/hi/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";
 
 	// होम कंटेंट डिक्शनरी का उपयोग करें
 	const homeContent = useIntlayer('home');
@@ -619,7 +619,7 @@ SEO के लिए, यह अनुशंसा की जाती है
 ```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); // स्थानीय भाषा के अनुस
 ```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(),
+  ],],
 });
 ```