From 507ce501aff4cae8bd3500530ba962748437831f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 24 Oct 2019 12:53:33 +0200
Subject: [PATCH] Fix missing translations

---
 src/components/AccordionElement.vue  |   4 -
 src/components/ContentSelection.vue  | 106 +++++------
 src/components/ContentSelections.vue |  18 +-
 src/components/Footer.vue            |  10 +-
 src/components/Header.vue            |  89 +++++-----
 src/components/I18n.vue              |  40 ++---
 src/components/InstanceCard.vue      | 194 +++++++++++----------
 src/components/InstancesList.vue     | 142 +++++++--------
 src/main.js                          |   2 +-
 src/views/All-Content-Selections.vue |  11 +-
 src/views/FAQ.vue                    |  46 ++---
 src/views/Hall-Of-Fame.vue           |  76 ++++----
 src/views/Help.vue                   | 117 +++++++------
 src/views/Home.vue                   | 240 ++++++++++++-------------
 src/views/Instances.vue              |  88 +++++-----
 src/views/News.vue                   | 252 +++++++++++++++------------
 16 files changed, 739 insertions(+), 696 deletions(-)

diff --git a/src/components/AccordionElement.vue b/src/components/AccordionElement.vue
index ce0a77f..429f8cc 100644
--- a/src/components/AccordionElement.vue
+++ b/src/components/AccordionElement.vue
@@ -19,10 +19,6 @@
   </b-card>
 </template>
 
-<style scoped>
-
-</style>
-
 <script>
   import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'
 
diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue
index 4ecf9fb..cdfc9e8 100644
--- a/src/components/ContentSelection.vue
+++ b/src/components/ContentSelection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="root">
+  <div id="content-selection">
 
     <div class="left">
       <img :src="thumbnailUrl" alt="thumbnail"/>
@@ -51,10 +51,10 @@
 
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import '../scss/_variables';
 
-  .root {
+  #content-selection {
     display: flex;
 
     @media screen and (max-width: $small-screen) {
@@ -67,68 +67,68 @@
         margin-bottom: 20px !important;
       }
     }
-  }
 
-  .left {
-    margin-right: 20px;
+    .left {
+      margin-right: 20px;
 
-    img {
-      display: block;
-      width: 250px;
-      height: 137px;
-      border-radius: 3px;
-    }
+      img {
+        display: block;
+        width: 250px;
+        height: 137px;
+        border-radius: 3px;
+      }
 
-    button {
-      display: flex;
-      flex-direction: row !important;
-      margin-top: 30px;
-      width: 250px;
-      height: 35px;
+      button {
+        display: flex;
+        flex-direction: row !important;
+        margin-top: 30px;
+        width: 250px;
+        height: 35px;
 
-      .icon {
-        margin-right: 10px;
+        .icon {
+          margin-right: 10px;
 
-        svg {
-          vertical-align: sub;
-          width: 20px;
-          height: 20px;
+          svg {
+            vertical-align: sub;
+            width: 20px;
+            height: 20px;
+          }
         }
       }
     }
-  }
 
-  .right {
-    .title {
-      font-size: 24px;
-      font-weight: $font-semibold;
-      display: flex;
-      align-items: center;
-      font-family: 'Proza Libre', sans-serif;
+    .right {
+      .title {
+        font-size: 24px;
+        font-weight: $font-semibold;
+        display: flex;
+        align-items: center;
+        font-family: 'Proza Libre', sans-serif;
 
-      .icon {
-        margin-right: 10px;
-        position: relative;
-        top: -2px;
-      }
-    }
-
-    .description {
-      font-size: 16px;
-      min-height: 170px;
-    }
-
-    .tags {
-      display: flex;
-      flex-wrap: wrap;
-
-
-      @media screen and (max-width: $responsive-screen) {
-        justify-content: center;
+        .icon {
+          margin-right: 10px;
+          position: relative;
+          top: -2px;
+        }
       }
 
-      .tag {
-        margin-top: 10px;
+      .description {
+        font-size: 16px;
+        min-height: 170px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+
+
+        @media screen and (max-width: $responsive-screen) {
+          justify-content: center;
+        }
+
+        .tag {
+          margin-top: 10px;
+        }
       }
     }
   }
diff --git a/src/components/ContentSelections.vue b/src/components/ContentSelections.vue
index 126a41e..c0c9d43 100644
--- a/src/components/ContentSelections.vue
+++ b/src/components/ContentSelections.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="root">
+  <div id="content-selections">
     <div class="content-selection" v-for="contentSelection in getContentSelections()">
       <content-selection :type="contentSelection.type" :title="contentSelection.title"
                          :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
@@ -10,16 +10,18 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import '../scss/_variables';
 
-  .content-selection {
-    margin-bottom: 80px;
-  }
+  #content-selections {
+    .content-selection {
+      margin-bottom: 80px;
+    }
 
-  .discover-instances {
-    display: flex;
-    justify-content: flex-end;
+    .discover-instances {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 </style>
 
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 8d162c1..e2d3bcc 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer>
+  <footer id="main-footer">
     <div>
       <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/legals/" v-translate>Legal notices</a>
 
@@ -18,11 +18,11 @@
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import '../scss/_variables.scss';
   @import '../scss/_mixins.scss';
 
-  footer {
+  #main-footer {
     margin-top: 30px;
     background-color: #fff;
     padding: 30px 200px;
@@ -37,10 +37,8 @@
         margin-bottom: 10px;
       }
     }
-  }
 
-  @media screen and (max-width: $responsive-screen) {
-    footer {
+    @media screen and (max-width: $responsive-screen) {
       padding: 30px;
     }
   }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c5b119d..52f79d9 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -6,7 +6,7 @@
         <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
 
         <div class="support">
-          developed by
+          <translate>developed by</translate>
 
           <img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
         </div>
@@ -47,65 +47,68 @@
   </header>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import '../scss/_variables.scss';
   @import '../scss/_mixins.scss';
 
-  header {
-    margin-bottom: 30px;
-  }
+  #main-header {
 
-  .navbar-collapse {
-    &.collapsing,
-    &.show {
-      padding-top: 20px;
+    header {
+      margin-bottom: 30px;
+    }
 
-      .nav-item {
-        margin-right: 0;
-        margin-top: 5px;
+    .navbar-collapse {
+      &.collapsing,
+      &.show {
+        padding-top: 20px;
+
+        .nav-item {
+          margin-right: 0;
+          margin-top: 5px;
+        }
       }
     }
-  }
 
-  .navbar-brand {
-    @include disable-default-a-behaviour;
+    .navbar-brand {
+      @include disable-default-a-behaviour;
 
-    color: #000;
-    font-family: 'Proza Libre', sans-serif;
-    font-size: 10px;
+      color: #000;
+      font-family: 'Proza Libre', sans-serif;
+      font-size: 10px;
 
-    .support img {
-      vertical-align: initial;
-      margin-left: 1px;
+      .support img {
+        vertical-align: initial;
+        margin-left: 3px;
+      }
     }
-  }
 
-  nav {
-    min-height: 60px;
-    background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-  }
+    nav {
+      min-height: 60px;
+      background-color: #fff;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    }
 
-  .navbar-nav {
-    align-items: center;
-  }
+    .navbar-nav {
+      align-items: center;
+    }
 
-  .nav-item {
-    margin-right: 40px;
-  }
+    .nav-item {
+      margin-right: 40px;
+    }
 
-  .nav-link {
-    color: #000 !important;
-    padding: 0 !important;
-    font-family: 'Proza Libre', sans-serif;
-  }
+    .nav-link {
+      color: #000 !important;
+      padding: 0 !important;
+      font-family: 'Proza Libre', sans-serif;
+    }
 
-  .create-account {
-    font-weight: $font-semibold;
-  }
+    .create-account {
+      font-weight: $font-semibold;
+    }
 
-  .router-link-active:not(.navbar-brand) {
-    border-bottom: 3px solid $orange;
+    .router-link-active:not(.navbar-brand) {
+      border-bottom: 3px solid $orange;
+    }
   }
 </style>
 
diff --git a/src/components/I18n.vue b/src/components/I18n.vue
index a216cb2..ec56c83 100644
--- a/src/components/I18n.vue
+++ b/src/components/I18n.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="i18n">
+  <div id="i18n">
     <b-dropdown>
       <template slot="button-content">
         <img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
@@ -27,29 +27,29 @@
 </template>
 
 <style lang="scss">
-  .i18n .dropdown {
-    button {
-      height: 60px;
-      color: #000;
-      background-color: #fff;
-      border: none;
+  #i18n {
+    .text {
+      font-size: 11px;
     }
 
-    .dropdown-toggle::after {
-      display: none;
-    }
+    .dropdown {
+      button {
+        height: 60px;
+        color: #000;
+        background-color: #fff;
+        border: none;
+      }
 
-    .translate svg {
-      width: 20px;
-      margin-right: 5px;
-      vertical-align: top;
-    }
-  }
-</style>
+      .dropdown-toggle::after {
+        display: none;
+      }
 
-<style scoped>
-  .text {
-    font-size: 11px;
+      .translate svg {
+        width: 20px;
+        margin-right: 5px;
+        vertical-align: top;
+      }
+    }
   }
 </style>
 
diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue
index d3dea06..8c207ca 100644
--- a/src/components/InstanceCard.vue
+++ b/src/components/InstanceCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="root">
+  <div id="instance-card">
 
     <div class="left">
       <div class="name-host">
@@ -92,10 +92,10 @@
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  .root {
+  #instance-card {
     min-height: 185px;
     width: 770px;
     margin: auto;
@@ -103,104 +103,114 @@
     border: solid 1px #d9d9d9;
     padding: 20px 25px 15px 25px;
     display: flex;
-  }
 
-  .left,
-  .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .icon,
-  .label {
-    margin-right: 5px;
-  }
-
-  .label {
-    color: $grey;
-    letter-spacing: -0.5px;
-  }
-
-  .left {
-    margin-right: 40px;
-    width: 480px;
-
-    .name-host {
+    .left,
+    .right {
       display: flex;
-      margin-bottom: 3px;
-      flex-wrap: wrap;
-    }
-
-    .name {
-      font-family: "Proza Libre", sans-serif;
-      font-weight: $font-semibold;
-      margin-right: 10px;
-    }
-
-    .host {
-      color: $grey;
-    }
-
-    .description {
-      margin-bottom: 8px;
-      line-height: normal;
-    }
-
-    .upload-limits {
-      display: flex;
-
-      .quota {
-        display: flex;
-        margin-right: 80px;
-      }
-    }
-
-    .tags {
-      display: flex;
-      margin-top: auto;
-    }
-  }
-
-  .right {
-    .follow,
-    .languages {
-      margin-bottom: 10px;
-      display: flex;
-    }
-
-    .nsfw {
-      display: flex;
-    }
-
-    .link {
-      margin-top: auto;
-      margin-bottom: 2px;
-      align-self: flex-end;
-    }
-  }
-
-  @media screen and (max-width: $responsive-screen) {
-    .root {
-      width: auto;
       flex-direction: column;
-      padding: 15px 10px;
+      justify-content: space-between;
+    }
 
-      .left {
-        width: auto;
-        margin-right: 0;
+    .icon,
+    .label {
+      margin-right: 5px;
+    }
+
+    .label {
+      color: $grey;
+      letter-spacing: -0.5px;
+    }
+
+    .left {
+      margin-right: 20px;
+      width: 500px;
+
+      .name-host {
+        display: flex;
+        margin-bottom: 3px;
+        flex-wrap: wrap;
       }
 
-      .right {
-        margin-top: 20px;
+      .name {
+        font-family: "Proza Libre", sans-serif;
+        font-weight: $font-semibold;
+        margin-right: 10px;
+      }
 
-        .follow,
-        .languages {
-          margin-bottom: 5px;
+      .host {
+        color: $grey;
+      }
+
+      .description {
+        margin-bottom: 8px;
+        line-height: normal;
+      }
+
+      .upload-limits {
+        display: flex;
+
+        .quota {
+          display: flex;
+          margin-right: 80px;
+
+          .icon {
+            position: relative;
+            top: -2px;
+          }
+        }
+      }
+
+      .auto-blacklist {
+        display: flex;
+        margin-top: auto;
+      }
+
+      .tags {
+        display: flex;
+        margin-top: auto;
+      }
+    }
+
+    .right {
+      .follow,
+      .languages {
+        margin-bottom: 10px;
+        display: flex;
+      }
+
+      .nsfw {
+        display: flex;
+      }
+
+      .link {
+        margin-top: auto;
+        margin-bottom: 2px;
+        align-self: flex-end;
+      }
+    }
+
+    @media screen and (max-width: $responsive-screen) {
+      .root {
+        width: auto;
+        flex-direction: column;
+        padding: 15px 10px;
+
+        .left {
+          width: auto;
+          margin-right: 0;
         }
 
-        .link {
+        .right {
           margin-top: 20px;
+
+          .follow,
+          .languages {
+            margin-bottom: 5px;
+          }
+
+          .link {
+            margin-top: 20px;
+          }
         }
       }
     }
@@ -248,7 +258,7 @@
 
     methods: {
       bytes (value) {
-        if (value === -1) return this.$gettext('Unlimited space for users')
+        if (value === -1) return this.$gettext('Unlimited space')
 
         // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
         const dictionaryBytes = [
diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue
index a99dabb..7fda15d 100644
--- a/src/components/InstancesList.vue
+++ b/src/components/InstancesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="instances-list" class="root">
+  <div id="instances-list">
     <div class="filters">
       <div v-translate class="title">Filter according to your preferences</div>
 
@@ -102,7 +102,7 @@
       </form>
     </div>
 
-    <div class="instances-list">
+    <div class="list">
       <div v-translate class="title">Instances list</div>
 
       <div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
@@ -126,85 +126,87 @@
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  .title {
-    font-size: 24px;
-  }
-
-  .filters {
-    margin-bottom: 100px;
-
+  #instances-list {
     .title {
-      margin-bottom: 25px;
+      font-size: 24px;
     }
 
-    form {
-      border-left: 6px solid $orange;
-      padding-left: 24px;
-
-      .group {
-        margin-bottom: 30px;
-        display: flex;
-        align-items: center;
-
-        & > label {
-          min-width: 140px;
-          margin: 0 10px 0 0;
-
-          &.label-checkbox {
-            align-self: flex-start;
-          }
-        }
-      }
-
-      select {
-        width: 280px;
-        height: 35px;
-        line-height: 21px;
-        border-radius: 0;
-      }
-
-      .btn-group-toggle {
-        .btn {
-          display: flex;
-          align-items: center;
-          color: #000;
-          background-color: #fff;
-          border-color: $orange;
-          min-height: 30px;
-          padding: 0 15px;
-          cursor: pointer;
-
-          &.active {
-            color: #fff;
-            font-weight: $font-semibold;
-            background-color: $orange;
-          }
-        }
-      }
-    }
-  }
-
-  .instances-list {
-    margin-bottom: 50px;
-  }
-
-  @media screen and (max-width: $responsive-screen) {
     .filters {
       margin-bottom: 100px;
 
+      .title {
+        margin-bottom: 25px;
+      }
+
       form {
-        padding-left: 15px;
+        border-left: 6px solid $orange;
+        padding-left: 24px;
 
         .group {
-          flex-direction: column;
-          align-items: flex-start;
+          margin-bottom: 30px;
+          display: flex;
+          align-items: center;
 
-          label {
-            margin-bottom: 5px;
-            font-size: 15px;
+          & > label {
+            min-width: 140px;
+            margin: 0 10px 0 0;
+
+            &.label-checkbox {
+              align-self: flex-start;
+            }
+          }
+        }
+
+        select {
+          width: 280px;
+          height: 35px;
+          line-height: 21px;
+          border-radius: 0;
+        }
+
+        .btn-group-toggle {
+          .btn {
+            display: flex;
+            align-items: center;
+            color: #000;
+            background-color: #fff;
+            border-color: $orange;
+            min-height: 30px;
+            padding: 0 15px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              font-weight: $font-semibold;
+              background-color: $orange;
+            }
+          }
+        }
+      }
+    }
+
+    .list {
+      margin-bottom: 50px;
+    }
+
+    @media screen and (max-width: $responsive-screen) {
+      .filters {
+        margin-bottom: 100px;
+
+        form {
+          padding-left: 15px;
+
+          .group {
+            flex-direction: column;
+            align-items: flex-start;
+
+            label {
+              margin-bottom: 5px;
+              font-size: 15px;
+            }
           }
         }
       }
@@ -246,7 +248,7 @@
     }
   }
 
-  .instances-list {
+  .list {
     .title {
       margin-bottom: 50px;
     }
diff --git a/src/main.js b/src/main.js
index 8c57efa..763b65e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,7 +36,7 @@ Vue.use(GetTextPlugin, {
   translations,
   availableLanguages,
   defaultLanguage: 'en_US',
-  silent: true
+  silent: false
 })
 
 const localePath = window.location.pathname
diff --git a/src/views/All-Content-Selections.vue b/src/views/All-Content-Selections.vue
index b006013..c506f73 100644
--- a/src/views/All-Content-Selections.vue
+++ b/src/views/All-Content-Selections.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="all-content-selections">
     <div class="blocks">
 
       <div class="title-block">
@@ -13,13 +13,14 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  .blocks {
-    margin: 60px auto;
+  #all-content-selections {
+    .blocks {
+      margin: 60px auto;
+    }
   }
-
 </style>
 
 <script>
diff --git a/src/views/FAQ.vue b/src/views/FAQ.vue
index e294504..65ffa05 100644
--- a/src/views/FAQ.vue
+++ b/src/views/FAQ.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="faq">
     <div class="blocks">
 
       <div class="title-block">
@@ -495,33 +495,33 @@
 </template>
 
 <style lang="scss">
-  header a {
-    color: #000;
-  }
-</style>
-
-<style scoped lang="scss">
   @import '../scss/_variables.scss';
 
-  .block .title {
-    font-size: 22px;
-    margin-top: 30px;
-    margin-bottom: 15px;
-  }
+  #faq {
+    header a {
+      color: #000;
+    }
 
-  .card {
-    margin: 5px 0;
-  }
+    .block .title {
+      font-size: 22px;
+      margin-top: 30px;
+      margin-bottom: 15px;
+    }
 
-  .blocks {
-    margin: 60px auto;
-  }
+    .card {
+      margin: 5px 0;
+    }
 
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
+    .blocks {
+      margin: 60px auto;
+    }
+
+    blockquote {
+      padding: 10px 20px;
+      margin: 0 0 20px;
+      font-size: 17.5px;
+      border-left: 5px solid #eee;
+    }
   }
 </style>
 
diff --git a/src/views/Hall-Of-Fame.vue b/src/views/Hall-Of-Fame.vue
index f30721d..d0cffa0 100644
--- a/src/views/Hall-Of-Fame.vue
+++ b/src/views/Hall-Of-Fame.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="hall-of-fame">
     <div class="blocks">
 
       <div class="title-block">
@@ -555,58 +555,60 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
   @import '../scss/_mixins.scss';
 
-  .blocks {
-    margin: 60px auto;
-  }
+  #hall-of-fame {
+    .blocks {
+      margin: 60px auto;
+    }
 
-  .subtitle {
-    margin-bottom: 10px;
-  }
+    .subtitle {
+      margin-bottom: 10px;
+    }
 
-  .sponsors {
-    a {
-      @include disable-default-a-behaviour;
+    .sponsors {
+      a {
+        @include disable-default-a-behaviour;
 
-      display: inline-block;
-      margin-right: 10px;
+        display: inline-block;
+        margin-right: 10px;
 
-      img {
-        width: 270px;
-        height: 135px;
+        img {
+          width: 270px;
+          height: 135px;
+        }
       }
     }
-  }
 
-  ul {
-    padding: 0;
+    ul {
+      padding: 0;
 
-    li {
-      display: inline-block;
-      padding: 0 5px;
+      li {
+        display: inline-block;
+        padding: 0 5px;
 
-      &:before {
-        content: "\25B6";
-        margin-right: 12px;
-      }
+        &:before {
+          content: "\25B6";
+          margin-right: 12px;
+        }
 
-      &:nth-of-type(3n):before {
-        color: #f1680d
-      }
+        &:nth-of-type(3n):before {
+          color: #f1680d
+        }
 
-      &:nth-of-type(3n+1):before {
-        color: #211f20
-      }
+        &:nth-of-type(3n+1):before {
+          color: #211f20
+        }
 
-      &:nth-of-type(3n+2):before {
-        color: #737373
-      }
+        &:nth-of-type(3n+2):before {
+          color: #737373
+        }
 
-      a {
-        color: #000;
+        a {
+          color: #000;
+        }
       }
     }
   }
diff --git a/src/views/Help.vue b/src/views/Help.vue
index 1357700..aca24ca 100644
--- a/src/views/Help.vue
+++ b/src/views/Help.vue
@@ -1,11 +1,11 @@
 <template>
-  <main>
+  <main id="help">
     <div class="blocks">
 
       <div class="title-block">
         <div class="title" v-translate>Help</div>
 
-        <p>Questions on PeerTube? Need help? You've come to the right place!</p>
+        <p v-translate>Questions on PeerTube? Need help? You've come to the right place!</p>
 
         <div class="separator"></div>
       </div>
@@ -26,7 +26,7 @@
             </router-link>
           </div>
 
-          <p>Need a detailed guide?</p>
+          <p v-translate>Need a detailed guide?</p>
           <div class="bottom-link-wrapper">
             <a class="bottom-link" href="https://docs.joinpeertube.org" target="_blank" rel="noopener noreferrer">
               <span class="text" v-translate>Read the documentation</span>
@@ -38,7 +38,7 @@
 
       <div class="block-with-image community">
         <div class="text-block">
-          <div class="title">Ask questions to the community</div>
+          <div class="title" v-translate>Ask questions to the community</div>
 
           <div class="bottom-link-wrapper">
             <a href="https://framacolibri.org/c/peertube" class="bottom-link" target="_blank" rel="noopener noreferrer">
@@ -59,7 +59,7 @@
         </div>
 
         <div class="text-block">
-          <div class="title">For PeerTube admins</div>
+          <div class="title" v-translate>For PeerTube admins</div>
 
           <div class="bottom-link-wrapper">
             <a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os" target="_blank" rel="noopener noreferrer">
@@ -86,7 +86,7 @@
 
       <div class="block-with-image contribute">
         <div class="text-block">
-          <div class="title">Contribute to PeerTube</div>
+          <div class="title" v-translate>Contribute to PeerTube</div>
 
           <div class="bottom-link-wrapper">
             <a class="bottom-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
@@ -105,74 +105,75 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  .blocks {
-    margin: 60px auto;
-    width: 500px;
-  }
-
-  .block-with-image {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 100px;
-
-    .image-block + .text-block,
-    .text-block + .image-block {
-      margin-left: 40px;
-    }
-
-    .text-block {
-      text-align: right;
-
-      p {
-        margin-bottom: 0;
-      }
-
-      .title {
-        font-size: 24px;
-        margin-bottom: 25px;
-      }
-
-      .bottom-link-wrapper {
-        margin-top: 5px;
-        margin-bottom: 0;
-      }
-
-      .bottom-link-wrapper + * {
-        margin-top: 40px;
-      }
-    }
-
-    .image-block + .text-block {
-      text-align: left;
-    }
-  }
-
-  @media screen and (max-width: $small-screen) {
+  #help {
     .blocks {
-      width: auto;
+      margin: 60px auto;
+      width: 500px;
     }
 
     .block-with-image {
-      flex-direction: column;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 100px;
 
-      .text-block {
-        margin-left: 0 !important;
+      .image-block + .text-block,
+      .text-block + .image-block {
+        margin-left: 40px;
       }
 
       .text-block {
+        text-align: right;
+
+        p {
+          margin-bottom: 0;
+        }
+
+        .title {
+          font-size: 24px;
+          margin-bottom: 25px;
+        }
+
+        .bottom-link-wrapper {
+          margin-top: 5px;
+          margin-bottom: 0;
+        }
+
+        .bottom-link-wrapper + * {
+          margin-top: 40px;
+        }
+      }
+
+      .image-block + .text-block {
         text-align: left;
       }
+    }
 
-      .image-block {
-        margin: 40px 0;
+    @media screen and (max-width: $small-screen) {
+      .blocks {
+        width: auto;
+      }
+
+      .block-with-image {
+        flex-direction: column;
+
+        .text-block {
+          margin-left: 0 !important;
+        }
+
+        .text-block {
+          text-align: left;
+        }
+
+        .image-block {
+          margin: 40px 0;
+        }
       }
     }
   }
-
 </style>
 
 <script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 88d61b4..b4faa7a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="home">
 
     <section class="presentation">
       <div class="first-row">
@@ -46,10 +46,11 @@
 
     <section id="what-is-peertube">
       <div class="section-title">
-        <div v-translate>
-          What is
+        <div>
+          <!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
+          <translate>What is</translate>
           <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
-          ?
+          <translate>?</translate>
         </div>
         <div class="border-title"></div>
       </div>
@@ -114,7 +115,7 @@
             <div class="citation">
               <div class="left-bar"></div>
 
-              <div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
+              <div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
             </div>
 
             <p v-translate>
@@ -138,8 +139,8 @@
       </div>
 
       <div class="free-software">
-        <div class="subtitle" v-translate>
-          An open-source, free/libre licence code
+        <div class="subtitle">
+          <translate>An open-source, free/libre licence code</translate>
           <div class="border-title"></div>
         </div>
 
@@ -186,8 +187,8 @@
       </div>
 
       <div id="you-are-a-video-maker">
-        <div class="subtitle" v-translate>
-          Are you a video maker?
+        <div class="subtitle">
+          <translate>Are you a video maker?</translate>
           <div class="border-title"></div>
         </div>
 
@@ -231,8 +232,8 @@
       </div>
 
       <div class="p2p">
-        <div class="subtitle" v-translate>
-          About peer-to-peer broadcasting and watching
+        <div class="subtitle">
+          <translate>About peer-to-peer broadcasting and watching</translate>
           <div class="border-title"></div>
         </div>
 
@@ -266,8 +267,8 @@
       </div>
 
       <div id="your-move">
-        <div class="subtitle" v-translate>
-          Your move!
+        <div class="subtitle">
+          <translate>Your move!</translate>
           <div class="border-title"></div>
         </div>
 
@@ -295,10 +296,11 @@
 
     <section id="behind-peertube">
       <div class="section-title">
-        <div v-translate>
-          Who is behind
+        <div>
+          <!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
+          <translate>Who is behind</translate>
           <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
-          ?
+          <translate>?</translate>
         </div>
 
         <div class="border-title"></div>
@@ -342,137 +344,139 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
   @import '../scss/_mixins.scss';
 
-  .buttons-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 20px;
-
-    .jpt-button {
-      width: 330px;
-      min-height: 50px;
-      height: fit-content;
-    }
-
-    @media screen and (max-width: $responsive-screen) {
-      padding: 0;
+  #home {
+    .buttons-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
 
       .jpt-button {
-        margin: 0 3px 0 0;
+        width: 330px;
+        min-height: 50px;
+        height: fit-content;
       }
 
-      &.explore-create-account {
-        flex-direction: column;
+      @media screen and (max-width: $responsive-screen) {
+        padding: 0;
 
-        .create-account-block {
-          margin-top: 50px;
+        .jpt-button {
+          margin: 0 3px 0 0;
+        }
+
+        &.explore-create-account {
+          flex-direction: column;
+
+          .create-account-block {
+            margin-top: 50px;
+          }
+        }
+      }
+
+      @media screen and (max-width: $small-screen) {
+        .jpt-button {
+          width: 100%;
         }
       }
     }
 
-    @media screen and (max-width: $small-screen) {
-      .jpt-button {
-        width: 100%;
-      }
+    .jpt-button-legend {
+      margin-top: 5px;
+      max-width: 330px;
+      font-size: 13px;
+      text-align: center;
     }
-  }
 
-  .jpt-button-legend {
-    margin-top: 5px;
-    max-width: 330px;
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .presentation {
-    .first-row {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 70px;
-      margin: auto;
-
-      .brand {
-        height: 47px;
-        margin-bottom: 20px;
-        margin-left: -30px;
-      }
-
-      div {
-        flex-basis: 100%;
-      }
-
-      .description {
-        font-size: 24px;
-        font-weight: 600;
-      }
-
-      @media screen and (max-width: $small-screen) {
-        padding: 15px 0;
+    .presentation {
+      .first-row {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 70px;
+        margin: auto;
 
         .brand {
-          height: 25px !important
+          height: 47px;
+          margin-bottom: 20px;
+          margin-left: -30px;
+        }
+
+        div {
+          flex-basis: 100%;
         }
 
         .description {
-          font-size: 20px;
-          margin-left: 20px;
+          font-size: 24px;
+          font-weight: 600;
+        }
+
+        @media screen and (max-width: $small-screen) {
+          padding: 15px 0;
+
+          .brand {
+            height: 25px !important
+          }
+
+          .description {
+            font-size: 20px;
+            margin-left: 20px;
+          }
+        }
+      }
+
+      .marketing {
+        font-size: 16px;
+        margin: 50px auto;
+        width: 500px;
+        text-align: center;
+
+        @media screen and (max-width: $small-screen) {
+          width: 100%;
         }
       }
     }
 
-    .marketing {
-      font-size: 16px;
-      margin: 50px auto;
-      width: 500px;
-      text-align: center;
-
-      @media screen and (max-width: $small-screen) {
-        width: 100%;
-      }
-    }
-  }
-
-  #you-are-a-video-maker {
-    .discover-instances {
-      min-width: 420px;
-      width: fit-content;
-      height: 50px;
-      margin: 50px auto;
-      font-size: 20px;
-    }
-  }
-
-  #your-move {
-    .one-column {
-      margin-top: 50px;
-    }
-
-    .buttons-row {
-      margin-top: 60px;
-
-      .jpt-button {
+    #you-are-a-video-maker {
+      .discover-instances {
+        min-width: 420px;
+        width: fit-content;
+        height: 50px;
+        margin: 50px auto;
         font-size: 20px;
       }
     }
-  }
 
-  #behind-peertube {
-    .framasoft-logo {
-      flex-basis: auto;
-      width: 264px;
-      height: 241px;
+    #your-move {
+      .one-column {
+        margin-top: 50px;
+      }
+
+      .buttons-row {
+        margin-top: 60px;
+
+        .jpt-button {
+          font-size: 20px;
+        }
+      }
     }
 
-    .jpt-button {
-      height: 50px;
-      min-width: 420px;
-      width: fit-content;
-      margin: 60px auto;
-      font-size: 20px;
+    #behind-peertube {
+      .framasoft-logo {
+        flex-basis: auto;
+        width: 264px;
+        height: 241px;
+      }
+
+      .jpt-button {
+        height: 50px;
+        min-width: 420px;
+        width: fit-content;
+        margin: 60px auto;
+        font-size: 20px;
+      }
     }
   }
 </style>
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 7178b86..29b5f69 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="instances">
     <div class="blocks">
 
       <div class="title-block">
@@ -49,60 +49,62 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  .blocks {
-    margin: 60px auto;
-    width: 770px;
-  }
-
-  .title-block {
-    .jpt-button {
-      margin-top: 25px;
-      border: 2px solid $orange;
-      min-width: 225px;
-      height: 35px;
+  #instances {
+    .blocks {
+      margin: 60px auto;
+      width: 770px;
     }
-  }
 
-  .block-with-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 100px;
-
-    & > div {
-      flex-basis: 100%;
-
-      img {
-        width: 370px;
-        height: 210px;
+    .title-block {
+      .jpt-button {
+        margin-top: 25px;
+        border: 2px solid $orange;
+        min-width: 225px;
+        height: 35px;
       }
     }
 
-    & > * {
-      margin-right: 20px;
-    }
-
-    .title {
-      font-size: 24px;
-      margin-bottom: 20px;
-    }
-  }
-
-  @media screen and (max-width: $small-screen) {
-    .blocks {
-      width: auto;
-    }
-
     .block-with-image {
-      flex-direction: column;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 100px;
 
-      img {
+      & > div {
+        flex-basis: 100%;
+
+        img {
+          width: 370px;
+          height: 210px;
+        }
+      }
+
+      & > * {
+        margin-right: 20px;
+      }
+
+      .title {
+        font-size: 24px;
         margin-bottom: 20px;
       }
     }
+
+    @media screen and (max-width: $small-screen) {
+      .blocks {
+        width: auto;
+      }
+
+      .block-with-image {
+        flex-direction: column;
+
+        img {
+          margin-bottom: 20px;
+        }
+      }
+    }
   }
 </style>
 
diff --git a/src/views/News.vue b/src/views/News.vue
index e3e8e92..c290fb1 100644
--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -1,10 +1,10 @@
 <template>
-  <main>
+  <main id="news">
     <div class="blocks">
       <div class="title-block">
         <div class="title" v-translate>PeerTube news!</div>
 
-        <p>Discover the latest PeerTube improvements</p>
+        <p v-translate>Discover the latest PeerTube improvements</p>
 
         <div class="separator"></div>
       </div>
@@ -111,7 +111,11 @@
             </a>.
           </p>
 
-          <p v-translate>Thanks to all PeerTube contributors!<br />Framasoft</p>
+          <p>
+            <translate>Thanks to all PeerTube contributors!</translate>
+            <br />
+            Framasoft
+          </p>
         </div>
       </article>
 
@@ -171,9 +175,11 @@
             <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
           </p>
 
-          <p v-translate>Thanks to all PeerTube contributors!</p>
-
-          <p v-translate>Framasoft.</p>
+          <p>
+            <translate>Thanks to all PeerTube contributors!</translate>
+            <br />
+            Framasoft
+          </p>
         </div>
       </article>
 
@@ -191,9 +197,10 @@
 
           <p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>
 
-          <p v-translate>
-            In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.<br /> We
-            also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.
+          <p>
+            <translate>In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.</translate>
+            <br />
+            <translate>We also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.</translate>
           </p>
 
           <p v-translate>
@@ -214,9 +221,12 @@
           </p>
 
           <p v-translate>
-            As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!<br />
-            For 2019, we plan to add a  plugin and theme management system (even though basic at first), playlist management,
-            support for audio files upload and many other features.
+            <translate>As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!</translate>
+            <br />
+            <translate>
+              For 2019, we plan to add a  plugin and theme management system (even though basic at first), playlist management,
+              support for audio files upload and many other features.
+            </translate>
           </p>
 
           <p v-translate>
@@ -229,8 +239,9 @@
             <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
           </p>
 
-          <p v-translate>
-            Thank you and with our best regards,<br />
+          <p>
+            <translate>Thanks to all PeerTube contributors!</translate>
+            <br />
             Framasoft
           </p>
         </div>
@@ -303,8 +314,9 @@
             can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
           </p>
 
-          <p v-translate>
-            Cheers,<br />
+          <p>
+            <translate>Cheers,</translate>
+            <br />
             Framasoft
           </p>
         </div>
@@ -359,8 +371,9 @@
             contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
           </p>
 
-          <p v-translate>
-            Cheers,<br />
+          <p>
+            <translate>Cheers,</translate>
+            <br />
             Framasoft
           </p>
         </div>
@@ -402,8 +415,9 @@
             contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
           </p>
 
-          <p v-translate>
-            Cheers,<br />
+          <p>
+            <translate>Cheers,</translate>
+            <br />
             Framasoft
           </p>
         </div>
@@ -441,11 +455,13 @@
           </p>
 
           <p v-translate>
-            Moreover, you can ask questions on the PeerTube forum. You can also contact us directly on https://contact.framasoft.org.
+            Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
+            contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
           </p>
 
-          <p v-translate>
-            Cheers,<br />
+          <p>
+            <translate>Cheers,</translate>
+            <br />
             Framasoft
           </p>
         </div>
@@ -461,118 +477,124 @@
   </main>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import '../scss/_variables.scss';
 
-  p {
-    margin-bottom: 10px;
-  }
-
-  p + *:not(ul) {
-    margin-top: 1em;
-  }
-
-  .blocks {
-    margin: 60px auto;
-  }
-
-  .title-block {
-    margin-bottom: 60px;
-  }
-
-  .news {
-    max-width: 800px;
-    padding: 40px 50px;
-    border: solid 1px #d9d9d9;
-    border-left: 6px solid $orange;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
-    margin-bottom: 60px;
-
-    .title {
-      font-size: 24px;
+  #news {
+    p {
+      margin-bottom: 10px;
     }
 
-    .date {
-      font-size: 16px;
+    p + *:not(ul) {
+      margin-top: 1em;
     }
 
-    .body {
-      margin-top: 40px;
+    .blocks {
+      margin: 60px auto;
     }
 
-    a {
-      word-break: break-word;
+    .title-block {
+      margin-bottom: 60px;
     }
 
-    figure {
-      margin: 30px 0;
-      border: 10px solid #fff3ea;
-      border-bottom: 0;
+    .news {
+      max-width: 800px;
+      padding: 40px 50px;
+      border: solid 1px #d9d9d9;
+      border-left: 6px solid $orange;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
+      margin-bottom: 60px;
+
+      .title {
+        font-size: 24px;
+      }
+
+      .date {
+        font-size: 16px;
+      }
+
+      .body {
+        margin-top: 40px;
+      }
+
+      a {
+        word-break: break-word;
+      }
+
+      figure {
+        margin: 30px 0;
+        border: 10px solid #fff3ea;
+        border-bottom: 0;
+
+        img {
+          cursor: pointer;
+          max-width: 100%;
+          height: auto;
+          margin-bottom: 5px;
+        }
+
+        figcaption {
+          font-size: 14px;
+          background: #fff3ea;
+          text-align: center;
+          padding: 10px 0;
+        }
+      }
+
+      @media screen and (max-width: $small-screen) {
+        padding: 10px;
+      }
+    }
+
+    #modal {
+      &.hide-modal {
+        display: none;
+      }
+
+      position: fixed;
+      z-index: 1;
+      padding-top: 5vh;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgb(0, 0, 0);
+      background-color: rgba(0, 0, 0, 0.9);
 
       img {
-        cursor: pointer;
-        max-width: 100%;
-        height: auto;
-        margin-bottom: 5px;
+        margin: auto;
+        display: block;
+        height: 90%;
+        width: auto;
       }
 
-      figcaption {
-        font-size: 14px;
-        background: #fff3ea;
+      .caption {
+        margin: auto;
+        display: block;
+        width: 80%;
+        max-width: 700px;
         text-align: center;
-        padding: 10px 0;
+        color: #ccc;
+        padding: 10px;
+      }
+
+      img,
+      .caption {
+        animation-name: zoom;
+        animation-duration: 0.6s;
       }
     }
 
-    @media screen and (max-width: $small-screen) {
-      padding: 10px;
+    @keyframes zoom {
+      from {
+        transform: scale(0)
+      }
+      to {
+        transform: scale(1)
+      }
     }
   }
-
-  #modal {
-    &.hide-modal {
-      display: none;
-    }
-
-    position: fixed;
-    z-index: 1;
-    padding-top: 5vh;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.9);
-
-    img {
-      margin: auto;
-      display: block;
-      height: 90%;
-      width: auto;
-    }
-
-    .caption {
-      margin: auto;
-      display: block;
-      width: 80%;
-      max-width: 700px;
-      text-align: center;
-      color: #ccc;
-      padding: 10px;
-    }
-
-    img,
-    .caption {
-      animation-name: zoom;
-      animation-duration: 0.6s;
-    }
-  }
-
-  @keyframes zoom {
-    from { transform:scale(0) }
-    to { transform:scale(1) }
-  }
 </style>
 
 <script>