A Lume plugin for developing multi-language websites. Lume is a static-site generator for the Deno JavaScript/TypeScript runtime.
lume_langdata automates the creation of language-related shared data for Lume projects.
✅ You can simply use mdrb and skip the rest of this section. Or else read on.
Call lume_langdata from your Lume project's configuration file:
// _config.ts
import lume from 'lume/mod.ts';
import lume_langdata from 'lume_langdata';
export default
lume({
location: new URL('https://site.example'),
src : './src',
dest : './build',
})
.use(lume_langdata());In your lume project's deno.json file, don't forget to define the lume_langdata import, and also the compiler option that lume_langdata depends on:
{
"imports": {
"lume/" : "https://deno.land/x/[email protected]/",
"lume_langdata" : "https://deno.land/x/[email protected]/mod.ts",
},
"compilerOptions": {
"types": [
"lume/types.ts"
]
}
}[email protected] versions are compatible with [email protected].
lume_langdata assumes that your Lume project's source directory contains one directory for each language. The directory name must be a ISO 639-1 language code. lume_langdata will ignore directories with a non-conforming name. Note that the names of the language directories must be lower-cased.
For example, if your source directory contains the following directories and files:
entrassetsindex.html
then lume_langdata will ignore the assets directory and the index.html file.
Given the source directory structure shown above, lume_langdata will generate the following data files. Note that the generated data files will modify your source directory.
In this example, a file named languages.json will be generated in the source directory, containing:
["en","tr"]so that the source directory will then look as follows:
languages.jsonentrassetsindex.html
The main use case for languages.json is redirecting the user to his/her preferred language. For example, index.html could contain JavaScript code such as:
fetch('/languages.json')
.then((response) => response.json())
.then((siteLanguages) => {
let lang = siteLanguages[0];
// Fine-tune lang here ...
window.location.assign(`/${lang}/`);
}lume_langdata will generate the following files:
en/_data/lang.yamltr/_data/lang.yaml
For example, en/_data/lang.yaml will contain:
code: enThe main use case for this shared data is the localization of Lume layouts:
<!DOCTYPE html>
<html lang="{{ lang.code }}">
<!-- ... -->
</html>If you are developing multi-language sites, the following Lume plugin is a nice complement to the lume_langdata plugin:
This website project uses Lume and lume_langdata.
lume_langdata is released under the Apache 2.0 License.