fix(i18n): fix urls

Author: bmeurant

blob.css

@@ -354,6 +354,11 @@ <h2 class="title">
                         </li>
                         <li class="card card-flex inverse">
                             <div class="title i18nelement" data-i18n="ember-training"><a href="http://bmeurant.github.io/ember/training/">ember training</a></div>
+                            <div class="date">
+                                <div class="date-badge child-date">
+                                    <i class="fa fa-calendar-check"></i>2015&nbsp;-&nbsp;2018
+                                </div>
+                            </div>
                             <div class="content i18nelement" data-i18n="ember-training-desc">I wrote an in-depth introduction to ember. Can be followed as an autonomous tutorial but also to serve as a tool for training.</div>
                             <div class="symbol"><i class="fa-solid fa-book"></i></div>
                         </li>
@@ -369,6 +374,11 @@ <h2 class="title">
                         </li>
                         <li class="card card-flex inverse">
                             <div class="title i18nelement" data-i18n="opensource">OpenSource contributions</div>
+                            <div class="date">
+                                <div class="date-badge child-date">
+                                    <i class="fa fa-calendar-check"></i>2015&nbsp;-&nbsp;2018
+                                </div>
+                            </div>
                             <div class="content i18nelement" data-i18n="opensource-desc">Modest OpenSource contributions on <a href="https://github.com/emberjs/ember.js/pull/13553">ember framework</a>, creation of an <a href="https://github.com/bmeurant/ember-array-contains-helper">ember addon</a>, etc.</a></div>
                             <div class="symbol"><i class="fa-solid fa-code"></i></div>
                         </li>

index.html

@@ -1,24 +1,13 @@
 export {extractLocale, getLangFromLocale}
 
-import { locales, localeDefault } from './locales'
 import { langs, langDefault } from './langs'
 
-function extractLocale(pathname) {
-  const urlPaths = pathname.split('/');
+function extractLocale(location) {
+  const localeArg = location.search.split("lang=") || langDefault;
+  let locale = localeArg[1] || langDefault;
+  locale = locale.split("-")[0];
 
-  let locale;
-  let urlWithoutLocale;
-  // We remove the URL locale, for example `/de-DE/about` => `/about`
-  const firstPath = urlPaths[1];
-  if (locales.filter((locale) => locale !== localeDefault).includes(firstPath)) {
-      locale = firstPath;
-      urlWithoutLocale = '/' + urlPaths.slice(2).join('/');
-  } else {
-      locale = localeDefault;
-      urlWithoutLocale = pathname;
-  }
-
-  return { locale, urlWithoutLocale }
+  return locale;
 }
 
 function getLangFromLocale(locale) {

javascript/i18n.js

@@ -3,7 +3,7 @@ import { extractLocale, getLangFromLocale } from './javascript/i18n.js'
 import { langs } from './javascript/langs'
 import { getYears } from './javascript/dates.js'
 
-const { urlWithoutLocale, locale } = extractLocale(document.location.pathname);
+const locale = extractLocale(document.location);
 
 async function i18Loader(lang) {
   const jsons = await Promise.all(
@@ -67,7 +67,7 @@ async function i18Loader(lang) {
   }
 
   function updateUrl(lang) {
-    window.history.pushState({}, "", `/${lang}`);
+    window.history.pushState({}, "", `/?lang=${lang}`);
   }
 
   const langSelectors = document.querySelectorAll('.langSelector');
@@ -97,21 +97,6 @@ function updateEmail() {
   document.getElementById("email").href = "mailto:baptiste.meurant@gmail.com";
 }
 
-function showResponsiveMenu() {
-  var menu = document.getElementById("menu");
-  var icon = document.getElementById("hamburger-menu");
-  var root = document.getElementById("header");
-  if (menu.className === "") {
-      menu.className = "open";
-      icon.className = "open";
-      root.style.overflowY = "hidden";
-  } else {
-      menu.className = "";                    
-      icon.className = "";
-      root.style.overflowY = "";
-  }
-}
-
 let lang=getLangFromLocale(locale);
 
 i18Loader(lang);

javascript/locales.js

@@ -59,7 +59,7 @@
     "projects": "Things I have done",
     "resthub": "Contributor, leader <a href=\"https://github.com/resthub\">RESTHub</a>",
     "resthub-desc": "Open source stack to build Modern Web Applications based on Spring, Backbone, Hibernate. Discontinued.",
-    "ember-training": "Ember Training",
+    "ember-training": "<a href=\"https://bmeurant.github.io/ember-training\">Ember Training</a>",
     "ember-training-desc": "An in-depth introduction to ember. Can be followed as an autonomous tutorial but also to serve as a tool for training.",
     "cnrs": "CNRS, <a href=\"https://aramis.resinfo.org/doku.php?id=ateliers:ecosystemjs-23032017\">JavaScript ecosystem presentation</a>",
     "cnrs-desc": "A 2-hour <a href=\"https://bmeurant.github.io/jsecosystem/#/\">presentation</a> on the JavaScript ecosystem for the CNRS ARAMIS network in Lyon.",

main.js

@@ -59,7 +59,7 @@
     "projects": "Réalisations et projets",
     "resthub": "Contributeur, leader <a href=\"https://github.com/resthub\">RESTHub</a>",
     "resthub-desc": "Une stack OpenSource pour construire des applications Web modernes avec Spring, Backbone, Hibernate. Le projet est abandonné.",
-    "ember-training": "Formation Ember",
+    "ember-training": "<a href=\"https://bmeurant.github.io/ember-training\">Formation Ember</a>",
     "ember-training-desc": "Une introduction approfondie à ember. Peut être suivi comme un tutoriel autonome mais aussi servir d'outil de formation.",
     "cnrs": "CNRS, <a href=\"https://aramis.resinfo.org/doku.php?id=ateliers:ecosystemjs-23032017\">presentation de l'écosystème JavaScript</a>",
     "cnrs-desc": "Un <a href=\"https://bmeurant.github.io/jsecosystem/#/\">atelier</a> de 2 heures sur l'écosystème JavaScript pour le réseau ARAMIS du CNRS à Lyon.",

public/translations/en.json

@@ -33,11 +33,11 @@ $smooth-emphasize-color: #a9d5d6;
     background-position-y: top;
 
     &[name='fr'] {
-        background-image: url("images/flag-fr.svg");
+        background-image: url("/images/flag-fr.svg");
     }
 
     &[name='en'] {
-        background-image: url("images/flag-en.svg");
+        background-image: url("/images/flag-en.svg");
     }
 }