- Improved the Header component by adding a site title with styling. - Wrapped navigation links in a div for better structure. - Updated SCSS imports across multiple components for consistency.
50 lines
920 B
Plaintext
50 lines
920 B
Plaintext
---
|
|
import { type CollectionEntry } from "astro:content";
|
|
import dayjs from "dayjs";
|
|
|
|
type Props = {
|
|
readonly post: CollectionEntry<"blog">;
|
|
};
|
|
|
|
const { post } = Astro.props;
|
|
const { remarkPluginFrontmatter } = await post.render();
|
|
const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
|
|
---
|
|
|
|
<style lang="scss">
|
|
@use "../scss/variables" as *;
|
|
|
|
a {
|
|
color: $colorText;
|
|
display: block;
|
|
padding-bottom: 3rem;
|
|
|
|
&:visited {
|
|
color: $colorText;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
color: $colorBlossom;
|
|
font-size: 1.25em;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
div {
|
|
font-size: $fontSizeBase * 0.75;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
|
|
<a href={`/blog/${post.slug}`}>
|
|
<article>
|
|
<div>
|
|
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
|
|
<span>•</span>
|
|
<span>{remarkPluginFrontmatter.minutesRead}</span>
|
|
</div>
|
|
<h2>{post.data.title}</h2>
|
|
<p>{post.data.description}</p>
|
|
</article>
|
|
</a>
|