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;
---
<time datetime={date.toISOString()}>
<time datetime={date.toISOString()} class="text-medium">
{
// date.toLocaleDateString('en-us', {
// year: 'numeric',
// month: 'short',
// day: 'numeric',
// })
date.toISOString()
date.toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time>

32
src/layouts/BlogPost.astro
View File

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