import Head from 'next/head' import styles from '../styles/Home.module.css' import HeaderNav from '../lib/HeaderNav' import HeroImage from '../lib/HeroImage' import PostsList from '../lib/PostsList' import { getSortedPostsData } from '../lib/posts' import { serialize } from 'next-mdx-remote/serialize' export async function getStaticProps() { const allPostsData = await getSortedPostsData(serialize) return { props: { allPostsData: allPostsData.slice(0, 3) } } } export default function Home({ allPostsData }) { return ( <div className={styles.container}> <HeaderNav /> <HeroImage image="https://source.unsplash.com/Q1p7bh3SHj8/3841x2160" credit={{ url: "https://unsplash.com/photos/Q1p7bh3SHj8", text: "NASA" }} withGradient="bottom-black" fullHeight={true}> Luke Granger-Brown </HeroImage> <Head> <title>Luke Granger-Brown</title> <link rel="icon" href="/favicon.ico" /> </Head> <main className={styles.main}> <h2 className={styles.latestPostsHeader}> Latest Posts </h2> <PostsList posts={allPostsData} /> </main> </div> ) }