intlayer-content

Intlayer コンテンツノード

Intlayer の関数を使用して、リッチで動的なコンテンツを定義します。各ノードタイプについては、以下のリファレンスを参照してください。

翻訳（t）

ロケールに対応付けた多言語コンテンツを定義します。

ドキュメント

import { t } from "intlayer";

const content = t({
  en: "Hello",
  fr: "Bonjour",
  es: "Hola",
});

設定ファイルで宣言するロケールを確認してください。サポートされている設定ファイル：

• intlayer.config.{ts|js|json|json5|jsonc|cjs|mjs}
• .intlayerrc

列挙（enu）

コンテンツを特定のキー、数値、または範囲に対応付けます（複数形の処理に便利です）。

ドキュメント

import { enu } from "intlayer";

const carCount = enu({
  "0": "No cars",
  "1": "One car",
  ">1": "Multiple cars",
  fallback: "Unknown amount",
});

条件（cond）

ブール条件に基づいてコンテンツを定義します。

ドキュメント

import { cond } from "intlayer";

const isLoggedIn = cond({
  true: "Welcome back!",
  false: "Please log in",
  fallback: "Status unknown", // Optional
});

Markdown（md）

Markdown 構文を使用してリッチテキストを定義します。

ドキュメント

import { md } from "intlayer";

const article = md("# Title\n\nSome **bold** text.");

HTML（html）

カスタムコンポーネントを使用することもできる HTML コンテンツを定義します。

ドキュメント

import { html } from "intlayer";

const richText = html("<p>Hello <strong>World</strong></p>");

ネスト（nest）

別の辞書のコンテンツを再利用します。

ドキュメント

import { nest } from "intlayer";

// Reference entire dictionary
const fullRef = nest("other_dictionary_key");

// Reference specific path
const partialRef = nest("other_dictionary_key", "path.to.value");

関数による取得

ロジックを実行してコンテンツを生成します（同期または非同期）。

ドキュメント

const computed = () => `Current time: ${new Date().toISOString()}`;

const fetched = async () => {
  const data = await fetch("/api/data").then((res) => res.json());
  return data.message;
};

挿入（insert）

変数を使用した動的コンテンツを定義します。

ドキュメント

import { insert } from "intlayer";

const welcome = insert("Hello {{name}}!");

ファイル（file）

外部ファイルをコンテンツとして参照します。

ドキュメント

import { file } from "intlayer";

const myFile = file("./path/to/file.txt");

性別（gender）

性別（「male」、「female」など）に基づいてコンテンツを定義します。

ドキュメント

import { gender } from "intlayer";

const greeting = gender({
  male: "Welcome sir",
  female: "Welcome madam",
  fallback: "Welcome",
});

ディレクトリ構成の例（react）

src/
├── components/
│   ├── MyComponent/
│   │   ├── index.content.ts          # Content declaration
│   │   └── index.tsx                 # Component
│   ├── myOtherComponent.content.ts   # Content declaration
│   └── MyOtherComponent.tsx          # Component

コンテンツテンプレート

TypeScript（.content.ts）

import { t, type Dictionary } from "intlayer";

const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
} satisfies Dictionary;

export default content;

TypeScript と React（.content.tsx）

import { t, type Dictionary } from "intlayer";
import { ReactNode } from "react";

const content = {
  key: "my-component-key",
  content: {
    title: <>My React Node</>,
  },
} satisfies Dictionary;

export default content;

{
  "key": "my-component-key",
  "content": {
    "title": "..."
  }
}

import { t } from "intlayer";

/** @type {import('intlayer').Dictionary} **/
const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
};

export default content;

コンテンツ宣言の組み合わせ

複雑なロジックを実現するために、ノードを入れ子にできます。

import {
  cond,
  enu,
  file,
  gender,
  insert,
  html,
  md,
  nest,
  t,
  type Dictionary,
} from "intlayer";

const content = {
  key: "test",
  title: "Test component content",
  description:
    "Content declarations for the Test component, including examples of plurals, conditions, gender-specific messages, dynamic insertions, markdown, file-based content and nested dictionaries used for demonstration and testing purposes.",
  content: {
    baseContent: "Intlayer", // Content that no need to be i18n
    welcomeMessage: t({
      en: "Welcome to our application",
      "en-GB": "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
      // ... All other locales set in intlayer config file
    }),
    numberOfCar: enu({
      // Check all conditions in other
      "<-1": "Less than minus one car",
      "-1": "Minus one car",
      "0": "No cars",
      "1": "One car",
      ">19": "Many cars",
      ">5": "Some cars", // Will never will triggered, because >5 is included between 1 and >19
      fallback: "Fallback value", // Optional but avoid undefined type
    }),
    myCondition: cond({
      true: "my content when it's true",
      false: "my content when it's false",
      fallback: "my content when the condition fails", // Optional but avoid undefined type
    }),
    myGender: gender({
      male: "my content for male users",
      female: "my content for female users",
      fallback: "my content when gender is not specified", // Optional but avoid undefined type
    }),
    myInsertion: insert(
      "Hello, my name is {{name}} and I am {{age}} years old!"
    ),
    myMultilingualInsertion: insert(
      t({
        ar: "مرحبا, اسمي {{name}} وأنا {{age}} سنة!",
        de: "Hallo, mein Name ist {{name}} und ich bin {{age}} Jahre alt!",
        en: "Hello, my name is {{name}} and I am {{age}} years old!",
        "en-GB": "Hello, my name is {{name}} and I am {{age}} years old!",
      })
    ),
    myTextFile: file("./test.txt"), // File helps to know where is located the file
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
    fullNested: nest("code"),
    // References a specific nested value:
    partialNested: nest("code", "title"),
    myMarkdown: md("## My title \n\nLorem Ipsum"),
    myMarkdownFile: md(file("./test.md")),
    multilingualMarkdown: t({
      en: md("## test en"),
      fr: md("## test fr"),
      es: md("## test es"),
      "en-GB": md("## test en-GB"),
    }),
    myHTML: html("<h2>My title</h2><p>Lorem Ipsum</p>"),
    myHTMLFile: html(file("./test.html")),

    arrayContent: ["string", "string2", "string3"],
    arrayOfObject: [
      {
        name: "item1",
        description: "description1",
      },
      {
        name: "item2",
        description: "description2",
      },
    ],
    objectOfArray: {
      array: ["item1", "item2", "item3"],
      object: {
        name: "object name",
        description: "object description",
      },
    },
  },
  tags: ["test", "test page"],
} satisfies Dictionary;

export default content;

辞書の型検証

Dictionary<{ title: string; description?: string }>; // Generic describing content type for formatted data (metadata, etc)

AI による管理に使用する主な辞書フィールド

コアメタデータ

• key: 辞書の識別子です（例：about-page-meta）。AI は一貫した命名規則を維持できます。
• title: CMS またはエディターで識別するための、人が読みやすい名前です。
• description: 辞書のコンテキストを示します。AI はこれを使用して目的を理解し、より適切な翻訳やコンテンツを生成します。
• tags: 辞書の整理やフィルタリングに役立つ分類用文字列です（例：metadata、SEO）。

コンテンツとローカライズ

• locale: （ロケールごとのファイル）[references/concept_per-locale-file.md] に対するコンテンツの言語を指定します。
• contentAutoTransformation: 文字列を Markdown、HTML、挿入（変数）などの特殊な形式に自動変換するかどうかを切り替えます。
• fill: AI／自動化ツールで辞書を自動入力するかどうかを示す指示です。

動作設定

• priority: 同じキーの辞書をマージする際の競合解決に使用する数値です。
• importMode: コンテンツの読み込み方法（static、dynamic、live）を定義します。AI はパフォーマンスの要件に基づいて最適なモードを推奨できます。
• location: CMS との同期方法（hybrid、remote、local）を制御します。AI は信頼できる情報源の配置場所を管理できます。
• schema: 設定ファイルで宣言された zod スキーマを使用してデータを検証する文字列です。

参考資料

• ウェブサイト

• ドキュメント

• コンテンツの概要

• intlayer パッケージのエクスポート