diff --git a/astro.config.mjs b/astro.config.mjs
index 9134076..0ed3fbf 100644
--- 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
index 37aba51..b632b95 100644
--- a/src/components/FooterNav.astro
+++ b/src/components/FooterNav.astro
@@ -65,7 +65,7 @@ const columns = [
diff --git a/src/components/NewsSummary.astro b/src/components/NewsSummary.astro
index 85b7041..32e5862 100644
--- 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();
---
@@ -17,7 +17,3 @@ const recentPosts = posts.slice(-3);
{recentPosts.map((post) => )}
-
-
diff --git a/src/components/NewsSummaryItem.astro b/src/components/NewsSummaryItem.astro
index 46df4fd..4123b2b 100644
--- 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" });
---
+
-
+
{title}
@@ -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
index 85709eb..0fd71d1 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -19,3 +19,9 @@ const { title, header = title } = Astro.props;
+
+
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index e570503..b5211f1 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -8,7 +8,7 @@ const posts = await getCollection("blog");
{
- posts.map((post) => (
+ posts.reverse().map((post) => (
-
{post.data.title}
diff --git a/src/utils/dateFromSlug.ts b/src/utils/dateFromSlug.ts
new file mode 100644
index 0000000..a38597e
--- /dev/null
+++ 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
index 780cc51..af4e056 100644
--- 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("//", "/");