Frontend: Added json files for language specific titles.

frontend/src/lib/components/sidebar.svelte

@@ -16,6 +16,7 @@
   import "$lib/css/sidebar.css";
 
   export let info;
+  export let text;
   export let footer = null;
   export let containerCv = null;
   export let sidebarContainer;
@@ -98,14 +99,14 @@
       {#if info.interests != null}
         <SidebarComponent
           icon={mdiStar}
-          title="Interests"
+          title={text.interests}
           description={info.interests}
         />
       {/if}
       {#if info.interests != null}
         <SidebarComponent
           icon={mdiCogs}
-          title="Soft-Skills"
+          title={text.softskills}
           description={info.softskills}
         />
       {/if}

frontend/src/lib/lang/en.json

@@ -0,0 +1,16 @@
+{
+    "education": "Education",
+    "experience": "Experience",
+    "projects": "Projects",
+    "skills": "Skills",
+    "programming_languages": "Programming Languages",
+    "software": "Software",
+    "languages": "Languages",
+    
+    "interests": "Interests",
+    "softskills": "Soft-Skills",
+
+    "madewith": "Made with",
+    "usingsvelte": "using Svelte",
+    "copyright": "All rights reserved, Yohan Boujon"
+  }

frontend/src/lib/lang/fr.json

@@ -0,0 +1,16 @@
+{
+    "education": "Éducation",
+    "experience": "Expérience",
+    "projects": "Projets",
+    "skills": "Compétences",
+    "programming_languages": "Langages de programmation",
+    "software": "Logiciels",
+    "languages": "Langues",
+    
+    "interests": "Centres d'intérêt",
+    "softskills": "Qualités personnelles",
+
+    "madewith": "Fait avec",
+    "usingsvelte": ", à l'aide de Svelte",
+    "copyright": "Tous droits réservés, Yohan Boujon"
+  }

frontend/src/routes/lang=[lang]/+page.js

@@ -1,3 +1,5 @@
+import {json} from '@sveltejs/kit';
+
 export async function load(context) {
   async function fetchData(data) {
     try {
@@ -17,15 +19,39 @@ export async function load(context) {
     }
   }
 
+  async function fetchJSON(lang) {
+    try {
+      const resTemp = await context.fetch(`src/lib/lang/${lang}.json`);
+      if (resTemp.ok == false) {
+        return {
+          status: resTemp.status,
+        }
+      }
+      return {
+        status: 0, data: await resTemp.json(),
+      }
+    } catch (error) {
+      return {
+        status: 500,
+      }
+    }
+  }
+
   // Gathering the language
   const lang = context.params.lang;
   const lang_id = (await fetchData(`get_lang_id/${lang}`)).data.id;
 
+  // Gathering texts for languages
+  const text = (await fetchJSON(lang)).data;
+
+  // Gathering data from databse
   const infos = [];
   const project_software = [];
   const project_programming = [];
-  const dataToGather =
-      [`info/${lang_id}`, `education/${lang_id}`, `experience/${lang_id}`, `project/${lang_id}`, 'hard_skills', 'tags'];
+  const dataToGather = [
+    `info/${lang_id}`, `education/${lang_id}`, `experience/${lang_id}`,
+    `project/${lang_id}`, 'hard_skills', 'tags'
+  ];
   for (const url of dataToGather) {
     const res = await fetchData(url);
     if (res.status == 0) {
@@ -41,8 +67,7 @@ export async function load(context) {
   // infos[4] = hardskills
   // infos[4][1] = Softwares
   for (let i = 0; i < infos[4][1].length; i++) {
-    const res =
-        await fetchData(`getproject_software/${i + 1}/${lang_id}`);
+    const res = await fetchData(`getproject_software/${i + 1}/${lang_id}`);
     if (res.status == 0) {
       project_software.push(res.data);
     } else {
@@ -53,12 +78,10 @@ export async function load(context) {
   }
   // infos[4][0] = Programming Languages
   for (let i = 0; i < infos[4][0].length; i++) {
-    const res =
-        await fetchData(`getproject_programming/${i + 1}/${lang_id}`);
+    const res = await fetchData(`getproject_programming/${i + 1}/${lang_id}`);
     if (res.status == 0) {
       project_programming.push(res.data);
-    }
-    else {
+    } else {
       return {
         status: res.status
       }
@@ -67,6 +90,7 @@ export async function load(context) {
 
   return {
     status: 0,
+    lang: lang,
     info: infos[0],
     education: infos[1],
     experience: infos[2],
@@ -79,5 +103,6 @@ export async function load(context) {
     tags: infos[5],
     project_programming: project_programming,
     project_software: project_software,
+    text: text,
   };
 }

frontend/src/routes/lang=[lang]/+page.svelte

@@ -29,7 +29,10 @@
   import { onMount } from "svelte";
 
   export let data;
+  // Database
   const cv = data.status == 0 ? processData(data) : undefined;
+  // Language specifications
+  const text = data.text;
 
   // Sidebar
   let containerCv;
@@ -81,12 +84,12 @@
   <ProjectsPopup tags={cv.tags} />
   <!-- TOPBAR DIV (POPUP: mobile) -->
   {#if innerWidth < 1200 && sidebarLoaded}
-  <Sidebar info={cv.info} bind:sidebarContainer />
+  <Sidebar info={cv.info} bind:sidebarContainer {text} />
   {/if}
   <div class="container-cv" bind:this={containerCv}>
     <!-- SIDEBAR DIV (LEFT: desktop) -->
     {#if innerWidth >= 1200 && sidebarLoaded}
-      <Sidebar info={cv.info} {footer} {containerCv} />
+      <Sidebar info={cv.info} {footer} {containerCv} {text} />
     {/if}
     <!-- MOBILE TOP BAR -->
     {#if innerWidth < 1000}
@@ -106,24 +109,24 @@
         <h1 class="name">{cv.info.full_name}</h1>
       {/if}
       <h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
-      <Section icon={mdiSchool} title="Education" />
+      <Section icon={mdiSchool} title={text.education} />
       <SlideShow
         data={cv.education}
         type={Education}
         timeline="true"
         reverse="true"
       />
-      <Section icon={mdiBriefcase} title="Experience" />
+      <Section icon={mdiBriefcase} title={text.experience} />
       <SlideShow
         data={cv.experiences}
         type={Experience}
         timeline="true"
         reverse="true"
       />
-      <Section icon={mdiWrench} title="Projects" />
+      <Section icon={mdiWrench} title={text.projects} />
       <SlideShow data={cv.skills.project} type={Projects} />
-      <Section icon={mdiPencil} title="Skills" />
-      <SubSection icon={mdiXml} title="Programming Languages" />
+      <Section icon={mdiPencil} title={text.skills} />
+      <SubSection icon={mdiXml} title={text.programming_languages} />
       <div class="subsection">
         {#if sidebarLoaded}
           {#each cv.skills.programming_languages as pilldata, index (index)}
@@ -138,7 +141,7 @@
           {/each}
         {/if}
       </div>
-      <SubSection icon={mdiApplication} title="Software" />
+      <SubSection icon={mdiApplication} title={text.software} />
       <div class="subsection">
         {#if sidebarLoaded}
           {#each cv.skills.softwares as pilldata, index (index)}
@@ -153,7 +156,7 @@
           {/each}
         {/if}
       </div>
-      <SubSection icon={mdiEarth} title="Languages" />
+      <SubSection icon={mdiEarth} title={text.languages} />
       <div class="subsection flag-container end">
         {#each cv.skills.languages as langdata}
           <FlagComponent
@@ -167,9 +170,9 @@
   </div>
   <div class="footer" bind:this={footer}>
     <p>
-      Made with <SvgIcon size="20" path={mdiHeart} type="mdi" /> using Svelte
+      {text.madewith} <SvgIcon size="20" path={mdiHeart} type="mdi" /> {text.usingsvelte}
     </p>
-    <p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
+    <p>{text.copyright} • {new Date().getFullYear()}</p>
   </div>
 {:else}
   <h1 class="h1 text-center">Oops, could not load database :/</h1>