Add dates to blog post summaries

Fix links to posts on blog summary page. List in descending date order. Make footer text smaller.
sfbrigade · Apr 14, 2024 · f41cd6f · f41cd6f
1 parent f93fe78
commit f41cd6f
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 20 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,7 +5,7 @@ export default defineConfig({
 	//	site: "https://www.sfcivictech.org/"
 	//	base: "/",
 	site: "https://sfbrigade.github.io",
-	base: "/astro-static-site",
+	base: "/astro-static-site/",
 	compressHTML: false,
 	integrations: [
 		icon({

diff --git a/src/components/FooterNav.astro b/src/components/FooterNav.astro
@@ -65,7 +65,7 @@ const columns = [
 
 <style>
 	footer {
-		padding-top: 0;
+		font-size: smaller;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
@@ -77,8 +77,8 @@ const columns = [
 	}
 
 	h3 {
-		font-size: 1.25rem;
-		margin-bottom: 0.5rem;
+		font-size: 1.25em;
+		margin-bottom: 0.5em;
 	}
 
 	ul {
@@ -91,7 +91,7 @@ const columns = [
 	}
 
 	li {
-		padding: .15rem 0;
+		padding: .15em 0;
 		display: block;
 	}
 
@@ -103,7 +103,7 @@ const columns = [
 
 	.icon {
 		display: inline-block;
-		min-width: 1.5rem;
+		min-width: 1.5em;
 		text-align: center;
 	}
 </style>
diff --git a/src/components/NewsSummary.astro b/src/components/NewsSummary.astro
@@ -8,7 +8,7 @@ interface Props {
 
 const { title = "In the News" } = Astro.props;
 const posts = await getCollection("blog");
-const recentPosts = posts.slice(-3);
+const recentPosts = posts.slice(-3).reverse();
 ---
 
 <section>
@@ -17,7 +17,3 @@ const recentPosts = posts.slice(-3);
 		{recentPosts.map((post) => <NewsSummaryItem post={post} />)}
 	</div>
 </section>
-
-<style>
-
-</style>
diff --git a/src/components/NewsSummaryItem.astro b/src/components/NewsSummaryItem.astro
@@ -1,20 +1,33 @@
 ---
 import type { CollectionEntry } from "astro:content";
+import { dateFromSlug } from "@/utils/dateFromSlug";
 import { getBlogImage } from "@/utils/getBlogImage";
 
 interface Props {
 	post: CollectionEntry<"blog">;
 }
 
-const { post: { slug, data: { title, image } } } = Astro.props;
+const {
+	post: {
+		slug,
+		data: {
+			title,
+			image,
+			date = dateFromSlug(slug)
+		}
+	}
+} = Astro.props;
 const imageData = await getBlogImage(image);
 const backgroundImageURL = imageData?.src ?? "";
 const postURL = "blog/" + slug;
+const dateString = date?.toLocaleDateString("en-US",
+	{ year: "numeric", month: "short", day: "numeric" });
 ---
 
 <article style={`background-image: url(${backgroundImageURL})`}>
+	<div class="dimmer"></div>
 	<a href={postURL}>
-		<div class="dimmer"></div>
+		<time datetime={date?.toISOString()}>{dateString}</time>
 		<h3>{title}</h3>
 	</a>
 </article>
@@ -24,23 +37,31 @@ const postURL = "blog/" + slug;
 		aspect-ratio: 1;
 		background-size: cover;
 		background-position: center;
-		padding: var(--pico-block-spacing-horizontal);
+		padding: 0;
 		overflow: hidden;
 		position: relative;
-		flex-direction: column;
-		justify-content: flex-end;
-		display: flex;
 	}
 
 	article > a {
+		--pico-color: white;
 		text-decoration: none;
+		height: 100%;
+		padding: var(--pico-block-spacing);
+		flex-direction: column;
+		justify-content: space-between;
+		display: flex;
+		position: relative;
+	}
+
+	article time {
+		color: var(--pico-color, white);
+		font-size: 0.75rem;
 	}
 
 	article h3 {
 		--pico-color: white;
 		font-size: 1rem;
 		margin-bottom: 0;
-		position: relative;
 	}
 
 	.dimmer {

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -19,3 +19,9 @@ const { title, header = title } = Astro.props;
 	</main>
 	<FooterNav />
 </Page>
+
+<style>
+	h1 {
+		margin-bottom: calc(var(--pico-block-spacing-vertical) * 2);
+	}
+</style>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -8,7 +8,7 @@ const posts = await getCollection("blog");
 <BaseLayout title="Blog">
 	<ul>
 		{
-			posts.map((post) => (
+			posts.reverse().map((post) => (
 				<li>
 					<a href={"blog/" + post.slug}>{post.data.title}</a>
 				</li>

diff --git a/src/utils/dateFromSlug.ts b/src/utils/dateFromSlug.ts
@@ -0,0 +1,11 @@
+export function dateFromSlug(
+	slug: string)
+{
+	const leadingDate = slug.match(/^\d{4}-\d{2}-\d{2}/)?.[0];
+
+	if (leadingDate) {
+		return new Date(leadingDate);
+	}
+
+	return null;
+}
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
@@ -12,4 +12,4 @@ export const githubURL = "https://github.com/sfbrigade";
 export const facebookURL = "https://www.facebook.com/sfcivictech";
 export const linkedinURL = "https://www.linkedin.com/company/sfbrigade/";
 
-export const base = (url: string) => `${url.startsWith("/") ? import.meta.env.BASE_URL : ""}${url}`;
+export const base = (url: string) => ((url.startsWith("/") ? import.meta.env.BASE_URL : "") + url).replaceAll("//", "/");