Merge branch 'landing-timeline' into 'main'

Replace the homepage with a feed

Closes #50

See merge request soapbox-pub/soapbox!2737

src/containers/soapbox.tsx

@@ -18,7 +18,6 @@ import Helmet from 'soapbox/components/helmet';
 import LoadingScreen from 'soapbox/components/loading-screen';
 import { StatProvider } from 'soapbox/contexts/stat-context';
 import EmbeddedStatus from 'soapbox/features/embedded-status';
-import PublicLayout from 'soapbox/features/public-layout';
 import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import {
   ModalContainer,
@@ -95,12 +94,8 @@ const SoapboxMount = () => {
   /** Render the auth layout or UI. */
   const renderSwitch = () => (
     <Switch>
-      {!me && (redirectRootNoLogin
+      {(!me && redirectRootNoLogin) && (
-        ? <Redirect exact from='/' to={redirectRootNoLogin} />
+        <Redirect exact from='/' to={redirectRootNoLogin} />
-        : <Route exact path='/' component={PublicLayout} />)}
-
-      {!me && (
-        <Route exact path='/' component={PublicLayout} />
       )}
 
       <Route path='/' component={UI} />

src/features/landing-page/__tests__/landing-page.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { rememberInstance } from 'soapbox/actions/instance';
-import { render, screen, rootReducer } from 'soapbox/jest/test-helpers';
-
-import LandingPage from '..';
-
-describe('<LandingPage />', () => {
-  it('renders a RegistrationForm for an open Pleroma instance', () => {
-
-    const state = rootReducer(undefined, {
-      type: rememberInstance.fulfilled.type,
-      payload: {
-        version: '2.7.2 (compatible; Pleroma 2.3.0)',
-        registrations: true,
-      },
-    });
-
-    render(<LandingPage />, undefined, state);
-
-    expect(screen.queryByTestId('registrations-open')).toBeInTheDocument();
-    expect(screen.queryByTestId('registrations-closed')).not.toBeInTheDocument();
-  });
-
-  it('renders "closed" message for a closed Pleroma instance', () => {
-
-    const state = rootReducer(undefined, {
-      type: rememberInstance.fulfilled.type,
-      payload: {
-        version: '2.7.2 (compatible; Pleroma 2.3.0)',
-        registrations: false,
-      },
-    });
-
-    render(<LandingPage />, undefined, state);
-
-    expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
-    expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
-  });
-});

src/features/landing-page/index.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { prepareRequest } from 'soapbox/actions/consumer-auth';
-import Markup from 'soapbox/components/markup';
-import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
-import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
-import { useAppDispatch, useFeatures, useInstance, useSoapboxConfig } from 'soapbox/hooks';
-import { capitalize } from 'soapbox/utils/strings';
-
-const LandingPage = () => {
-  const dispatch = useAppDispatch();
-  const features = useFeatures();
-  const soapboxConfig = useSoapboxConfig();
-  const instance = useInstance();
-
-  /** Registrations are closed */
-  const renderClosed = () => {
-    return (
-      <Stack space={3} data-testid='registrations-closed'>
-        <Text size='xl' weight='bold' align='center'>
-          <FormattedMessage
-            id='registration.closed_title'
-            defaultMessage='Registrations Closed'
-          />
-        </Text>
-        <Text theme='muted' align='center'>
-          <FormattedMessage
-            id='registration.closed_message'
-            defaultMessage='{instance} is not accepting new members.'
-            values={{ instance: instance.title }}
-          />
-        </Text>
-      </Stack>
-    );
-  };
-
-  /** Mastodon API registrations are open */
-  const renderOpen = () => {
-    return <RegistrationForm />;
-  };
-
-  /** Display login button for external provider. */
-  const renderProvider = () => {
-    const { authProvider } = soapboxConfig;
-
-    return (
-      <Stack space={3}>
-        <Stack>
-          <Text size='2xl' weight='bold' align='center'>
-            <FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
-          </Text>
-        </Stack>
-
-        <Button onClick={() => dispatch(prepareRequest(authProvider))} theme='primary' block>
-          <FormattedMessage
-            id='oauth_consumer.tooltip'
-            defaultMessage='Sign in with {provider}'
-            values={{ provider: capitalize(authProvider) }}
-          />
-        </Button>
-      </Stack>
-    );
-  };
-
-  // Render registration flow depending on features
-  const renderBody = () => {
-    if (soapboxConfig.authProvider) {
-      return renderProvider();
-    } else if (features.accountCreation && instance.registrations) {
-      return renderOpen();
-    } else {
-      return renderClosed();
-    }
-  };
-
-  return (
-    <main className='mt-16 sm:mt-24' data-testid='homepage'>
-      <div className='mx-auto max-w-7xl'>
-        <div className='grid grid-cols-1 gap-8 py-12 lg:grid-cols-12'>
-          <div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
-            <div className='w-full'>
-              <Stack space={3}>
-                <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
-                  {instance.title}
-                </h1>
-
-                <Markup
-                  size='lg'
-                  dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
-                />
-              </Stack>
-            </div>
-          </div>
-          <div className='self-center sm:mt-24 lg:col-span-6 lg:mt-0'>
-            <Card size='xl' variant='rounded' className='sm:mx-auto sm:w-full sm:max-w-md'>
-              <CardBody>
-                {renderBody()}
-              </CardBody>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default LandingPage;

src/features/landing-timeline/components/logo-text.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface ILogoText {
+  children: React.ReactNode
+}
+
+/** Big text in site colors, for displaying the site name. Resizes itself according to the screen size. */
+const LogoText: React.FC<ILogoText> = ({ children }) => {
+  return (
+    <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:leading-none lg:text-6xl xl:text-7xl'>
+      {children}
+    </h1>
+  );
+};
+
+export { LogoText };

src/features/landing-timeline/components/site-banner.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Markup from 'soapbox/components/markup';
+import { Stack } from 'soapbox/components/ui';
+import { useInstance } from 'soapbox/hooks';
+
+import { LogoText } from './logo-text';
+
+const SiteBanner: React.FC = () => {
+  const instance = useInstance();
+
+  return (
+    <Stack space={3}>
+      <LogoText>{instance.title}</LogoText>
+
+      <Markup
+        size='lg'
+        dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
+      />
+    </Stack>
+  );
+};
+
+export { SiteBanner };

src/features/landing-timeline/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { expandCommunityTimeline } from 'soapbox/actions/timelines';
+import { useCommunityStream } from 'soapbox/api/hooks';
+import PullToRefresh from 'soapbox/components/pull-to-refresh';
+import { Column } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
+
+import Timeline from '../ui/components/timeline';
+
+import { SiteBanner } from './components/site-banner';
+
+const LandingTimeline = () => {
+  const dispatch = useAppDispatch();
+
+  const settings = useSettings();
+  const onlyMedia = !!settings.getIn(['community', 'other', 'onlyMedia'], false);
+  const next = useAppSelector(state => state.timelines.get('community')?.next);
+
+  const timelineId = 'community';
+
+  const handleLoadMore = (maxId: string) => {
+    dispatch(expandCommunityTimeline({ url: next, maxId, onlyMedia }));
+  };
+
+  const handleRefresh = () => {
+    return dispatch(expandCommunityTimeline({ onlyMedia }));
+  };
+
+  useCommunityStream({ onlyMedia });
+
+  useEffect(() => {
+    dispatch(expandCommunityTimeline({ onlyMedia }));
+  }, [onlyMedia]);
+
+  return (
+    <Column transparent withHeader={false}>
+      <div className='my-12 mb-16 px-4 sm:mb-20'>
+        <SiteBanner />
+      </div>
+
+      <PullToRefresh onRefresh={handleRefresh}>
+        <Timeline
+          scrollKey={`${timelineId}_timeline`}
+          timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
+          prefix='home'
+          onLoadMore={handleLoadMore}
+          emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
+          divideType='space'
+        />
+      </PullToRefresh>
+    </Column>
+  );
+};
+
+export default LandingTimeline;

src/features/public-layout/components/__tests__/header.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
-
-import Header from '../header';
-
-describe('<Header />', () => {
-  it('successfully renders', () => {
-    render(<Header />);
-    expect(screen.getByTestId('public-layout-header')).toBeInTheDocument();
-  });
-
-  it('doesn\'t display the signup button by default', () => {
-    render(<Header />);
-    expect(screen.queryByText('Register')).not.toBeInTheDocument();
-  });
-
-  describe('with registrations enabled', () => {
-    it('displays the signup button', () => {
-      render(<Header />, undefined, storeOpen);
-      expect(screen.getByText('Register')).toBeInTheDocument();
-    });
-  });
-});

src/features/public-layout/components/footer.tsx

@@ -1,51 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { getSettings } from 'soapbox/actions/settings';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-
-import type { FooterItem } from 'soapbox/types/soapbox';
-
-const Footer = () => {
-  const { copyright, navlinks, locale } = useAppSelector((state) => {
-    const soapboxConfig = getSoapboxConfig(state);
-
-    return {
-      copyright: soapboxConfig.copyright,
-      navlinks: (soapboxConfig.navlinks.get('homeFooter') || ImmutableList()) as ImmutableList<FooterItem>,
-      locale: getSettings(state).get('locale') as string,
-    };
-  });
-
-  return (
-    <footer className='relative mx-auto mt-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between'>
-      <div className='flex flex-wrap justify-center'>
-        {navlinks.map((link, idx) => {
-          const url = link.get('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 xl:mt-0'>
-        <Text theme='muted' align='center' size='sm'>{copyright}</Text>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

src/features/public-layout/components/header.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Link, Redirect } from 'react-router-dom';
-
-import { logIn, verifyCredentials } from 'soapbox/actions/auth';
-import { fetchInstance } from 'soapbox/actions/instance';
-import { openModal } from 'soapbox/actions/modals';
-import SiteLogo from 'soapbox/components/site-logo';
-import { Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
-import { useSoapboxConfig, useOwnAccount, useAppDispatch, useRegistrationStatus, useFeatures } from 'soapbox/hooks';
-
-import Sonar from './sonar';
-
-import type { AxiosError } from 'axios';
-
-const messages = defineMessages({
-  menu: { id: 'header.menu.title', defaultMessage: 'Open menu' },
-  home: { id: 'header.home.label', defaultMessage: 'Home' },
-  login: { id: 'header.login.label', defaultMessage: 'Log in' },
-  register: { id: 'header.register.label', defaultMessage: 'Register' },
-  username: { id: 'header.login.username.placeholder', defaultMessage: 'E-mail or username' },
-  email: { id: 'header.login.email.placeholder', defaultMessage: 'E-mail address' },
-  password: { id: 'header.login.password.label', defaultMessage: 'Password' },
-  forgotPassword: { id: 'header.login.forgot_password', defaultMessage: 'Forgot password?' },
-});
-
-const Header = () => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-  const features = useFeatures();
-
-  const { account } = useOwnAccount();
-  const soapboxConfig = useSoapboxConfig();
-  const { isOpen } = useRegistrationStatus();
-  const { links } = soapboxConfig;
-
-  const [isLoading, setLoading] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [password, setPassword] = React.useState('');
-  const [shouldRedirect, setShouldRedirect] = React.useState(false);
-  const [mfaToken, setMfaToken] = React.useState(false);
-
-  const open = () => dispatch(openModal('LANDING_PAGE'));
-
-  const handleSubmit: React.FormEventHandler = (event) => {
-    event.preventDefault();
-    setLoading(true);
-
-    dispatch(logIn(username, password) as any)
-      .then(({ access_token }: { access_token: string }) => (
-        dispatch(verifyCredentials(access_token) as any)
-        // Refetch the instance for authenticated fetch
-          .then(() => dispatch(fetchInstance()))
-          .then(() => setShouldRedirect(true))
-      ))
-      .catch((error: AxiosError) => {
-        setLoading(false);
-
-        const data: any = error.response?.data;
-        if (data?.error === 'mfa_required') {
-          setMfaToken(data.mfa_token);
-        }
-      });
-  };
-
-  if (account && shouldRedirect) return <Redirect to='/' />;
-  if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
-
-  return (
-    <header data-testid='public-layout-header'>
-      <nav className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8' aria-label='Header'>
-        <div className='flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none'>
-          <div className='relative flex w-36 items-center sm:justify-center'>
-            <div className='absolute -left-6 -top-24 z-0 hidden md:block'>
-              <Sonar />
-            </div>
-
-            <IconButton
-              title={intl.formatMessage(messages.menu)}
-              src={require('@tabler/icons/menu-2.svg')}
-              onClick={open}
-              className='mr-4 bg-transparent text-gray-700 hover:text-gray-600 dark:text-gray-600 md:hidden'
-            />
-
-            <Link to='/' className='z-10'>
-              <SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />
-              <span className='hidden'>{intl.formatMessage(messages.home)}</span>
-            </Link>
-
-          </div>
-
-          <HStack space={6} alignItems='center' className='relative z-10 ml-10'>
-            <HStack alignItems='center'>
-              <HStack space={6} alignItems='center' className='hidden md:mr-6 md:flex'>
-                {links.get('help') && (
-                  <a
-                    href={links.get('help')}
-                    target='_blank'
-                    className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'
-                  >
-                    <FormattedMessage id='landing_page_modal.helpCenter' defaultMessage='Help Center' />
-                  </a>
-                )}
-              </HStack>
-
-              <HStack space={2} className='shrink-0 xl:hidden'>
-                <Button to='/login' theme='tertiary'>
-                  {intl.formatMessage(messages.login)}
-                </Button>
-
-                {isOpen && (
-                  <Button
-                    to='/signup'
-                    theme='primary'
-                  >
-                    {intl.formatMessage(messages.register)}
-                  </Button>
-                )}
-              </HStack>
-            </HStack>
-
-            <Form className='hidden items-center space-x-2 rtl:space-x-reverse xl:flex' onSubmit={handleSubmit}>
-              <Input
-                required
-                value={username}
-                onChange={(event) => setUsername(event.target.value.trim())}
-                type='text'
-                placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
-                className='max-w-[200px]'
-                autoCorrect='off'
-                autoCapitalize='off'
-              />
-
-              <Input
-                required
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-                type='password'
-                placeholder={intl.formatMessage(messages.password)}
-                className='max-w-[200px]'
-                autoComplete='off'
-                autoCorrect='off'
-                autoCapitalize='off'
-              />
-
-              <Link to='/reset-password'>
-                <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
-                  <IconButton
-                    src={require('@tabler/icons/help.svg')}
-                    className='cursor-pointer bg-transparent text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
-                    iconClassName='h-5 w-5'
-                  />
-                </Tooltip>
-              </Link>
-
-              <Button
-                theme='primary'
-                type='submit'
-                disabled={isLoading}
-              >
-                {intl.formatMessage(messages.login)}
-              </Button>
-            </Form>
-          </HStack>
-        </div>
-      </nav>
-    </header>
-  );
-};
-
-export default Header;

src/features/public-layout/components/sonar.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const Sonar = () => (
-  <div className='relative'>
-    <div className='relative h-48 w-48'>
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-
-      <div className='absolute left-0 top-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
-    </div>
-  </div>
-);
-
-export default Sonar;

src/features/public-layout/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
-
-import LandingGradient from 'soapbox/components/landing-gradient';
-import { useAppSelector } from 'soapbox/hooks';
-import { isStandalone } from 'soapbox/utils/state';
-
-import LandingPage from '../landing-page';
-
-import Footer from './components/footer';
-import Header from './components/header';
-
-const PublicLayout = () => {
-  const standalone = useAppSelector((state) => isStandalone(state));
-
-  if (standalone) {
-    return <Redirect to='/login/external' />;
-  }
-
-  return (
-    <div className='h-full'>
-      <LandingGradient />
-
-      <div className='flex h-screen flex-col'>
-        <div className='shrink-0'>
-          <Header />
-
-          <div className='relative'>
-            <Switch>
-              <Route exact path='/' component={LandingPage} />
-            </Switch>
-          </div>
-        </div>
-
-        <Footer />
-      </div>
-    </div>
-  );
-};
-
-export default PublicLayout;

src/features/ui/index.tsx

@@ -21,16 +21,18 @@ import withHoc from 'soapbox/components/hoc/with-hoc';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb-navigation';
 import { Layout } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn } from 'soapbox/hooks';
 import AdminPage from 'soapbox/pages/admin-page';
 import ChatsPage from 'soapbox/pages/chats-page';
 import DefaultPage from 'soapbox/pages/default-page';
+import EmptyPage from 'soapbox/pages/empty-page';
 import EventPage from 'soapbox/pages/event-page';
 import EventsPage from 'soapbox/pages/events-page';
 import GroupPage from 'soapbox/pages/group-page';
 import GroupsPage from 'soapbox/pages/groups-page';
 import GroupsPendingPage from 'soapbox/pages/groups-pending-page';
 import HomePage from 'soapbox/pages/home-page';
+import LandingPage from 'soapbox/pages/landing-page';
 import ManageGroupsPage from 'soapbox/pages/manage-groups-page';
 import ProfilePage from 'soapbox/pages/profile-page';
 import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
@@ -139,6 +141,7 @@ import {
   PasswordResetConfirm,
   RegisterInvite,
   ExternalLogin,
+  LandingTimeline,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -157,8 +160,6 @@ const EditGroupSlug = withHoc(EditGroup as any, GroupLookupHoc);
 const GroupBlockedMembersSlug = withHoc(GroupBlockedMembers as any, GroupLookupHoc);
 const GroupMembershipRequestsSlug = withHoc(GroupMembershipRequests as any, GroupLookupHoc);
 
-const EmptyPage = HomePage;
-
 interface ISwitchingColumnsArea {
   children: React.ReactNode
 }
@@ -167,6 +168,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
   const instance = useInstance();
   const features = useFeatures();
   const { search } = useLocation();
+  const { isLoggedIn } = useLoggedIn();
 
   const { authenticatedProfile, cryptoAddresses } = useSoapboxConfig();
   const hasCrypto = cryptoAddresses.size > 0;
@@ -181,7 +183,11 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/email-confirmation' page={EmptyPage} component={EmailConfirmation} publicRoute exact />
       <WrappedRoute path='/logout' page={EmptyPage} component={LogoutPage} publicRoute exact />
 
+      {isLoggedIn ? (
         <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
+      ) : (
+        <WrappedRoute path='/' exact page={LandingPage} component={LandingTimeline} content={children} publicRoute />
+      )}
 
       {/*
         NOTE: we cannot nest routes in a fragment
@@ -254,7 +260,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       <WrappedRoute path='/notifications' page={DefaultPage} component={Notifications} content={children} />
 
-      <WrappedRoute path='/search' page={SearchPage} component={Search} content={children} />
+      <WrappedRoute path='/search' page={SearchPage} component={Search} content={children} publicRoute />
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
       {features.events && <WrappedRoute path='/events' page={EventsPage} component={Events} content={children} />}
@@ -359,7 +365,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/about/:slug?' page={DefaultPage} component={AboutPage} publicRoute exact />
 
       {(features.accountCreation && instance.registrations) && (
-        <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
+        <WrappedRoute path='/signup' page={EmptyPage} component={RegistrationPage} publicRoute exact />
       )}
 
       <WrappedRoute path='/login/external' page={DefaultPage} component={ExternalLogin} publicRoute exact />

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

@@ -10,6 +10,10 @@ export function Notifications() {
   return import('../../notifications');
 }
 
+export function LandingTimeline() {
+  return import('../../landing-timeline');
+}
+
 export function HomeTimeline() {
   return import('../../home-timeline');
 }

src/pages/home-page.tsx

@@ -108,12 +108,12 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
             {Component => <Component limit={5} />}
           </BundleContainer>
         )}
-        {hasPatron && (
+        {(hasPatron && me) && (
           <BundleContainer fetchComponent={FundingPanel}>
             {Component => <Component />}
           </BundleContainer>
         )}
-        {hasCrypto && cryptoLimit > 0 && (
+        {(hasCrypto && cryptoLimit > 0 && me) && (
           <BundleContainer fetchComponent={CryptoDonatePanel}>
             {Component => <Component limit={cryptoLimit} />}
           </BundleContainer>

src/pages/landing-page.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import {
+  TrendsPanel,
+  SignUpPanel,
+  CtaBanner,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+
+import { Layout } from '../components/ui';
+import BundleContainer from '../features/ui/containers/bundle-container';
+
+interface ILandingPage {
+  children: React.ReactNode
+}
+
+const LandingPage: React.FC<ILandingPage> = ({ children }) => {
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+
+  return (
+    <>
+      <Layout.Main className='space-y-3 pt-3 dark:divide-gray-800 sm:pt-0'>
+        {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component />}
+          </BundleContainer>
+        )}
+      </Layout.Main>
+
+      <Layout.Aside>
+        {!me && (
+          <BundleContainer fetchComponent={SignUpPanel}>
+            {Component => <Component />}
+          </BundleContainer>
+        )}
+        {features.trends && (
+          <BundleContainer fetchComponent={TrendsPanel}>
+            {Component => <Component limit={5} />}
+          </BundleContainer>
+        )}
+        <LinkFooter />
+      </Layout.Aside>
+    </>
+  );
+};
+
+export default LandingPage;