43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
import Link from 'next/link'
|
|
import ReactMarkdown from 'react-markdown'
|
|
import styles from "../styles/BlogList.module.css"
|
|
import Image from "next/image";
|
|
|
|
function truncateSummary(content) {
|
|
return content.slice(0, 200).trimEnd()
|
|
}
|
|
|
|
function reformatDate(fullDate) {
|
|
const date = new Date(fullDate)
|
|
return date.toDateString().slice(4)
|
|
}
|
|
|
|
const BlogList = ({ allBlogs }) => {
|
|
return (
|
|
<ul>
|
|
{allBlogs.length > 1 &&
|
|
allBlogs.map(post => (
|
|
<li key={post.slug}>
|
|
<Link href={{ pathname: `/blog/${post.slug}` }} className={styles.blog__link}>
|
|
<div className={styles.hero_image}>
|
|
<Image
|
|
width={384}
|
|
height={288}
|
|
src={post.frontmatter.hero_image}
|
|
alt={post.frontmatter.hero_image}
|
|
/>
|
|
</div>
|
|
<div className={styles.blog__info}>
|
|
<h2>{post.frontmatter.title}</h2>
|
|
<h3>{reformatDate(post.frontmatter.date)}</h3>
|
|
<ReactMarkdown disallowedElements={['a']}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default BlogList
|