md
# Getting Started the declaration of your content## Files extensionsBy default, Intlayer watches all files with the following extensions for content declarations:- `.content.ts`- `.content.tsx`- `.content.js`- `.content.mjs`- `.content.cjs`The application will search for files that match the `./src/**/*.content.{ts,tsx,js,jsx,mjs,cjs}` glob pattern by default.These default extensions are suitable for most applications. However, if you have specific requirements, refer to the [content extension customization guide](https://github.com/aymericzip/intlayer/blob/main/docs/{{locale}}/configuration.md#content-configuration) for instructions on how to manage them.For a full list of configuration options, visit the configuration documentation.## Declare Your ContentCreate and manage your dictionaries:```tsx fileName="src/example.content.ts" codeFormat="typescript"import { t, enu, cond, nest, md, type Dictionary } from "intlayer";interface Content { imbricatedContent: { imbricatedContent2: { stringContent: string; numberContent: number; booleanContent: boolean; }; multilingualContent: string; quantityContent: string; conditionalContent: string; nestedContent: string; markdownContent: string; externalContent: string; };}export default { key: "page", content: { imbricatedContent: { imbricatedContent2: { stringContent: "Hello World", numberContent: 123, booleanContent: true, javaScriptContent: `${process.env.NODE_ENV}`, }, }, multilingualContent: t({ en: "English content", "en-GB": "English content (UK)", fr: "French content", es: "Spanish content", }), quantityContent: enu({ "<-1": "Less than minus one car", "-1": "Minus one car", "0": "No cars", "1": "One car", ">5": "Some cars", ">19": "Many cars", }), conditionalContent: cond({ true: "Validation is enabled", false: "Validation is disabled", }), nestedContent: nest( "navbar", // The key of the dictionary to nest "login.button" // [Optional] The path to the content to nest ), externalContent: async () => await fetch("https://example.com"), markdownContent: md("# Markdown Example"), /* * Only available using `react-intlayer` or `next-intlayer` */ jsxContent: <h1>My title</h1>, },} satisfies Dictionary<Content>; // [optional] Dictionary is generic and allow you to strengthen the formatting of your dictionary```
Function imbrication
You can without problem imbricate functions into other ones.
Example :
src/example.content.ts
import { t, enu, cond, nest, md, type Dictionary } from "intlayer";const getName = async () => "John Doe";export default { key: "page", content: { // `getIntlayer('page','en').hiMessage` returns `['Hi', ' ', 'John Doe']` hiMessage: [ t({ en: "Hi", fr: "Salut", es: "Hola", }), " ", getName(), ], // Composite content imbricating condition, enumeration, and multilingual content // `getIntlayer('page','en').advancedContent(true)(10) returns 'Multiple items found'` advancedContent: cond({ true: enu({ "0": t({ en: "No items found", fr: "Aucun article trouvé", es: "No se encontraron artículos", }), "1": t({ en: "One item found", fr: "Un article trouvé", es: "Se encontró un artículo", }), ">1": t({ en: "Multiple items found", fr: "Plusieurs articles trouvés", es: "Se encontraron múltiples artículos", }), }), false: t({ en: "No valid data available", fr: "Aucune donnée valide disponible", es: "No hay datos válidos disponibles", }), }), },} satisfies Dictionary;
If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentation