YuruToot/app/views/about/show.html.haml

- content_for :page_title do
  = site_hostname

- content_for :header_tags do
  %link{ rel: 'canonical', href: about_url }/
  %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
  = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
  = render partial: 'shared/og'

.landing-page.alternative
  .container
    .grid
      .column-0
        .brand
          = link_to root_url do
            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'

      - if Setting.timeline_preview
        .column-1
          .landing-page__forms
            .brand
              = link_to root_url do
                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'

            = render 'forms'

      - else
        .column-1.non-preview
          .landing-page__forms
            .brand
              = link_to root_url do
                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'

            = render 'forms'

      - if Setting.timeline_preview
        .column-2
          .landing-page__hero
            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title

          .landing-page__information
            .landing-page__short-description
              .row
                .landing-page__logo
                  = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'

                %h1
                  = @instance_presenter.site_title
                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)

              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)

          .landing-page__call-to-action{ dir: 'ltr' }
            .row
              .row__information-board
                .information-board__section
                  %span= t 'about.user_count_before'
                  %strong= number_with_delimiter @instance_presenter.user_count
                  %span= t 'about.user_count_after'
                .information-board__section
                  %span= t 'about.status_count_before'
                  %strong= number_with_delimiter @instance_presenter.status_count
                  %span= t 'about.status_count_after'
              .row__mascot
                .landing-page__mascot
                  = image_tag asset_pack_path('elephant_ui_plane.svg')

      - else
        .column-2.non-preview
          .landing-page__hero
            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title

          .landing-page__information
            .landing-page__short-description
              .row
                .landing-page__logo
                  = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'

                %h1
                  = @instance_presenter.site_title
                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)

              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)

          .landing-page__call-to-action
            .row
              .row__information-board
                .information-board__section
                  %span= t 'about.user_count_before'
                  %strong= number_with_delimiter @instance_presenter.user_count
                  %span= t 'about.user_count_after'
                .information-board__section
                  %span= t 'about.status_count_before'
                  %strong= number_with_delimiter @instance_presenter.status_count
                  %span= t 'about.status_count_after'
              .row__mascot
                .landing-page__mascot
                  = image_tag asset_pack_path('elephant_ui_plane.svg')

      - if Setting.timeline_preview
        .column-3
          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }

      - if Setting.timeline_preview
        .column-4.landing-page__information
          .landing-page__features
            .features-list
              %div
                %h3= t 'about.what_is_mastodon'
                %p= t 'about.about_mastodon_html'
              %div.contact
                %h3= t 'about.administered_by'
                = render 'administration'

            = render 'features'

            .landing-page__features__action
              = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'

          .landing-page__footer
            %p
              = link_to t('about.source_code'), @instance_presenter.source_url
              = " (#{@instance_presenter.version_number})"

      - else
        .column-4.non-preview.landing-page__information
          .landing-page__features
            .features-list
              %div
                %h3= t 'about.what_is_mastodon'
                %p= t 'about.about_mastodon_html'
              %div.contact
                %h3= t 'about.administered_by'
                = render 'administration'

            = render 'features'

            .landing-page__features__action
              = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'

          .landing-page__footer
            %p
              = link_to t('about.source_code'), @instance_presenter.source_url
              = " (#{@instance_presenter.version_number})"