Fix updated dates formatting

2023-12-31 00:07:20 -06:00
parent 320ae0fb3c
commit 6bd8c12a22
3 changed files with 19 additions and 8 deletions
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -14,7 +14,7 @@ const {
 } = Astro.props;
 ---

-<html>
+<html lang="en-us">
 	<BaseHead title={title} description={description} />

 	<body>
@@ -23,13 +23,10 @@ const {
 			<article>
 				{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
 				<h1 class="article-title">{title}</h1>
-				{added && <time>{added}</time>}
-				{
-					updated && (
-						<div>
-							Last updated on <time>{updated}</time>
-						</div>
-					)
+				{updated ?
+					<span><time>{added}</time>, last updated on <time>{updated}</time></span>
+					:
+					<span>{added && <time>{added}</time>}</span>
 				}
 				<hr />
 				<div class="blog-post">
--- a/src/pages/post/[slug].astro
+++ b/src/pages/post/[slug].astro
@@ -22,6 +22,19 @@ post.frontmatter.added = new Date(post.frontmatter.added).toLocaleDateString(
 	}
 );

+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 },
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -116,6 +116,7 @@ nav {
 	top: 0;
 	text-align: center;
 	background: var(--transwhite);
+	-webkit-backdrop-filter: blur(1px);
 	backdrop-filter: blur(1px);
 }