txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix date formatting, add tags to blog header

Browse Source
This commit is contained in:
Cassidy Williams
2023-12-31 00:26:04 -06:00
parent 6bd8c12a22
commit 37951dcf56
5 changed files with 36 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Tags.astro
View File

@@ -1,9 +1,9 @@
--- ---
const { tags } = Astro.props; const { tags, all } = Astro.props;
--- ---
<h3>View posts by tag</h3> {all && <h3>View posts by tag</h3>}
<p> <div>
{ {
tags && tags &&
tags.map((tag) => ( tags.map((tag) => (
@@ -15,4 +15,4 @@ const { tags } = Astro.props;
</> </>
)) ))
} }
</p> </div>

29
src/layouts/BlogPost.astro
View File

@@ -7,11 +7,31 @@ import Tags from "../components/Tags.astro";
import getTags from "../scripts/getTags"; import getTags from "../scripts/getTags";
const posts = await Astro.glob("../posts/*.md"); const posts = await Astro.glob("../posts/*.md");
const tags = getTags(posts); const allTags = getTags(posts);
const { let {
content: { title, description, added, updated, heroImage }, content: { title, description, added, updated, tags, heroImage },
} = Astro.props; } = Astro.props;
added = new Date(added).toLocaleDateString(
"en-us",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
if (updated) {
updated = new Date(updated).toLocaleDateString(
"en-us",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
}
--- ---
<html lang="en-us"> <html lang="en-us">
@@ -28,13 +48,14 @@ const {
: :
<span>{added && <time>{added}</time>}</span> <span>{added && <time>{added}</time>}</span>
} }
<Tags tags={tags} />
<hr /> <hr />
<div class="blog-post"> <div class="blog-post">
<slot /> <slot />
</div> </div>
</article> </article>
</main> </main>
<Tags tags={tags} /> <Tags tags={allTags} all />
<Footer /> <Footer />
<ColorScript /> <ColorScript />
</body> </body>

5
src/pages/index.astro
View File

@@ -22,10 +22,13 @@ const tags = getTags(posts);
<main> <main>
<About /> <About />
<br />
<h3>Here's my most recent posts</h3> <h3>Here's my most recent posts</h3>
<HomePosts allPosts={posts} /> <HomePosts allPosts={posts} />
<Tags tags={tags} /> <Tags tags={tags} all />
</main> </main>
<Footer /> <Footer />
<ColorScript /> <ColorScript />

29
src/pages/post/[slug].astro
View File

@@ -12,33 +12,8 @@ export async function getStaticPaths() {
} }
const { post } = Astro.props; const { post } = Astro.props;
const { Content } = post;
post.frontmatter.added = new Date(post.frontmatter.added).toLocaleDateString(
"en-us",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
if (post.frontmatter.updated === "Invalid Date") {
post.frontmatter.updated = null;
} else {
post.frontmatter.updated = new Date(post.frontmatter.updated).toLocaleDateString(
"en-us",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
}
const {
Content,
frontmatter: { title, added, updated, tags, excerpt },
} = post;
--- ---
<Content /> <Content />

2
src/style/global.css
View File

@@ -222,7 +222,7 @@ article :not(.article-title) {
.article-title { .article-title {
font-size: 2em; font-size: 2em;
margin: 0.25em 0 0; margin: 0.25em 0;
} }
.blog-post { .blog-post {