From daf6f947835bd10d302c9d31ffb4ef4b1da814e6 Mon Sep 17 00:00:00 2001
From: Felix <me@nutomic.com>
Date: Fri, 14 Feb 2020 21:09:41 +0100
Subject: [PATCH] write/copy inclusion policy (fixes #4)

---
 src/views/InclusionPolicy.vue | 203 +++++-----------------------------
 1 file changed, 29 insertions(+), 174 deletions(-)

diff --git a/src/views/InclusionPolicy.vue b/src/views/InclusionPolicy.vue
index 700ab06..63edb95 100644
--- a/src/views/InclusionPolicy.vue
+++ b/src/views/InclusionPolicy.vue
@@ -1,104 +1,44 @@
 <template>
-  <main id="help">
+  <main id="inclusion-policy">
     <div class="blocks">
-
       <div class="title-block">
-        <div class="title" v-translate>Help</div>
+        <div class="title" v-translate>Inclusion Policy</div>
 
-        <p v-translate>Questions on PeerTube? Need help? You've come to the right place!</p>
+        <p v-translate>All Peertube servers we link to from our server picker commit to the following:</p>
 
         <div class="separator"></div>
       </div>
 
-      <div class="block-with-image understand">
-        <div class="image-block">
-          <img width="183px" height="200px" :src="buildImgUrl('mascot/pointing.svg')" alt="">
-        </div>
-
-        <div class="text-block">
-          <div v-translate class="title">Better understand and use PeerTube</div>
-
-          <p v-translate>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 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>
-              <icon-right></icon-right>
-            </a>
-          </div>
-        </div>
+      <div class="text-block">
+        Note: These rules are preliminary, and subject to change. Listed instances do not necessarily follow them yet (in particular rules 3 and 4).
       </div>
 
-      <div class="block-with-image community">
-        <div class="text-block">
-          <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">
-              <span class="text" v-translate>Go to the forum</span>
-              <icon-right></icon-right>
-            </a>
-          </div>
-        </div>
-
-        <div class="image-block">
-          <img width="189px" height="205px" :src="buildImgUrl('help/cat.png')" alt="">
-        </div>
+      <div class="text-block">
+        <div class="title" v-translate>1. Active moderation against racism, sexism, homophobia and transphobia</div>
+        Users must have the confidence that they are joining a safe space, free from white supremacy, anti-semitism and transphobia of other platforms.
       </div>
 
-      <div class="block-with-image administrators">
-        <div class="image-block">
-          <img width="158px" height="219px" :src="buildImgUrl('help/panda.png')" alt="">
-        </div>
-
-        <div class="text-block">
-          <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">
-              <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 class="text-block">
+        <div class="title" v-translate>2. Daily backups</div>
+        It is important for users to have the confidence that a trip over the power cable or a rogue bit flip will not erase all of their data. Having a backup strategy is a basic necessity of providing a public service.
       </div>
 
-      <div class="block-with-image contribute">
-        <div class="text-block">
-          <div class="title" v-translate>Contribute to PeerTube</div>
+      <div class="text-block">
+        <div class="title" v-translate>3. At least one other person with emergency access to the server infrastructure</div>
+        Various circumstances can prevent the original owner of the Mastodon server from answering technical emergencies. For this reason, more than one person must have that capability.
+      </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="text-block">
+        <div class="title" v-translate>4. Commitment to give users at least 3 months of advance warning in case of shutting down</div>
+        Sometimes services shut down, it is the cycle of life. But users must have the confidence that their account will not disappear overnight, so that they have time to export their data and find another server.
+      </div>
 
-        <div class="image-block">
-          <img width="242px" height="221px" :src="buildImgUrl('help/dog.png')" alt="">
-        </div>
+      <div class="text-block">
+        If you are a server owner, and your server passes these requirements, you can send an e-mail to XXX with the subject "Server submission" to be listed on this website.
+      </div>
+
+      <div class="text-block">
+        This document is based on the <a href="https://joinmastodon.org/covenant">Mastodon Server Covenant</a>
       </div>
 
     </div>
@@ -106,98 +46,13 @@
 </template>
 
 <style lang="scss">
-  @import '../scss/_variables.scss';
-
-  #help {
+  #inclusion-policy {
     .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;
-        width: 100%;
-
-        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) {
-      .title-block {
-        margin-bottom: 60px;
-      }
-
-      .blocks {
-        width: auto;
-      }
-
-      .block-with-image {
-        flex-direction: column;
-
-        &.community,
-        &.contribute {
-          flex-direction: column-reverse;
-        }
-
-        .text-block {
-          margin-left: 0 !important;
-        }
-
-        .text-block {
-          text-align: left;
-        }
-
-        .image-block {
-          margin: 40px 0 !important;
-        }
-      }
+    .text-block {
+      margin-top: 30px;
+      margin-bottom: 30px;
     }
   }
 </style>
-
-<script>
-  import IconRight from '../components/icons/IconRight'
-
-  export default {
-    components: {
-      IconRight
-    },
-
-    metaInfo: function () {
-      return {
-        title: this.$gettext('Help')
-      }
-    }
-  }
-</script>