Merge pull request #1551 from omnivore-app/feat/landing-page-redirect

Flip the landing and about page so non-logged in users hit the landing page
This commit is contained in:
Jackson Harper 2022-12-16 16:58:07 +08:00 committed by GitHub
commit aca608902b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 15 deletions

View file

@ -5,6 +5,9 @@ import {
} from '../components/templates/landing/LandingSectionsContainer'
import { LandingHeader } from '../components/templates/landing/LandingHeader'
import { LandingFooter } from '../components/templates/landing/LandingFooter'
import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
import { useRouter } from 'next/router'
import { PageMetaData } from '../components/patterns/PageMetaData'
const mobileContainerStyles = {
alignSelf: 'center',
@ -40,6 +43,12 @@ const subHeadingStyles = {
export default function LandingPage(): JSX.Element {
return (
<>
<PageMetaData
title="Omnivore"
path="/about"
ogImage="/static/images/og-homepage.png"
/>
<LandingHeader />
<VStack
alignment="center"

View file

@ -1,28 +1,105 @@
import { LoadingView } from '../components/patterns/LoadingView'
import { VStack, Box } from './../components/elements/LayoutPrimitives'
import {
LandingSectionsContainer,
GetStartedButton,
} from '../components/templates/landing/LandingSectionsContainer'
import { LandingHeader } from '../components/templates/landing/LandingHeader'
import { LandingFooter } from '../components/templates/landing/LandingFooter'
import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
import { PageMetaData } from '../components/patterns/PageMetaData'
import { useRouter } from 'next/router'
import { PageMetaData } from '../components/patterns/PageMetaData'
import { LoadingView } from '../components/patterns/LoadingView'
export default function Home(): JSX.Element {
const mobileContainerStyles = {
alignSelf: 'center',
marginTop: 80,
maxWidth: 960,
px: '2vw',
'@md': {
px: '6vw',
},
'@xl': {
px: '120px',
},
}
const headingStyles = {
fontWeight: '700',
color: '#3D3D3D',
fontSize: 45,
lineHeight: '53px',
padding: '10px',
paddingBottom: '0px',
textAlign: 'center',
}
const subHeadingStyles = {
color: 'rgb(125, 125, 125)',
padding: '10px',
textAlign: 'center',
width: '100%',
fontWeight: '600',
}
export default function LandingPage(): JSX.Element {
const router = useRouter()
const { viewerData, viewerDataError, isLoading } = useGetViewerQuery()
if (!isLoading && router.isReady) {
if (viewerDataError || !viewerData?.me) {
router.push('/login')
return <LoadingView />
}
if (viewerData?.me) {
router.push('/home')
return <LoadingView />
}
if (!isLoading && router.isReady && viewerData?.me) {
router.push('/home')
return <></>
} else if (isLoading) {
return <LoadingView bgColor="#FEFCF5" />
}
return (
<>
<PageMetaData title='Omnivore' path='/' ogImage='/static/images/og-homepage.png' />
<LoadingView />
<PageMetaData
title="Omnivore"
path="/"
ogImage="/static/images/og-homepage.png"
/>
<LandingHeader />
<VStack
alignment="center"
css={{ background: '#FEFCF5', color: '#3D3D3D' }}
>
<VStack css={mobileContainerStyles}>
<Box css={headingStyles}>
Omnivore is the read-it-later app for serious readers.
</Box>
<Box css={subHeadingStyles}>
Distraction free. Privacy focused. Open source.
</Box>
<Box
css={{
color: 'rgb(125, 125, 125)',
padding: '10px',
textAlign: 'center',
}}
>
Save interesting articles, newsletter subscriptions, and documents
and read them later focused and distraction free. Add notes and
highlights. Organize your reading list the way you want and sync it
across all your devices.
</Box>
<Box
css={{
mb: 40,
padding: '10px',
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
<GetStartedButton />
</Box>
</VStack>
<LandingSectionsContainer />
</VStack>
<LandingFooter />
</>
)
}