Add more explicit explanations about author attribution and `fediverse:creator` (#32383)

app/javascript/styles/mastodon/forms.scss

@@ -23,6 +23,8 @@ code {
   position: relative;
   overflow: hidden;
   height: 160px;
+  max-width: 566px;
+  margin-inline: auto;
 
   &::after {
     content: '';

app/views/settings/verifications/show.html.haml

@@ -38,25 +38,34 @@
 
   %p.lead= t('author_attribution.hint_html')
 
-  .fields-row
-    .fields-row__column.fields-row__column-6
-      .fields-group
-        = f.input :attribution_domains_as_text, as: :text, wrapper: :with_block_label, input_html: { placeholder: "example1.com\nexample2.com\nexample3.com", rows: 4 }
-    .fields-row__column.fields-row__column-6
-      .fields-group.fade-out-top
-        %div
-          .status-card.expanded.bottomless
-            .status-card__image
-              = image_tag frontend_asset_url('images/preview.png'), alt: '', class: 'status-card__image-image'
-            .status-card__content
-              %span.status-card__host
-                %span= t('author_attribution.s_blog', name: display_name(@account))
-                ·
-                %time.time-ago{ datetime: 1.year.ago.to_date.iso8601 }
-              %strong.status-card__title= t('author_attribution.example_title')
-          .more-from-author
-            = logo_as_symbol(:icon)
-            = t('author_attribution.more_from_html', name: link_to(root_url, class: 'story__details__shared__author-link') { image_tag(@account.avatar.url, class: 'account__avatar', width: 16, height: 16, alt: '') + tag.bdi(display_name(@account)) })
+  .fields-group.fade-out-top
+    %div
+      .status-card.expanded.bottomless
+        .status-card__image
+          = image_tag frontend_asset_url('images/preview.png'), alt: '', class: 'status-card__image-image'
+        .status-card__content
+          %span.status-card__host
+            %span= t('author_attribution.s_blog', name: display_name(@account))
+            ·
+            %time.time-ago{ datetime: 1.year.ago.to_date.iso8601 }
+          %strong.status-card__title= t('author_attribution.example_title')
+      .more-from-author
+        = logo_as_symbol(:icon)
+        = t('author_attribution.more_from_html', name: link_to(root_url, class: 'story__details__shared__author-link') { image_tag(@account.avatar.url, class: 'account__avatar', width: 16, height: 16, alt: '') + tag.bdi(display_name(@account)) })
+
+  %h4= t('verification.here_is_how')
+
+  %p.lead= t('author_attribution.instructions')
+
+  .input-copy.lead
+    .input-copy__wrapper
+      = copyable_input value: tag.meta(name: 'fediverse:creator', content: "@#{@account.local_username_and_domain}")
+    %button{ type: :button }= t('generic.copy')
+
+  %p.lead= t('author_attribution.then_instructions')
+
+  .fields-group
+    = f.input :attribution_domains_as_text, as: :text, wrapper: :with_block_label, input_html: { placeholder: "example1.com\nexample2.com\nexample3.com", rows: 4 }
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit

config/locales/en.yml

@@ -1165,9 +1165,11 @@ en:
     use_security_key: Use security key
   author_attribution:
     example_title: Sample text
-    hint_html: Control how you're credited when links are shared on Mastodon.
+    hint_html: Are you writing news or blog articles outside of Mastodon? Control how you get credited when they are shared on Mastodon.
+    instructions: 'Make sure this code is in your article''s HTML:'
     more_from_html: More from %{name}
     s_blog: "%{name}'s Blog"
+    then_instructions: Then, add the domain name of the publication in the field below.
     title: Author attribution
   challenge:
     confirm: Continue

config/locales/simple_form.en.yml

@@ -3,7 +3,7 @@ en:
   simple_form:
     hints:
       account:
-        attribution_domains_as_text: Protects from false attributions.
+        attribution_domains_as_text: One per line. Protects from false attributions.
         discoverable: Your public posts and profile may be featured or recommended in various areas of Mastodon and your profile may be suggested to other users.
         display_name: Your full name or your fun name.
         fields: Your homepage, pronouns, age, anything you want.
@@ -144,7 +144,7 @@ en:
         url: Where events will be sent to
     labels:
       account:
-        attribution_domains_as_text: Only allow specific websites
+        attribution_domains_as_text: Websites allowed to credit you
         discoverable: Feature profile and posts in discovery algorithms
         fields:
           name: Label