Goal

After setting my personal site up I wanted it to be translatable to Japanese so this will be my documentation on creating a translatable version of my site.

AFAIK

The construct from what i have read and seen is that Jekyll's parser needs to read a JSON file and from my main.js it can toggle between ENG and JPN on every site, and be kept on the chosen language until switched. Even after selecting the language, going back to the site index will remain on the language same selected language becuase of localStorage.

"Data i18n"

This was something new to me, at least the name. Its stored in structured formats like JSOn and YAML. Interestingly form what i read it also does specific locale information like Date and time formats which was kinda neat.

The Layout

JSON files on root - en.json & jpn.json
JS snippet inside main.js
JS snippet inside main.js
HTML toggle switch or buttons

Thats it just these three sections, but they will spread across the entire site, so they will be added as an "includes" all thanks to Jekyll 💛

The OBJECT

                const i18n = {
        currentLang: localStorage.getItem('siteLang') || 'en',
        translations: {},
        ...
        };

For this to work, EVERYTHING MUST CHANGE *sigh Thats just the way it is

To make this page translatable using the data-i18n system, everything must be translated with data-i18n attributes. Let’s break down your HTML and see what needs it.

                <h1 data-i18n="greeting" style="margin-bottom:25px;">Greetings!</h1>
        <div class="insight">
            <h4 data-i18n="welcome_message">Welcome to my personal blog spot</h4>
            <p data-i18n="intro_text">
                Here on this site you will get to know who I am and what...
                <a href="https://packetpluckers.com" target="_blank"><span class="href" data-i18n="main_site">PacketPluckers.com</span></a>.
            </p>
            <p data-i18n="contact_invite">So please have a look around, and if you'd like, get in contact to exchange ideas or projects.</p>
            <p data-i18n="signature">- kind regards</p>
        
        </div>;

The JSON files

/en.json
/ja.json

Each file will be the "translation KEY" and will be placed in the root of the project

Inside the ENGLISH file will include the translations

                
                    
{
"siteTitle": "My Portfolio",
"welcomeMessage": "Welcome to my site!",
"aboutMe": "About Me",
"contact": "Contact",
"projects": "Projects"
}

Inside the JAPANESE file will include the translations

                
                    
{
"siteTitle": "私のポートフォリオ",
"welcomeMessage": "私のサイトへようこそ！",
"aboutMe": "自己紹介",
"contact": "お問い合わせ",
"projects": "プロジェクト"
}"