multilang-builder
v2.0.0
Published
Generate a multilang website
Downloads
18
Maintainers
noe_rmsReadme
multilang-builder
Summary
A powerful tool for generating multilingual websites, managing texts, and translating content easily.
Installation
Make sure you have Node.js and a package manager (npm or yarn) installed on your system.
Initialize a Node.js project (if not done already):
npm init -yInstall
multilang-builderas a development dependency:npm install multilang-builder --save-dev
Commands
Generate Website
Use the buildLang command to generate pages for different languages based on your templates and texts.
npx buildLangExtract Texts and Generate Templates
Use the extractTexts command to automatically create text files from your source pages and generate corresponding template pages.
npx extractTextsTranslate Texts
Use the translateTexts command to translate texts from one language to multiple others.
npx translateTextsConfiguration
The configuration file for multilang-builder needs to be named multilang.config.js and should be at the root of your Node.js project.
// multilang.config.js
module.exports = {
// Generate Website Configuration
generateWebsiteConfig: {
// Root path of the page templates
src: "./templates",
// Ignored files or folders
ignored: ["ignored.php", "ignored"],
// Destination for the multilang website
dest: "./dist",
// Output languages
languages: ["en", "fr"],
// Root path of the texts files
textsSrc: "./texts",
// Text separator for the templates pages
textSeparator: "@@@",
},
// Extract Texts and Generate Templates Configuration
extractTextsAndGenerateTemplateConfig: {
// Root path of the pages you want to extract the texts from
src: "./app",
// Ignored files or folders
ignored: ["ignored.php", "ignored"],
// Destination of the texts files
textsDest: "./texts",
// Destination of the templates
templatesDest: "./templates",
// Language of the extracted texts
language: "en",
// Text separator for the templates pages
textSeparator: "@@@",
},
// Translate Texts Configuration
translatingTextsConfig: {
// Root path of the texts files
src: "./texts",
// Ignored files or folders
ignored: ["ignored.js", "ignored"],
// Input language
inputLanguage: "en",
// Output languages
outputLanguages: ["fr", "de"],
// Deepl API Key
deeplApiKey: "your-deepl-api-key",
},
};Example
Extract Texts, Translate, and Generate Pages
1. Project files :
example
│ multilang.config.js
│ package.json
│ package-lock.json
└── src
└── index.html// multilang.config.js
module.exports = {
extractTextsAndGenerateTemplateConfig: {
src: "./src",
ignored: [],
textsDest: "./texts",
templatesDest: "./templates",
language: "en",
textSeparator: "@@@",
},
translatingTextsConfig: {
src: "./texts",
ignored: [],
inputLanguage: "en",
outputLanguages: ["fr"],
deeplApiKey: "your-random-api-key-placeholder",
},
generateWebsiteConfig: {
src: "./templates",
ignored: [],
dest: "./dist",
languages: ["en", "fr"],
textsSrc: "./texts",
textSeparator: "@@@",
},
};<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilang Builder</title>
</head>
<body>
<header>
<h1>Welcome to Multilang Builder</h1>
<h2>Your Multilingual Solution</h2>
</header>
<main>
<p>Generate pages in multiple languages easily.</p>
</main>
</body>
</html>2. Extract texts and generate templates
Extract command :
npx extractTextsNew files :
example
│ multilang.config.js
│ package.json
│ package-lock.json
│ templates
│ └── index.html
│ texts
│ └── index.js
└── src
└── index.html<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@@@0@@@</title>
</head>
<body>
<header>
<h1>@@@1@@@</h1>
<h2>@@@2@@@</h2>
</header>
<main>
<p>@@@3@@@</p>
</main>
</body>
</html>
// texts/index.js
module.exports = {
"en": {
"0": "Multilang Builder",
"1": "Welcome to Multilang Builder",
"2": "Your Multilingual Solution",
"3": "Generate pages in multiple languages easily."
}
};3. Translate texts
Translate command :
npx translateTextsNew text file :
// texts/index.js
module.exports = {
"en": {
"0": "Multilang Builder",
"1": "Welcome to Multilang Builder",
"2": "Your Multilingual Solution",
"3": "Generate pages in multiple languages easily."
},
"fr": {
"0": "Multilang Builder",
"1": "Bienvenue dans Multilang Builder",
"2": "Votre solution multilingue",
"3": "Générez des pages dans plusieurs langues facilement.",
}
};4. Generate website
Generate website command :
npx buildLangNew files :
example
│ multilang.config.js
│ package.json
│ package-lock.json
│ templates
│ └── index.html
│ dist
│ └── en
│ └── index.html
│ └── fr
│ └── index.html
│ texts
│ └── index.js
└── src
└── index.html<!-- dist/en/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilang Builder</title>
</head>
<body>
<header>
<h1>Welcome to Multilang Builder</h1>
<h2>Your Multilingual Solution</h2>
</header>
<main>
<p>Generate pages in multiple languages easily.</p>
</main>
</body>
</html><!-- dist/fr/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilang Builder</title>
</head>
<body>
<header>
<h1>Bienvenue dans Multilang Builder</h1>
<h2>Votre solution multilingue</h2>
</header>
<main>
<p>Générez des pages dans plusieurs langues facilement</p>
</main>
</body>
</html>