52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import Head from 'next/head'
|
|
import styles from '../styles/Home.module.css'
|
|
import { Page, Spacer, Text } from '@geist-ui/core'
|
|
|
|
import Header from '../components/header'
|
|
import { ThemeProps } from './_app'
|
|
import Document from '../components/document'
|
|
import Image from 'next/image'
|
|
import ShiftBy from '../components/shift-by'
|
|
|
|
export function getStaticProps() {
|
|
const introDoc = process.env.WELCOME_CONTENT
|
|
return {
|
|
props: {
|
|
introContent: introDoc,
|
|
introTitle: process.env.WELCOME_TITLE,
|
|
}
|
|
}
|
|
}
|
|
|
|
type Props = ThemeProps & {
|
|
introContent: string
|
|
}
|
|
|
|
const Home = ({ theme, changeTheme, introContent }: Props) => {
|
|
return (
|
|
<Page className={styles.container} width="100%">
|
|
<Head>
|
|
<title>Drift</title>
|
|
<meta name="description" content="A self-hostable clone of GitHub Gist" />
|
|
</Head>
|
|
<Page.Header>
|
|
<Header theme={theme} changeTheme={changeTheme} />
|
|
</Page.Header>
|
|
<Page.Content width={"var(--main-content-width)"} margin="auto" paddingTop={"var(--gap)"}>
|
|
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
<ShiftBy y={-2}><Image src={'/assets/logo-optimized.svg'} width={'48px'} height={'48px'} alt="" /></ShiftBy>
|
|
<Spacer />
|
|
<Text style={{ display: 'inline' }} h1> Welcome to Drift</Text>
|
|
</div>
|
|
<Document
|
|
editable={false}
|
|
content={introContent}
|
|
title={`Welcome to Drift.md`}
|
|
initialTab={`preview`}
|
|
/>
|
|
</Page.Content>
|
|
</Page >
|
|
)
|
|
}
|
|
|
|
export default Home
|