Redesign the landing page, mount public timeline on it (#4122)

* Redesign the landing page, mount public timeline on it

* Adjust the standalone mounted component to the lacking of router

* Adjust auth layout pages to new design

* Fix tests

* Standalone public timeline polling every 5 seconds

* Remove now obsolete translations

* Add responsive design for new landing page

* Address reviews

* Add floating clouds behind frontpage form

* Use access token from public page when available

* Fix mentions and hashtags links, cursor on status content in standalone mode

* Add footer link to source code

* Fix errors on pages that don't embed the component, use classnames

* Fix tests

* Change anonymous autoPlayGif default to false

* When gif autoplay is disabled, hover to play

* Add option to hide the timeline preview

* Slightly improve alt layout

* Add elephant friend to new frontpage

* Display "back to mastodon" in place of "login" when logged in on frontpage

* Change polling time to 3s

6 files changed, 119 insertions, 98 deletions

diff --git a/app/views/about/_features.html.haml b/app/views/about/_features.html.haml
new file mode 100644
index 00000000000..8fbc6b76073
--- /dev/null
+++ b/app/views/about/_features.html.haml
@@ -0,0 +1,25 @@
+.features-list
+  .features-list__row
+    .text
+      %h6= t 'about.features.real_conversation_title'
+      = t 'about.features.real_conversation_body'
+    .visual
+      = fa_icon 'fw comments'
+  .features-list__row
+    .text
+      %h6= t 'about.features.not_a_product_title'
+      = t 'about.features.not_a_product_body'
+    .visual
+      = fa_icon 'fw users'
+  .features-list__row
+    .text
+      %h6= t 'about.features.within_reach_title'
+      = t 'about.features.within_reach_body'
+    .visual
+      = fa_icon 'fw mobile'
+  .features-list__row
+    .text
+      %h6= t 'about.features.humane_approach_title'
+      = t 'about.features.humane_approach_body'
+    .visual
+      = fa_icon 'fw leaf'
diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml
index 4f38c1eccfe..eeeb0088fa7 100644
--- a/app/views/about/_registration.html.haml
+++ b/app/views/about/_registration.html.haml
@@ -1,10 +1,13 @@
 = simple_form_for(new_user, url: user_registration_path) do |f|
   = f.simple_fields_for :account do |account_fields|
-    = account_fields.input :username,
-      autofocus: true,
-      placeholder: t('simple_form.labels.defaults.username'),
-      required: true,
-      input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
+    .input-with-append
+      = account_fields.input :username,
+        autofocus: true,
+        placeholder: t('simple_form.labels.defaults.username'),
+        required: true,
+        input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
+      .append
+        = "@#{site_hostname}"
 
   = f.input :email,
     placeholder: t('simple_form.labels.defaults.email'),
@@ -22,9 +25,6 @@
     input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password') }
 
   .actions
-    = f.button :button, t('about.get_started'), type: :submit
+    = f.button :button, t('auth.register'), type: :submit, class: 'button button-alternative'
 
-  .info
-    = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
-    ·
-    = link_to t('about.about_this'), about_more_path
+  %p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path)
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index d15b04163f1..f75f87c99bc 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -1,4 +1,5 @@
 - content_for :header_tags do
+  %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
   = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
 
 - content_for :page_title do
@@ -9,79 +10,70 @@
   %meta{ property: 'og:url', content: about_url }/
   %meta{ property: 'og:type', content: 'website' }/
   %meta{ property: 'og:title', content: site_hostname }/
-  %meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon')) }/
+  %meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon_html')) }/
   %meta{ property: 'og:image', content: asset_pack_path('mastodon_small.jpg', protocol: :request) }/
   %meta{ property: 'og:image:width', content: '400' }/
   %meta{ property: 'og:image:height', content: '400' }/
   %meta{ property: 'twitter:card', content: 'summary' }/
 
-.wrapper
-  %h1
-    = image_tag asset_pack_path('logo.png')
-    = Setting.site_title
+.landing-page
+  .header-wrapper
+    .mascot-container
+      = image_tag asset_pack_path('elephant-fren.png'), class: 'mascot'
 
-  %p!= t('about.about_mastodon')
+    .header
+      .container.links
+        .brand
+          = link_to root_url do
+            = image_tag asset_pack_path('logo.svg')
+            Mastodon
 
-  .screenshot-with-signup
-    .mascot= image_tag asset_pack_path('fluffy-elephant-friend.png')
+        %ul.nav
+          %li
+            - if user_signed_in?
+              = link_to t('settings.back'), root_url, class: 'webapp-btn'
+            - else
+              = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
+          %li= link_to t('about.about_this'), about_more_path
+          %li= link_to t('about.other_instances'), 'https://joinmastodon.org/'
 
-    - if @instance_presenter.open_registrations
-      = render 'registration'
-    - else
-      .closed-registrations-message
-        - if @instance_presenter.closed_registrations_message.blank?
-          %p= t('about.closed_registrations')
+      .container.hero
+        .floats
+          = image_tag asset_pack_path('cloud2.png'), class: 'float-1'
+          = image_tag asset_pack_path('cloud3.png'), class: 'float-2'
+          = image_tag asset_pack_path('cloud4.png'), class: 'float-3'
+        .heading
+          %h1
+            = @instance_presenter.site_title
+            %small= t 'about.hosted_on', domain: site_hostname
+        - if @instance_presenter.open_registrations
+          = render 'registration'
         - else
-          != @instance_presenter.closed_registrations_message
-        .info
-          = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
-          ·
-          = link_to t('about.other_instances'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md'
-          ·
-          = link_to t('about.about_this'), about_more_path
+          .closed-registrations-message
+            %div
+              - if @instance_presenter.closed_registrations_message.blank?
+                %p= t('about.closed_registrations')
+              - else
+                = @instance_presenter.closed_registrations_message.html_safe
+            = link_to t('about.find_another_instance'), 'https://joinmastodon.org', class: 'button button-alternative button--block'
 
-  %h3= t('about.features_headline')
+  .learn-more-cta
+    .container
+      %h3= t('about.description_headline', domain: site_hostname)
+      %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
 
-  .features-list
-    .features-list__column
-      %ul.fa-ul
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.chronology'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.public'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.characters'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.gifv'
-    .features-list__column
-      %ul.fa-ul
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.privacy'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.blocks'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.ethics'
-        %li
-          = fa_icon('li check-square')
-          = t 'about.features.api'
+  .features
+    .container
+      - if Setting.timeline_preview
+        #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
 
-  - unless @instance_presenter.site_description.blank?
-    %h3= t('about.description_headline', domain: site_hostname)
-    %p!= @instance_presenter.site_description
-
-  .actions
-    .info
-      = link_to t('about.terms'), terms_path
-      ·
-      = link_to t('about.apps'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md'
-      ·
-      = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
-      ·
-      = link_to t('about.other_instances'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md'
+      .about-mastodon
+        %h3= t 'about.what_is_mastodon'
+        %p= t 'about.about_mastodon_html'
+        %a.button.button-secondary{ href: 'https://joinmastodon.org' }= t 'about.learn_more'
+        = render 'features'
+  .footer-links
+    .container
+      %p
+        = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
+        = " (#{@instance_presenter.version_number})"
diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml
index 3096a958da6..59192530b7e 100644
--- a/app/views/admin/settings/edit.html.haml
+++ b/app/views/admin/settings/edit.html.haml
@@ -12,54 +12,53 @@
       %tr
         %td
           %strong= t('admin.settings.contact_information.label')
-        %td= text_field_tag :site_contact_username,
-          @settings['site_contact_username'].value,
-          place_holder: t('admin.settings.contact_information.username')
+        %td= text_field_tag :site_contact_username, @settings['site_contact_username'].value, place_holder: t('admin.settings.contact_information.username')
       %tr
         %td
           %strong= t('admin.accounts.email')
-        %td= text_field_tag :site_contact_email,
-          @settings['site_contact_email'].value,
-          place_holder: t('admin.settings.contact_information.email')
+        %td= text_field_tag :site_contact_email, @settings['site_contact_email'].value, place_holder: t('admin.settings.contact_information.email')
       %tr
         %td
           %strong= t('admin.settings.site_title')
-        %td= text_field_tag :site_title,
-          @settings['site_title'].value
+        %td= text_field_tag :site_title, @settings['site_title'].value
       %tr
         %td
           %strong= t('admin.settings.site_description.title')
           %p= t('admin.settings.site_description.desc_html')
-        %td= text_area_tag :site_description,
-          @settings['site_description'].value,
-          rows: 8
+        %td= text_area_tag :site_description, @settings['site_description'].value, rows: 8
       %tr
         %td
           %strong= t('admin.settings.site_description_extended.title')
           %p= t('admin.settings.site_description_extended.desc_html')
-        %td= text_area_tag :site_extended_description,
-          @settings['site_extended_description'].value,
-          rows: 8
+        %td= text_area_tag :site_extended_description, @settings['site_extended_description'].value, rows: 8
       %tr
         %td
           %strong= t('admin.settings.site_terms.title')
           %p= t('admin.settings.site_terms.desc_html')
-        %td= text_area_tag :site_terms,
-          @settings['site_terms'].value,
-          rows: 8
+        %td= text_area_tag :site_terms, @settings['site_terms'].value, rows: 8
       %tr
         %td
           %strong= t('admin.settings.registrations.open.title')
+          %p= t('admin.settings.registrations.open.desc_html')
         %td
-          = select_tag :open_registrations,
-          options_for_select({ t('admin.settings.registrations.open.disabled') => false, t('admin.settings.registrations.open.enabled') => true }, @settings['open_registrations'].value)
+          = select_tag :open_registrations, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_registrations'].value)
       %tr
         %td
           %strong= t('admin.settings.registrations.closed_message.title')
           %p= t('admin.settings.registrations.closed_message.desc_html')
-        %td= text_area_tag :closed_registrations_message,
-          @settings['closed_registrations_message'].value,
-          rows: 8
+        %td= text_area_tag :closed_registrations_message, @settings['closed_registrations_message'].value, rows: 8
+      %tr
+        %td
+          %strong= t('admin.settings.registrations.deletion.title')
+          %p= t('admin.settings.registrations.deletion.desc_html')
+        %td
+          = select_tag :open_deletion, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_deletion'].value)
+      %tr
+        %td
+          %strong= t('admin.settings.timeline_preview.title')
+          %p= t('admin.settings.timeline_preview.desc_html')
+        %td
+          = select_tag :timeline_preview, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['timeline_preview'].value)
 
   .simple_form.actions
     = button_tag t('generic.save_changes'), type: :submit, class: :btn
diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml
index 82d5483dd57..af7ee2b286c 100644
--- a/app/views/auth/registrations/new.html.haml
+++ b/app/views/auth/registrations/new.html.haml
@@ -5,7 +5,10 @@
   = render 'shared/error_messages', object: resource
 
   = f.simple_fields_for :account do |ff|
-    = ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
+    .input-with-append
+      = ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
+      .append
+        = "@#{site_hostname}"
 
   = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }
   = f.input :password, autocomplete: 'off', placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password') }
@@ -14,4 +17,5 @@
   .actions
     = f.button :button, t('auth.register'), type: :submit
 
+  %p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path)
 .form-footer= render 'auth/shared/links'
diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml
index e5429a8ed0e..b4f1bd0f35a 100644
--- a/app/views/layouts/auth.html.haml
+++ b/app/views/layouts/auth.html.haml
@@ -6,7 +6,8 @@
     .logo-container
       %h1
         = link_to root_path do
-          = image_tag asset_pack_path('logo.png')
+          = image_tag asset_pack_path('logo.svg')
+          Mastodon
 
     .form-container
       = render 'flashes'