Add contact account to landing page ("Administered by") (#6984)

app/javascript/styles/mastodon/about.scss

@@ -681,6 +681,54 @@ $small-breakpoint: 960px;
       margin-bottom: 0;
     }
 
+    .account {
+      border-bottom: 0;
+      padding: 0;
+
+      &__display-name {
+        align-items: center;
+        display: flex;
+        margin-right: 5px;
+      }
+
+      div.account__display-name {
+        &:hover {
+          .display-name strong {
+            text-decoration: none;
+          }
+        }
+
+        .account__avatar {
+          cursor: default;
+        }
+      }
+
+      &__avatar-wrapper {
+        margin-left: 0;
+        flex: 0 0 auto;
+      }
+
+      &__avatar {
+        width: 44px;
+        height: 44px;
+        background-size: 44px 44px;
+      }
+
+      .display-name {
+        font-size: 15px;
+
+        &__account {
+          font-size: 14px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-breakpoint) {
+      .contact {
+        margin-top: 30px;
+      }
+    }
+
     @media screen and (max-width: $column-breakpoint) {
       padding: 25px 20px;
     }

app/views/about/show.html.haml

@@ -108,6 +108,28 @@
               %div
                 %h3= t 'about.what_is_mastodon'
                 %p= t 'about.about_mastodon_html'
+              %div.contact
+                %h3= t 'about.administered_by'
+
+                .account
+                  .account__wrapper
+                    - if @instance_presenter.contact_account
+                      = link_to TagManager.instance.url_for(@instance_presenter.contact_account), class: 'account__display-name' do
+                        .account__avatar-wrapper
+                          .account__avatar{ style: "background-image: url(#{@instance_presenter.contact_account.avatar.url})" }
+                        %span.display-name
+                          %bdi
+                            %strong.display-name__html.emojify= display_name(@instance_presenter.contact_account)
+                          %span.display-name__account @#{@instance_presenter.contact_account.acct}
+                    - else
+                      .account__display-name
+                        .account__avatar-wrapper
+                          .account__avatar{ style: "background-image: url(#{full_asset_url('avatars/original/missing.png', skip_pipeline: true)})" }
+                        %span.display-name
+                          %strong= t 'about.contact_missing'
+                          %span.display-name__account= t 'about.contact_unavailable'
+
+                    = link_to t('about.learn_more'), about_more_path, class: 'button button-alternative'
 
             = render 'features'
 

config/locales/en.yml

@@ -4,6 +4,7 @@ en:
     about_hashtag_html: These are public toots tagged with <strong>#%{hashtag}</strong>. You can interact with them if you have an account anywhere in the fediverse.
     about_mastodon_html: Mastodon is a social network based on open web protocols and free, open-source software. It is decentralized like e-mail.
     about_this: About
+    administered_by: 'Administered by:'
     closed_registrations: Registrations are currently closed on this instance. However! You can find a different instance to make an account on and get access to the very same network from there.
     contact: Contact
     contact_missing: Not set

spec/views/about/show.html.haml_spec.rb

@@ -19,6 +19,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do
                                 hero: nil,
                                 user_count: 0,
                                 status_count: 0,
+                                contact_account: nil,
                                 closed_registrations_message: 'yes')
     assign(:instance_presenter, instance_presenter)
     render