@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/docs/id/dictionary/markdown.md

@@ -0,0 +1,381 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Markdown
+description: Pelajari cara mendeklarasikan dan menggunakan konten Markdown di situs web multibahasa Anda dengan Intlayer. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengintegrasikan Markdown secara mulus ke dalam proyek Anda.
+keywords:
+  - Markdown
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - markdown
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Markdown / Konten Teks Kaya
+
+## Cara Kerja Markdown
+
+Intlayer mendukung konten teks kaya yang didefinisikan menggunakan sintaks Markdown. Hal ini dicapai melalui fungsi `md`, yang mengubah string Markdown menjadi format yang dapat dikelola oleh Intlayer. Dengan menggunakan Markdown, Anda dapat dengan mudah menulis dan memelihara konten dengan format kaya, seperti blog, artikel, dan lainnya.
+
+[Editor Visual Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) dan [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md) keduanya mendukung manajemen konten Markdown.
+
+Ketika diintegrasikan dengan aplikasi React, Anda dapat menggunakan penyedia rendering Markdown (seperti [`markdown-to-jsx`](https://www.npmjs.com/package/markdown-to-jsx)) untuk merender konten Markdown menjadi HTML. Ini memungkinkan Anda menulis konten dalam Markdown sambil memastikan tampilannya benar di aplikasi Anda.
+
+## Menyiapkan Konten Markdown
+
+Untuk menyiapkan konten Markdown dalam proyek Intlayer Anda, definisikan sebuah kamus konten yang menggunakan fungsi `md`.
+
+```typescript fileName="markdownDictionary.content.ts" contentDeclarationFormat="typescript"
+import { md, type Dictionary } from "intlayer";
+
+const markdownDictionary = {
+  key: "app",
+  content: {
+    myMarkdownContent: md("## My title \n\nLorem Ipsum"),
+  },
+} satisfies Dictionary;
+
+export default markdownDictionary;
+```
+
+```javascript fileName="markdownDictionary.content.mjs" contentDeclarationFormat="esm"
+import { md } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const markdownDictionary = {
+  key: "app",
+  content: {
+    myMarkdownContent: md("## Judul Saya \n\nLorem Ipsum"),
+  },
+};
+
+export default markdownDictionary;
+```
+
+```javascript fileName="markdownDictionary.content.cjs" contentDeclarationFormat="commonjs"
+const { md } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const markdownDictionary = {
+  key: "app",
+  content: {
+    myMarkdownContent: md("## Judul Saya \n\nLorem Ipsum"),
+  },
+};
+
+module.exports = markdownDictionary;
+```
+
+```json fileName="markdownDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "myMarkdownContent": {
+      "nodeType": "markdown",
+      "markdown": "## Judul Saya \n\nLorem Ipsum"
+    }
+  }
+}
+```
+
+## Impor file `.md` (multibahasa)
+
+Jika file Markdown Anda adalah file `.md`, Anda dapat mengimpornya menggunakan berbagai format impor yang disediakan oleh JavaScript atau Intlayer.
+
+Disarankan untuk memprioritaskan impor melalui [`file` function](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/file.md), karena memungkinkan Intlayer mengelola jalur relatif terhadap lokasi file dengan benar dan memastikan integrasi file ini dengan Visual Editor / CMS.
+
+```typescript fileName="md.d.ts" contentDeclarationFormat="typescript"
+// Deklarasi ini memungkinkan TypeScript mengenali dan mengimpor file Markdown (.md) sebagai modul.
+
+// Tanpa ini, TypeScript akan menghasilkan error saat mencoba mengimpor file Markdown,
+// karena secara native tidak mendukung impor file non-kode.
+
+declare module "*.md";
+```
+
+```typescript fileName="markdownDictionary.content.ts" contentDeclarationFormat="typescript"
+import { md, file, t, type Dictionary } from "intlayer";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+import markdown from "./myMarkdown.md";
+
+const markdownDictionary = {
+  key: "app",
+  content: {
+    contentMultilingualFile: t({
+      en: md(file("./myMarkdown.en.md")),
+      fr: md(file("./myMarkdown.fr.md")),
+      es: md(file("./myMarkdown.es.md")),
+    }),
+
+    contentImport: md(markdown),
+    contentRequire: md(require("./myMarkdown.md")),
+    contentAsyncImport: md(
+      import("./myMarkdown.md").then((module) => module.default)
+    ),
+    contentFetch: md(fetch("https://example.com").then((res) => res.text())),
+    contentFS: md(() => {
+      const filePath = resolve(process.cwd(), "doc/test.md");
+      return readFileSync(filePath, "utf8");
+    }),
+  },
+} satisfies Dictionary;
+
+export default markdownDictionary;
+```
+
+```javascript fileName="markdownDictionary.content.mjs" contentDeclarationFormat="esm"
+import { md, file, t } from "intlayer";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+import markdown from "./myMarkdown.md";
+
+/** @type {import('intlayer').Dictionary} */
+const markdownDictionary = {
+  key: "app",
+  content: {
+    contentMultilingualFile: t({
+      en: md(file("./myMarkdown.en.md")),
+      fr: md(file("./myMarkdown.fr.md")),
+      es: md(file("./myMarkdown.es.md")),
+    }),
+
+    contentImport: md(markdown),
+    contentRequire: md(require("./myMarkdown.md")),
+    contentAsyncImport: md(
+      import("./myMarkdown.md").then((module) => module.default)
+    ),
+    contentFetch: md(fetch("https://example.com").then((res) => res.text())),
+    contentFS: md(() => {
+      const filePath = resolve(process.cwd(), "doc/test.md");
+      return readFileSync(filePath, "utf8");
+    }),
+  },
+};
+
+export default markdownDictionary;
+```
+
+```javascript fileName="markdownDictionary.content.cjs" contentDeclarationFormat="commonjs"
+const { md, file, t } = require("intlayer");
+
+const markdown_en = require("./myMarkdown.en.md");
+const markdown_fr = require("./myMarkdown.fr.md");
+const markdown_es = require("./myMarkdown.es.md");
+
+/** @type {import('intlayer').Dictionary} */
+// Kamus markdown
+const markdownDictionary = {
+  key: "app",
+  content: {
+    contentMultilingualFile: t({
+      en: md(file("./myMarkdown.en.md")),
+      fr: md(file("./myMarkdown.fr.md")),
+      es: md(file("./myMarkdown.es.md")),
+    }),
+
+    contentImport: md(markdown),
+    contentFetch: md(fetch("https://example.com").then((res) => res.text())),
+    contentFS: md(() => {
+      const filePath = resolve(process.cwd(), "doc/test.md");
+      return readFileSync(filePath, "utf8");
+    }),
+  },
+};
+
+module.exports = markdownDictionary;
+```
+
+```jsonc fileName="markdownDictionary.content.json" contentDeclarationFormat="json"
+// - Mengimpor file Markdown eksternal (.md) hanya memungkinkan menggunakan node `file`, atau file deklarasi JS atau TS.
+// - Mengambil konten Markdown eksternal hanya memungkinkan menggunakan file deklarasi JS atau TS.
+
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "": {
+        "nodeType": "file",
+        "file": "./myMarkdown.md",
+      },
+    },
+
+    "contentMultilingualFile": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "markdown",
+          "markdown": {
+            "nodeType": "file",
+            "file": "./myMarkdown.en.md",
+          },
+        },
+        "fr": {
+          "nodeType": "markdown",
+          "markdown": {
+            "nodeType": "file",
+            "file": "./myMarkdown.fr.md",
+          },
+        },
+        "es": {
+          "nodeType": "markdown",
+          "markdown": {
+            "nodeType": "file",
+            "file": "./myMarkdown.es.md",
+          },
+        },
+      },
+    },
+  },
+}
+```
+
+## Menggunakan Markdown dengan React Intlayer
+
+Untuk merender konten Markdown dalam aplikasi React, Anda dapat memanfaatkan hook `useIntlayer` dari paket `react-intlayer` bersama dengan penyedia rendering Markdown. Dalam contoh ini, kami menggunakan paket [`markdown-to-jsx`](https://www.npmjs.com/package/markdown-to-jsx) untuk mengonversi Markdown menjadi HTML.
+
+```tsx fileName="App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer, MarkdownProvider } from "react-intlayer";
+import Markdown from "markdown-to-jsx";
+
+const AppContent: FC = () => {
+  const { myMarkdownContent } = useIntlayer("app");
+
+  return <>{myMarkdownContent}</>;
+};
+
+export const AppProvider: FC = () => (
+  <MarkdownProvider
+    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}
+  >
+    <AppContent />
+  </MarkdownProvider>
+);
+```
+
+```jsx fileName="App.jsx" codeFormat="esm"
+import { useIntlayer, MarkdownProvider } from "react-intlayer";
+import Markdown from "markdown-to-jsx";
+
+const AppContent = () => {
+  const { myMarkdownContent } = useIntlayer("app");
+
+  return <>{myMarkdownContent}</>;
+};
+
+export const AppProvider = () => (
+  <MarkdownProvider
+    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}
+  >
+    <AppContent />
+  </MarkdownProvider>
+);
+```
+
+```jsx fileName="App.jsx" codeFormat="commonjs"
+const { useIntlayer, MarkdownProvider } = require("react-intlayer");
+const Markdown = require("markdown-to-jsx");
+
+const AppContent = () => {
+  const { myMarkdownContent } = useIntlayer("app");
+
+  return <>{myMarkdownContent}</>;
+};
+
+AppProvider = () => (
+  <MarkdownProvider
+    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}
+  >
+    <AppContent />
+  </MarkdownProvider>
+);
+
+module.exports = {
+  AppProvider,
+};
+```
+
+Dalam implementasi ini:
+
+- `MarkdownProvider` membungkus aplikasi (atau bagian relevan darinya) dan menerima fungsi `renderMarkdown`. Fungsi ini digunakan untuk mengonversi string Markdown menjadi JSX menggunakan paket `markdown-to-jsx`.
+- Hook `useIntlayer` digunakan untuk mengambil konten Markdown (`myMarkdownContent`) dari kamus dengan kunci `"app"`.
+- Konten Markdown dirender langsung di dalam komponen, dan rendering Markdown ditangani oleh provider.
+
+### Menggunakan Markdown dengan Next Intlayer
+
+Implementasi menggunakan paket `next-intlayer` mirip dengan yang di atas. Perbedaannya hanya pada fungsi `renderMarkdown` yang harus diteruskan ke komponen `MarkdownProvider` dalam komponen client.
+
+```tsx title="src/providers/IntlayerMarkdownProvider.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC, PropsWithChildren } from "react";
+import { MarkdownProvider } from "next-intlayer";
+
+const renderMarkdown = (markdown: string) => (
+  <span style={{ color: "red" }}>{markdown}</span>
+);
+
+export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({
+  children,
+}) => (
+  <MarkdownProvider renderMarkdown={renderMarkdown}>
+    {children}
+  </MarkdownProvider>
+);
+```
+
+```jsx title="src/providers/IntlayerMarkdownProvider.msx" codeFormat="esm"
+"use client";
+
+import { MarkdownProvider } from "next-intlayer";
+
+const renderMarkdown = (markdown) => (
+  <span style={{ color: "red" }}>{markdown}</span>
+);
+
+export const IntlayerMarkdownProvider = ({ children }) => (
+  <MarkdownProvider renderMarkdown={renderMarkdown}>
+    {children}
+  </MarkdownProvider>
+);
+```
+
+```jsx title="src/providers/IntlayerMarkdownProvider.csx" codeFormat="commonjs"
+"use client";
+
+const { MarkdownProvider } = require("next-intlayer");
+
+const renderMarkdown = (markdown) => (
+  <span style={{ color: "red" }}>{markdown}</span>
+);
+
+const IntlayerMarkdownProvider = ({ children }) => (
+  <MarkdownProvider renderMarkdown={renderMarkdown}>
+    {children}
+  </MarkdownProvider>
+);
+```
+
+## Sumber Daya Tambahan
+
+- [Dokumentasi Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md)
+- [Dokumentasi React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_create_react_app.md)
+- [Dokumentasi Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_15.md)
+- [markdown-to-jsx di npm](https://www.npmjs.com/package/markdown-to-jsx)
+
+Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer dengan berbagai jenis konten dan framework.

package/docs/id/dictionary/nesting.md

@@ -0,0 +1,273 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Penanaman Kamus
+description: Pelajari cara menggunakan penanaman konten di Intlayer untuk menggunakan kembali dan menyusun konten multibahasa Anda secara efisien. Ikuti dokumentasi ini untuk mengimplementasikan penanaman dengan mulus dalam proyek Anda.
+keywords:
+  - Penanaman
+  - Penggunaan Kembali Konten
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - nesting
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Penanaman / Referensi Sub Konten
+
+## Cara Kerja Penanaman
+
+Di Intlayer, penanaman dicapai melalui fungsi `nest`, yang memungkinkan Anda merujuk dan menggunakan kembali konten dari kamus lain. Alih-alih menggandakan konten, Anda dapat menunjuk ke modul konten yang sudah ada berdasarkan kuncinya.
+
+## Menyiapkan Penanaman
+
+Untuk menyiapkan penanaman dalam proyek Intlayer Anda, pertama-tama Anda mendefinisikan konten dasar yang ingin Anda gunakan kembali. Kemudian, dalam modul konten terpisah, Anda menggunakan fungsi `nest` untuk mengimpor konten tersebut.
+
+### Kamus Dasar
+
+Berikut adalah contoh kamus dasar untuk ditanamkan dalam kamus lain:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat="typescript"
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```javascript fileName="firstDictionary.content.mjs" contentDeclarationFormat="esm"
+/** @type {import('intlayer').Dictionary} */
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+};
+
+export default firstDictionary;
+```
+
+```javascript fileName="firstDictionary.content.cjs" contentDeclarationFormat="commonjs"
+/** @type {import('intlayer').Dictionary} */
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+};
+
+module.exports = firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
+### Referensi dengan Nest
+
+Sekarang, buat modul konten lain yang menggunakan fungsi `nest` untuk mereferensikan konten di atas. Anda dapat mereferensikan seluruh konten atau nilai nested tertentu:
+
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat="typescript"
+import { nest, type Dictionary } from "intlayer";
+
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    // Mereferensikan seluruh dictionary:
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    // Mereferensikan nilai nested tertentu:
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+} satisfies Dictionary;
+
+export default myNestingContent;
+```
+
+```javascript fileName="secondDictionary.content.mjs" contentDeclarationFormat="esm"
+import { nest } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+};
+
+export default myNestingContent;
+```
+
+```javascript fileName="secondDictionary.content.cjs" contentDeclarationFormat="commonjs"
+const { nest } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+};
+
+module.exports = myNestingContent;
+```
+
+```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_second_dictionary",
+  "content": {
+    "fullNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary"
+      }
+    },
+    "partialNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary",
+        "path": "subContent.contentNumber"
+      }
+    }
+  }
+}
+```
+
+Sebagai parameter kedua, Anda dapat menentukan jalur ke nilai yang bersarang di dalam konten tersebut. Jika tidak ada jalur yang diberikan, seluruh konten dari kamus yang dirujuk akan dikembalikan.
+
+## Menggunakan Nesting dengan React Intlayer
+
+Untuk menggunakan konten bersarang dalam komponen React, manfaatkan hook `useIntlayer` dari paket `react-intlayer`. Hook ini mengambil konten yang benar berdasarkan kunci yang ditentukan. Berikut adalah contoh cara menggunakannya:
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const NestComponent: FC = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>
+        Full Nested Content: {JSON.stringify(fullNestedContent)}
+        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
+      </p>
+      <p>
+        Nilai Bersarang Parsial: {partialNestedContent}
+        {/* Output: 0 */}
+      </p>
+    </div>
+  );
+};
+
+export default NestComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const NestComponent = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>
+        Konten Bersarang Lengkap: {JSON.stringify(fullNestedContent)}
+        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
+      </p>
+      <p>
+        Nilai Bersarang Parsial: {partialNestedContent}
+        {/* Output: 0 */}
+      </p>
+    </div>
+  );
+};
+
+export default NestComponent;
+```
+
+```javascript fileName="**/*.cjx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const NestComponent = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>
+        Konten Bersarang Lengkap: {JSON.stringify(fullNestedContent)}
+        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
+      </p>
+      <p>
+        Nilai Bersarang Parsial: {partialNestedContent}
+        {/* Output: 0 */}
+      </p>
+    </div>
+  );
+};
+
+module.exports = NestComponent;
+```
+
+## Sumber Daya Tambahan
+
+Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:
+
+- [Dokumentasi Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md)
+- [Dokumentasi React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_create_react_app.md)
+- [Dokumentasi Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_15.md)
+
+Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan dengan berbagai framework.