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>

146
src/layouts/BlogPost.astro
View File

@@ -1,85 +1,79 @@
--- ---
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;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
<style> <style>
main { main {
width: calc(100% - 2em); width: calc(100% - 2em);
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
} }
.hero-image { .hero-image {
width: 100%; width: 100%;
} }
.hero-image img { .hero-image img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 12px; border-radius: 12px;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
} }
.prose { .prose {
width: 720px; width: 720px;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
margin: auto; margin: auto;
padding: 1em; padding: 1em;
color: rgb(var(--gray-dark)); color: rgb(var(--gray-dark));
} }
.title { .title {
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em 0; padding: 1em 0;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
.title h1 { .title h1 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
.date { .last-updated-on {
margin-bottom: 0.5em; font-style: italic;
color: rgb(var(--gray)); }
} </style>
.last-updated-on { </head>
font-style: italic;
}
</style>
</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"> <FormattedDate date={pubDate} />
<div class="date"> {
<FormattedDate date={pubDate} /> updatedDate && (
{ <div class="last-updated-on">
updatedDate && ( Last updated on <FormattedDate date={updatedDate} />
<div class="last-updated-on"> </div>
Last updated on <FormattedDate date={updatedDate} /> )
</div> }
) <h1 class="text-3xl">{title}</h1>
} <hr />
</div> </div>
<h1>{title}</h1> <div>
<hr /> <slot />
</div> </div>
<slot /> </article>
</div> </main>
</article> <Footer />
</main> </body>
<Footer />
</body>
</html> </html>