Switching feature

gatsby-node.js

@@ -26,11 +26,11 @@ exports.createPages = ({ actions, graphql }) => {
               slug
             }
             frontmatter {
+              id
               date
               path
               tags
               templateKey
-              nameSlug
               lang
               title
             }

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "gatsby-starter-contentful-i18n",
+  "name": "gatsby-starter-i18n-bulma",
   "private": true,
-  "description": "Gatsby example site using the Contentful source plugin and i18n",
-  "version": "2.0.0",
-  "author": "Paul McCrodden <paul.mccrodden@x-team.com> (paulmccrodden.com)",
+  "description": "Gatsby example site using i18n and bulma for CSS",
+  "version": "0.1.5",
+  "author": "Walter Perdan <info@kalwaltart.it> (www.kalwaltart.it)",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
     "@fortawesome/free-brands-svg-icons": "^5.7.2",
@@ -52,9 +52,7 @@
   ],
   "license": "MIT",
   "main": "n/a",
-  "resolutions": {
-    "contentful": "6.1.0"
-  },
+  "resolutions": "",
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",

src/components/Flags/En.js

@@ -6,11 +6,11 @@ const En = (props) => {
     <Icon viewBox="0 0 640 480" {...props}>
     <defs>
    <clipPath id="a">
-     <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
+     <path fillOpacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
    </clipPath>
  </defs>
- <g clip-path="url(#a)" transform="translate(80) scale(.94)">
-   <g stroke-width="1pt">
+ <g clipPath="url(#a)" transform="translate(80) scale(.94)">
+   <g strokeWidth="1pt">
      <path fill="#012169" d="M-256 0H768v512H-256z"/>
      <path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
      <path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>

src/components/Flags/It.js

@@ -4,7 +4,7 @@ import Icon from 'react-icon-base';
 const It = (props) => {
   return (
     <Icon viewBox="0 0 640 480" {...props}>
-    <g fill-rule="evenodd" stroke-width="1pt">
+    <g fillRule="evenodd" strokeWidth="1pt">
       <path fill="#fff" d="M0 0h640v480H0z"/>
       <path fill="#009246" d="M0 0h213.3v480H0z"/>
       <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>

src/components/Footer.js

@@ -1,11 +1,14 @@
 import React from 'react'
 import { Link } from 'gatsby'
+import select from '../components/utils'
+import menuTree from '../data/menuTree'
 
 import logo from '../img/logo.svg'
 
 const Footer = class extends React.Component {
   render() {
     const props = this.props;
+    const sel = select(props.langKey);
     return (
       <footer className="footer has-background-black has-text-white-ter">
         <div className="content has-text-centered">
@@ -22,8 +25,8 @@ const Footer = class extends React.Component {
                 <section className="menu">
                     <ul className="menu-list">
                       <li><Link to={props.langKey} className="navbar-item">Home</Link></li>
-                      <li><Link className="navbar-item" to={props.langKey + "/about"}>About</Link></li>
-                      <li><Link className="navbar-item" to={props.langKey + "/artworks"}>
+                      <li><Link className="navbar-item" to={props.langKey + "/" + menuTree.about[sel] +"/"}>About</Link></li>
+                      <li><Link className="navbar-item" to={props.langKey + "/" + menuTree.artworks[sel] +"/"}>
                         Artworks
                       </Link>
                     </li>
@@ -42,12 +45,12 @@ const Footer = class extends React.Component {
                 <section>
                   <ul className="menu-list">
                   <li>
-                    <Link className="navbar-item" to={props.langKey + "/blog"}>
+                    <Link className="navbar-item" to={props.langKey + "/" + menuTree.blog[sel] +"/"}>
                       Latest Stories
                     </Link>
                   </li>
                   <li>
-                    <Link className="navbar-item" to={props.langKey + "/contact"}>
+                    <Link className="navbar-item" to={props.langKey + "/" + menuTree.contact[sel] +"/"}>
                       Contact
                     </Link>
                   </li>

src/components/Header.js

@@ -3,6 +3,9 @@ import Link from 'gatsby-link'
 import logo from '../img/logo.svg'
 import { FaHome, FaQuestion, FaImage, FaPenAlt, FaAmericanSignLanguageInterpreting } from 'react-icons/fa';
 import SelectLanguage from './SelectLanguage';
+import { FormattedMessage } from 'react-intl';
+import menuTree from '../data/menuTree'
+import select from '../components/utils'
 
 const Header = class extends React.Component {
 
@@ -31,7 +34,7 @@ const Header = class extends React.Component {
  render() {
 
    const props = this.props;
-
+   const sel = select(props.langKey);
    return (
 
 <header>
@@ -54,19 +57,19 @@ const Header = class extends React.Component {
         <div id="navMenu" className="navbar-menu">
         <div className="navbar-start has-text-centered">
           <Link className="navbar-item" to={props.langKey}>
-            <FaHome /> Home
+            <FaHome /> <FormattedMessage id="home" />
           </Link>
-          <Link className="navbar-item" to={props.langKey + "/about/"}>
-            <FaQuestion /> About
+          <Link className="navbar-item" to={props.langKey + "/" + menuTree.about[sel] +"/"}>
+            <FaQuestion /> <FormattedMessage id="about" />
           </Link>
-          <Link className="navbar-item" to={props.langKey + "/artworks/"}>
-            <FaImage /> Artworks
+          <Link className="navbar-item" to={props.langKey + "/" + menuTree.artworks[sel] +"/"}>
+            <FaImage /> <FormattedMessage id="artworks" />
           </Link>
-          <Link className="navbar-item" to={props.langKey + "/blog/"}>
-            <FaPenAlt /> Blog
+          <Link className="navbar-item" to={props.langKey + "/" + menuTree.blog[sel] +"/"}>
+            <FaPenAlt /> <FormattedMessage id="blog" />
           </Link>
-          <Link className="navbar-item" to={props.langKey + "/contact/"}>
-            <FaAmericanSignLanguageInterpreting /> Contact
+          <Link className="navbar-item" to={props.langKey + "/" + menuTree.contact[sel] +"/"}>
+            <FaAmericanSignLanguageInterpreting /> <FormattedMessage id="contact" />
           </Link>
         </div>
         </div>

src/components/Layout.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
 import Helmet from 'react-helmet'
-import { getCurrentLangKey, getLangs, getUrlForLang } from 'ptz-i18n';
+import { getCurrentLangKey, getLangs, getUrlForLang, getSlugAndLang } from 'ptz-i18n';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { rhythm } from "../utils/typography"
 import 'intl';
@@ -17,6 +17,43 @@ import 'intl/locale-data/jsonp/it';
 import './all.sass'
 import 'font-awesome/css/font-awesome.css'
 
+import articleId from '../data/articleTree'
+import menuTree from '../data/menuTree'
+
+
+const getIdUrl = (id, langKey) => {
+  if(id){
+  var res;
+  switch (langKey) {
+    //we get the name of the page according the id
+    case 'en':
+    res = articleId[id][0];
+    break;
+    case 'it':
+    res = articleId[id][1];
+    break;
+    default: return null;
+  }
+  return res;
+}
+};
+
+const startPath = (langKey, langsMenu, basename, _url) => {
+  const lengthLangKey = langKey.length;
+  var indx;
+  indx = _url.indexOf(basename);
+  const basePath = _url.slice(lengthLangKey + 2, indx);
+  return basePath;
+};
+
+
+const setLangsMenu = ( langsMenu, id, basePath) => {
+  if(id){
+  langsMenu[0].link = `/en/${basePath}` + getIdUrl(id, 'en');
+  langsMenu[1].link = `/it/${basePath}` + getIdUrl(id, 'it');
+}
+};
+
 // add concatenated locale data
 addLocaleData([...en, ...it]);
 
@@ -30,9 +67,12 @@ class TemplateWrapper extends Component {
     const { langs, defaultLangKey } = data.site.siteMetadata.languages;
     this.langKey = getCurrentLangKey(langs, defaultLangKey, url);
     this.homeLink = `/${this.langKey}/`;
-    console.log("language is: ");
-    console.log(this.langKey);
     this.langsMenu = getLangs(langs, this.langKey, getUrlForLang(this.homeLink, url));
+    const id_article = data.markdownRemark.frontmatter.id;
+    const basename = getIdUrl(id_article, this.langKey);
+    var basePath = startPath(this.langKey, this.langsMenu, basename, url);
+    //finally here we set the desired url...
+    setLangsMenu( this.langsMenu, id_article, basePath);
 
     // get the appropriate message file based on langKey
     // at the moment this assumes that langKey will provide us
@@ -53,7 +93,7 @@ class TemplateWrapper extends Component {
               { name: 'keywords', content: 'sample, something' },
             ]}
           />
-          <Header langKey={this.langKey} langs={this.langsMenu} />
+          <Header langKey={this.langKey} langs={this.langsMenu} menu={this.menuTree} />
           <div>
             {this.children}
           </div>

src/components/utils.js

@@ -0,0 +1,16 @@
+const select = (langKey) => {
+  var res;
+  switch(langKey){
+  case('en'):
+  res = 0;
+  break;
+  case('it'):
+  res = 1;
+  break;
+  default:
+  res = null;
+  }
+  return res;
+};
+
+export default select;

src/data/articleTree.js

@@ -0,0 +1,9 @@
+module.exports = {
+  '1': ['/', '/'],
+  '2': ['about','presentazione'],
+  '3': ['contact','contatto'],
+  '4': ['artworks','opere'],
+  '5': ['artworks-page-test','pagina-opere-test'],
+  '6': ['2019-02-01-my-first-gatsby-blog-post','2019-02-01-mio-primo-blog-post-gatsby'],
+  '7': ['2019-03-11-news-from-art-planet', '2019-03-11-notizie-dal-pianeta-arte'],
+};

src/data/menuTree.js

@@ -0,0 +1,6 @@
+module.exports = {
+  'about': ['about', 'presentazione'],
+  'artworks': ['artworks', 'opere'],
+  'blog': ['blog', 'blog'],
+  'contact': ['contact', 'contatto']
+};

src/data/messages/en.js

@@ -1,3 +1,8 @@
 module.exports = {
-  'selectLanguage': 'Select your language'
-};
+  'selectLanguage': 'Select your language',
+  'home': 'Home',
+  'about': 'About',
+  'artworks': 'Artworks',
+  'blog': 'Blog',
+  'contact': 'Contacts',
+};

src/data/messages/it.js

@@ -1,3 +1,8 @@
 module.exports = {
-  'selectLanguage': 'Seleziona la lingua'
+  'selectLanguage': 'Seleziona la lingua',
+  'home': 'Casa',
+  'about': 'A proposito',
+  'artworks': 'Opere',
+  'blog': 'Blog',
+  'contact': 'Contatti',
 };

src/pages/about.en.md

@@ -1,7 +1,7 @@
 ---
+id: 02
 title: "About me"
 description: "Something about me"
-nameSlug: page-about-en
 templateKey: home
 lang: en
 date: "05-03-2019"

src/pages/artworks/pagina-artworks-test.en.md → src/pages/artworks/artworks-page-test.en.md

@@ -1,8 +1,8 @@
 ---
+id: 05
 title: "Artworks page english"
 description: "qualche contenuto"
 templateKey: artworks
-nameSlug: pagina-artrwork-en
 tags:
   - art
 lang: it

src/pages/artworks/index.en.md

@@ -1,8 +1,8 @@
 ---
+id: 04
 title: "Artworks start page english"
 description: "The root of the artwork page"
 templateKey: artworks
-nameSlug: artwork-page-en
 tags:
   - art
 lang: en

src/pages/blog/2019-02-01-my-first-gatsby-blog-post.it.md → src/pages/blog/2019-02-01-mio-primo-blog-post-gatsby.it.md

@@ -1,6 +1,7 @@
 ---
+id: 06
 templateKey: blog-post
-title: My first gatsby blog post.
+title: Il mio primo post con Gatsby.
 date: 2019-02-01T22:31:28.375Z
 description: Il mio primo blog con Gatsby...
 lang: it

src/pages/blog/2019-02-01-my-first-gatsby-blog-post.en.md

@@ -1,6 +1,7 @@
 ---
+id: 06
 templateKey: blog-post
-title: Il mio primo blog post con Gatsby.
+title: My first gatsby blog post.
 date: 2019-02-01T22:31:28.375Z
 description: My first gatsby blog post really...
 lang: en

src/pages/blog/2019-03-11-news-from-art-planet.en.md

@@ -1,4 +1,5 @@
 ---
+id: 07
 templateKey: blog-post
 title: News from the art planet.
 date: 2019-03-11

src/pages/blog/2019-03-11-news-from-art-planet.it.md → src/pages/blog/2019-03-11-notizie-dal-pianeta-arte.it.md

@@ -1,4 +1,5 @@
 ---
+id: 07
 templateKey: blog-post
 title: News dal mondo dell'arte.
 date: 2019-03-11

src/pages/contact.en.md

@@ -1,12 +1,12 @@
 ---
+id: 03
 title: "Contact page"
 description: "Page to send an e-mail"
-nameSlug: page-contact-en
 templateKey: contacts
 tags:
   - web
 nameLabel: "Your name"
-lang: it
+lang: en
 date: "08-03-2019"
 path: /en/contact
 slug: /en/contact

src/pages/contact.it.md → src/pages/contatto.it.md

@@ -1,15 +1,15 @@
 ---
+id: 03
 title: "Pagina di contatto"
 description: "Pagina per contattarmi"
-nameSlug: pagina-contact-it
 templateKey: contacts
 tags:
   - web
 nameLabel: "Il tuo nome"
 lang: it
 date: "08-03-2019"
-path: /it/contact
-slug: /it/contact
+path: /it/contatto
+slug: /it/contatto
 ---
 
 In questa pagina di contatto puoi inviare una e-mail.

src/pages/index.en.md

@@ -1,7 +1,7 @@
 ---
+id: 01
 title: "English home page"
 description: "qualche contenuto"
-nameSlug: pagina-home-en
 templateKey: home
 tags:
   - web

src/pages/index.it.md

@@ -1,7 +1,7 @@
 ---
+id: 01
 title: "Pagina home italiano"
 description: "qualche contenuto"
-nameSlug: pagina-home-it
 templateKey: home
 tags:
   - web