From 43981651b1686d0e347abc21c06b6814a3b70d0d Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Wed, 19 Mar 2025 16:01:02 +0100
Subject: [PATCH] Added a new route

Mainly for test and dev purposes
---
 src/App.vue               |  2 ++
 src/components/header.vue | 40 +++++++++++++++++++++++++++++++++++++++
 src/main.js               |  1 +
 src/router/index.js       |  6 ++++++
 src/views/BaseArticle.vue | 21 ++++++++++++++++++++
 src/views/HomeView.vue    |  3 ---
 6 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/header.vue
 create mode 100644 src/views/BaseArticle.vue

diff --git a/src/App.vue b/src/App.vue
index 63b05c0..33e7ff0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import app_footer from './components/footer.vue';
+import GOLbackground from '@/components/GOLbackground.vue';
 </script>
 
 <template>
+  <GOLbackground />
   
   <RouterView/>
 
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..9d79ba9
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,40 @@
+<template>
+  <header>
+    <div id="header_content">
+        <RouterLink to="/">
+            <div id="header_picture">
+                <img src="https://picsum.photos/50/50"/>
+            </div>
+        </RouterLink>
+    </div>
+  </header>
+</template>
+
+<script setup>
+    import { RouterLink } from 'vue-router';
+</script>
+
+<style scoped>
+    header{
+        height: 60px;
+        background-color: #252525;
+        display: flex;
+    }
+    #header_content{
+        height: 100%;
+        width: 95%;
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    #header_picture{
+        width: 50px;
+        height: 50px
+    }
+    #header_picture img{
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 98686be..a3d547a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja"
 else userLanguage = "en";
 
 const i18n = createI18n({
+    legacy:false,
     locale: userLanguage,
     fallbackLocale: 'en',
     messages: {
diff --git a/src/router/index.js b/src/router/index.js
index 3e49915..67eb262 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import BaseArticle from '@/views/BaseArticle.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/knowledge',
+      name: 'knowledge',
+      component: BaseArticle
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/src/views/BaseArticle.vue b/src/views/BaseArticle.vue
new file mode 100644
index 0000000..b5e2a8d
--- /dev/null
+++ b/src/views/BaseArticle.vue
@@ -0,0 +1,21 @@
+<template>
+    <Header/>
+    <div class="about">
+      <h1>This is an about page</h1>
+    </div>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+</script>
+  
+  <style>
+  @media (min-width: 1024px) {
+    .about {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 34fbd9f..0df9c8f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,4 @@
 <script setup>
-  import GOLbackground from '@/components/GOLbackground.vue';
   import welcome from '@/components/home/welcome.vue';
   import intersection from '@/components/home/intersection.vue';
   import presentation from '@/components/home/presentation.vue';
@@ -43,8 +42,6 @@
 
 <template>
 
-    <GOLbackground />
-
     <welcome/>
 
     <intersection text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#"/>