Lint

src/App.vue

@@ -21,12 +21,12 @@
 </style>
 
 <script>
-import HeaderComponent from './components/Header.vue'
+  import HeaderComponent from './components/Header.vue'
 
-export default {
+  export default {
     name: 'app',
     components: {
       HeaderComponent
     }
-}
+  }
 </script>

src/components/ContentSelection.vue

@@ -108,11 +108,11 @@
 </style>
 
 <script>
-import IconVideo from './icons/IconVideo.vue'
+  import IconVideo from './icons/IconVideo.vue'
-import IconInstance from './icons/IconInstance.vue'
+  import IconInstance from './icons/IconInstance.vue'
-import IconChannel from './icons/IconChannel.vue'
+  import IconChannel from './icons/IconChannel.vue'
 
-export default {
+  export default {
     props: {
       type: String,
       title: String,
@@ -126,5 +126,5 @@ export default {
       IconInstance,
       IconChannel
     }
-}
+  }
 </script>

src/components/Header.vue

@@ -5,9 +5,10 @@
       <router-link :to="getPath('/')" class="navbar-brand">
         <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
 
-        <div>
+        <div class="support">
           soutenu par
 
+          <img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
         </div>
       </router-link>
 
@@ -45,7 +46,7 @@
           </li>
 
           <div class="pull-right">
-            <I18n />
+            <I18n/>
           </div>
         </ul>
       </div>
@@ -55,11 +56,25 @@
 
 <style lang="scss" scoped>
   @import '../scss/_variables.scss';
+  @import '../scss/_mixins.scss';
 
   header {
     margin-bottom: 30px;
   }
 
+  .navbar-brand {
+    @include disable-default-a-behaviour;
+
+    color: #000;
+    font-family: 'Proza Libre', sans-serif;
+    font-size: 10px;
+
+    .support img {
+      vertical-align: initial;
+      margin-left: 1px;
+    }
+  }
+
   nav {
     height: 60px;
     background-color: #fff;
@@ -87,9 +102,9 @@
 </style>
 
 <script>
-import I18n from './I18n.vue'
+  import I18n from './I18n.vue'
 
-export default {
+  export default {
     components: {
       I18n
     },
@@ -99,5 +114,5 @@ export default {
         return path
       }
     }
-}
+  }
 </script>

src/components/I18n.vue

@@ -2,7 +2,7 @@
   <div class="i18n">
     <b-dropdown>
       <template slot="button-content">
-        <img :src="buildImgUrl('language.png')" alt="Change languages logo" />
+        <img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
 
         <div class="text">
           <translate>Languages</translate>
@@ -54,10 +54,10 @@
 </style>
 
 <script>
-import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
+  import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
-import IconAdd from './icons/IconAdd'
+  import IconAdd from './icons/IconAdd'
 
-export default {
+  export default {
     components: {
       BDropdown,
       BDropdownDivider,
@@ -71,5 +71,5 @@ export default {
         return window.location.origin + `/${locale}/`
       }
     }
-}
+  }
 </script>

src/views/Home.vue

@@ -3,7 +3,7 @@
 
     <section class="presentation">
       <div class="first-row">
-        <img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo" />
+        <img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo"/>
 
         <div class="description" v-translate>A free software to take back control of your videos</div>
       </div>
@@ -54,24 +54,26 @@
       <div class="section-title">
         <div v-translate>
           What is
-          <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube" />
+          <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
           ?
         </div>
         <div class="border-title"></div>
       </div>
 
       <div class="ambition">
-        <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen" />
+        <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
 
         <div>
           <div class="citation">
             <div class="text" v-translate>
-              L’ambition de PeerTube, c'est d’être <strong>une alternative libre et décentralisée</strong> aux services de diffusion de vidéos.
+              L’ambition de PeerTube, c'est d’être <strong>une alternative libre et décentralisée</strong> aux services de diffusion de
+              vidéos.
             </div>
           </div>
 
           <p v-translate>
-            Le but n’est pas de remplacer, mais de proposer quelque chose d’autre, avec des valeurs différentes, en parallèle de ce qui existe déjà.
+            Le but n’est pas de remplacer, mais de proposer quelque chose d’autre, avec des valeurs différentes, en parallèle de ce qui
+            existe déjà.
           </p>
         </div>
       </div>
@@ -79,7 +81,7 @@
       <div class="federation one-column">
         <div class="subtitle" v-translate>Une fédération d'hébergements interconnectés</div>
 
-        <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema" />
+        <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
 
         <div class="citation">
           <div class="left-bar"></div>
@@ -93,7 +95,8 @@
         <p v-translate>
           N’importe qui ayant un minimum de compétences techniques peut héberger un serveur PeerTube qu’on nomme instance.
           Chaque instance héberge ses propres utilisateur⋅ices et leurs vidéos.
-          Ainsi, <strong>toutes les instances sont créées, animées, modérées et maintenues de façon indépendante par des administrateur⋅ices différent⋅e⋅s.</strong>
+          Ainsi, <strong>toutes les instances sont créées, animées, modérées et maintenues de façon indépendante par des administrateur⋅ices
+          différent⋅e⋅s.</strong>
         </p>
 
         <div class="bottom-link-wrapper">
@@ -103,10 +106,11 @@
           </a>
         </div>
 
-        <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema" />
+        <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
 
         <p v-translate>
-          Mais vous avez tout de même la possibilité de regarder depuis l'instance sur laquelle vous êtes inscrit·e des vidéos qui se trouvent ailleurs ;
+          Mais vous avez tout de même la possibilité de regarder depuis l'instance sur laquelle vous êtes inscrit·e des vidéos qui se
+          trouvent ailleurs ;
           il suffit que l'administrateur·ice l'ai autorisé !
         </p>
 
@@ -116,12 +120,13 @@
           <div class="text v-translate">C'est le principe de<strong> la fédération !</strong></div>
         </div>
 
-        <img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema" />
+        <img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema"/>
 
         <p v-translate>
           Mais ce n’est pas tout ! Le protocole de fédération ActivityPub (qu’utilise PeerTube)
           <strong>permet aussi d’interagir avec d’autres logiciels</strong> utilisant ce même protocole. Par exemple, PeerTube et le
-          réseau social Mastodon, alternative à Twitter, sont liés : <strong>il est possible de « suivre » un utilisateur PeerTube depuis Mastodon</strong>
+          réseau social Mastodon, alternative à Twitter, sont liés : <strong>il est possible de « suivre » un utilisateur PeerTube depuis
+          Mastodon</strong>
           (en affichant dans son fil d'actualités les dernières vidéos postées par le compte suivi),
           <strong>ou même de commenter une vidéo hébergée sur PeerTube directement depuis Mastodon.</strong>
         </p>
@@ -137,7 +142,7 @@
       <div class="free-software one-column">
         <div class="subtitle" v-translate>Un code ouvert sous licence libre</div>
 
-        <img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema" />
+        <img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>
 
         <p v-translate>
           Les principaux services de diffusion de vidéo en ligne utilisent vos données pour gagner
@@ -177,7 +182,7 @@
       <div class="you-are-a-video-maker one-column">
         <div class="subtitle" v-translate>Vous êtes vidéaste ?</div>
 
-        <img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration" />
+        <img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>
 
         <div class="citation">
           <div class="left-bar"></div>
@@ -197,14 +202,17 @@
 
           <div class="text" v-translate>
             Être en contact direct avec un hébergeur à taille humaine vous permet, non seulement de ne plus être le client d'une grande
-            entreprise du numérique, mais surtout <strong>d'avoir des rapports privilégiés avec les personnes qui hébergent et diffusent vos données.</strong>
+            entreprise du numérique, mais surtout <strong>d'avoir des rapports privilégiés avec les personnes qui hébergent et diffusent vos
+            données.</strong>
           </div>
         </div>
 
         <div v-translate>
-          Avec PeerTube, vous choisissez l’hébergeur de vos vidéos selon ses conditions d’utilisation, telles que la limite d’espace disque par utilisateur⋅ice,
+          Avec PeerTube, vous choisissez l’hébergeur de vos vidéos selon ses conditions d’utilisation, telles que la limite d’espace disque
+          par utilisateur⋅ice,
           la politique de modération, les choix de fédération...
-          Comme vous n’avez pas un géant du web en face de vous, vous pourrez probablement discuter ensemble si vous avez un souci, un besoin, une envie...
+          Comme vous n’avez pas un géant du web en face de vous, vous pourrez probablement discuter ensemble si vous avez un souci, un
+          besoin, une envie...
         </div>
 
         <button class="jpt-button discover-instances">
@@ -217,7 +225,7 @@
       <div class="p2p one-column">
         <div class="subtitle" v-translate>De la diffusion – et donc du visionnage – en pair-à-pair</div>
 
-        <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration" />
+        <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
 
         <div class="citation">
           <div class="left-bar"></div>
@@ -236,7 +244,8 @@
 
         <p v-translate>
           Mine de rien, avant cette diffusion en pair-à-pair, les vidéastes à succès (ou les vidéos qui font le buzz) étaient condamnés
-          à s’héberger chez un géant du web dont l’infrastructure peut encaisser des milliers de vues simultanées… Ou à payer très cher un hébergement de vidéo indépendant afin qu’il tienne la charge.
+          à s’héberger chez un géant du web dont l’infrastructure peut encaisser des milliers de vues simultanées… Ou à payer très cher un
+          hébergement de vidéo indépendant afin qu’il tienne la charge.
         </p>
       </div>
 
@@ -244,7 +253,7 @@
         <div class="one-column">
           <div class="subtitle" v-translate>À vous de jouer !</div>
 
-          <img :src="buildImgUrl('peertube-you-play.png')" alt="PeerTube you play illustration" />
+          <img :src="buildImgUrl('peertube-you-play.png')" alt="PeerTube you play illustration"/>
         </div>
 
         <div class="buttons-row">
@@ -267,7 +276,7 @@
       <div class="behind-peertube one-column">
         <div class="subtitle" v-translate>Qui est derrière PeerTube ?</div>
 
-        <img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo" />
+        <img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>
 
         <p v-translate>
           PeerTube est <strong>un logiciel libre gratuit financé par une association</strong> française à but non lucratif : Framasoft.
@@ -275,7 +284,8 @@
 
         <p v-translate>
           Créée en 2004, l'association se consacre désormais à <strong>l’éducation populaire aux enjeux du numérique.</strong>
-          Notre petite structure (moins de 40 membres, moins de 10 salarié·e·s) est connue pour avoir réalisé le projet Dégooglisons Internet,
+          Notre petite structure (moins de 40 membres, moins de 10 salarié·e·s) est connue pour avoir réalisé le projet Dégooglisons
+          Internet,
           proposant 34 outils en ligne éthiques et alternatifs. Reconnue d’intérêt général, notre association est
           <strong>financée à plus de 90% par vos dons</strong>, déductibles des impôts pour les contribuables français·es.
         </p>
@@ -362,6 +372,11 @@
     .ambition {
       display: flex;
 
+      & > img,
+      & > div {
+        flex-basis: 100%;
+      }
+
       img {
         margin-right: 30px;
       }
@@ -397,11 +412,11 @@
 </style>
 
 <script>
-import IconInstance from '../components/icons/IconInstance.vue'
+  import IconInstance from '../components/icons/IconInstance.vue'
-import ContentSelection from '../components/ContentSelection.vue'
+  import ContentSelection from '../components/ContentSelection.vue'
-import IconRight from '../components/icons/IconRight.vue'
+  import IconRight from '../components/icons/IconRight.vue'
 
-export default {
+  export default {
     components: {
       ContentSelection,
       IconInstance,
@@ -415,10 +430,10 @@ export default {
           title: 'Nothing to hide',
           thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg',
           url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
-        tags: [ 'tag', 'tag2', 'tag3' ],
+          tags: ['tag', 'tag2', 'tag3'],
           description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
         }
       ]
     })
-}
+  }
 </script>