Terakoda/terakoda.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styles the blog posts themselves

Browse Source
This commit is contained in:
Drew Haven
2025-06-05 13:16:01 -07:00
parent 54b5a0b3b0
commit 6994808b77
2 changed files with 76 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/FormattedDate.astro
View File

@@ -6,13 +6,12 @@ interface Props {
const { date } = Astro.props; const { date } = Astro.props;
--- ---
<time datetime={date.toISOString()}> <time datetime={date.toISOString()} class="text-medium">
{ {
// date.toLocaleDateString('en-us', { date.toLocaleDateString("en-us", {
// year: 'numeric', year: "numeric",
// month: 'short', month: "short",
// day: 'numeric', day: "numeric",
// }) })
date.toISOString()
} }
</time> </time>

32
src/layouts/BlogPost.astro
View File

@@ -1,11 +1,11 @@
--- ---
import type { CollectionEntry } from 'astro:content'; import type { CollectionEntry } from "astro:content";
import BaseHead from '../components/BaseHead.astro'; import BaseHead from "../components/BaseHead.astro";
import Header from '../components/Header.astro'; import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro'; import Footer from "../components/Footer.astro";
import FormattedDate from '../components/FormattedDate.astro'; import FormattedDate from "../components/FormattedDate.astro";
type Props = CollectionEntry<'blog'>['data']; type Props = CollectionEntry<"blog">["data"];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props; const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
--- ---
@@ -44,26 +44,20 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
.title h1 { .title h1 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on { .last-updated-on {
font-style: italic; font-style: italic;
} }
</style> </style>
</head> </head>
<body> <body class="relative min-h-dvh">
<Header /> <Header />
<main> <main>
<article> <article class="max-w-200 m-auto flex flex-col items-center py-16">
<div class="hero-image"> <div class="">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />} {heroImage && <img src={heroImage} alt="" class="max-h-100" />}
</div> </div>
<div class="prose"> <div class="flex flex-col gap-4 items-center border-b-1 m-4">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} /> <FormattedDate date={pubDate} />
{ {
updatedDate && ( updatedDate && (
@@ -72,10 +66,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</div> </div>
) )
} }
</div> <h1 class="text-3xl">{title}</h1>
<h1>{title}</h1>
<hr /> <hr />
</div> </div>
<div>
<slot /> <slot />
</div> </div>
</article> </article>