depot/web/lukegbcom/pages/index.js

39 lines
1.1 KiB
JavaScript

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>
)
}