Skip to content

Show blog post cover image on the main site #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dergigi merged 7 commits into from
Mar 24, 2025
Merged

Show blog post cover image on the main site #424

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
12ef77a
add blog image to home page
moteanup24 Mar 18, 2025
575b1ed
prettier
moteanup24 Mar 18, 2025
39180b6
make image larger, overlay text in white
moteanup24 Mar 19, 2025
d086e3d
adjust date alignment, add sr-only element back in
moteanup24 Mar 19, 2025
cafbab8
adjust date alignment
moteanup24 Mar 19, 2025
d5d6b86
adjust date alignment
moteanup24 Mar 19, 2025
f0c5066
add link to blog image
moteanup24 Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,21 +175,24 @@ export default function Home({
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{!posts.length && 'No posts found.'}
{posts.slice(0, MAX_DISPLAY).map((post) => {
const { slug, date, title, summary, tags } = post
const { slug, date, title, summary, tags, images } = post
return (
<li key={slug} className="py-12">
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<div className="space-x-4 space-y-4 xl:grid xl:grid-cols-3 xl:items-start xl:space-y-0">
<div className="relative">
<h1 className="sr-only">Published on</h1>
<Link href={`/blog/${slug}`}>
<img src={images[0]} alt="blog post" />
</Link>
<h2 className="absolute left-5 top-3 text-base font-semibold text-white xl:left-2.5 xl:top-1">
<time dateTime={date}>
{formatDate(date, siteMetadata.locale)}
</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
</h2>
</div>
<div className="space-y-2 xl:col-span-2">
<div className="space-y-4">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight max-[375px]:text-xl">
<Link
Expand Down