Merge 3483a847c2 into 1959365c2f

app/javascript/mastodon/features/about/index.jsx

@@ -19,15 +19,17 @@ import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { Skeleton } from 'mastodon/components/skeleton';
 import Account from 'mastodon/containers/account_container';
 import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { domain, source_url } from 'mastodon/initial_state';
 
 const messages = defineMessages({
-  title: { id: 'column.about', defaultMessage: 'About' },
+  title: { id: 'column.about', defaultMessage: 'About {domain}' },
   rules: { id: 'about.rules', defaultMessage: 'Server rules' },
   blocks: { id: 'about.blocks', defaultMessage: 'Moderated servers' },
   silenced: { id: 'about.domain_blocks.silenced.title', defaultMessage: 'Limited' },
   silencedExplanation: { id: 'about.domain_blocks.silenced.explanation', defaultMessage: 'You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.' },
   suspended: { id: 'about.domain_blocks.suspended.title', defaultMessage: 'Suspended' },
   suspendedExplanation: { id: 'about.domain_blocks.suspended.explanation', defaultMessage: 'No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.' },
+  aboutMastodon: { id: 'about.mastodon.title', defaultMessage: 'About Mastodon' },
 });
 
 const severityMessages = {
@@ -118,11 +120,11 @@ class About extends PureComponent {
     const isLoading = server.get('isLoading');
 
     return (
-      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
+      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title, { domain })}>
         <div className='scrollable about'>
           <div className='about__header'>
             <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
-            <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
+            <h1>{isLoading ? <Skeleton width='10ch' /> : domain}</h1>
             <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
           </div>
 
@@ -142,7 +144,7 @@ class About extends PureComponent {
             </div>
           </div>
 
-          <Section open title={intl.formatMessage(messages.title)}>
+          <Section open title={intl.formatMessage(messages.title, { domain })}>
             {extendedDescription.get('isLoading') ? (
               <>
                 <Skeleton width='100%' />
@@ -209,11 +211,16 @@ class About extends PureComponent {
             ))}
           </Section>
 
-          <LinkFooter />
+          <Section title={intl.formatMessage(messages.aboutMastodon)}>
+            <div className='prose'>
+              <p><FormattedMessage id='about.mastodon.version' defaultMessage='{domain} is powered by Mastodon v{version}.' values={{ domain, version: server.get('version') }} /></p>
+              <p><FormattedMessage id='about.mastodon.license' defaultMessage='Mastodon is free and open-source software, under the AGPLv3 licence. You can {download}.' values={{ download: <a href={source_url} target='_blank' rel='noopener noreferrer'><FormattedMessage id='about.mastodon.download' defaultMessage='download the source code' /></a>}} /></p>
+              <p><FormattedMessage id='about.mastodon.more' defaultMessage='For more information, please visit {link}.' values={{ link: <a href='https://joinmastodon.org' target='_blank'>joinmastodon.org</a> }} /></p>
+              <p><FormattedMessage id='about.mastodon.trademark' defaultMessage='“Mastodon” is a trademark of Mastodon gGmbH.' /></p>
+            </div>
+          </Section>
 
-          <div className='about__footer'>
-            <p><FormattedMessage id='about.disclaimer' defaultMessage='Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.' /></p>
-          </div>
+          <LinkFooter />
         </div>
 
         <Helmet>

app/javascript/mastodon/features/ui/components/link_footer.jsx

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { openModal } from 'mastodon/actions/modal';
-import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'mastodon/initial_state';
+import { domain, statusPageUrl, profile_directory as profileDirectory } from 'mastodon/initial_state';
 import { PERMISSION_INVITE_USERS } from 'mastodon/permissions';
 import { logOut } from 'mastodon/utils/log_out';
 
@@ -64,9 +64,7 @@ class LinkFooter extends PureComponent {
     return (
       <div className='link-footer'>
         <p>
-          <strong>{domain}</strong>:
-          {' '}
-          <Link to='/about' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
+          <Link to='/about' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.about' defaultMessage='About {domain}' values={{ domain }} /></Link>
           {statusPageUrl && (
             <>
               {DividingCircle}
@@ -87,20 +85,10 @@ class LinkFooter extends PureComponent {
           )}
           {DividingCircle}
           <Link to='/privacy-policy' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
-        </p>
-
-        <p>
-          <strong>Mastodon</strong>:
-          {' '}
-          <a href='https://joinmastodon.org' target='_blank'><FormattedMessage id='footer.about' defaultMessage='About' /></a>
           {DividingCircle}
           <a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='footer.get_app' defaultMessage='Get the app' /></a>
           {DividingCircle}
           <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link>
-          {DividingCircle}
-          <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='footer.source_code' defaultMessage='View source code' /></a>
-          {DividingCircle}
-          <span className='version'>v{version}</span>
         </p>
       </div>
     );

app/javascript/mastodon/locales/en.json

@@ -1,13 +1,18 @@
 {
   "about.blocks": "Moderated servers",
   "about.contact": "Contact:",
-  "about.disclaimer": "Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.",
   "about.domain_blocks.no_reason_available": "Reason not available",
   "about.domain_blocks.preamble": "Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.",
   "about.domain_blocks.silenced.explanation": "You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.",
   "about.domain_blocks.silenced.title": "Limited",
   "about.domain_blocks.suspended.explanation": "No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.",
   "about.domain_blocks.suspended.title": "Suspended",
+  "about.mastodon.download": "download the source code",
+  "about.mastodon.license": "Mastodon is free and open-source software, under the AGPLv3 licence. You can {download}.",
+  "about.mastodon.more": "For more information, please visit {link}.",
+  "about.mastodon.title": "About Mastodon",
+  "about.mastodon.trademark": "“Mastodon” is a trademark of Mastodon gGmbH.",
+  "about.mastodon.version": "{domain} is powered by Mastodon {version}.",
   "about.not_available": "This information has not been made available on this server.",
   "about.powered_by": "Decentralized social media powered by {mastodon}",
   "about.rules": "Server rules",
@@ -115,7 +120,7 @@
   "closed_registrations_modal.find_another_server": "Find another server",
   "closed_registrations_modal.preamble": "Mastodon is decentralized, so no matter where you create your account, you will be able to follow and interact with anyone on this server. You can even self-host it!",
   "closed_registrations_modal.title": "Signing up on Mastodon",
-  "column.about": "About",
+  "column.about": "About {domain}",
   "column.blocks": "Blocked users",
   "column.bookmarks": "Bookmarks",
   "column.community": "Local timeline",
@@ -322,13 +327,12 @@
   "follow_suggestions.view_all": "View all",
   "follow_suggestions.who_to_follow": "Who to follow",
   "followed_tags": "Followed hashtags",
-  "footer.about": "About",
+  "footer.about": "About {domain}",
   "footer.directory": "Profiles directory",
   "footer.get_app": "Get the app",
   "footer.invite": "Invite people",
   "footer.keyboard_shortcuts": "Keyboard shortcuts",
   "footer.privacy_policy": "Privacy policy",
-  "footer.source_code": "View source code",
   "footer.status": "Status",
   "generic.saved": "Saved",
   "getting_started.heading": "Getting started",

app/javascript/styles/mastodon/components.scss

@@ -9516,10 +9516,6 @@ noscript {
     color: $dark-text-color;
     margin-bottom: 20px;
 
-    .version {
-      white-space: nowrap;
-    }
-
     strong {
       font-weight: 500;
     }