Rework the README (#2135)

Major README.md cleaning

Additions:
* Add the invidious logo
* Add Quickstart section
* Add relevant links (instance list, documentation, contribute, donate) directly in the header

Badges:
* Add badges for open issues and PRs
* Add "Awesome Humane Tech" badge, as we're listed there
* Move CI passed/translated badges to the top
* Replace the "license feature" with a proper badge

Major section changes:
* Reword titles
* Rewrite features list
* Promote the screenshots sections. People like screenshots!
* Move "donate" to the end, there is a link at the top anyway
* Move section "made with invidious" after all the other invidious related sections + rename it to "Projects using Invidious"

Other fixes:
* Remove useless HTML in the screenshots table
* Remove extra columns in H2 titles
* Remove all useless lines between sections
* Use markdown for git commands + add the staging step
* Promote invidious redirect in "Extensions"
* Update preference screenshots

README.md

@@ -1,73 +1,133 @@
-<h1 align="center">Invidious</h1>
+<div align="center">
+  <img src="assets/android-chrome-192x192.png">
+  <h1>Invidious</h1>
 
-<h2 align="center">Invidious is an alternative front-end to YouTube.</h2>
+  <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">
+    <img alt="License: AGPLv3+" src="https://shields.io/badge/License-AGPL%20v3+-blue.svg">
+  </a>
+  <a href="https://github.com/iv-org/invidious/actions">
+    <img alt="Build Status" src="https://github.com/iv-org/invidious/workflows/Invidious%20CI/badge.svg">
+  </a>
+  <a href="https://github.com/iv-org/invidious/issues">
+    <img alt="GitHub issues" src="https://img.shields.io/github/issues/iv-org/invidious?color=important">
+  </a>
+  <a href="https://github.com/iv-org/invidious/pulls">
+    <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/iv-org/invidious?color=blueviolet">
+  </a>
+  <a href="https://hosted.weblate.org/engage/invidious/">
+    <img alt="Translation Status" src="https://hosted.weblate.org/widgets/invidious/-/translations/svg-badge.svg">
+  </a>
+  <a href="https://github.com/humanetech-community/awesome-humane-tech">
+    <img alt="Awesome Humane Tech" src="https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true">
+  </a>
 
----
+  <h3>An open source alternative front-end to YouTube</h3>
 
-## Invidious instances:
+  <a href="https://instances.invidious.io/">Instances list</a>
+  &nbsp;•&nbsp; 
+  <a href="#documentation">Documentation</a>
+  &nbsp;•&nbsp;
+  <a href="#contribute">Contribute</a>
+  &nbsp;•&nbsp;
+  <a href="#donate">Donate</a>
   
-Public Invidious instances are listed on the documentation website: https://instances.invidious.io/
+  <h5>Chat with us:</h5>
+  <a href="https://matrix.to/#/#invidious:matrix.org">
+    <img alt="Matrix" src="https://img.shields.io/matrix/invidious:matrix.org?label=Matrix&color=darkgreen">
+  </a>
+  <a href="https://web.libera.chat/?channel=#invidious">
+    <img alt="Libera.chat (IRC)" src="https://img.shields.io/badge/IRC%20%28Libera.chat%29-%23invidious-darkgreen">
+  </a>
+</div>
 
----
 
-## Invidious features:
+## Screenshots
-
-- [Copylefted libre software](https://github.com/iv-org/invidious) (AGPLv3+ licensed)
-- Lightweight (the homepage is ~4 KB compressed)
-- No ads
-- No tracking
-- Javascript is 100% optional
-- Tools for managing subscriptions:
-  - Only show unseen videos
-  - Only show latest (or latest unseen) video from each channel
-  - Delivers notifications from all subscribed channels
-  - Automatically redirect homepage to feed
-  - Import subscriptions from YouTube
-- Audio-only mode (and no need to keep window open on mobile)
-- Dark mode
-- Embed support
-- Set default player options (speed, quality, autoplay, loop)
-- Support for Reddit comments in place of YouTube comments
-- Import/Export subscriptions, watch history, preferences
-- [Developer API](https://docs.invidious.io/API.md)
-- Does not use any of the official YouTube APIs
-- No need to create a Google account to save subscriptions
-- No Code of Conduct
-- No Contributor license Agreement
-- Available in many languages, thanks to [Weblate](https://hosted.weblate.org/projects/invidious/)
-
----
-
-## Screenshots:
 
 | Player                              | Preferences                         | Subscriptions                         |
-| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+|-------------------------------------|-------------------------------------|---------------------------------------|
-| [<img src="screenshots/01_player.png?raw=true" height="140" width="280">](screenshots/01_player.png?raw=true)           | [<img src="screenshots/02_preferences.png?raw=true" height="140" width="280">](screenshots/02_preferences.png?raw=true) | [<img src="screenshots/03_subscriptions.png?raw=true" height="140" width="280">](screenshots/03_subscriptions.png?raw=true) |
+| ![](screenshots/01_player.png)      | ![](screenshots/02_preferences.png) | ![](screenshots/03_subscriptions.png) |
-| [<img src="screenshots/04_description.png?raw=true" height="140" width="280">](screenshots/04_description.png?raw=true) | [<img src="screenshots/05_preferences.png?raw=true" height="140" width="280">](screenshots/05_preferences.png?raw=true) | [<img src="screenshots/06_subscriptions.png?raw=true" height="140" width="280">](screenshots/06_subscriptions.png?raw=true) |
+| ![](screenshots/04_description.png) | ![](screenshots/05_preferences.png) | ![](screenshots/06_subscriptions.png) |
 
----
 
-## Donate:
+## Features
 
-Bitcoin (BTC): [bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr](bitcoin:bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr)
+**User features**
+- Lightweight
+- No ads
+- No tracking
+- No JavaScript required
+- Light/Dark themes
+- Customizable homepage
+- Subscriptions independant from Google
+- Notifications for all subscribed channels
+- Audio-only mode (with background play on mobile)
+- Support for Reddit comments
+- [Available in many languages](locales/), thanks to [our translators](#contribute)
 
-Monero (XMR): [41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR](monero:41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR)
+**Data import/export**
+- Import subscriptions from YouTube, NewPipe and Freetube
+- Import watch history from NewPipe
+- Export subscriptions to NewPipe and Freetube
+- Import/Export Invidious user data
 
----
+**Technical features**
+- Embedded video support
+- [Developer API](https://docs.invidious.io/API.md)
+- Does not use official YouTube APIs
+- No Contributor License Agreement (CLA)
 
-## Documentation:
 
-The complete documentation is available on https://docs.invidious.io/ (or alternatively on its own [Github repository](https://github.com/iv-org/documentation)).
+## Quick start
 
----
+**Using invidious:**
 
-## Extensions:
+- [Select a public instance from the list](https://instances.invidious.io) and start watching videos right now!
 
-[Extensions](https://docs.invidious.io/Extensions.md) can be found in the wiki, as well as documentation for integrating it into other projects.
+**Hosting invidious:**
 
----
+- [Follow the installation instructions](https://docs.invidious.io/Installation.md)
 
-## Made with Invidious:
+
+## Documentation
+
+The full documentation can be accessed online at https://docs.invidious.io/
+
+The documentation's source code is available in this repository:
+https://github.com/iv-org/documentation
+
+### Extensions
+
+We highly recommend the use of [Privacy Redirect](https://github.com/SimonBrazell/privacy-redirect#get),
+a browser extension that automatically redirects Youtube URLs to any Invidious instance and replaces
+embedded youtube videos on other websites with invidious.
+
+The documentation contains a list of browser extensions that we recommended to use along with Invidious.
+
+You can read more here: https://docs.invidious.io/Extensions.md
+
+
+## Contribute
+
+### Code
+
+1.  Fork it ( https://github.com/iv-org/invidious/fork ).
+1.  Create your feature branch (`git checkout -b my-new-feature`).
+1.  Stage your files (`git add .`).
+1.  Commit your changes (`git commit -am 'Add some feature'`).
+1.  Push to the branch (`git push origin my-new-feature`).
+1.  Create a new pull request ( https://github.com/iv-org/invidious/compare ).
+
+### Translations
+
+We use [Weblate](https://weblate.org) to manage Invidious translations.
+
+You can suggest new translations and/or correction here: https://hosted.weblate.org/engage/invidious/.
+
+Creating an account is not required, but recommended, especially if you want to contribute regularly.
+Weblate also allows you to log-in with major SSO providers like Github, Gitlab, BitBucket, Google, ...
+
+
+## Projects using Invidious
 
 - [FreeTube](https://github.com/FreeTubeApp/FreeTube): A libre software YouTube app for privacy.
 - [CloudTube](https://sr.ht/~cadence/tube/): A JavaScript-rich alternate YouTube player.
@@ -75,33 +135,21 @@ The complete documentation is available on https://docs.invidious.io/ (or altern
 - [MusicPiped](https://github.com/deep-gaurav/MusicPiped): A material design music player that streams music from YouTube.
 - [HoloPlay](https://github.com/stephane-r/HoloPlay): Funny Android application connecting on Invidious API's with search, playlists and favoris.
 
----
 
-## Contributing:
+## Donate
 
-[![Build Status](https://github.com/iv-org/invidious/workflows/Invidious%20CI/badge.svg)](https://github.com/iv-org/invidious/actions) [![Translation Status](https://hosted.weblate.org/widgets/invidious/-/translations/svg-badge.svg)](https://hosted.weblate.org/engage/invidious/)
+Bitcoin (BTC): [bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr](bitcoin:bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr)
 
-1.  Fork it ( https://github.com/iv-org/invidious/fork ).
+Monero (XMR): [41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR](monero:41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR)
-2.  Create your feature branch (git checkout -b my-new-feature).
-3.  Commit your changes (git commit -am 'Add some feature').
-4.  Push to the branch (git push origin my-new-feature).
-5.  Create a new pull request.
 
-### Translation:
 
-- Log in with an account you have elsewhere, or register an account and start translating at [Hosted Weblate](https://hosted.weblate.org/engage/invidious/).
+## Liability
 
----
+We take no responsibility for the use of our tool, or external instances
-
+provided by third parties. We strongly recommend you abide by the valid
-## Contact:
+official regulations in your country. Furthermore, we refuse liability
-
+for any inappropriate use of Invidious, such as illegal downloading.
-Feel free to join our [Matrix room](https://matrix.to/#/#invidious:matrix.org).
+This tool is provided to you in the spirit of free, open software.
-
----
-
-## Liability:
-
-We take no responsibility for the use of our tool, or external instances provided by third parties. We strongly recommend you abide by the valid official regulations in your country. Furthermore, we refuse liability for any inappropriate use of Invidious, such as illegal downloading. This tool is provided to you in the spirit of free, open software.
 
 You may view the LICENSE in which this software is provided to you [here](./LICENSE).