You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.8 KiB
141 lines
3.8 KiB
import Link from "next/link"; |
|
import ReactMarkdown from "react-markdown"; |
|
|
|
function reformatDate(fullDate) { |
|
const date = new Date(fullDate); |
|
return date.toDateString().slice(4); |
|
} |
|
|
|
function truncateSummary(content) { |
|
return content.slice(0, 200).trimEnd() + "..."; |
|
} |
|
|
|
const BlogList = ({ posts }) => { |
|
return ( |
|
<> |
|
<ul className="list"> |
|
{posts.length > 1 && |
|
posts |
|
// Filter drafts |
|
.filter((post) => !post.slug.startsWith("_")) |
|
// Ternary operator is used to fix chromium sorting |
|
// See: https://stackoverflow.com/a/36507611 |
|
.sort((a, b) => (a.frontmatter.date < b.frontmatter.date ? 1 : -1)) |
|
.map((post) => ( |
|
<Link key={post.slug} href={{ pathname: `/posts/${post.slug}` }}> |
|
<a> |
|
<li> |
|
<div className="blog__info"> |
|
<h2>{post.frontmatter.title}</h2> |
|
<h3> {reformatDate(post.frontmatter.date)}</h3> |
|
<p> |
|
<ReactMarkdown |
|
source={truncateSummary(post.markdownBody)} |
|
/> |
|
</p> |
|
</div> |
|
</li> |
|
</a> |
|
</Link> |
|
))} |
|
</ul> |
|
<style jsx> |
|
{` |
|
margin-bottom: 0; |
|
a:hover { |
|
opacity: 1; |
|
} |
|
a:hover li div.hero_image img { |
|
opacity: 0.8; |
|
transition: opacity 0.3s ease; |
|
} |
|
a:hover li .blog__info h2, |
|
a:hover li .blog__info h3, |
|
a:hover li .blog__info p { |
|
transform: translateX(10px); |
|
transition: transform 0.5s ease-out; |
|
} |
|
@media (prefers-reduced-motion) { |
|
a:hover li .blog__info h2, |
|
a:hover li .blog__info h3, |
|
a:hover li .blog__info p { |
|
transform: translateX(0px); |
|
} |
|
} |
|
.hero_image { |
|
width: 100%; |
|
height: 33vh; |
|
overflow: hidden; |
|
background-color: #000; |
|
} |
|
.hero_image img { |
|
object-fit: cover; |
|
object-position: 50% 50%; |
|
opacity: 1; |
|
transition: opacity 0.3s ease; |
|
min-height: 100%; |
|
} |
|
.blog__info { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
padding: 1.5rem 1.25rem; |
|
transform: translateX(0px); |
|
transition: transform 0.3s ease-in; |
|
} |
|
.blog__info h2, |
|
.blog__info h3, |
|
.blog__info p { |
|
transform: translateX(0px); |
|
transition: transform 0.5s ease-out; |
|
} |
|
li { |
|
opacity: inherit; |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 38vh; |
|
margin-bottom: 0; |
|
} |
|
h2 { |
|
margin-bottom: 0.5rem; |
|
} |
|
h3 { |
|
margin-bottom: 1rem; |
|
} |
|
p { |
|
max-width: 900px; |
|
} |
|
@media (min-width: 768px) { |
|
li { |
|
min-height: 250px; |
|
height: 33.333vh; |
|
flex-direction: row; |
|
} |
|
.hero_image { |
|
height: 100%; |
|
} |
|
.hero_image img { |
|
min-width: 100%; |
|
height: 100%; |
|
width: auto; |
|
min-height: 0; |
|
} |
|
.blog__info { |
|
min-width: 70%; |
|
} |
|
} |
|
@media (min-width: 1280px) { |
|
.blog__info { |
|
padding: 3rem; |
|
} |
|
h3 { |
|
margin-bottom: 1.2rem; |
|
} |
|
} |
|
`} |
|
</style> |
|
</> |
|
); |
|
}; |
|
|
|
export default BlogList;
|
|
|