Update

Server/app/layouts/main.jl.html

@@ -12,8 +12,6 @@
     <meta property="og:url" content="">
     <link rel="icon" type="image/png" href="/favicon.png"/>
 
-    <link rel="preload" href="/locales/available.json" as="fetch" type="application/json" crossorigin="anonymous">
-
     <!--Load libraries-->
 
     <!--Load fonts-->

Server/app/svelte/public/js/libraries/serverTools.js

@@ -66,15 +66,31 @@ function onlyUnique(value, index, array) {
     return array.indexOf(value) === index;
 }
 
+export let locales = {
+    en: "English",
+    ru: "Русский"
+}
+
 export function loadLocaleContent(content,componentName,loaded,callback) {
+    let locale
     let langs
-    let localesAvailable
+    let localesAvailable = Object.keys(locales)
-    let locale = localStorage.getItem("locale")
+    let localeUrl = location.href.split("/").filter(x => localesAvailable.includes(x))
-    if (locale==null) {
+    if (localeUrl.length>0) {
-        langs = navigator.languages.map(x => x.split("-")[0]).filter(onlyUnique)
+        locale = localeUrl
+    }
+    else {
+        langs = navigator.languages.map(x => x.split("-")[0]).filter(onlyUnique)
+        for (let lang of langs) {
+            if (localesAvailable.includes(lang))  {
+                locale = lang
+            }
+            break
+        }
+        if (locale==undefined) {
+            locale = "en"
+        }
     }
-    getData("/locales/available.json",function(response) {
-        if (locale!=null) {
     getData("/locales/" + locale + "/" + componentName + ".json" ,function(response) {
         let parsed = JSON.parse(response)
         content.set(parsed)
@@ -83,24 +99,6 @@ export function loadLocaleContent(content,componentName,loaded,callback) {
         }
         loaded = 1
     })
-        }
-        else {
-            localesAvailable = JSON.parse(response)
-            for (let lang of langs) {
-                if (localesAvailable.includes(lang))  {
-                    getData("/locales/" + lang + "/" + componentName + ".json" ,function(response) {
-                        let parsed = JSON.parse(response)
-                        content.set(parsed)
-                        if (callback!=undefined) {
-                            callback(locale)
-                        }
-                        loaded = 1
-                    })
-                }
-                break
-            }
-        }
-    })
 }
 
 export function getLocale(locale,lang) {

Server/app/svelte/public/locales/available.json

@@ -1 +0,0 @@
-["en","ru"]

Server/app/svelte/src/communities-component.svelte

@@ -5,7 +5,7 @@
     import { onMount } from 'svelte'
     import { writable } from 'svelte/store';
     import { communities, addMarkersCommunities } from '/js/communities.js'
-    import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
+    import { loadLocaleContent, getLocale } from "/js/libraries/serverTools.js"
 
     // Import components
     import "/js/components/map-component.js" 

Server/app/svelte/src/join-us-component.svelte

@@ -55,9 +55,9 @@
                 <div id="call-to-action-list">
                     <p>{$content.findOur}</p>
                     <ol>
-                        <li><a href="/groups">{$content.group}</a>,</li> 
+                        <li><a href={"/" + locale[0] + "/groups"}>{$content.group}</a>,</li> 
-                        <li><a href="/communities">{$content.community}</a> {$content.or}</li> 
+                        <li><a href={"/" + locale[0] + "/communities"}>{$content.community}</a> {$content.or}</li> 
-                        <li><a href="/cooperatives">{$content.cooperative}</a></li>
+                        <li><a href={"/" + locale[0] + "/cooperatives"}>{$content.cooperative}</a></li>
                     </ol>
                     <p>{$content.nearYou}</p>
                 </div>

Server/app/svelte/src/navbar/navbar-component.svelte

@@ -4,17 +4,18 @@
 
     // Import statements    
     import { onMount, getContext } from 'svelte'
-    import { loadLocaleContent } from "/js/libraries/serverTools.js"
+    import { writable } from 'svelte/store'
-    import { writable } from 'svelte/store';
+    import { loadLocaleContent, getLocale, locales } from "/js/libraries/serverTools.js"
 
     // Main code
     let hambInput
     let navbar
     let localesDropdown
     let loaded
+    let locale = []
     let content = writable({})
 
-    loadLocaleContent(content,"navbar-component",loaded)
+    loadLocaleContent(content,"navbar-component",loaded,(lang) => getLocale(locale,lang))
 
     function changeNavbar() {
         if (hambInput.checked) {
@@ -43,7 +44,11 @@
 
     function changeLocale(lang) {
         localStorage.setItem("locale",lang)
-        location.reload()
+        let locSplit = location.href.split("/")
+        let localesSymbols = Object.keys(locales)
+        locSplit = locSplit.filter(x => !localesSymbols.includes(x))
+        let loc = locSplit.slice(0,locSplit.length-1).join("/") + "/" + lang + "/" + locSplit[locSplit.length-1]
+        location.href = loc
     }
 
     onMount(() => {
@@ -60,19 +65,19 @@
             <input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
             <label id="hamb" for="side-menu"><span id="hamb-line"></span></label>
             <!-- Logo -->
-            <a id=logo-container href="/">
+            <a id=logo-container href={"/" + locale[0] + "/"}>
-                <img src="img/common/flag.png" id="navbar-logo" alt="logo">
+                <img src="/img/common/flag.png" id="navbar-logo" alt="logo">
                 <span id="navbar-logo-text">{$content.orgName}</span>
             </a>
             <!-- Menu -->
             <nav id="nav">
                 <ul id="menu">
-                    <li><a href="/manifesto">{$content.manifesto}</a></li>
+                    <li><a href={"/"+locale+"/manifesto"}>{$content.manifesto}</a></li>
-                    <li><a href="/join-us">{$content.joinUs}</a></li>
+                    <li><a href={"/"+locale+"/join-us"}>{$content.joinUs}</a></li>
-                    <li><a href="/groups">{$content.groups}</a></li>
+                    <li><a href={"/"+locale+"/groups"}>{$content.groups}</a></li>
-                    <li><a href="/communities">{$content.communities}</a></li>
+                    <li><a href={"/"+locale+"/communities"}>{$content.communities}</a></li>
-                    <li><a href="/cooperatives">{$content.cooperatives}</a></li>
+                    <li><a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a></li>
-                    <li><a href="/partners">{$content.partners}</a></li>
+                    <li><a href={"/"+locale+"/partners"}>{$content.partners}</a></li>
                     <li id="locales">
                         <button on:click={showLocales}>
                             <picture>
@@ -83,8 +88,9 @@
                         </button>
                     </li>
                     <div bind:this={localesDropdown} id="locales-dropdown">
-                        <button on:click={() => changeLocale("en")}>English</button>
+                        {#each Object.entries(locales) as [loc,name]}
-                        <button on:click={() => changeLocale("ru")}>Русский</button>
+                            <button on:click={() => changeLocale(loc)}>{name}</button>
+                        {/each}
                     </div>
                 </ul>
             </nav>

Server/public/js/libraries/serverTools.js

@@ -66,15 +66,31 @@ function onlyUnique(value, index, array) {
     return array.indexOf(value) === index;
 }
 
+export let locales = {
+    en: "English",
+    ru: "Русский"
+}
+
 export function loadLocaleContent(content,componentName,loaded,callback) {
+    let locale
     let langs
-    let localesAvailable
+    let localesAvailable = Object.keys(locales)
-    let locale = localStorage.getItem("locale")
+    let localeUrl = location.href.split("/").filter(x => localesAvailable.includes(x))
-    if (locale==null) {
+    if (localeUrl.length>0) {
-        langs = navigator.languages.map(x => x.split("-")[0]).filter(onlyUnique)
+        locale = localeUrl
+    }
+    else {
+        langs = navigator.languages.map(x => x.split("-")[0]).filter(onlyUnique)
+        for (let lang of langs) {
+            if (localesAvailable.includes(lang))  {
+                locale = lang
+            }
+            break
+        }
+        if (locale==undefined) {
+            locale = "en"
+        }
     }
-    getData("/locales/available.json",function(response) {
-        if (locale!=null) {
     getData("/locales/" + locale + "/" + componentName + ".json" ,function(response) {
         let parsed = JSON.parse(response)
         content.set(parsed)
@@ -83,24 +99,6 @@ export function loadLocaleContent(content,componentName,loaded,callback) {
         }
         loaded = 1
     })
-        }
-        else {
-            localesAvailable = JSON.parse(response)
-            for (let lang of langs) {
-                if (localesAvailable.includes(lang))  {
-                    getData("/locales/" + lang + "/" + componentName + ".json" ,function(response) {
-                        let parsed = JSON.parse(response)
-                        content.set(parsed)
-                        if (callback!=undefined) {
-                            callback(locale)
-                        }
-                        loaded = 1
-                    })
-                }
-                break
-            }
-        }
-    })
 }
 
 export function getLocale(locale,lang) {

Server/public/sitemap.txt

@@ -4,4 +4,4 @@ https://www.libsoc.org/join-us
 https://www.libsoc.org/groups
 https://www.libsoc.org/communities
 https://www.libsoc.org/cooperatives
-https://www.libsoc.org/affiliates
+https://www.libsoc.org/partners

Server/routes.jl

@@ -5,17 +5,23 @@ using Server.BasicController
 
 #---Basic-----------------------------------------------------------
 
-route("/", BasicController.landing, named = :landing)
+route("/:locale/manifesto", BasicController.manifesto, named = :manifest)
+route("/manifesto", BasicController.manifesto)
 
-route("/manifesto", BasicController.manifesto, named = :manifest)
+route("/:locale/join-us", BasicController.join_us, named = :join_us)
+route("/join-us", BasicController.join_us)
 
-route("/join-us", BasicController.join_us, named = :join_us)
+route("/:locale/groups", BasicController.groups, named = :groups)
+route("/groups", BasicController.groups)
 
-route("/groups", BasicController.groups, named = :groups)
+route("/:locale/cooperatives", BasicController.cooperatives, named = :cooperatives)
+route("/cooperatives", BasicController.cooperatives)
 
-route("/cooperatives", BasicController.cooperatives, named = :cooperatives)
+route("/:locale/communities", BasicController.communities, named = :communities)
+route("/communities", BasicController.communities)
 
-route("/communities", BasicController.communities, named = :communities)
+route("/:locale/partners", BasicController.partners, named = :partners)
-
+route("/partners", BasicController.partners)
-route("/partners", BasicController.partners, named = :partners)
 
+route("/:locale", BasicController.landing, named = :landing)
+route("/", BasicController.landing)