Improve SEO and fix some issues with images

green-code-initiative · Nov 23, 2023 · 24f41b0 · 24f41b0
1 parent 52ce50a
commit 24f41b0
Show file tree

Hide file tree

Showing 19 changed files with 48 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ecocode</title>
-</head>
+    <meta charset="UTF-8">
+    <title>ecoCode : réduisons l'empreinte écologique de nos logiciels</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="ecoCode est un projet collectif visant à réduire l'impact environnemental des solutions numériques : baisse de la consommation énergétique, inclusivité, accessibilité..."/>
 
+    <link rel="icon" href="/favicon.png">
+</head>
 <body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
 </body>
-
 </html>
diff --git a/public/img/logo/logo-accueil.webp b/public/img/logo/logo-accueil.webp
diff --git a/src/assets/icons/arrow_down.svg b/src/assets/icons/arrow_down.svg
diff --git a/src/assets/icons/arrow_left.svg b/src/assets/icons/arrow_left.svg
diff --git a/src/assets/icons/arrow_right.svg b/src/assets/icons/arrow_right.svg
diff --git a/src/assets/img/icon/arrow-bottom-blue.webp b/src/assets/img/icon/arrow-bottom-blue.webp
diff --git a/src/assets/img/icon/arrow-left-blue.webp b/src/assets/img/icon/arrow-left-blue.webp
diff --git a/src/assets/img/icon/arrow-right-blue.webp b/src/assets/img/icon/arrow-right-blue.webp
diff --git a/src/assets/img/illustration/img-accueil-1.png b/src/assets/img/illustration/img-accueil-1.png
diff --git a/src/assets/img/illustration/img-accueil-1.webp b/src/assets/img/illustration/img-accueil-1.webp
diff --git a/src/assets/img/illustration/img-accueil-2.png b/src/assets/img/illustration/img-accueil-2.png
diff --git a/src/assets/img/illustration/img-accueil-2.webp b/src/assets/img/illustration/img-accueil-2.webp
diff --git a/src/assets/img/logo-large.webp b/src/assets/img/logo-large.webp
diff --git a/public/img/logo/logo-ecocode.webp → src/assets/img/logo.webp b/public/img/logo/logo-ecocode.webp → src/assets/img/logo.webp
diff --git a/src/components/global/Header.vue b/src/components/global/Header.vue
@@ -1,6 +1,8 @@
 <template>
   <header :style="{ backgroundColor: pageColors[route.path] || defaultColor }">
-    <router-link to="/"><img class="logo-header" src="/img/logo/logo-ecocode.webp"  @click="closeMenu"/></router-link>
+    <router-link to="/">
+      <img class="logo-header" src="@/assets/img/logo.webp" width="167" height="25" alt="ecoCode logo" @click="closeMenu"/>
+    </router-link>
     <ul :style="{ backgroundColor: pageColors[route.path] || defaultColor }" :class="{ 'menu-open': isMenuOpen }">
       <router-link to="/contributeur" @click="closeMenu">
         <img width="40" height="40" v-if="isContributeurPage" src="@/assets/img/icon/arrow-left-white.webp">
@@ -27,7 +29,7 @@
     </div>
   </header>
 </template>
-  
+
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
@@ -57,7 +59,7 @@ const pageColors: Record<string, string> = {
 
 const defaultColor = '#3a4e72ff';
 </script>
-  
+
 <style lang="scss" scoped>
 header {
   height: 60px;
@@ -71,7 +73,7 @@ header {
 }
 
 .logo-header {
-  padding: 0 0 0 40px;
+  margin-left: 40px;
 }
 
 ul {
@@ -99,7 +101,7 @@ a {
 }
 
 .cross-icon{
-    transform: rotate(-45deg);  
+    transform: rotate(-45deg);
 }
 .cross-bar {
  transform: translateY(7px)
@@ -180,4 +182,3 @@ li {
   }
 }
 </style>
-
diff --git a/src/components/global/ProcessRule.vue b/src/components/global/ProcessRule.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container-block">
-    <h3 class="title" :class="computedTitleClass">{{ title }}</h3>
+    <h2 class="title" :class="computedTitleClass">{{ title }}</h2>
     <div class="container">
       <div :style="subtitleStyle" class="container-text">
         <a
@@ -11,16 +11,19 @@
         /></a>
         <span v-else>{{ text }}</span>
       </div>
-      <img v-if="showRightArrow" src="@/assets/img/icon/arrow-right-blue.webp" />
-      <img v-if="showLeftArrow" src="@/assets/img/icon/arrow-left-blue.webp" />
+      <ArrowRight v-if="showRightArrow" class="arrow-icon" />
+      <ArrowLeft v-if="showLeftArrow" class="arrow-icon" />
     </div>
-    <img v-if="showBottomArrow && !isLastItem" src="@/assets/img/icon/arrow-bottom-blue.webp" />
+    <ArrowDown v-if="showBottomArrow && !isLastItem" class="arrow-icon" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed } from "vue";
 import { useRoute } from "vue-router";
+import ArrowDown from '@/assets/icons/arrow_down.svg';
+import ArrowLeft from '@/assets/icons/arrow_left.svg';
+import ArrowRight from '@/assets/icons/arrow_right.svg';
 
 const props = defineProps({
   title: String,
@@ -148,16 +151,18 @@ if (props.title === "utilisation" || props.image) {
   justify-content: center;
 }
 
-.container > img {
+.arrow-icon {
   width: 48px;
-  height: auto;
-  margin: 0 16px 0 16px;
+  height: 48px;
+  color: #355086;
 }
 
-.container-block > img {
-  width: 48px;
-  height: auto;
-  margin: 17px 0 17px 0;
+.container > .arrow-icon {
+  margin: 0 16px;
+}
+
+.container-block > .arrow-icon {
+  margin: 17px 0;
 }
 
 @media screen and (max-width: 1150px) {
@@ -174,9 +179,9 @@ if (props.title === "utilisation" || props.image) {
   .title{
     font-size: 22px;
   }
-   
+
   .container-text > span{
     font-size: 17px;
-  } 
+  }
 }
 </style>
diff --git a/src/components/global/Title.vue b/src/components/global/Title.vue
@@ -1,7 +1,7 @@
 <template>
   <div :style="{ backgroundColor: colorBackground }">
     <div class="container">
-      <img v-if="image === 'true'" class="logo-img" src="/img/logo/logo-accueil.webp" />
+      <img v-if="image === 'true'" class="logo-img" src="@/assets/img/logo-large.webp" width="358" height="204" alt="ecoCode large logo" />
       <span :class="getTitleClass">{{ title }}</span>
       <span :class="getSubtitleClass">{{ subtitle }}</span>
       <slot></slot>
@@ -134,9 +134,8 @@ const getSubtitleClass = computed(() => {
 }
 
 .logo-img {
-  width: 358px;
   height: auto;
-  padding: 0px 0 40px 0;
+  padding: 0 0 40px 0;
 }
 
 @media screen and (max-width: 1150px) {

diff --git a/src/views/Accueil/Home.vue b/src/views/Accueil/Home.vue
@@ -16,10 +16,10 @@
                     responsable : laboratoires de recherche, entreprises, personnes en poste sur leur temps de travail,
                     personnes indépendantes sur leur temps libre...
                 </p>
-                <img src="@/assets/img/illustration/img-accueil-1.png">
+                <img src="@/assets/img/illustration/img-accueil-1.webp" width="300" height="300" alt="" loading="lazy">
             </div>
             <div class="container-after">
-                <img src="@/assets/img/illustration/img-accueil-2.png">
+                <img src="@/assets/img/illustration/img-accueil-2.webp" width="300" height="300" alt="" loading="lazy">
                 <p>
                     Les membres contributeurs du collectif conceptualisent et implémentent des règles permettant de repérer
                     les défauts de qualité du code source d’un projet pouvant avoir un impact écologique négatif.
@@ -41,11 +41,15 @@
     </TitleBox>
     <Form />
 </template>
+
 <script setup lang="ts">
 import GraphRule from '@/components/Shared/GraphRule.vue';
 import ButtonBlock from '@/components/global/Button.vue';
 import TitleBox from '@/components/global/Title.vue';
 import BoxCarousel from '@/components/global/BoxCarousel.vue';
 import Form from '@/components/Shared/Form.vue';
 </script>
-<style lang="scss" scoped>@import './scss/style.scss'</style>
+
+<style lang="scss" scoped>
+@import './scss/style.scss';
+</style>
diff --git a/src/views/Accueil/scss/style.scss b/src/views/Accueil/scss/style.scss
@@ -28,11 +28,6 @@
     padding: 0 97px 0 0;
 }
 
-.container-after>img {
-    width: 300px;
-    height: auto;
-}
-
 .container-after {
     display: flex;
     flex-direction: row;
@@ -82,4 +77,4 @@
     .block-button-section-1{
         flex-wrap: wrap;
     }
-}
+}