npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

smws

v1.0.2

Published

Simple multilingual website module

Downloads

20

Readme

smws

Simple multilingual website module

This is lightweight module, which help to render and controle you pages and paths.

Work with Express.js, tested with EJS and Eta view engines.

You can create multilingual website with SEO friendly urls.

To see and test example pls visit test on Github

Installation

$ npm i smws

Features

  • Check language from params or cookies,
  • Render view engine template with options from language file,
  • Not needed to setup app.get for each language,
  • SEO friendly urls;

Functions

smws.switcher(req,res); - use to switch languages from client-side;

smws.run(req,res,val); - use to render template and contole params;

smws.split(path); - use to make multilingual url ;

Setup example

Setup you app file

For example:

const express = require('express'),
      cookieParser = require('cookie-parser'), // needed cookie-parser
      bodyParser = require('body-parser'), // needed body-parser
      smws = require('smws'), // require smws
      app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
app.use(cookieParser());


app.listen(process.env.PORT || 3000, () => {
   console.log('Server running on port 3000');
});

Configure module:

Use smws.config({options}); to setup module defaults;

This function is mandatory to setup

smws.config({
    defaultLang: 'de',
    languages: ['en','de','ru'],
    origin: 'https://yourdomain.com'
});

Config options:

  • languages Are your website languages, write in array. By default ['en'],
  • defaultLang Is prefered default language which will be rendered when someone first time visit your homepage. By default 'en',
  • langDir Is directory name in root where you store your .json files with traslations. By default 'languages',
  • origin Is youre website origin. By default 'http://localhost:3000',
  • cookieName Is cookie name which will be used to set language. By default 'lang',
  • langParam Is path param for languages. By default 'lang';

Write your GET requests

When you write your paths use smws.split('path') to GET SEO friendly urls with params in all languages.

For example:

app.get(smws.split('/:lang/:category/'), (req,res)=>{
    /////////////////////
});

Response templates and controle urls

Use smws.run({options}); to render template and controle your params:

app.get(smws.split('/:lang/:category/'), (req,res)=>{
    smws.run(req,res,{
        page: 'index',
        useParams: ['lang', 'category'],
        page404: 'page404'
    });
});

Run options:

  • page Template in views which will be used for response. By default index;
  • useParams Array of params which need to controle, example:

You have this path /:lang/:category/:userID, and you want to controle translation only for :lang and :category params.

You have language .json files ru.json and en.json.

In language files you add translation for this params (more about language files below).

for en.json lang: 'en', category: 'category' and ru.json lang: 'ru', category: 'kategoriya',

then function allows to open paths like /en/category/:userID or /ru/kategoriya/:userID,

But sends 404 page when path will be /en/kategoriya/:userID or /ru/category/:userID;

  • page404 Template for 404 page. If not added then will response Page not found;

Setup language files

Default dir languages, you can change it in smws.config({options});.

Use file names same with you are defined in smws.config({languages: ['en','ru']});.

Language file example:

// en.json
{
    "smws": {
            "category": "category",
            "lang": "en"
    },
    "hello": "Hello world"
}

Language switcher

You will need to setup backend and front-end to change prefered language!

In backend use smws.switcher(req,res);:

// example:
app.post('/:lang/languages',(res,req)=>{
    smws.switcher(req,res);
});

In front-end:

<!-- using Eta engine -->
<form action="/<%= it.smws.lang %>/language" method="post">
    <button class="en-button" type="submit" name="lang" value="en">EN</button>
    <button class="ru-button" type="submit" name="lang" value="ru">RU</button>
</form>

<!-- using ejs engine -->
<form action="/<%= smws.lang %>/language" method="post">
    <button class="en-button" type="submit" name="lang" value="en">EN</button>
    <button class="ru-button" type="submit" name="lang" value="ru">RU</button>
</form>

Thank you for attention!

Hope this module will be helpfull for someone!

If you like it and want to say thx

ko-fi