Redesign public hashtag pages (#5237)

3 files changed, 40 insertions, 15 deletions

diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index 0d311b895..ef27d07a1 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -62,7 +62,7 @@
       .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'
+        = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-secondary'
         = render 'features'
   .footer-links
     .container
diff --git a/app/views/tags/_og.html.haml b/app/views/tags/_og.html.haml
new file mode 100644
index 000000000..853a499ae
--- /dev/null
+++ b/app/views/tags/_og.html.haml
@@ -0,0 +1,6 @@
+= opengraph 'og:site_name', t('about.hosted_on', domain: site_hostname)
+= opengraph 'og:url', tag_url(@tag)
+= opengraph 'og:type', 'website'
+= opengraph 'og:title', "##{@tag.name}"
+= opengraph 'og:description', t('about.about_hashtag_html', hashtag: @tag.name)
+= opengraph 'twitter:card', 'summary'
diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml
index 8cd2f1825..6266d3c0c 100644
--- a/app/views/tags/show.html.haml
+++ b/app/views/tags/show.html.haml
@@ -1,19 +1,38 @@
 - content_for :page_title do
   = "##{@tag.name}"
 
-.compact-header
-  %h1<
-    = link_to site_title, root_path
-    %br
-    %small ##{@tag.name}
+- content_for :header_tags do
+  %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
+  = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
+  = render 'og'
 
-- if @statuses.empty?
-  .accounts-grid
-    = render partial: 'accounts/nothing_here'
-- else
-  .activity-stream.h-feed
-    = render partial: 'stream_entries/status', collection: @statuses, as: :status
+.landing-page.tag-page
+  .stripe
+  .features
+    .container
+      #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 
-- if @statuses.size == 20
-  .pagination
-    = link_to safe_join([t('pagination.next'), fa_icon('chevron-right')], ' '), tag_url(@tag, max_id: @statuses.last.id), class: 'next', rel: 'next'
+      .about-mastodon
+        .brand
+          = link_to root_url do
+            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+        %p= t 'about.about_hashtag_html', hashtag: @tag.name
+
+        .cta
+          = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
+          = link_to t('about.learn_more'), root_url, class: 'button button-alternative'
+
+        .features-list
+          .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.humane_approach_title'
+              = t 'about.features.humane_approach_body'
+            .visual
+              = fa_icon 'fw leaf'