From af4a08b934367d6e17d37af5dd6618622a897240 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Tue, 30 Sep 2025 08:43:32 -0600 Subject: [PATCH] Update content page background --- app/blog/[slug]/page.js | 15 ++++++++++++++- app/components/ContentBanner.js | 17 +++++++++++++---- app/components/ContentThumbnailTemplate.js | 4 ++-- content/blog/building-community-trust.md | 2 ++ .../blog/operational-security-mutual-aid.md | 2 ++ content/blog/resolving-active-conflicts.md | 2 ++ lib/validation.js | 18 ++++++++++++++++-- 7 files changed, 51 insertions(+), 9 deletions(-) diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js index bf8fc54..2533b18 100644 --- a/app/blog/[slug]/page.js +++ b/app/blog/[slug]/page.js @@ -201,6 +201,16 @@ export default async function BlogPostPage({ params }) { ], }; + // Get article-specific background color from frontmatter + const getBackgroundColor = (post) => { + if (post.frontmatter?.background?.color) { + return post.frontmatter.background.color; + } + return "#1F2937"; // Default fallback (dark gray) + }; + + const backgroundColor = getBackgroundColor(post); + return ( <> {/* Structured Data */} @@ -217,7 +227,10 @@ export default async function BlogPostPage({ params }) { }} /> -
+
{/* Content Banner */} diff --git a/app/components/ContentBanner.js b/app/components/ContentBanner.js index a5e4c9c..d3cc397 100644 --- a/app/components/ContentBanner.js +++ b/app/components/ContentBanner.js @@ -4,13 +4,24 @@ import { getAssetPath } from "../../lib/assetUtils"; import ContentContainer from "./ContentContainer"; export default function ContentBanner({ post }) { + // Get article-specific background image + const getBackgroundImage = (post) => { + if (post.frontmatter?.thumbnail?.horizontal) { + return `/content/blog/${post.frontmatter.thumbnail.horizontal}`; + } + // Fallback to default image + return getAssetPath("assets/Content_Banner.svg"); + }; + + const backgroundImage = getBackgroundImage(post); + return (
{/* Background SVG - Default to sm breakpoint */}
@@ -19,9 +30,7 @@ export default function ContentBanner({ post }) {
diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js index 44de50f..972a863 100644 --- a/app/components/ContentThumbnailTemplate.js +++ b/app/components/ContentThumbnailTemplate.js @@ -72,14 +72,14 @@ const ContentThumbnailTemplate = ({ href={`/blog/${post.slug}`} className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`} > -
+
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
{/* eslint-disable-next-line @next/next/no-img-element */} {`Background {/* Gradient overlay */}
diff --git a/content/blog/building-community-trust.md b/content/blog/building-community-trust.md index 5304e82..f664b7f 100644 --- a/content/blog/building-community-trust.md +++ b/content/blog/building-community-trust.md @@ -12,6 +12,8 @@ related: thumbnail: vertical: "building-community-trust-vertical.svg" horizontal: "building-community-trust-horizontal.svg" +background: + color: "#EDCC8F" --- Trust is the foundation of any successful community organization. Without it, even the best structures and processes will struggle to function effectively. Building and maintaining trust requires intentional effort, clear communication, and consistent follow-through on commitments. diff --git a/content/blog/operational-security-mutual-aid.md b/content/blog/operational-security-mutual-aid.md index 2ef7cb9..4ebcd35 100644 --- a/content/blog/operational-security-mutual-aid.md +++ b/content/blog/operational-security-mutual-aid.md @@ -7,6 +7,8 @@ related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"] thumbnail: vertical: "operational-security-mutual-aid-vertical.svg" horizontal: "operational-security-mutual-aid-horizontal.svg" +background: + color: "#F4F3F1" --- Mutual aid organizations face unique security challenges. Unlike traditional nonprofits, they often operate in politically sensitive environments and may be targets of surveillance, infiltration, or repression. This guide provides practical strategies for protecting your organization and its members. diff --git a/content/blog/resolving-active-conflicts.md b/content/blog/resolving-active-conflicts.md index 2bf6024..2c46eb7 100644 --- a/content/blog/resolving-active-conflicts.md +++ b/content/blog/resolving-active-conflicts.md @@ -8,6 +8,8 @@ related: thumbnail: vertical: "resolving-active-conflicts-vertical.svg" horizontal: "resolving-active-conflicts-horizontal.svg" +background: + color: "#E2EFFF" --- Many groups strive to work without bosses, managers, or traditional leadership structures. But when no one's in charge, how do decisions get made? Non-hierarchical groups often rely on collective processes that prioritize trust, transparency, and shared responsibility. These approaches can take more time upfront, but they help build stronger, more equitable communities in the long run. diff --git a/lib/validation.js b/lib/validation.js index f5ba039..91237d2 100644 --- a/lib/validation.js +++ b/lib/validation.js @@ -54,6 +54,17 @@ export const BLOG_POST_SCHEMA = { }, }, }, + background: { + type: "object", + required: false, + default: null, + properties: { + color: { + type: "string", + required: false, + }, + }, + }, }; /** @@ -149,8 +160,11 @@ export function sanitizeBlogPost(frontmatter) { for (const [field, config] of Object.entries(BLOG_POST_SCHEMA)) { if (frontmatter[field] !== undefined) { - // Special handling for thumbnail object - if (field === "thumbnail" && typeof frontmatter[field] === "object") { + // Special handling for thumbnail and background objects + if ( + (field === "thumbnail" || field === "background") && + typeof frontmatter[field] === "object" + ) { sanitized[field] = frontmatter[field]; } else { sanitized[field] = frontmatter[field];