File Content / Embedding Files in Intlayer

In Intlayer, the file function allows embedding external file content into a dictionary. This approach ensures that Intlayer recognizes the source file, enabling seamless integration with the Intlayer Visual Editor and CMS.

Why using file instead of import, require, or fs?

Unlike import, require, or fs file reading methods, using file associates the file with the dictionary, allowing Intlayer to track and update the content dynamically when the file is edited. As a result, using file will offer better integration with the Intlayer Visual Editor and CMS.

Setting Up File Content

To embed file content in your Intlayer project, use the file function in a content module. Below are examples demonstrating different implementations.

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

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

Using File Content in React Intlayer

To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

Multilingual Markdown Example

To support multilingual editable Markdown files, you can use file in combination with t() and md() to define different language versions of a Markdown content file.

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

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        en: file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

This setup allows the content to be dynamically retrieved based on the user's language preference. When used in the Intlayer Visual Editor or CMS, the system will recognize that the content comes from the specified Markdown files and ensure they remain editable.

Different types of paths

When using the file function, you can use different types of paths to specify the file to embed.

• file("./path/to/file.txt") - Relative path to the current file
• file("path/to/file.txt") - Relative path to the project root directory
• file("/users/username/path/to/file.txt") - Absolute path

How Intlayer Handles File Content

The file function is based on Node.js' fs module to read the content of the specified file and insert it into the dictionary. When used in conjunction with the Intlayer Visual Editor or CMS, Intlayer can track the relationship between the dictionary and the file. This allows Intlayer to:

• Recognize that the content originates from a specific file.
• Automatically update the dictionary content when the linked file is edited.
• Ensure synchronization between the file and the dictionary, preserving the integrity of the content.

Additional Resources

For more details on configuring and using file embedding in Intlayer, refer to the following resources:

• Intlayer CLI Documentation
• React Intlayer Documentation
• Next Intlayer Documentation
• Markdown Content Documentation
• Translation Content Documentation

These resources provide further insights into file embedding, content management, and Intlayer’s integration with various frameworks.