My Home Page

This is home page of my site. It was created as starting point for my other projects. So you can find here a lot of excessive and unused details for current project but they can be useful for yours.

Main features

Main code are based on Vue framework 2.5.*
All site code and build configurations wrote on TypeScript 2.8.*
TSLint rules for all scripts
For storing date the site uses on Vuex 3.0.*
Server Side Rendering (SSR) based on vue-ssr
Vue Router for site routing
Supporting React like render functions inside *.tsx and *.vue files
Using Babel 7 for effective code transpilation to ES5.
Using Bootstrap 4 as style framework with SASS compilation and modifications via sass variables.
Using Font Awesome 5 for site icons.
Generating site favicons for all popular platforms on build
Using WorkBox 3 tools for working with Service Worker features
Using Server Side Component Cache
Run client side tests on Karma
Generate test coverage report by Istanbul project
Multilanguage supporting (please see notes bellow)
Supporting Docker container as build destination

Multilanguage

Provided way for multilanguage supportng is not common and shouldn't be used for site with many languages. But if you have only 2 or 3 languages you can follow by this way.

You can mark language relative part of you template (doesn't matter vue or react) by lang attribute:

<div>
    <span lang="ru">Это русский текст</span>
    <span lang="en">It is English text</span>
<div>

Webpack loader just remove all tags with not current text, so at the result you receive for lang='en':

<div>

    <span lang="en">It is English text</span>
<div>

And for lang='ru':

<div>
    <span lang="ru">Это русский текст</span>

<div>

In this case Webpack creates two different packages for each language.

Also you can set translation in any places outside html elements. It can be html attributes or javascript variables:

<div>
    <input name="name" placeholder="$lang-en(Your name)$lang-ru(Ваше имя)"/>
<div>

class MyComponent {
    public userText = '$lang-en(Warning)$lang-ru(Внимание)';
}

Build Setup

# install dependencies
yarn install

# build client and server side in watch mode, run server on 8080 port with SSR
yarn dev

# run all Karma tests
yarn test

# run all Karma tests in watch mode
yarn test:watch

# run the test suite and generate a coverage report
yarn run coverage

# Run the tests and build the site in production mode
yarn build

# clean the production build
yarn clean

raidenyn/personal-site

My Home Page

Main features

Multilanguage

Build Setup