When writing a text content of multiple HTML documents with different languages, editing element by element is a pain in the ass. Mulang helps you to render multiple HTML files simultaneously with a single JSON file.

Short Example.

Source HTML

<h1 class="m__landing_title"></h1>

Target JSON

{ "landing_title": "Hello World!" }

Result (String)

<h1 class="m__landing_title">Hello World!</h1>

why mulang?

Cleaner structure for your multi-language projects.
Easy to bind with popular frameworks.
Easy to edit contents for non-coders.

- Coming Soon - Mulang Interactive | JSON editor for non-coder. GUI provided on a browser. HTML file is rendered interactively.

Documentation

Initiation

When initiating, you have to

let mulang = new Mulang({
    // You can pass HTML String and JSON Object directly.  
    sourceHtml='<!DOCTYPE html> ···',targetJson='{m__foo: "text content"}',
    // Or pass file path for HTML and JSON file.
    sourceHtmlPath='/path/to/file',targetJsonPath='/path/to/file',
    
    // One of path/file must be provided. 
    // If both provided, HTML String and JSON Object will be used.

    // ( under update below, not effective yet. Do not edit. )
    documentMode="html",parseMode="class",insertMode="prepend"
});

Render HTML file

Simple! Execute render function, get a result with JSON!

const result = mulang.render();

// { "eng":"<!DOCTYPE html> ···", "kor":"<!DOCTYPE html> ···" }

if(req.body.lang == 'eng') res.send(result.eng);
if(req.body.lang == 'kor') res.send(result.kor);

How to write a target JSON files

"meta" includes

"languages" - An array of language names (ordered).
"linebreak" - A linebreak tag inside an HTML 3. String. (dafalut = ).
"updateHistory" - (only for mulang interactive)

"contents" includes

"mulang tag" - A tag name without m__ prefix.

{
    "meta":
    {
        "languages": ["eng","kor"],
        "linebreak": "<br>",
    },
    "contents":
    {
        "section_1_title": ["title","제목"],
        "section_1_description_1": ["single line","한 줄"],
        "section_1_description_2": ["line1<br>line2","줄1<br>줄2"]
    },
    // added automatically by mulang interactive
    "updateHistory": 
    //[
    //    {"user": "admin", "time": "2020-09-26 01:04:00", "comment":"first commit", "contents": ""}
    //]
}

Keywords

FAQs

What is @lifund/mulang?

Is @lifund/mulang well maintained?

Last updated on 18 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@lifund/mulang

mulang

Description