From 93c597ac49a70f3b50d5aad4ad8ef0b7ffe96a95 Mon Sep 17 00:00:00 2001 From: Felix Date: Fri, 14 Feb 2020 03:00:52 +0100 Subject: [PATCH] rewrite main page, move instance picker (fixes #9) --- src/components/Footer.vue | 6 +- src/scss/main.scss | 10 +- src/views/Home.vue | 393 ++++++++------------------------------ src/views/Instances.vue | 83 -------- 4 files changed, 93 insertions(+), 399 deletions(-) diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 5886dbc..bb8d951 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -13,7 +13,11 @@
- Website hosted and maintained by @felix@radical.town, originally developed by Framasoft and designed by Maiwann + Website hosted and maintained by @felix@radical.town. +
+ +
+ Originally developed by Framasoft and designed by Maiwann.
diff --git a/src/scss/main.scss b/src/scss/main.scss index b6d49e3..b673ea9 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -70,7 +70,7 @@ body { } main { - padding: 0 70px; + padding: 0 70px 70px 70px; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35); border: solid 1px #d9d9d9; @@ -220,7 +220,13 @@ article li > a { } .one-column { - @include one-column; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .two-columns { diff --git a/src/views/Home.vue b/src/views/Home.vue index 855b008..2139176 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -15,48 +15,11 @@ PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft
-
- - - - What is PeerTube? - - - - - - See the instances list - -
- - -
-
-
Discover our content selection
-
-
- - - -
- - Discover PeerTube instances - - -
-
-
- - What is - PeerTube - ? -
-
-
+
@@ -67,284 +30,25 @@
- PeerTube aspires to be a decentralized and free/libre alternative to video broadcasting services. + TODO: write something about our inclusion rules etc here

- Our aim is not to replace them, but rather to simultaneously offer something else, with different values. -

-
- - -
- -
-
- A federation of interconnected hosting services -
-
- -
- - -
-
PeerTube is not meant to become a huge platform that would centralize videos from all around the world.
- -
-
- -
- Rather, it is a network of inter-connected small videos hosters. -
-
-
- -

- Anyone with a modicum of technical skills can host a PeerTube server, aka an instance. - Each instance hosts its users and their videos. - In this way, every instance is created, moderated and maintained independently by various administrators. -

- -
- - Discover PeerTube instances - - -
-
- -
-

- You can still watch from your account videos hosted by other instances though - if the administrator of your instance had previously connected it with other instances. -

- -
-
- -
This is just how a federation works!
-
-
- -
- - -

- And there's more! PeerTube uses Activity Pub, a federating protocol that allows you to interact with other - software, provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected: - you can follow a PeerTube user from Mastodon (the latest videos from the PeerTube account you follow will appear - in your feed), and even comment on a PeerTube-hosted video directly from your Mastodon's account. -

-
- - - - - - - - -
- -
-
- An open-source, free/libre licence code -
-
- -
- - -

- Mainstream online video broadcasting services make money off of your data by analyzing your interactions - so that they can then bombard your with targeted advertising. -

- -
-
- -
- Peertube is not subject to any corporate monopoly, does not rely on ads and does not track you. -
-
- -

- Most importantly, you are a person to PeerTube, not a product in need of profiling so as to be stuck in video - loops. - For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end. -

- -

- All of this is made possible by Peertube's free/libre license (GNU-AGPL). - Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google - (in the case of Youtube) or to Vivendi/Bolloré (Dailymotion). - This free/libre license guarantees our fundamental freedoms as users and allows many contributors to offer evolutions - and new features. -

-
- - - - - - - - -
- -
-
- Are you a video maker? -
-
- -
- - -
-
- -
- With PeerTube, chose your hosting company and the rules you believe in. -
-
- -
- YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright") - or its videos recommendation system, all of which appear to be as obscure as unfair. -
- -
-
- -
- Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company, - and you can nurture a special relationship with your hoster, who distributes your data. -
-
- -
- With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user, - their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can - talk it out in case of any issue, need, desire... -
-
- - - Browse/discover PeerTube instances - -
- -
-
- About peer-to-peer broadcasting and watching -
-
- -
- - -
-
- -
- The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos, - lowering the load of their hosts. -
-
- -

- In this way, when you watch a video, your computer contributes to its broadcast. - If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the - video to the other viewers. - The server resources are not over-exploited: the stream is split, the network optimized. -

- -

- It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer - forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a - robust but extremely expensive independent video host. + TODO: write something about our inclusion rules etc here

-
-
- Your move! -
-
+ -
- -
+
- +
+
-
-
-
- - Who is behind - PeerTube - ? -
- -
-
- -
- - -
-

- Peertube is a free/libre software funded by a French non-profit organization: Framasoft -

- -

- Our organization started in 2004, and now devotes itself to popular education about digital technology issues. - We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project, - when we offered 34 ethical and alternative online tools. As a public interest organization, over 90% of our funding - comes from donations (tax deductible for French taxpayers). -

- -

- Thanks to our crowdfunding (from March to July 2018), - Framasoft were able to employ PeerTube's main developer. - After a beta release in March 2018, release 1 came out in November 2018. - Since then, several intermediary releases have brought many features along. - Several collectives have already created PeerTube hosts, laying the foundation for the federation. -

- -

- - The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like - YouTube. - -

-
-
- - - Donate to Framasoft - -
@@ -488,21 +192,81 @@ } } } + @import '../scss/_variables.scss'; + + #instances { + .blocks { + margin: 60px auto; + width: 770px; + } + + .title-block { + .jpt-button { + margin-top: 25px; + border: 2px solid $orange; + min-width: 225px; + height: 35px; + } + } + + .block-with-image { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 100px; + + & > 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; + + & > * { + margin-right: 0; + } + + &.step-2 { + flex-direction: column-reverse; + } + + & > div { + img { + margin-bottom: 20px; + width: 100%; + height: auto; + } + } + } + } + } diff --git a/src/views/Instances.vue b/src/views/Instances.vue index 0dab37d..a3d6d92 100644 --- a/src/views/Instances.vue +++ b/src/views/Instances.vue @@ -43,95 +43,12 @@ PeerTube upload illustration
- -