Move About pages to within the UI

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/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,7 @@ import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
+import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -60,11 +61,12 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose mx-auto py-20 dark:prose-invert'>
-      <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
-
-      {alsoAvailable}
-    </div>
+    <Card variant='rounded'>
+      <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+        <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+        {alsoAvailable}
+      </div>
+    </Card>
   );
 };
 

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/index.html

@@ -2,7 +2,7 @@
 <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 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 +22,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>