diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js index 3f7aa9f..76e989a 100644 --- a/app/components/ContentThumbnailTemplate.js +++ b/app/components/ContentThumbnailTemplate.js @@ -13,36 +13,32 @@ const ContentThumbnailTemplate = ({ post, className = "", variant = "vertical", // Internal prop for testing/development - slugOrder = [], // Array of slugs for consistent icon cycling }) => { - // Post-specific background selection - different SVG for each post - const getBackgroundImage = (slug, variant, slugOrder) => { - const verticalImages = [ - getAssetPath(ASSETS.VERTICAL_1), - getAssetPath(ASSETS.VERTICAL_2), - getAssetPath(ASSETS.VERTICAL_3), - ]; + // Get article-specific background image from frontmatter + const getBackgroundImage = (post, variant) => { + // Check if post has thumbnail images defined in frontmatter + if (post.frontmatter?.thumbnail) { + const imageName = + variant === "vertical" + ? post.frontmatter.thumbnail.vertical + : post.frontmatter.thumbnail.horizontal; - const horizontalImages = [ - getAssetPath(ASSETS.HORIZONTAL_1), - getAssetPath(ASSETS.HORIZONTAL_2), - getAssetPath(ASSETS.HORIZONTAL_3), - ]; + if (imageName) { + // Return path to image in content/blog directory + return `/content/blog/${imageName}`; + } + } - if (!slug) - return variant === "vertical" ? verticalImages[0] : horizontalImages[0]; + // Fallback to default images if no thumbnail specified + const fallbackImages = { + vertical: getAssetPath(ASSETS.VERTICAL_1), + horizontal: getAssetPath(ASSETS.HORIZONTAL_1), + }; - // Use the passed slugOrder for consistent cycling through background variants - const index = slugOrder.indexOf(slug); - const backgroundIndex = index >= 0 ? index % 3 : 0; // Cycle through 3 background variants - - // Return the same background index for both vertical and horizontal variants - return variant === "vertical" - ? verticalImages[backgroundIndex] - : horizontalImages[backgroundIndex]; + return fallbackImages[variant] || fallbackImages.vertical; }; - const backgroundImage = getBackgroundImage(post.slug, variant, slugOrder); + const backgroundImage = getBackgroundImage(post, variant); if (variant === "vertical") { return ( diff --git a/app/learn/page.js b/app/learn/page.js index 800a198..e1b4f8d 100644 --- a/app/learn/page.js +++ b/app/learn/page.js @@ -7,9 +7,6 @@ export default function LearnPage() { const allPosts = getAllBlogPosts(); const recentPosts = getRecentBlogPosts(3); - // Create slug order for consistent background cycling - const slugOrder = allPosts.map((post) => post.slug); - return (
{/* Content Lockup Header */} @@ -22,15 +19,36 @@ export default function LearnPage() { />
-
- {allPosts.slice(0, 3).map((post, index) => ( - - ))} +
+
+ {/* More Articles */} +
+

+ More Articles +

+
+ {allPosts.slice(0, 3).map((post, index) => ( + + ))} +
+
+ + {/* Coming Soon */} +
+

+ More Content Coming Soon +

+

+ We're working on adding more educational content to help you + build better communities. Check back soon for new articles and + resources. +

+
+
); diff --git a/content/blog/building-community-trust-horizontal.svg b/content/blog/building-community-trust-horizontal.svg new file mode 100644 index 0000000..ff6736d --- /dev/null +++ b/content/blog/building-community-trust-horizontal.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/building-community-trust-vertical.svg b/content/blog/building-community-trust-vertical.svg new file mode 100644 index 0000000..0b9aa36 --- /dev/null +++ b/content/blog/building-community-trust-vertical.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/building-community-trust.md b/content/blog/building-community-trust.md index 8cf4411..5304e82 100644 --- a/content/blog/building-community-trust.md +++ b/content/blog/building-community-trust.md @@ -9,6 +9,9 @@ related: "operational-security-mutual-aid", "making-decisions-without-hierarchy", ] +thumbnail: + vertical: "building-community-trust-vertical.svg" + horizontal: "building-community-trust-horizontal.svg" --- 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/making-decisions-without-hierarchy-horizontal.svg b/content/blog/making-decisions-without-hierarchy-horizontal.svg new file mode 100644 index 0000000..d1a81fa --- /dev/null +++ b/content/blog/making-decisions-without-hierarchy-horizontal.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/making-decisions-without-hierarchy-vertical.svg b/content/blog/making-decisions-without-hierarchy-vertical.svg new file mode 100644 index 0000000..bc3df93 --- /dev/null +++ b/content/blog/making-decisions-without-hierarchy-vertical.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/making-decisions-without-hierarchy.md b/content/blog/making-decisions-without-hierarchy.md index a7ed7c7..e37790b 100644 --- a/content/blog/making-decisions-without-hierarchy.md +++ b/content/blog/making-decisions-without-hierarchy.md @@ -4,6 +4,9 @@ description: "A brief guide to collaborative nonhierarchical decision making" author: "Author name" date: "2025-04-05" related: ["resolving-active-conflicts", "operational-security-mutual-aid"] +thumbnail: + vertical: "making-decisions-without-hierarchy-vertical.svg" + horizontal: "making-decisions-without-hierarchy-horizontal.svg" --- Traditional organizations rely on hierarchical structures where decisions flow from top to bottom. But what if you want to create a more collaborative, egalitarian approach? This guide explores practical methods for making decisions without traditional power structures. diff --git a/content/blog/operational-security-mutual-aid-horizontal.svg b/content/blog/operational-security-mutual-aid-horizontal.svg new file mode 100644 index 0000000..838dafd --- /dev/null +++ b/content/blog/operational-security-mutual-aid-horizontal.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/operational-security-mutual-aid-vertical.svg b/content/blog/operational-security-mutual-aid-vertical.svg new file mode 100644 index 0000000..ff5f25f --- /dev/null +++ b/content/blog/operational-security-mutual-aid-vertical.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/operational-security-mutual-aid.md b/content/blog/operational-security-mutual-aid.md index 2079dc4..2ef7cb9 100644 --- a/content/blog/operational-security-mutual-aid.md +++ b/content/blog/operational-security-mutual-aid.md @@ -4,6 +4,9 @@ description: "Tactics to protect members, secure communication, and prevent infi author: "Author name" date: "2025-04-10" related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"] +thumbnail: + vertical: "operational-security-mutual-aid-vertical.svg" + horizontal: "operational-security-mutual-aid-horizontal.svg" --- 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-horizontal.svg b/content/blog/resolving-active-conflicts-horizontal.svg new file mode 100644 index 0000000..838dafd --- /dev/null +++ b/content/blog/resolving-active-conflicts-horizontal.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/resolving-active-conflicts-vertical.svg b/content/blog/resolving-active-conflicts-vertical.svg new file mode 100644 index 0000000..ff5f25f --- /dev/null +++ b/content/blog/resolving-active-conflicts-vertical.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/resolving-active-conflicts.md b/content/blog/resolving-active-conflicts.md index ef301e6..2bf6024 100644 --- a/content/blog/resolving-active-conflicts.md +++ b/content/blog/resolving-active-conflicts.md @@ -5,6 +5,9 @@ author: "Author name" date: "2025-04-15" related: ["operational-security-mutual-aid", "making-decisions-without-hierarchy"] +thumbnail: + vertical: "resolving-active-conflicts-vertical.svg" + horizontal: "resolving-active-conflicts-horizontal.svg" --- 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/docs/CONTENT_CREATION_GUIDE.md b/docs/CONTENT_CREATION_GUIDE.md index a560143..2f89576 100644 --- a/docs/CONTENT_CREATION_GUIDE.md +++ b/docs/CONTENT_CREATION_GUIDE.md @@ -45,6 +45,9 @@ description: "A brief, compelling description of what this article covers" author: "Author Name" date: "2025-01-15" related: ["slug-of-related-article-1", "slug-of-related-article-2"] +thumbnail: + vertical: "your-article-slug-vertical.svg" + horizontal: "your-article-slug-horizontal.svg" --- ``` @@ -55,6 +58,7 @@ related: ["slug-of-related-article-1", "slug-of-related-article-2"] - **author**: Author name or organization - **date**: Publication date in YYYY-MM-DD format - **related**: Array of article slugs (use filename without .md) +- **thumbnail**: Custom images for article thumbnails (optional) ### Related Articles @@ -73,6 +77,30 @@ The slug is different from the title - it's lowercase with hyphens instead of sp - Keep paragraphs focused and readable - Write in a conversational, accessible tone +## Thumbnail Images + +Add custom thumbnail images to make your article stand out: + +1. **Create your images**: + + - Vertical: 260px × 390px + - Horizontal: 320px × 225.5px (minimum width) + - Format: SVG preferred, PNG also works + +2. **Save in content/blog/**: + + - `your-article-slug-vertical.svg` + - `your-article-slug-horizontal.svg` + +3. **Add to frontmatter**: + ```yaml + thumbnail: + vertical: "your-article-slug-vertical.svg" + horizontal: "your-article-slug-horizontal.svg" + ``` + +If no thumbnails are provided, default images will be used. + ## File Naming Use descriptive, URL-friendly filenames: