Merge branch 'about-ui' into 'main'

Move About pages into the main UI

See merge request soapbox-pub/soapbox!2719

src/actions/about.ts

@@ -1,16 +1,17 @@
-import { staticClient } from '../api';
+import api from '../api';
 
 import type { AnyAction } from 'redux';
+import type { RootState } from 'soapbox/store';
 
 const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
 const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
 const FETCH_ABOUT_PAGE_FAIL = 'FETCH_ABOUT_PAGE_FAIL';
 
-const fetchAboutPage = (slug = 'index', locale?: string) => (dispatch: React.Dispatch<AnyAction>) => {
+const fetchAboutPage = (slug = 'index', locale?: string) => (dispatch: React.Dispatch<AnyAction>, getState: () => RootState) => {
   dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale });
 
   const filename = `${slug}${locale ? `.${locale}` : ''}.html`;
-  return staticClient.get(`/instance/about/${filename}`)
+  return api(getState).get(`/instance/about/${filename}`)
     .then(({ data: html }) => {
       dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html });
       return html;

src/components/navlinks.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Text } from 'soapbox/components/ui';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+
+interface INavlinks {
+  type: string
+}
+
+const Navlinks: React.FC<INavlinks> = ({ type }) => {
+  const settings = useSettings();
+  const { copyright, navlinks } = useSoapboxConfig();
+  const locale = settings.get('locale') as string;
+
+  return (
+    <footer className='relative mx-auto mt-auto max-w-7xl py-8'>
+      <div className='flex flex-wrap justify-center'>
+        {navlinks.get(type)?.map((link, idx) => {
+          const url = link.url;
+          const isExternal = url.startsWith('http');
+          const Comp = (isExternal ? 'a' : Link) as 'a';
+          const compProps = isExternal ? { href: url, target: '_blank' } : { to: url };
+
+          return (
+            <div key={idx} className='px-5 py-2'>
+              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
+                <Text tag='span' theme='inherit' size='sm'>
+                  {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
+                </Text>
+              </Comp>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className='mt-6'>
+        <Text theme='muted' align='center' size='sm'>{copyright}</Text>
+      </div>
+    </footer>
+  );
+};
+
+export { Navlinks };

src/containers/soapbox.tsx

@@ -110,7 +110,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route exact path='/about/:slug?' component={PublicLayout} />
       <Route path='/login' component={AuthLayout} />
 
       {(features.accountCreation && instance.registrations) && (

src/features/about/index.tsx

@@ -3,6 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
+import { Navlinks } from 'soapbox/components/navlinks';
+import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -60,10 +62,15 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose mx-auto py-20 dark:prose-invert'>
-      <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+    <div>
+      <Card variant='rounded'>
+        <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+          <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+          {alsoAvailable}
+        </div>
+      </Card>
 
-      {alsoAvailable}
+      <Navlinks type='homeFooter' />
     </div>
   );
 };

src/features/public-layout/index.tsx

@@ -5,7 +5,6 @@ import LandingGradient from 'soapbox/components/landing-gradient';
 import { useAppSelector } from 'soapbox/hooks';
 import { isStandalone } from 'soapbox/utils/state';
 
-import AboutPage from '../about';
 import LandingPage from '../landing-page';
 
 import Footer from './components/footer';
@@ -29,7 +28,6 @@ const PublicLayout = () => {
           <div className='relative'>
             <Switch>
               <Route exact path='/' component={LandingPage} />
-              <Route exact path='/about/:slug?' component={AboutPage} />
             </Switch>
           </div>
         </div>

src/features/ui/index.tsx

@@ -134,6 +134,7 @@ import {
   Announcements,
   EditGroup,
   FollowedTags,
+  AboutPage,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -350,6 +351,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       <WrappedRoute path='/share' page={DefaultPage} component={Share} content={children} exact />
 
+      <WrappedRoute path='/about/:slug?' page={DefaultPage} component={AboutPage} publicRoute exact />
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );

src/features/ui/util/async-components.ts

@@ -1,3 +1,7 @@
+export function AboutPage() {
+  return import('../../about');
+}
+
 export function EmojiPicker() {
   return import('../../emoji/components/emoji-picker');
 }

src/instance/about.example/dmca.html

@@ -1,4 +1,4 @@
-<h1>COPYRIGHT POLICY</h1>
+<h1>Copyright Policy</h1>
 
 <h3>Reporting Claims of Copyright Infringement</h3>
 <p>We take claims of copyright infringement seriously. We will respond to notices of alleged copyright infringement that comply with applicable law. If you believe any materials accessible on or from this site (the &quot;Website&quot;) infringe your copyright, you may request removal of those materials (or access to them) from the Website by submitting written notification to our copyright agent designated below. In accordance with the Online Copyright Infringement Liability Limitation Act of the Digital Millennium Copyright Act (17 U.S.C. &sect; 512) (&quot;DMCA&quot;), the written notice (the &quot;DMCA Notice&quot;) must include substantially the following:</p>

src/instance/about.example/index.html

@@ -1,8 +1,7 @@
-<h1>About Your_Instance</h1>
-<p>Your_Instance description</p>
-<p>Your_Instance is a way to join the Fediverse, to be part of a community, and to reclaim your freedom of speech in social media.</p>
+<h1>About Us</h1>
+<p>Join the Fediverse, be part of a community, and to reclaim your freedom online.</p>
 
-<h1 id="site-rules">Site rules</h1>
+<h2 id="site-rules">Site rules</h2>
 <p>Please refrain from:</p>
 <ol>
   <li>Posting anything illegal.</li>
@@ -22,6 +21,6 @@
   <li>A bot where all posts are unlisted.</li>
 </ol>
 
-<h1 id="opensource">Open Source Software</h1>
+<h2 id="opensource">Open Source Software</h2>
 <p>Soapbox is free and open source (FOSS) software.</p>
 <p>The Soapbox repository can be found at <a href="https://gitlab.com/soapbox-pub/soapbox">Soapbox</a></p>

src/instance/about.example/privacy.html

@@ -1,12 +1,6 @@
-<h1>PRIVACY POLICY</h1>
-<h3>Last Updated: Your_Update_Date</h3>
-
-<p>Your_Entity_Name (&quot;Company&quot; or &quot;We&quot;) respect your privacy and are committed to protecting it through our compliance with this policy.</p>
-<p>
-  This policy describes the types of information we may collect from you or that you may provide when you visit the website
-  <a href="https://your_url.com">Your_Instance_Name</a>
-  and our practices for collecting, using, maintaining, protecting, and disclosing that information.
-</p>
+<h1>Privacy Policy</h1>
+<p>We respect your privacy and are committed to protecting it through our compliance with this policy.</p>
+<p>This policy describes the types of information we may collect from you or that you may provide when you visit our website, and our practices for collecting, using, maintaining, protecting, and disclosing that information.</p>
 <p>This policy applies to information we collect:</p>
 <p>On the Website.</p>
 <p>In email, text, and other electronic messages between you and this Website.</p>

src/instance/about.example/tos.html

@@ -1,9 +1,9 @@
+<h1>Terms of Service</h1>
 <p>
   By using this web site, you agree to these Terms of Use, to our
   <a href="/about/dmca">Copyright Policy</a>, and to our
   <a href="/about/privacy">Privacy Policy</a>.
 </p>
-
 <p>Our Terms of Use are simple:</p>
 <ul>
   <li>