Add a LandingTimeline, put the site name and description on it

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
-        ? <Redirect exact from='/' to={redirectRootNoLogin} />
-        : <Route exact path='/' component={PublicLayout} />)}
-
-      {!me && (
-        <Route exact path='/' component={PublicLayout} />
+      {(!me && redirectRootNoLogin) && (
+        <Redirect exact from='/' to={redirectRootNoLogin} />
       )}
 
       <Route path='/' component={UI} />

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,68 @@
+import React, { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } 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 Sonar from '../public-layout/components/sonar';
+import Timeline from '../ui/components/timeline';
+
+import { SiteBanner } from './components/site-banner';
+
+const messages = defineMessages({
+  title: { id: 'column.community', defaultMessage: 'Local timeline' },
+});
+
+const LandingTimeline = () => {
+  const intl = useIntl();
+  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 className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent  withHeader={false}>
+      <div className='my-20 px-4'>
+        <div className='absolute -z-10 -mt-64'>
+          <Sonar />
+        </div>
+        <div className='-mt-8'>
+          <SiteBanner />
+        </div>
+      </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/ui/index.tsx

@@ -21,7 +21,7 @@ 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';
@@ -31,6 +31,7 @@ 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 +140,7 @@ import {
   PasswordResetConfirm,
   RegisterInvite,
   ExternalLogin,
+  LandingTimeline,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -167,6 +169,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 +184,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 />
 
-      <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
+      {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

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/landing-page.tsx

@@ -0,0 +1,137 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { uploadCompose } from 'soapbox/actions/compose';
+import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import {
+  WhoToFollowPanel,
+  TrendsPanel,
+  SignUpPanel,
+  PromoPanel,
+  FundingPanel,
+  CryptoDonatePanel,
+  BirthdayPanel,
+  CtaBanner,
+  AnnouncementsPanel,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks';
+
+import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
+import ComposeForm from '../features/compose/components/compose-form';
+import BundleContainer from '../features/ui/containers/bundle-container';
+
+interface ILandingPage {
+  children: React.ReactNode
+}
+
+const LandingPage: React.FC<ILandingPage> = ({ children }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const me = useAppSelector(state => state.me);
+  const { account } = useOwnAccount();
+  const features = useFeatures();
+  const soapboxConfig = useSoapboxConfig();
+
+  const composeId = 'home';
+  const composeBlock = useRef<HTMLDivElement>(null);
+
+  const hasPatron = soapboxConfig.extensions.getIn(['patron', 'enabled']) === true;
+  const hasCrypto = typeof soapboxConfig.cryptoAddresses.getIn([0, 'ticker']) === 'string';
+  const cryptoLimit = soapboxConfig.cryptoDonatePanel.get('limit', 0);
+
+  const { isDragging, isDraggedOver } = useDraggedFiles(composeBlock, (files) => {
+    dispatch(uploadCompose(composeId, files, intl));
+  });
+
+  const acct = account ? account.acct : '';
+  const avatar = account ? account.avatar : '';
+
+  return (
+    <>
+      <Layout.Main className='space-y-3 pt-3 dark:divide-gray-800 sm:pt-0'>
+        {me && (
+          <Card
+            className={clsx('relative z-[1] transition', {
+              'border-2 border-primary-600 border-dashed z-[99]': isDragging,
+              'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
+            })}
+            variant='rounded'
+            ref={composeBlock}
+          >
+            <CardBody>
+              <HStack alignItems='start' space={4}>
+                <Link to={`/@${acct}`}>
+                  <Avatar src={avatar} size={46} />
+                </Link>
+
+                <div className='w-full translate-y-0.5'>
+                  <ComposeForm
+                    id={composeId}
+                    shouldCondense
+                    autoFocus={false}
+                    clickableAreaRef={composeBlock}
+                  />
+                </div>
+              </HStack>
+            </CardBody>
+          </Card>
+        )}
+
+        {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
+      </Layout.Main>
+
+      <Layout.Aside>
+        {!me && (
+          <BundleContainer fetchComponent={SignUpPanel}>
+            {Component => <Component />}
+          </BundleContainer>
+        )}
+        {me && features.announcements && (
+          <BundleContainer fetchComponent={AnnouncementsPanel}>
+            {Component => <Component key='announcements-panel' />}
+          </BundleContainer>
+        )}
+        {features.trends && (
+          <BundleContainer fetchComponent={TrendsPanel}>
+            {Component => <Component limit={5} />}
+          </BundleContainer>
+        )}
+        {hasPatron && (
+          <BundleContainer fetchComponent={FundingPanel}>
+            {Component => <Component />}
+          </BundleContainer>
+        )}
+        {hasCrypto && cryptoLimit > 0 && (
+          <BundleContainer fetchComponent={CryptoDonatePanel}>
+            {Component => <Component limit={cryptoLimit} />}
+          </BundleContainer>
+        )}
+        <BundleContainer fetchComponent={PromoPanel}>
+          {Component => <Component />}
+        </BundleContainer>
+        {features.birthdays && (
+          <BundleContainer fetchComponent={BirthdayPanel}>
+            {Component => <Component limit={10} />}
+          </BundleContainer>
+        )}
+        {me && features.suggestions && (
+          <BundleContainer fetchComponent={WhoToFollowPanel}>
+            {Component => <Component limit={3} />}
+          </BundleContainer>
+        )}
+        <LinkFooter key='link-footer' />
+      </Layout.Aside>
+    </>
+  );
+};
+
+export default LandingPage;