From ea114ce6b93097d49b354ebb0bdc8bdc8d4f29fe Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 12 Sep 2019 11:21:14 +0200
Subject: [PATCH] Design news page

---
 src/components/Header.vue |   7 +-
 src/data.yml              |   5 -
 src/lang.yml              |  22 ---
 src/main.js               |   9 +-
 src/scss/main.scss        |  26 +++
 src/views/Help.vue        |  26 ---
 src/views/News.vue        | 404 +++++++++++++++++++++++++++++++++++---
 7 files changed, 409 insertions(+), 90 deletions(-)
 delete mode 100644 src/data.yml
 delete mode 100644 src/lang.yml

diff --git a/src/components/Header.vue b/src/components/Header.vue
index f6908b8..8ac27e5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -90,8 +90,7 @@
   }
 
   .nav-link {
-    padding-right: 0 !important;
-    padding-left: 0 !important;
+    padding: 0 !important;
     color: #000;
     font-family: 'Proza Libre', sans-serif;
 
@@ -99,6 +98,10 @@
       font-weight: $font-semibold;
     }
   }
+
+  .router-link-active {
+    border-bottom: 3px solid $orange;
+  }
 </style>
 
 <script>
diff --git a/src/data.yml b/src/data.yml
deleted file mode 100644
index 62e5320..0000000
--- a/src/data.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-meta:
-  title: Join PeerTube
-  author: Framasoft
-  canonical: https://joinpeertube.org
-  i18n: https://trad.framasoft.org/project/view/join-peertube/master
diff --git a/src/lang.yml b/src/lang.yml
deleted file mode 100644
index 426dbe2..0000000
--- a/src/lang.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-ar: 'العربية'
-br: Brezhoneg
-ca: Català
-co: Corsu
-de: Deutsch
-en: English
-eo: Esperanto
-es: Español
-fr: Français
-hu: Magyar
-it: Italiano
-nl: Dutch
-oc: Occitan
-pt: Português
-ru: Русский
-sq: Shqip
-sv: Svenska
-ja: '日本語'
-zh_Hant_TW: '繁體中文（台灣）'
-
-
-
diff --git a/src/main.js b/src/main.js
index 2a8fef5..ece3413 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import GetTextPlugin from 'vue-gettext'
 import App from './App.vue'
 import Home from './views/Home.vue'
 import Help from './views/Help'
+import News from './views/News'
 
 import './scss/bootstrap.scss'
 import './scss/main.scss'
@@ -54,10 +55,6 @@ Vue.component('vue-headful', vueHeadful)
 Vue.mixin(CommonMixins)
 
 const routes = [
-  {
-    path: '',
-    component: Home
-  },
   {
     path: '/',
     component: Home
@@ -65,6 +62,10 @@ const routes = [
   {
     path: '/help',
     component: Help
+  },
+  {
+    path: '/news',
+    component: News
   }
 ]
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 888d230..6c32aae 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -173,3 +173,29 @@ main {
     margin-top: 0 !important;
   }
 }
+
+.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;
+  }
+}
diff --git a/src/views/Help.vue b/src/views/Help.vue
index 9bd58e4..83c5b6e 100644
--- a/src/views/Help.vue
+++ b/src/views/Help.vue
@@ -113,32 +113,6 @@
     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;
diff --git a/src/views/News.vue b/src/views/News.vue
index b846c0c..dcf16e0 100644
--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -1,39 +1,381 @@
 <template>
   <main>
-    <vue-headful
-      :title="$t('meta.title') + ' - ' + $t('hof.title')"
-    />
-    <div class="container">
-      <section class="col-lg-8 faq">
-        <h1>{{ $t('news.title') }}</h1>
-        <span>{{ $t('news.subtitle') }}</span>
-        <div v-for="(bloc, key) in $t('news.blocs')" :id="key">
-          <a :href="`#${key}`"><h2>{{ bloc.title }}</h2></a>
-          <p class="small">
-            <i aria-hidden="true" class="fa fa-calendar"></i>
-            <time v-if="bloc.date" :datetime="bloc.date.data">{{ bloc.date.text }}</time>
+    <div class="blocks">
+      <div class="title-block">
+        <div class="title">PeerTube news!</div>
+
+        <p>Discover the latest PeerTube improvements</p>
+
+        <div class="separator"></div>
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube 1.3 is out!</div>
+        <div class="date">June 5, 2019</div>
+
+        <div class="body">
+          <p v-translate>Hello!</p>
+
+          <p v-translate>We've just released PeerTube 1.3 and it brings a lot of new features.</p>
+
+          <p v-translate>
+            The most important of these new features is <strong>the playlist system</strong>. This feature allows any user to create a
+            playlist in which it's possible to add videos and reorder them. Videos added to a playlist can be viewed entirely or partially:
+            the creator of the playlist can decide when the video playback starts and/or ends (timecode system). This system is really
+            useful to create all kinds of zappings or educational contents by selecting extracts from videos which interest you. In
+            addition, a "Watch Later" playlist is created by default for each user. Thus, you can save videos in this playlist when you
+            don't have time to watch them immediately.
           </p>
-          <p v-for="p in bloc.text" v-html="p"></p>
-          <hr/>
+
+          <p v-translate>
+            Another feature of this 1.3 version has been entirely developed by an external contributor:
+            <a href="https://github.com/joshmorel">Josh Morel</a> who add <strong>a quarantine system</strong> for videos on PeerTube. If the
+            administrator of an instance enables this feature, any new video uploaded on his instance will automatically be hidden until a
+            moderator approves it.
+          </p>
+
+          <p v-translate>
+            PeerTube translation community have done a huge job. <strong>3 new languages</strong> are now available: Japanese, Dutch and
+            European Portuguese (PeerTube already support Brazilian Portuguese). Amazing! PeerTube is now available in 19 languages!
+          </p>
+
+          <p v-translate>
+            Now, administrators can <strong>manage more finely how other instances subscribe to their own instance</strong>. The
+            administrator can decide whether or not to approve the subscription of another instance to its own. It is also possible to
+            activate automatic rejection for any new subscription to its instance. Finally, a notification is created as soon as the
+            administrator's instance receives a new subscription. These features help administrators control on which instances their
+            content is displayed.
+          </p>
+
+          <p v-translate>
+            We're also redesigning the <strong>PeerTube video player</strong> to offer better video playback and to correct a few bugs.
+            With this new player, resolution changes should be smoother and the bandwidth management is optimized with a more efficient
+            buffering system. Version 1.3 of PeerTube also adds ability for administrators to enable this new experimental player so we can
+            get feedback on it. We hope to use this new player by default in the future.
+          </p>
+
+          <p v-translate>
+            Finally, we have made some adjustments to the <strong>user interface</strong> so it easier and nicer to use. For instance,
+            video thumbnails are becoming bigger so that they're more highlighted. Users now have a quick access to their library from the
+            menu that includes their playlists, videos, video watching history and their subscriptions.
+          </p>
+
+          <p v-translate>
+            Many other improvements have been made in this new version. You can see the complete list on
+            <a 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>
         </div>
-      </section>
-      <aside class="col-lg-4">
-        <div class="sticky-top">
-          <div class="bloc">
-            <nav>
-              <h3>{{ $t('news.latest-articles') }}</h3>
-              <ul>
-                <li v-for="(bloc, key) in $t('news.blocs')">
-                  <a :href="`#${key}`">{{ bloc.title }}</a>
-                  <time v-if="bloc.date" :datetime="bloc.date.data" class="text-muted small">
-                    {{ bloc.date.text }}
-                  </time>
-                </li>
-              </ul>
-            </nav>
-          </div>
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube: retrospective, new features and more to come!</div>
+        <div class="date">February 26, 2019</div>
+
+        <div class="body">
+          <p v-translate>
+            Since version 1.0 has been released last November, we went on improving PeerTube, day after day. These improvements on PeerTube
+            go well beyond the objectives fixed during the crowdfunding. They have been funded by the
+            <a href="https://framasoft.org/en/">Framasoft non-profit</a>, which develops the software (and lives only
+            through <a href="https://soutenir.framasoft.org/en/">your donations</a>).
+          </p>
+
+          <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>
+
+          <p v-translate>
+            In January, we released version 1.2 that supports 3 new languages: Russian, Polish and Italian. Thanks to PeerTube's community
+            of translators, PeerTube is now translated into 16 different languages!
+          </p>
+
+          <p v-translate>
+            This version also includes a notification system that allows users to be informed (on the web interface or through email) when
+            their video is commented, when someone mention them, when one of their subscriptions has published a new video, etc.
+          </p>
+
+          <p v-translate>
+            In the meantime, the PeerTube federation has grown: today, more than 300 instances broadcast more than 70,000 videos, with
+            nearly 2 million cumulated views. We remind you that the only official website we maintain around PeerTube is
+            <a href="https://joinpeertube.org/en">https://joinpeertube.org/en</a> and that we bear no responsibility on any other site that
+            may be published.
+          </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.
+          </p>
+
+          <p v-translate>
+            If you also to contribute to the growing of PeerTube, you can participate in its funding here:
+            <a href="https://soutenir.framasoft.org/en">https://soutenir.framasoft.org/en</a>
+          </p>
+
+          <p v-translate>
+            If you have any questions, feel free to use our forum:
+            <a href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
+          </p>
+
+          <p v-translate>
+            Thank you and with our best regards,<br />
+            Framasoft
+          </p>
         </div>
-      </aside>
+
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube crowdfunding newsletter #4</div>
+        <div class="date">October 16, 2018</div>
+
+        <div class="body">
+          <p v-translate>Hello everyone!</p>
+
+          <p v-translate>We are now in mid-October! As promised, we have just released the first stable version of PeerTube.</p>
+
+          <p v-translate>It implements all stretch goals we planned in our crowdfunding:</p>
+          <ul>
+            <li>Localization support (as we write these lines, PeerTube is already available in 13 different languages!)</li>
+            <li>Subtitles support</li>
+            <li>Ability to import videos through an URL (YouTube, Vimeo, Dailymotion and many others!)</li>
+            <li>Ability to import a video through a torrent file or a magnet URI</li>
+            <li>
+              RSS feeds, allowing you to track new videos published in all federated PeerTube instances, in a specific PeerTube instance
+              or in a video channel you like. You can also subscribe to comment feeds!
+            </li>
+            <li>A more relevant search, with the ability to set advanced filters (duration, category, tags...)</li>
+            <li>
+              Subscriptions throughout the federation: you can follow your favorite video channels and see all the videos on a dedicated
+              page
+            </li>
+            <li>Redundancy system: a PeerTube instance can help sharing some videos from another instance</li>
+          </ul>
+
+          <p v-translate>We know that feature descriptions are not very amusing, so we have published a few demonstration videos:</p>
+          <ul>
+            <li><a href="https://framatube.org/videos/watch/f57da309-6b92-4fe0-9267-ff8188cc050c">RSS Feeds</a></li>
+            <li><a href="https://framatube.org/videos/watch/dcad56d9-9fe6-45bc-96aa-3d778f6804c1">Torrent import</a></li>
+            <li><a href="https://framatube.org/videos/watch/59d306c0-fc5b-493a-956a-43785693346b">YouTube video import</a></li>
+            <li><a href="https://framatube.org/videos/watch/edd7a468-08d5-4877-b62b-61c5f3f83ceb">Adding subtitles</a></li>
+            <li><a href="https://framatube.org/videos/watch/60c4bea4-6bb2-4fce-8d9f-8a522575419d">Advanced search</a></li>
+            <li><a href="https://framatube.org/videos/watch/8968dbe1-a387-433b-a20f-37fe9f3ca8d5">Video channel subscriptions</a></li>
+          </ul>
+
+          <p v-translate>
+            This is the last newsletter regarding the PeerTube crowdfunding. We would like to thank you one more time, for allowing us
+            to greatly improve PeerTube, and therefore to promote a more decentralized web. But the journey does not end here: we will
+            continue to work on the software, and there is still a lot to do to fully free up video streaming. But before anything, we'll
+            take a few days off ;)
+          </p>
+
+          <p v-translate>
+            We remind you that you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You
+            can also contact us directly on <a href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
+          </p>
+
+          <p v-translate>
+            Cheers,<br>
+            Framasoft
+          </p>
+        </div>
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube crowdfunding newsletter #3</div>
+        <div class="date">September 12, 2018</div>
+
+        <div class="body">
+          <p v-translate>Hello everyone!</p>
+
+          <p v-translate>A month before the version 1 of PeerTube, we would like to share some (good!) news with you.</p>
+
+          <p v-translate>
+            We just released PeerTube <em>beta 12</em>, that allows to subscribe to video channels, whether they are on your instance or
+            even on remote instances. This way, you can browse videos of your subscribed channels in a dedicated page. Moreover, if your
+            PeerTube administrator allows it, you can search a channel or a video directly by typing their web address in the PeerTube
+            search bar.
+          </p>
+
+          <p v-translate>
+            It was not included in the crowdfunding, but we created an "Overview" page, that displays videos of some
+            categories/tags/channels picked randomly, to show the diversity of the videos uploaded on PeerTube. You can see
+            <a href="https://peertube3.cpy.re/videos/overview">a demonstration here</a>.
+          </p>
+
+          <p v-translate>
+            You can read the complete <em>beta 12</em> changelog <a
+            href="https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md#v100-beta12">here</a>.
+          </p>
+
+          <p v-translate>
+            Regarding the crowdfunding, most of the rewards are ready: <a href="https://github.com/Chocobozzz/PeerTube">the PeerTube
+            README</a> and <a href="https://joinpeertube.org/fr/hall-of-fame/">the JoinPeerTube Hall of Fame</a> show off the names of the
+            persons who have chosen the corresponding rewards. We will soon be able to send the personalized thank-you digital arts to
+            people that gave 80€ (~93 USD) and more (and it's so beautiful that we are looking forward to it!)
+          </p>
+
+          <p v-translate>
+            The last feature we have to implement is the videos redundancy between instances, which will further increase resilience on
+            instance overload. If all goes well, we should finish it in about two weeks (end of september).
+          </p>
+
+          <p v-translate>
+            We remind you that you can track the progress of the work directly <a href="https://github.com/Chocobozzz/PeerTube"> on the git
+            repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
+          </p>
+
+          <p v-translate>
+            Moreover, you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
+            contact us directly on <a href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
+          </p>
+
+          <p v-translate>
+            Cheers,<br>
+            Framasoft
+          </p>
+        </div>
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube crowdfunding newsletter #2</div>
+        <div class="date">August 20, 2018</div>
+
+        <div class="body">
+          <p v-translate>Hello everyone!</p>
+
+          <p v-translate>The development of the crowdfunding features is going well.</p>
+
+          <p v-translate>
+            As a reminder, in the first newsletter (July 23rd, 2018), we announced that the localization system and RSS feeds were
+            implemented, and that we were making progress on the subtitles support and the advanced search.
+          </p>
+
+          <p v-translate>
+            These four features are all implemented, and can already be used on instances updated to version <em>v1.0.0-beta.10</em> (for
+            example <a href="https://framatube.org">https://framatube.org</a>). Regarding the subtitles support, you can test them on the
+            <a href="https://framatube.org/videos/watch/217eefeb-883d-45be-b7fc-a788ad8507d3"> the "What is PeerTube"</a> video.
+          </p>
+
+          <p v-translate>
+            We are currently finishing the video import system, from a URL (YouTube, Vimeo etc) or a torrent file. This feature should be
+            available in a few days, when we will release a new version (<em>v1.0.0-beta.11</em>).<br> The import system will complete the
+            first crowdfunding goal. The next feature we will be working on will be the user subscriptions.
+          </p>
+
+          <p v-translate>
+            We remind you that you can track the progress of the work directly <a href="https://github.com/Chocobozzz/PeerTube"> on the git
+            repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
+          </p>
+
+          <p v-translate>
+            Moreover, you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
+            contact us directly on <a href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
+          </p>
+
+          <p v-translate>
+            Cheers,<br>
+            Framasoft
+          </p>
+        </div>
+      </div>
+
+      <div class="news">
+        <div class="title">PeerTube crowdfunding newsletter #1</div>
+        <div class="date">July 23, 2018</div>
+
+        <div class="body">
+          <p v-translate>Hello everyone!</p>
+
+          <p v-translate>First of all, thank you again for contributing to PeerTube! ❤️</p>
+
+          <p v-translate>
+            During the crowdfunding campaign, we continued to work on the localization system. And we are happy to announce it's
+            finally completed: it will be available in the next beta (beta 10) of PeerTube. As of this writing, the web interface is
+            already available in english, french, basque, catalan, czech and esperanto (huge thank you to all of the translators).
+            If you too want to help translating PeerTube, do not hesitate to check out the documentation!
+          </p>
+
+          <p v-translate>
+            Regarding the RSS feeds feature, it was already implemented by Rigelk and you can already use it in the beta 9.
+            You can, for example, get the feed of the last local videos uploaded in a particular instance.
+          </p>
+
+          <p v-translate>
+            Subtitles support is well under way, and we should have a first version available soon.
+            When this work is finished, we will develop the advanced search.
+          </p>
+
+          <p v-translate>
+            We remind you that you can track the progress of the work directly on the git repository, and be part of the discussions/bug
+            reports/feature requests in the "Issues" tab.
+          </p>
+
+          <p v-translate>
+            Moreover, you can ask questions on the PeerTube forum. You can also contact us directly on https://contact.framasoft.org.
+          </p>
+
+          <p v-translate>
+            Cheers,<br />
+            Framasoft
+          </p>
+        </div>
+      </div>
+
     </div>
+
   </main>
 </template>
+
+<style scoped 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;
+    }
+
+    .date {
+      font-size: 16px;
+    }
+
+    .body {
+      margin-top: 40px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    components: { }
+  }
+</script>