3. Adding other languages

The first thing to do is to set the other language in the default config in src/data/langauges.js. For example this is the starter setting:

module.exports = {
  langs: ['en', 'it'],
  defaultLangKey: 'en'
};

you want to add a new lang, for example, spanish ('es'):

module.exports = {
  langs: ['en', 'it', 'es'],
  defaultLangKey: 'en'
};

after you should change the structure of the menu, from this:

module.exports = {
  'about': ['about', 'presentazione'],
  'artworks': ['artworks', 'opere'],
  'blog': ['blog', 'blog'],
  'contact': ['contact', 'contatto']
};

to:

module.exports = {
  'about': ['about', 'presentazione', 'presentación'],
  'artworks': ['artworks', 'opere', 'obras'],
  'blog': ['blog', 'blog', 'blog'],
  'contact': ['contact', 'contatto', 'contacto']
};

make these changes for all the menus. You should also change all the queries in the templates and in other components. Another step is to create a es.js file in src/data/messages folder for the Formatted messages, and adding a new flag for the spanish language in svg format. Go to this github page for the spanish flag: https://github.com/hjnilsson/country-flags/tree/master/svg or take a ready flag from this gist save it as Es.js in src/flags folder. As you added the new flag, change the SelectLanguage.js component:

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import { FormattedMessage } from 'react-intl';
import En from './Flags/En';
import It from './Flags/It';

const getIcon = langKey => {
  switch (langKey) {
    case 'en': return <En />;
    case 'it': return <It />;
    default: return null;
  }
};
//other code...

in this way:

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import { FormattedMessage } from 'react-intl';
import En from './Flags/En';
import It from './Flags/It';
import Es from './Flags/Es';

const getIcon = langKey => {
  switch (langKey) {
    case 'en': return <En />;
    case 'it': return <It />;
    case 'es': return <Es />;
    default: return null;
  }
};
//other code...

Very important is to add the path of the article in the json file src/data/articles/articles.json:

  {
      "id": "03",
      "en": "about",
      "it": "presentazione",
      "es": "presentación"
    },

in the frontmatter of the markdown file remember to add the id: '03' and lang: es

For every problem related open an issue