pl-fe: add some text to the landing page, idk if it's good, i'll likely add some images

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/ui/index.tsx

@@ -11,6 +11,7 @@ import { register as registerPushNotifications } from 'pl-fe/actions/push-notifi
 import { connectShoutbox } from 'pl-fe/actions/shoutbox';
 import { fetchHomeTimeline } from 'pl-fe/actions/timelines';
 import { useUserStream } from 'pl-fe/api/hooks/streaming/use-user-stream';
+import { WITH_LANDING_PAGE } from 'pl-fe/build-config';
 import SidebarNavigation from 'pl-fe/components/sidebar-navigation';
 import ThumbNavigation from 'pl-fe/components/thumb-navigation';
 import Layout from 'pl-fe/components/ui/layout';
@@ -108,6 +109,7 @@ import {
   IntentionalError,
   InteractionPolicies,
   InteractionRequests,
+  LandingPage,
   LandingTimeline,
   LinkTimeline,
   ListTimeline,
@@ -175,7 +177,9 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = React.memo(({ chil
   // Ex: use /login instead of /auth, but redirect /auth to /login
   return (
     <Switch>
-      {standalone && !isLoggedIn && <Redirect from='/' to='/login/external' exact />}
+      {standalone && !isLoggedIn && (WITH_LANDING_PAGE
+        ? <WrappedRoute path='/' exact layout={DefaultLayout} component={LandingPage} publicRoute />
+        : <Redirect from='/' to='/login/external' exact />)}
 
       <WrappedRoute path='/logout' layout={EmptyLayout} component={LogoutPage} publicRoute exact />
 

packages/pl-fe/src/features/ui/util/async-components.ts

@@ -37,6 +37,7 @@ export const HomeTimeline = lazy(() => import('pl-fe/pages/timelines/home-timeli
 export const ImportData = lazy(() => import('pl-fe/pages/settings/import-data'));
 export const IntentionalError = lazy(() => import('pl-fe/pages/utils/intentional-error'));
 export const InteractionPolicies = lazy(() => import('pl-fe/pages/settings/interaction-policies'));
+export const LandingPage = lazy(() => import('pl-fe/pages/utils/landing'));
 export const LandingTimeline = lazy(() => import('pl-fe/pages/timelines/landing-timeline'));
 export const LinkTimeline = lazy(() => import('pl-fe/pages/timelines/link-timeline'));
 export const ListTimeline = lazy(() => import('pl-fe/pages/timelines/list-timeline'));

packages/pl-fe/src/locales/en.json

@@ -1035,6 +1035,21 @@
   "keyboard_shortcuts.toot": "to start a new post",
   "keyboard_shortcuts.unfocus": "to un-focus compose textarea/search",
   "keyboard_shortcuts.up": "to move up in the list",
+  "landing.customizable.description": "pl-fe lets you choose between three themes and adjust accent color to your liking.",
+  "landing.customizable.title": "Customizable.",
+  "landing.description": "pl-fe is a feature-rich Fediverse web client.",
+  "landing.feature_rich.description": "pl-fe includes a lot features to improve your experience, like WYSIWYG text editor, draft posts and language detection.",
+  "landing.feature_rich.title": "Feature-rich.",
+  "landing.open_source.description": "pl-fe is free and open source software. You can participate in development, contribute to the project or report bugs.",
+  "landing.open_source.title": "Open source.",
+  "landing.pl_api.description": "pl-fe implements features not present in standard Mastodon API, like emoji reactions, chats or interaction policies.",
+  "landing.pl_api.title": "Get the most out of your Fediverse software.",
+  "landing.private.description": "pl-fe includes features which help you maintain online privacy. This includes URL cleaning, which helps you remove unwanted parts of URLs used to mark your online activity.",
+  "landing.private.title": "Stay private.",
+  "landing.sign_in": "Sign in",
+  "landing.source_code": "Source code",
+  "landing.use_with_platform.description": "pl-fe works with any backend implementing Mastodon API.",
+  "landing.use_with_platform.title": "Use with your favorite Fediverse platform.",
   "lightbox.close": "Close",
   "lightbox.expand": "Expand",
   "lightbox.minimize": "Minimize",

packages/pl-fe/src/pages/utils/landing.tsx

@@ -1,16 +1,61 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
+import Button from 'pl-fe/components/ui/button';
+import Card, { CardTitle } from 'pl-fe/components/ui/card';
 import Column from 'pl-fe/components/ui/column';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import LinkFooter from 'pl-fe/features/ui/components/link-footer';
+import sourceCode from 'pl-fe/utils/code';
 
 import { LogoText } from '../timelines/landing-timeline';
 
 const LandingPage = () => {
   return (
-    <Column withHeader={false}>
-      <LogoText>
-        pl-fe
-      </LogoText>
-    </Column>
+    <>
+      <Column withHeader={false}>
+        <Stack space={4}>
+          <LogoText>
+            pl-fe
+          </LogoText>
+          <Text><FormattedMessage id='landing.description' defaultMessage='pl-fe is a feature-rich Fediverse web client.' /></Text>
+          <HStack justifyContent='end' space={4}>
+            <Button href={sourceCode.url}><FormattedMessage id='landing.source_code' defaultMessage='Source code' /></Button>
+            <Button to='/login/external' theme='primary'><FormattedMessage id='landing.sign_in' defaultMessage='Sign in' /></Button>
+          </HStack>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.use_with_platform.title' defaultMessage='Use with your favorite Fediverse platform.' />} />
+            <Text><FormattedMessage id='landing.use_with_platform.description' defaultMessage='pl-fe works with any backend implementing Mastodon API.' /></Text>
+          </Card>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.feature_rich.title' defaultMessage='Feature-rich.' />} />
+            <Text><FormattedMessage id='landing.feature_rich.description' defaultMessage='pl-fe includes a lot features to improve your experience, like WYSIWYG text editor, draft posts and language detection.' /></Text>
+          </Card>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.pl_api.title' defaultMessage='Get the most out of your Fediverse instance.' />} />
+            <Text><FormattedMessage id='landing.pl_api.description' defaultMessage='pl-fe implements features not present in standard Mastodon API, like emoji reactions, chats or interaction policies.' /></Text>
+          </Card>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.customizable.title' defaultMessage='Customizable.' />} />
+            <Text><FormattedMessage id='landing.customizable.description' defaultMessage='pl-fe lets you choose between three themes and adjust accent color to your liking.' /></Text>
+          </Card>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.private.title' defaultMessage='Stay private.' />} />
+            <Text><FormattedMessage id='landing.private.description' defaultMessage='pl-fe includes features which help you maintain online privacy. This includes URL cleaning, which helps you remove unwanted parts of URLs used to mark your online activity.' /></Text>
+          </Card>
+          <Card variant='rounded'>
+            <CardTitle title={<FormattedMessage id='landing.open_source.title' defaultMessage='Open source.' />} />
+            <Text><FormattedMessage id='landing.open_source.description' defaultMessage='pl-fe is free and open source software. You can participate in development, contribute to the project or report bugs.' /></Text>
+          </Card>
+        </Stack>
+
+      </Column>
+      <Stack space={4} className='mt-4 px-4 xl:hidden'>
+        <LinkFooter />
+      </Stack>
+    </>
   );
 };