Implement help page

src/components/Header.vue

@@ -6,7 +6,7 @@
         <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
 
         <div class="support">
-          soutenu par
+          developed by
 
           <img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
         </div>
@@ -22,27 +22,27 @@
       <div id="navbar" class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
-            <router-link class="nav-link" :to="getPath('/')">Home</router-link>
+            <router-link class="nav-link" to="/">Home</router-link>
           </li>
 
           <li class="nav-item ">
-            <router-link class="nav-link create-account" :to="getPath('/')">Create an account</router-link>
+            <router-link class="nav-link create-account" to="/">Create an account</router-link>
           </li>
 
           <li class="nav-item">
-            <router-link class="nav-link" :to="getPath('/news')">News</router-link>
+            <router-link class="nav-link" to="/news">News</router-link>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link">Help</a>
+            <router-link class="nav-link" to="/help">Help</router-link>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link">Contribute</a>
+            <a class="nav-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">Contribute</a>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link">Git</a>
+            <a class="nav-link" href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">Git</a>
           </li>
 
           <div class="pull-right">

src/main.js

@@ -6,6 +6,7 @@ import GetTextPlugin from 'vue-gettext'
 
 import App from './App.vue'
 import Home from './views/Home.vue'
+import Help from './views/Help'
 
 import './scss/bootstrap.scss'
 import './scss/main.scss'
@@ -56,6 +57,10 @@ const routes = [
   {
     path: '/',
     component: Home
+  },
+  {
+    path: '/help',
+    component: Help
   }
 ]
 

src/scss/main.scss

@@ -150,7 +150,7 @@ main {
   .text {
     border-bottom: 3px solid $orange;
     padding: 0 5px;
-    margin-right: 5px;
+    margin-right: 10px;
   }
 }
 

src/views/Help.vue

@@ -0,0 +1,190 @@
+<template>
+  <main>
+    <div class="blocks">
+
+      <div class="title-block">
+        <div class="title">Help</div>
+
+        <p>Questions on PeerTube? Need help? You've come to the right place!</p>
+
+        <div class="separator"></div>
+      </div>
+
+      <div class="block-with-image understand">
+        <div class="image-block">
+          <img :src="buildImgUrl('help/rabbit.png')" alt="Rabbit image">
+        </div>
+
+        <div class="text-block">
+          <div class="title">Better understand and use PeerTube</div>
+
+          <p>You have a question?</p>
+          <div class="bottom-link-wrapper">
+            <router-link to="/faq" class="bottom-link">
+              <span class="text" v-translate>Discover our FAQ</span>
+              <icon-right></icon-right>
+            </router-link>
+          </div>
+
+          <p>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>
+              <icon-right></icon-right>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="block-with-image community">
+        <div class="text-block">
+          <div class="title">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">
+              <span class="text" v-translate>Go to the forum</span>
+              <icon-right></icon-right>
+            </a>
+          </div>
+        </div>
+
+        <div class="image-block">
+          <img :src="buildImgUrl('help/cat.png')" alt="Cat image">
+        </div>
+      </div>
+
+      <div class="block-with-image administrators">
+        <div class="image-block">
+          <img :src="buildImgUrl('help/panda.png')" alt="Panda image">
+        </div>
+
+        <div class="text-block">
+          <div class="title">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">
+              <span class="text" v-translate>Install PeerTube</span>
+              <icon-right></icon-right>
+            </a>
+          </div>
+
+          <div class="bottom-link-wrapper">
+            <a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os?id=upgrade" target="_blank" rel="noopener noreferrer">
+              <span class="text" v-translate>Upgrade PeerTube</span>
+              <icon-right></icon-right>
+            </a>
+          </div>
+
+          <div class="bottom-link-wrapper">
+            <a class="bottom-link" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
+              <span class="text" v-translate>Administer PeerTube</span>
+              <icon-right></icon-right>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="block-with-image contribute">
+        <div class="text-block">
+          <div class="title">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">
+              <span class="text" v-translate>How to contribute?</span>
+              <icon-right></icon-right>
+            </a>
+          </div>
+        </div>
+
+        <div class="image-block">
+          <img :src="buildImgUrl('help/dog.png')" alt="Dog image">
+        </div>
+      </div>
+
+    </div>
+  </main>
+</template>
+
+<style scoped lang="scss">
+  @import '../scss/_variables.scss';
+
+  .blocks {
+    margin: 60px auto;
+    width: 500px;
+  }
+
+  .title {
+    font-family: 'Proza Libre', sans-serif;
+    font-weight: $font-semibold;
+  }
+
+  .title-block {
+    text-align: center;
+    margin-bottom: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title {
+      margin-bottom: 10px;
+      font-size: 34px;
+      font-weight: $font-semibold;
+    }
+
+    .separator {
+      margin-top: 30px;
+      background-color: $orange;
+      height: 3px;
+      width: 200px;
+    }
+  }
+
+  .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;
+    }
+  }
+
+</style>
+
+<script>
+  import IconRight from '../components/icons/IconRight'
+
+  export default {
+    components: {
+      IconRight
+    }
+  }
+</script>