- {children}
diff --git a/app/learn/page.js b/app/learn/page.js
new file mode 100644
index 0000000..67322d1
--- /dev/null
+++ b/app/learn/page.js
@@ -0,0 +1,116 @@
+import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
+
+// Mock blog post data for testing
+const mockPost1 = {
+ slug: "resolving-active-conflicts",
+ frontmatter: {
+ title: "Resolving Active Conflicts",
+ description:
+ "Practical steps for resolving conflicts while maintaining trust, cooperation, and shared goals",
+ author: "Author name",
+ date: "2025-04-15",
+ },
+};
+
+const mockPost2 = {
+ slug: "operational-security-mutual-aid",
+ frontmatter: {
+ title: "Operational Security for Mutual Aid",
+ description:
+ "Tactics to protect members, secure communication, and prevent Infiltration",
+ author: "Author name",
+ date: "2025-04-10",
+ },
+};
+
+const mockPost3 = {
+ slug: "making-decisions-without-hierarchy",
+ frontmatter: {
+ title: "Making decisions without hierarchy",
+ description:
+ "A brief guide to collaborative nonhierarchical decision making",
+ author: "Author name",
+ date: "2025-04-05",
+ },
+};
+
+export default function LearnPage() {
+ // Mock slug order for consistent background cycling
+ const mockSlugOrder = [
+ "resolving-active-conflicts",
+ "operational-security-mutual-aid",
+ "making-decisions-without-hierarchy",
+ ];
+
+ return (
+
+
+
+ Learn
+
+
+
+ {/* Featured Articles */}
+
+
+ Featured Articles
+
+
+
+
+
+ {/* More Articles */}
+
+
+ More Articles
+
+
+
+
+
+ {/* 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.
+
+
+
+
+
+
+
+ 404
+
+
+ Page Not Found
+
+
+
$1 ")
+ .replace(/^## (.*$)/gim, "$1 ")
+ .replace(/^# (.*$)/gim, "$1 ")
+ // Bold and italic
+ .replace(/\*\*(.*?)\*\*/g, "$1 ")
+ .replace(/\*(.*?)\*/g, "$1 ")
+ // Links
+ .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1 ')
+ // Lists
+ .replace(/^\* (.*$)/gim, "$1 ")
+ .replace(/^- (.*$)/gim, "$1 ")
+ .replace(/(.*<\/li>)/gim, "")
+ // Paragraphs
+ .replace(/\n\n/g, "")
+ .replace(/^(?!<[h|u|li])(.*$)/gim, "
$1
")
+ // Clean up empty paragraphs
+ .replace(/<\/p>/g, "")
+ .replace(/
(.*?)<\/p>/g, (match, content) => {
+ return content.trim() ? match : "";
+ })
+ );
+}
+
+export function getBlogPostFiles() {
+ const contentDirectory = path.join(process.cwd(), "content/blog");
+
+ try {
+ const files = fs.readdirSync(contentDirectory);
+ return files.filter(
+ (file) => file.endsWith(".md") || file.endsWith(".mdx"),
+ );
+ } catch (error) {
+ console.error("Error reading blog content directory:", error);
+ return [];
+ }
+}
+
+/**
+ * Parse a single blog post file
+ * @param {string} filePath - Path to the markdown file
+ * @returns {Object|null} Parsed blog post data or null if invalid
+ */
+export function parseBlogPost(filePath) {
+ const fullPath = path.join(process.cwd(), "content/blog", filePath);
+
+ try {
+ const fileContents = fs.readFileSync(fullPath, "utf8");
+ const { data, content } = matter(fileContents);
+
+ const validationResult = validateBlogPost(data);
+ if (!validationResult.isValid) {
+ console.error(
+ `Validation errors for ${filePath}:`,
+ validationResult.errors,
+ );
+ return null;
+ }
+
+ const sanitizedFrontmatter = sanitizeBlogPost(data);
+ const slug = generateSlug(filePath.replace(/\.mdx?$/, ""));
+
+ return {
+ slug,
+ frontmatter: sanitizedFrontmatter,
+ content,
+ htmlContent: markdownToHtml(content),
+ filePath,
+ lastModified: fs.statSync(fullPath).mtime,
+ };
+ } catch (error) {
+ console.error(`Error parsing blog post file ${filePath}:`, error);
+ return null;
+ }
+}
+
+/**
+ * Get all blog posts, sorted by date
+ * @returns {Array} Array of parsed blog post objects
+ */
+export function getAllBlogPosts() {
+ const fileNames = getBlogPostFiles();
+ const allPosts = fileNames
+ .map((fileName) => parseBlogPost(fileName))
+ .filter(Boolean) // Filter out nulls (invalid posts)
+ .sort(
+ (a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date),
+ ); // Sort by date descending
+ return allPosts;
+}
+
+/**
+ * Get a single blog post by its slug
+ * @param {string} slug - The slug of the blog post
+ * @returns {Object|null} The parsed blog post data or null if not found
+ */
+export function getBlogPostBySlug(slug) {
+ const allPosts = getAllBlogPosts();
+ return allPosts.find((post) => post.slug === slug) || null;
+}
+
+/**
+ * Get related blog posts based on provided slugs or fallback to recent posts.
+ * @param {string} currentPostSlug - The slug of the current post to exclude.
+ * @param {string[]} relatedSlugs - Array of slugs for explicitly related posts.
+ * @param {number} limit - Maximum number of related posts to return.
+ * @returns {Array} Array of related blog post objects.
+ */
+export function getRelatedBlogPosts(
+ currentPostSlug,
+ relatedSlugs = [],
+ limit = 3,
+) {
+ const allPosts = getAllBlogPosts();
+ const filteredPosts = allPosts.filter(
+ (post) => post.slug !== currentPostSlug,
+ );
+
+ let related = [];
+ if (relatedSlugs && relatedSlugs.length > 0) {
+ related = relatedSlugs
+ .map((slug) => filteredPosts.find((post) => post.slug === slug))
+ .filter(Boolean); // Filter out any related slugs that don't exist
+ }
+
+ // If not enough related posts, or no related slugs provided, fill with recent posts
+ if (related.length < limit) {
+ const remainingSlots = limit - related.length;
+ const existingRelatedSlugs = new Set(related.map((p) => p.slug));
+ const recentPosts = filteredPosts
+ .filter((post) => !existingRelatedSlugs.has(post.slug))
+ .slice(0, remainingSlots);
+ related = [...related, ...recentPosts];
+ }
+
+ return related.slice(0, limit);
+}
+
+/**
+ * Get all unique tags from all blog posts.
+ * @returns {string[]} Array of unique tags.
+ */
+export function getAllTags() {
+ const allPosts = getAllBlogPosts();
+ const tags = new Set();
+ allPosts.forEach((post) => {
+ if (post.frontmatter.tags) {
+ post.frontmatter.tags.forEach((tag) => tags.add(tag));
+ }
+ });
+ return Array.from(tags);
+}
+
+/**
+ * Get blog posts filtered by a specific tag.
+ * @param {string} tag - The tag to filter by.
+ * @returns {Object[]} Array of blog post objects matching the tag.
+ */
+export function getBlogPostsByTag(tag) {
+ const allPosts = getAllBlogPosts();
+ return allPosts.filter(
+ (post) => post.frontmatter.tags && post.frontmatter.tags.includes(tag),
+ );
+}
+
+/**
+ * Search blog posts by text content
+ * @param {string} query - Search query
+ * @param {number} limit - Maximum number of results
+ * @returns {Object[]} Array of matching blog post objects
+ */
+export function searchBlogPosts(query, limit = 10) {
+ if (!query || query.trim() === "") return [];
+
+ const searchTerm = query.toLowerCase().trim();
+ const allPosts = getAllBlogPosts();
+
+ const results = allPosts.filter((post) => {
+ const titleMatch = post.frontmatter.title
+ .toLowerCase()
+ .includes(searchTerm);
+ const descriptionMatch = post.frontmatter.description
+ .toLowerCase()
+ .includes(searchTerm);
+ const contentMatch = post.content.toLowerCase().includes(searchTerm);
+ const tagMatch = post.frontmatter.tags?.some((tag) =>
+ tag.toLowerCase().includes(searchTerm),
+ );
+
+ return titleMatch || descriptionMatch || contentMatch || tagMatch;
+ });
+
+ return results.slice(0, limit);
+}
+
+/**
+ * Get blog posts by author
+ * @param {string} author - Author name to filter by
+ * @returns {Object[]} Array of blog post objects by the author
+ */
+export function getBlogPostsByAuthor(author) {
+ const allPosts = getAllBlogPosts();
+ return allPosts.filter(
+ (post) => post.frontmatter.author.toLowerCase() === author.toLowerCase(),
+ );
+}
+
+/**
+ * Get recent blog posts
+ * @param {number} limit - Maximum number of posts to return
+ * @returns {Object[]} Array of recent blog post objects
+ */
+export function getRecentBlogPosts(limit = 5) {
+ const allPosts = getAllBlogPosts();
+ return allPosts.slice(0, limit);
+}
+
+/**
+ * Get blog post statistics
+ * @returns {Object} Statistics about blog posts
+ */
+export function getBlogStats() {
+ const allPosts = getAllBlogPosts();
+ const tags = getAllTags();
+
+ return {
+ totalPosts: allPosts.length,
+ totalTags: tags.length,
+ totalAuthors: new Set(allPosts.map((post) => post.frontmatter.author)).size,
+ dateRange: {
+ earliest:
+ allPosts.length > 0
+ ? allPosts[allPosts.length - 1].frontmatter.date
+ : null,
+ latest: allPosts.length > 0 ? allPosts[0].frontmatter.date : null,
+ },
+ averagePostsPerMonth:
+ allPosts.length > 0
+ ? Math.round(
+ (allPosts.length /
+ Math.max(
+ 1,
+ (new Date(allPosts[0].frontmatter.date) -
+ new Date(allPosts[allPosts.length - 1].frontmatter.date)) /
+ (1000 * 60 * 60 * 24 * 30),
+ )) *
+ 10,
+ ) / 10
+ : 0,
+ };
+}
diff --git a/lib/mdx.js b/lib/mdx.js
new file mode 100644
index 0000000..de67c15
--- /dev/null
+++ b/lib/mdx.js
@@ -0,0 +1,316 @@
+/**
+ * MDX processing utilities for enhanced markdown content
+ */
+
+/**
+ * Format date consistently across the markdown pipeline
+ * Uses "Month Year" format (e.g., "April 2025")
+ */
+export function formatDate(dateString) {
+ const date = new Date(dateString);
+ return date.toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "long",
+ });
+}
+
+/**
+ * Process markdown content and extract metadata
+ * @param {string} markdown - Raw markdown content
+ * @returns {object} Processed content with metadata
+ */
+export function processMarkdown(markdown) {
+ if (!markdown) {
+ return {
+ content: "",
+ htmlContent: "",
+ headings: [],
+ links: [],
+ images: [],
+ };
+ }
+
+ // Extract headings for table of contents
+ const headings = extractHeadings(markdown);
+
+ // Extract links
+ const links = extractLinks(markdown);
+
+ // Extract images
+ const images = extractImages(markdown);
+
+ // Convert markdown to HTML
+ const htmlContent = markdownToHtml(markdown);
+
+ return {
+ content: markdown,
+ htmlContent,
+ headings,
+ links,
+ images,
+ };
+}
+
+/**
+ * Extract all headings from markdown content
+ * @param {string} markdown - Raw markdown content
+ * @returns {Array} Array of heading objects with level, text, and id
+ */
+function extractHeadings(markdown) {
+ const headingRegex = /^(#{1,6})\s+(.+)$/gm;
+ const headings = [];
+ let match;
+
+ while ((match = headingRegex.exec(markdown)) !== null) {
+ const level = match[1].length;
+ const text = match[2].trim();
+ const id = generateHeadingId(text);
+
+ headings.push({
+ level,
+ text,
+ id,
+ line: markdown.substring(0, match.index).split("\n").length,
+ });
+ }
+
+ return headings;
+}
+
+/**
+ * Extract all links from markdown content
+ * @param {string} markdown - Raw markdown content
+ * @returns {Array} Array of link objects
+ */
+function extractLinks(markdown) {
+ const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+ const links = [];
+ let match;
+
+ while ((match = linkRegex.exec(markdown)) !== null) {
+ links.push({
+ text: match[1],
+ url: match[2],
+ index: match.index,
+ });
+ }
+
+ return links;
+}
+
+/**
+ * Extract all images from markdown content
+ * @param {string} markdown - Raw markdown content
+ * @returns {Array} Array of image objects
+ */
+function extractImages(markdown) {
+ const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+ const images = [];
+ let match;
+
+ while ((match = imageRegex.exec(markdown)) !== null) {
+ images.push({
+ alt: match[1],
+ src: match[2],
+ index: match.index,
+ });
+ }
+
+ return images;
+}
+
+/**
+ * Generate a unique ID for a heading
+ * @param {string} text - Heading text
+ * @returns {string} Unique ID
+ */
+function generateHeadingId(text) {
+ return text
+ .toLowerCase()
+ .replace(/[^\w\s-]/g, "")
+ .replace(/\s+/g, "-")
+ .replace(/-+/g, "-")
+ .trim();
+}
+
+/**
+ * Convert markdown to HTML with enhanced formatting
+ * - Preserves extra blank lines between paragraphs as visible gaps
+ * (each extra blank line becomes
)
+ * @param {string} markdown - Raw markdown content
+ * @returns {string} HTML content
+ */
+function markdownToHtml(markdown) {
+ if (!markdown) return "";
+
+ // Normalize line endings
+ const GAP_TOKEN = "${t} `,
+ )
+ .replace(
+ /^##### (.*$)/gim,
+ (m, t) => `${t} `,
+ )
+ .replace(
+ /^#### (.*$)/gim,
+ (m, t) => `${t} `,
+ )
+ .replace(
+ /^### (.*$)/gim,
+ (m, t) => `${t} `,
+ )
+ .replace(
+ /^## (.*$)/gim,
+ (m, t) => `${t} `,
+ )
+ .replace(
+ /^# (.*$)/gim,
+ (m, t) => `${t} `,
+ )
+
+ // Code fences (block) and inline code
+ .replace(
+ /```(\w+)?\n([\s\S]*?)\n```/g,
+ (m, lang = "", code) =>
+ `${code}$1")
+
+ // Bold and italic (strong before em to avoid overlap issues)
+ .replace(/\*\*(.+?)\*\*/g, "$1 ")
+ .replace(/\*(.+?)\*/g, "$1 ")
+
+ // Links and images
+ .replace(
+ /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g,
+ (m, alt, src, title = "") =>
+ `${text} `,
+ )
+
+ // Blockquotes
+ .replace(/^(>\s?.+)(\n(>\s?.+))*$/gim, (m) => {
+ const inner = m.replace(/^>\s?/gm, "");
+ return `${inner.replace(
+ /\n{2,}/g,
+ "
",
+ )}
${t} `)
+ .join("");
+ return ``;
+ })
+ .replace(/^(\s*\d+\.\s.+(?:\n\s*\d+\.\s.+)*)/gim, (m) => {
+ const items = m
+ .trim()
+ .split(/\n/)
+ .map((l) => l.replace(/^\s*\d+\.\s+/, ""))
+ .map((t) => `${t} `)
+ .join("");
+ return `${items} `;
+ })
+
+ // Horizontal rules
+ .replace(/^\s*(?:-{3,}|\*{3,})\s*$/gm, "")
+ // 2) Convert single line breaks to
$2
",
+ )
+
+ // Clean up truly empty paragraphs but keep gap paragraphs
+ .replace(/\s*<\/p>/g, "")
+
+ // Turn counted GAP tokens into explicit, styleable gap elements
+ .replace(
+ /
`,
+ )
+ );
+}
+
+/**
+ * Generate a table of contents from headings
+ * @param {Array} headings - Array of heading objects
+ * @returns {string} HTML table of contents
+ */
+export function generateTableOfContents(headings) {
+ if (!headings || headings.length === 0) return "";
+
+ let toc = 'Table of Contents ';
+
+ headings.forEach((heading) => {
+ const indent = (heading.level - 1) * 20;
+ toc += `${heading.text}
+
+
+
+
+
diff --git a/public/assets/Content_Banner_2.svg b/public/assets/Content_Banner_2.svg
new file mode 100644
index 0000000..29c3c2a
--- /dev/null
+++ b/public/assets/Content_Banner_2.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/public/assets/Content_Shape_1.svg b/public/assets/Content_Shape_1.svg
new file mode 100644
index 0000000..f491897
--- /dev/null
+++ b/public/assets/Content_Shape_1.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/public/assets/Content_Shape_2.svg b/public/assets/Content_Shape_2.svg
new file mode 100644
index 0000000..ebe2717
--- /dev/null
+++ b/public/assets/Content_Shape_2.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/public/assets/Content_Thumbnail/Horizontal_1.svg b/public/assets/Content_Thumbnail/Horizontal_1.svg
new file mode 100644
index 0000000..838dafd
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Horizontal_1.svg
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Horizontal_2.svg b/public/assets/Content_Thumbnail/Horizontal_2.svg
new file mode 100644
index 0000000..ff6736d
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Horizontal_2.svg
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Horizontal_3.svg b/public/assets/Content_Thumbnail/Horizontal_3.svg
new file mode 100644
index 0000000..d1a81fa
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Horizontal_3.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Icon_1.svg b/public/assets/Content_Thumbnail/Icon_1.svg
new file mode 100644
index 0000000..b8fd584
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Icon_1.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Icon_2.svg b/public/assets/Content_Thumbnail/Icon_2.svg
new file mode 100644
index 0000000..873505c
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Icon_2.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Icon_3.svg b/public/assets/Content_Thumbnail/Icon_3.svg
new file mode 100644
index 0000000..0bf598d
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Icon_3.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Vertical_1.svg b/public/assets/Content_Thumbnail/Vertical_1.svg
new file mode 100644
index 0000000..ff5f25f
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Vertical_1.svg
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Vertical_2.svg b/public/assets/Content_Thumbnail/Vertical_2.svg
new file mode 100644
index 0000000..0b9aa36
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Vertical_2.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
diff --git a/public/assets/Content_Thumbnail/Vertical_3.svg b/public/assets/Content_Thumbnail/Vertical_3.svg
new file mode 100644
index 0000000..bc3df93
--- /dev/null
+++ b/public/assets/Content_Thumbnail/Vertical_3.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
diff --git a/stories/AskOrganizer.stories.js b/stories/AskOrganizer.stories.js
index 7dc0e03..3e47905 100644
--- a/stories/AskOrganizer.stories.js
+++ b/stories/AskOrganizer.stories.js
@@ -34,7 +34,7 @@ export default {
},
variant: {
control: { type: "select" },
- options: ["centered", "left-aligned", "compact"],
+ options: ["centered", "left-aligned", "compact", "inverse"],
description: "Layout variant for the component",
},
onContactClick: {
@@ -76,3 +76,14 @@ export const Compact = {
onContactClick: (data) => console.log("Contact clicked:", data),
},
};
+
+export const Inverse = {
+ args: {
+ title: "Still have questions?",
+ subtitle: "Get answers from an experienced organizer",
+ buttonText: "Ask an organizer",
+ buttonHref: "#contact",
+ variant: "inverse",
+ onContactClick: (data) => console.log("Contact clicked:", data),
+ },
+};
diff --git a/stories/ConditionalHeader.stories.js b/stories/ConditionalHeader.stories.js
new file mode 100644
index 0000000..198c768
--- /dev/null
+++ b/stories/ConditionalHeader.stories.js
@@ -0,0 +1,38 @@
+import ConditionalHeader from "../app/components/ConditionalHeader";
+
+export default {
+ title: "Components/ConditionalHeader",
+ component: ConditionalHeader,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "The ConditionalHeader component conditionally renders either HomeHeader or Header based on the current pathname.",
+ },
+ },
+ },
+ argTypes: {
+ pathname: {
+ control: "text",
+ description: "Current pathname to determine which header to render",
+ },
+ },
+};
+
+export const HomePage = {
+ args: {
+ pathname: "/",
+ },
+};
+
+export const BlogPage = {
+ args: {
+ pathname: "/blog/sample-article",
+ },
+};
+
+export const OtherPage = {
+ args: {
+ pathname: "/about",
+ },
+};
diff --git a/stories/ContentBanner.stories.js b/stories/ContentBanner.stories.js
new file mode 100644
index 0000000..20c6061
--- /dev/null
+++ b/stories/ContentBanner.stories.js
@@ -0,0 +1,68 @@
+import ContentBanner from "../app/components/ContentBanner";
+
+const mockBlogPost = {
+ slug: "sample-article",
+ frontmatter: {
+ title: "Sample Article Title",
+ description:
+ "This is a sample article description that explains what the article covers.",
+ author: "Sample Author",
+ date: "2025-01-15",
+ },
+ htmlContent:
+ "This is the main content of the sample article.
It has multiple paragraphs.
",
+};
+
+export default {
+ title: "Components/ContentBanner",
+ component: ContentBanner,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "The ContentBanner component displays the header information for blog articles, including title, description, author, and date.",
+ },
+ },
+ },
+ argTypes: {
+ post: {
+ control: "object",
+ description: "Blog post object with frontmatter and content",
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ post: mockBlogPost,
+ },
+};
+
+export const LongTitle = {
+ args: {
+ post: {
+ ...mockBlogPost,
+ frontmatter: {
+ ...mockBlogPost.frontmatter,
+ title:
+ "This is a Very Long Article Title That Tests How the Component Handles Extended Text",
+ description:
+ "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display.",
+ },
+ },
+ },
+};
+
+export const DifferentAuthor = {
+ args: {
+ post: {
+ ...mockBlogPost,
+ frontmatter: {
+ ...mockBlogPost.frontmatter,
+ title: "Article by Different Author",
+ author: "Community Organizer",
+ date: "2025-02-20",
+ },
+ },
+ },
+};
diff --git a/stories/ContentContainer.stories.js b/stories/ContentContainer.stories.js
new file mode 100644
index 0000000..0b29ce9
--- /dev/null
+++ b/stories/ContentContainer.stories.js
@@ -0,0 +1,71 @@
+import ContentContainer from "../app/components/ContentContainer";
+
+const mockPost = {
+ slug: "sample-article",
+ frontmatter: {
+ title: "Sample Article Title",
+ description:
+ "This is a sample article description that explains what the article covers.",
+ author: "Sample Author",
+ date: "2025-01-15",
+ },
+};
+
+export default {
+ title: "Components/ContentContainer",
+ component: ContentContainer,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "The ContentContainer component displays article metadata including title, description, author, and date in a structured layout.",
+ },
+ },
+ },
+ argTypes: {
+ post: {
+ control: "object",
+ description: "Blog post object with frontmatter",
+ },
+ slugOrder: {
+ control: "number",
+ description: "Order index for cycling through different icon styles",
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ post: mockPost,
+ slugOrder: 0,
+ },
+};
+
+export const SecondStyle = {
+ args: {
+ post: mockPost,
+ slugOrder: 1,
+ },
+};
+
+export const ThirdStyle = {
+ args: {
+ post: mockPost,
+ slugOrder: 2,
+ },
+};
+
+export const LongContent = {
+ args: {
+ post: {
+ ...mockPost,
+ frontmatter: {
+ ...mockPost.frontmatter,
+ title: "This is a Very Long Article Title That Tests Text Wrapping",
+ description:
+ "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display within the container.",
+ },
+ },
+ slugOrder: 0,
+ },
+};
diff --git a/stories/ContentThumbnailTemplate.stories.js b/stories/ContentThumbnailTemplate.stories.js
new file mode 100644
index 0000000..be1b21e
--- /dev/null
+++ b/stories/ContentThumbnailTemplate.stories.js
@@ -0,0 +1,90 @@
+import ContentThumbnailTemplate from "../app/components/ContentThumbnailTemplate";
+
+const mockPost = {
+ slug: "sample-article",
+ frontmatter: {
+ title: "Sample Article Title",
+ description:
+ "This is a sample article description that explains what the article covers.",
+ author: "Sample Author",
+ date: "2025-01-15",
+ },
+};
+
+const mockSlugOrder = ["sample-article", "another-article", "third-article"];
+
+export default {
+ title: "Components/ContentThumbnailTemplate",
+ component: ContentThumbnailTemplate,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "The ContentThumbnailTemplate component displays blog post previews with background images, content, and metadata in both vertical and horizontal layouts.",
+ },
+ },
+ },
+ argTypes: {
+ post: {
+ control: "object",
+ description: "Blog post object with frontmatter",
+ },
+ slugOrder: {
+ control: "object",
+ description: "Array of slugs for consistent background cycling",
+ },
+ variant: {
+ control: { type: "select" },
+ options: ["vertical", "horizontal"],
+ description: "Layout variant for the thumbnail",
+ },
+ },
+};
+
+export const Vertical = {
+ args: {
+ post: mockPost,
+ slugOrder: mockSlugOrder,
+ variant: "vertical",
+ },
+};
+
+export const Horizontal = {
+ args: {
+ post: mockPost,
+ slugOrder: mockSlugOrder,
+ variant: "horizontal",
+ },
+};
+
+export const SecondStyle = {
+ args: {
+ post: { ...mockPost, slug: "another-article" },
+ slugOrder: mockSlugOrder,
+ variant: "vertical",
+ },
+};
+
+export const ThirdStyle = {
+ args: {
+ post: { ...mockPost, slug: "third-article" },
+ slugOrder: mockSlugOrder,
+ variant: "vertical",
+ },
+};
+
+export const LongContent = {
+ args: {
+ post: {
+ ...mockPost,
+ frontmatter: {
+ ...mockPost.frontmatter,
+ title: "This is a Very Long Article Title That Tests Text Wrapping",
+ description:
+ "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display within the thumbnail.",
+ },
+ },
+ slugOrder: mockSlugOrder,
+ variant: "vertical",
+ },
+};
diff --git a/stories/Header.responsive.stories.js b/stories/Header.responsive.stories.js
index 39b6ac6..4c958a8 100644
--- a/stories/Header.responsive.stories.js
+++ b/stories/Header.responsive.stories.js
@@ -1,5 +1,4 @@
import Header from "../app/components/Header.js";
-import { within, userEvent } from "@storybook/test";
export default {
title: "Components/Header/Responsive",
@@ -180,140 +179,6 @@ export const ExtraLarge = {
},
};
-// Interactive story for testing user interactions
-export const Interactive = {
- args: {
- onToggle: () => console.log("Navigation toggled"),
- },
- parameters: {
- docs: {
- description: {
- story:
- "Interactive header for testing user interactions. Check the Actions panel to see triggered events.",
- },
- },
- },
- play: async ({ canvasElement, step }) => {
- const canvas = within(canvasElement);
-
- await step("Click navigation items", async () => {
- const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
- await userEvent.click(useCasesLink);
-
- const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
- await userEvent.click(learnLink);
-
- const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
- await userEvent.click(aboutLink);
- });
-
- await step("Click authentication elements", async () => {
- const loginLink = canvas.getByRole("menuitem", {
- name: /log in to your account/i,
- });
- await userEvent.click(loginLink);
-
- const createRuleButton = canvas.getByRole("button", {
- name: /create a new rule with avatar decoration/i,
- });
- await userEvent.click(createRuleButton);
- });
- },
-};
-
-// Story for testing hover states
-export const HoverStates = {
- args: {
- onToggle: () => console.log("Navigation toggled"),
- },
- parameters: {
- docs: {
- description: {
- story:
- "Header with hover states visible. This story captures the visual appearance when elements are hovered.",
- },
- },
- },
- play: async ({ canvasElement, step }) => {
- const canvas = within(canvasElement);
-
- await step("Hover over navigation items", async () => {
- const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
- await userEvent.hover(useCasesLink);
- // Wait for hover state to be visible
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
- await userEvent.hover(learnLink);
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
- await userEvent.hover(aboutLink);
- await new Promise((resolve) => setTimeout(resolve, 100));
- });
-
- await step("Hover over authentication elements", async () => {
- const loginLink = canvas.getByRole("menuitem", {
- name: /log in to your account/i,
- });
- await userEvent.hover(loginLink);
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const createRuleButton = canvas.getByRole("button", {
- name: /create a new rule with avatar decoration/i,
- });
- await userEvent.hover(createRuleButton);
- await new Promise((resolve) => setTimeout(resolve, 100));
- });
- },
-};
-
-// Story for testing focus states
-export const FocusStates = {
- args: {
- onToggle: () => console.log("Navigation toggled"),
- },
- parameters: {
- docs: {
- description: {
- story:
- "Header with focus states visible. This story captures the visual appearance when elements are focused.",
- },
- },
- },
- play: async ({ canvasElement, step }) => {
- const canvas = within(canvasElement);
-
- await step("Focus on navigation items", async () => {
- const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
- useCasesLink.focus();
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
- learnLink.focus();
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
- aboutLink.focus();
- await new Promise((resolve) => setTimeout(resolve, 100));
- });
-
- await step("Focus on authentication elements", async () => {
- const loginLink = canvas.getByRole("menuitem", {
- name: /log in to your account/i,
- });
- loginLink.focus();
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const createRuleButton = canvas.getByRole("button", {
- name: /create a new rule with avatar decoration/i,
- });
- createRuleButton.focus();
- await new Promise((resolve) => setTimeout(resolve, 100));
- });
- },
-};
-
// Story for testing with long content
export const WithLongContent = {
args: {
diff --git a/stories/RelatedArticles.stories.js b/stories/RelatedArticles.stories.js
new file mode 100644
index 0000000..869aa43
--- /dev/null
+++ b/stories/RelatedArticles.stories.js
@@ -0,0 +1,121 @@
+import RelatedArticles from "../app/components/RelatedArticles";
+
+const mockRelatedPosts = [
+ {
+ slug: "related-article-1",
+ frontmatter: {
+ title: "Related Article One",
+ description: "This is the first related article description.",
+ author: "Author One",
+ date: "2025-01-10",
+ },
+ },
+ {
+ slug: "related-article-2",
+ frontmatter: {
+ title: "Related Article Two",
+ description: "This is the second related article description.",
+ author: "Author Two",
+ date: "2025-01-12",
+ },
+ },
+ {
+ slug: "related-article-3",
+ frontmatter: {
+ title: "Related Article Three",
+ description: "This is the third related article description.",
+ author: "Author Three",
+ date: "2025-01-14",
+ },
+ },
+];
+
+export default {
+ title: "Components/RelatedArticles",
+ component: RelatedArticles,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "The RelatedArticles component displays a carousel of related blog posts with progress bars on mobile and a scrollable slider on desktop.",
+ },
+ },
+ },
+ argTypes: {
+ relatedPosts: {
+ control: "object",
+ description: "Array of related blog post objects",
+ },
+ currentPostSlug: {
+ control: "text",
+ description: "Slug of the current post to exclude from related articles",
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ relatedPosts: mockRelatedPosts,
+ currentPostSlug: "current-article",
+ },
+};
+
+export const TwoArticles = {
+ args: {
+ relatedPosts: mockRelatedPosts.slice(0, 2),
+ currentPostSlug: "current-article",
+ },
+};
+
+export const OneArticle = {
+ args: {
+ relatedPosts: mockRelatedPosts.slice(0, 1),
+ currentPostSlug: "current-article",
+ },
+};
+
+export const Empty = {
+ args: {
+ relatedPosts: [],
+ currentPostSlug: "current-article",
+ },
+};
+
+export const LongTitles = {
+ args: {
+ relatedPosts: [
+ {
+ slug: "long-title-1",
+ frontmatter: {
+ title:
+ "This is a Very Long Article Title That Tests Text Wrapping and Display",
+ description:
+ "This is a longer description that tests how the component handles extended text content.",
+ author: "Author One",
+ date: "2025-01-10",
+ },
+ },
+ {
+ slug: "long-title-2",
+ frontmatter: {
+ title: "Another Very Long Article Title for Testing Purposes",
+ description:
+ "Another longer description for testing text handling in the component.",
+ author: "Author Two",
+ date: "2025-01-12",
+ },
+ },
+ {
+ slug: "long-title-3",
+ frontmatter: {
+ title: "Third Long Article Title to Complete the Set",
+ description:
+ "Final longer description to test the component's text handling capabilities.",
+ author: "Author Three",
+ date: "2025-01-14",
+ },
+ },
+ ],
+ currentPostSlug: "current-article",
+ },
+};
diff --git a/tests/accessibility/e2e/wcag-compliance.spec.ts b/tests/accessibility/e2e/wcag-compliance.spec.ts
index 060f1d1..24fe3b9 100644
--- a/tests/accessibility/e2e/wcag-compliance.spec.ts
+++ b/tests/accessibility/e2e/wcag-compliance.spec.ts
@@ -177,14 +177,20 @@ test.describe("Accessibility Testing", () => {
expect(textCount).toBeGreaterThan(0);
// Check that text elements have sufficient contrast by verifying they're visible
- for (let i = 0; i < Math.min(textCount, 5); i++) {
+ let visibleTextElements = 0;
+ for (let i = 0; i < Math.min(textCount, 10); i++) {
const element = textElements.nth(i);
const isVisible = await element.isVisible();
if (isVisible) {
const text = await element.textContent();
- expect(text?.trim()).toBeTruthy();
+ if (text && text.trim().length > 0) {
+ visibleTextElements++;
+ }
}
}
+
+ // Ensure we have at least some visible text elements
+ expect(visibleTextElements).toBeGreaterThan(0);
});
test("focus indicators - visible focus", async ({ page }) => {
diff --git a/tests/e2e/BlogNavigation.e2e.test.jsx b/tests/e2e/BlogNavigation.e2e.test.jsx
new file mode 100644
index 0000000..8d4777d
--- /dev/null
+++ b/tests/e2e/BlogNavigation.e2e.test.jsx
@@ -0,0 +1,201 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ContentThumbnailTemplate from "../../app/components/ContentThumbnailTemplate";
+import RelatedArticles from "../../app/components/RelatedArticles";
+
+// Mock Next.js navigation
+const mockPush = vi.fn();
+vi.mock("next/navigation", () => ({
+ useRouter: () => ({ push: mockPush }),
+ notFound: vi.fn(),
+ usePathname: vi.fn(() => "/"),
+}));
+
+// Mock Next.js Link to trigger navigation
+vi.mock("next/link", () => ({
+ default: ({ children, href, ...props }) => (
+ {
+ e.preventDefault();
+ mockPush(href);
+ }}
+ >
+ {children}
+
+ ),
+}));
+
+// Mock asset utils
+vi.mock("../../lib/assetUtils", () => ({
+ getAssetPath: vi.fn((asset) => `/assets/${asset}`),
+ ASSETS: {
+ CONTENT_THUMBNAIL_1: "Content_Thumbnail_1.svg",
+ CONTENT_THUMBNAIL_2: "Content_Thumbnail_2.svg",
+ CONTENT_THUMBNAIL_3: "Content_Thumbnail_3.svg",
+ CONTENT_ICON_1: "Content_Icon_1.svg",
+ CONTENT_ICON_2: "Content_Icon_2.svg",
+ CONTENT_ICON_3: "Content_Icon_3.svg",
+ },
+}));
+
+const mockBlogPost = {
+ slug: "resolving-active-conflicts",
+ frontmatter: {
+ title: "Resolving Active Conflicts",
+ description:
+ "Practical steps for resolving conflicts while maintaining trust",
+ author: "Test Author",
+ date: "2025-04-15",
+ },
+};
+
+const mockRelatedPosts = [
+ {
+ slug: "operational-security-mutual-aid",
+ frontmatter: {
+ title: "Operational Security for Mutual Aid",
+ description: "Tactics to protect members, secure communication",
+ author: "Test Author",
+ date: "2025-04-14",
+ },
+ },
+ {
+ slug: "making-decisions-without-hierarchy",
+ frontmatter: {
+ title: "Making Decisions Without Hierarchy",
+ description:
+ "A brief guide to collaborative nonhierarchical decision making",
+ author: "Test Author",
+ date: "2025-04-13",
+ },
+ },
+];
+
+describe("Blog Navigation E2E", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("ContentThumbnailTemplate Navigation", () => {
+ it("should navigate to blog post when thumbnail is clicked", () => {
+ render(This is the main content of the test article.
It has multiple paragraphs.
",
+};
+
+const mockRelatedPosts = [
+ {
+ slug: "related-article-1",
+ frontmatter: {
+ title: "Related Article 1",
+ description: "First related article",
+ author: "Test Author",
+ date: "2025-04-14",
+ },
+ },
+ {
+ slug: "related-article-2",
+ frontmatter: {
+ title: "Related Article 2",
+ description: "Second related article",
+ author: "Test Author",
+ date: "2025-04-13",
+ },
+ },
+];
+
+describe("Content Page Rendering E2E", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("ContentBanner Component", () => {
+ it("should render blog post banner with correct information", () => {
+ render(
+ ,
+ );
+
+ // Verify semantic structure
+ expect(screen.getByRole("main")).toBeInTheDocument();
+ expect(screen.getByRole("region")).toBeInTheDocument(); // AskOrganizer has role="region"
+
+ // Verify headings hierarchy
+ const h3 = screen.getByRole("heading", { level: 3 });
+ expect(h3).toHaveTextContent("Test Article Title");
+ });
+ });
+});
diff --git a/tests/e2e/LogoNavigation.e2e.test.jsx b/tests/e2e/LogoNavigation.e2e.test.jsx
new file mode 100644
index 0000000..7e311c1
--- /dev/null
+++ b/tests/e2e/LogoNavigation.e2e.test.jsx
@@ -0,0 +1,57 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Logo from "../../app/components/Logo";
+
+// Mock Next.js Link component
+vi.mock("next/link", () => ({
+ default: ({ children, href, ...props }) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock asset utils
+vi.mock("../../lib/assetUtils", () => ({
+ getAssetPath: vi.fn((asset) => `/assets/${asset}`),
+ ASSETS: {
+ LOGO: "CommunityRule_Logo.svg",
+ },
+}));
+
+describe("Logo Navigation E2E", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should navigate to homepage when logo is clicked", () => {
+ render( tag)
+ expect(logoLink.tagName).toBe("A");
+ });
+
+ it("should have proper accessibility attributes", () => {
+ render(Main Title ");
+ expect(result).toContain("Subtitle ");
+ expect(result).toContain("bold ");
+ expect(result).toContain("italic ");
+ expect(result).toContain(' Link text ');
+ });
+
+ it("should handle empty markdown gracefully", () => {
+ const result = markdownToHtml("");
+
+ expect(result).toBe("");
+ });
+
+ it("should handle markdown with special characters", () => {
+ const markdown = `# Title with Special Characters: & < > " '
+
+Content with **bold** and *italic* text.`;
+
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain(
+ "Title with Special Characters: & < > \" ' ",
+ );
+ expect(result).toContain("bold ");
+ expect(result).toContain("italic ");
+ });
+ });
+});
diff --git a/tests/integration/RelatedArticles.integration.test.jsx b/tests/integration/RelatedArticles.integration.test.jsx
new file mode 100644
index 0000000..44a5132
--- /dev/null
+++ b/tests/integration/RelatedArticles.integration.test.jsx
@@ -0,0 +1,214 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import RelatedArticles from "../../app/components/RelatedArticles";
+
+// Mock ContentThumbnailTemplate
+vi.mock("../../app/components/ContentThumbnailTemplate", () => ({
+ default: ({ post, variant }) => (
+
+ ),
+}));
+
+// Mock blog post data
+const mockRelatedPosts = [
+ {
+ slug: "resolving-active-conflicts",
+ frontmatter: {
+ title: "Resolving Active Conflicts",
+ description:
+ "Practical steps for resolving conflicts while maintaining trust",
+ author: "Test Author",
+ date: "2025-04-15",
+ },
+ },
+ {
+ slug: "operational-security-mutual-aid",
+ frontmatter: {
+ title: "Operational Security for Mutual Aid",
+ description:
+ "Tactics to protect members, secure communication, and prevent infiltration",
+ author: "Test Author",
+ date: "2025-04-14",
+ },
+ },
+ {
+ slug: "making-decisions-without-hierarchy",
+ frontmatter: {
+ title: "Making Decisions Without Hierarchy",
+ description:
+ "A brief guide to collaborative nonhierarchical decision making",
+ author: "Test Author",
+ date: "2025-04-13",
+ },
+ },
+ {
+ slug: "building-community-trust",
+ frontmatter: {
+ title: "Building Community Trust",
+ description: "Strategies for fostering trust in community organizations",
+ author: "Test Author",
+ date: "2025-04-12",
+ },
+ },
+];
+
+describe("Related Articles Integration", () => {
+ beforeEach(() => {
+ // Mock window.innerWidth for responsive tests
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ configurable: true,
+ value: 1024, // Desktop width
+ });
+ });
+
+ it("should filter out current post from related articles", () => {
+ render(
+
+ {children}
+
+ ),
+ };
+});
+
+// Mock content processing
+vi.mock("../../lib/content", () => ({
+ getBlogPostBySlug: vi.fn(),
+ getAllBlogPosts: vi.fn(),
+}));
+
+// Mock components
+vi.mock("../../app/components/ContentBanner", () => {
+ return {
+ default: ({ post }) => (
+
+
{post.frontmatter.title}
+
{post.frontmatter.description}
+
+
Related Articles
+ {relatedPosts.map((post) => (
+
+ {post.frontmatter.title}
+
+ ))}
+
+
{title}
+
{subtitle}
+
{buttonText}
+
This is the article content with bold text and italic text .
",
+};
+
+const mockRelatedPosts = [
+ {
+ slug: "related-1",
+ frontmatter: {
+ title: "Related Article 1",
+ description: "First related article",
+ author: "Test Author",
+ date: "2025-04-10",
+ },
+ },
+ {
+ slug: "related-2",
+ frontmatter: {
+ title: "Related Article 2",
+ description: "Second related article",
+ author: "Test Author",
+ date: "2025-04-12",
+ },
+ },
+];
+
+describe("BlogPostPage", () => {
+ beforeEach(async () => {
+ // Reset mocks
+ vi.clearAllMocks();
+
+ // Mock the content functions
+ const { getBlogPostBySlug, getAllBlogPosts } = await import(
+ "../../lib/content"
+ );
+ vi.mocked(getBlogPostBySlug).mockReturnValue(mockPost);
+ vi.mocked(getAllBlogPosts).mockReturnValue([mockPost, ...mockRelatedPosts]);
+ });
+
+ it("renders the blog post page with correct structure", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ // Check main container (it's a div, not main)
+ const mainContainer = document.querySelector("div.min-h-screen");
+ expect(mainContainer).toBeInTheDocument();
+ expect(mainContainer).toHaveClass(
+ "min-h-screen",
+ "bg-[#F4F3F1]",
+ "relative",
+ "overflow-hidden",
+ );
+ });
+
+ it("renders the content banner", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ expect(screen.getByTestId("content-banner")).toBeInTheDocument();
+ expect(screen.getByText("Test Article Title")).toBeInTheDocument();
+ expect(
+ screen.getByText("This is a test article description"),
+ ).toBeInTheDocument();
+ });
+
+ it("renders the article content", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ const article = document.querySelector("article");
+ expect(article).toBeInTheDocument();
+ expect(article).toHaveClass(
+ "p-[var(--spacing-scale-024)]",
+ "sm:py-[var(--spacing-scale-032)]",
+ );
+
+ // Check content is rendered
+ expect(screen.getByText(/This is the article content/)).toBeInTheDocument();
+ expect(screen.getByText("bold text")).toBeInTheDocument();
+ expect(screen.getByText("italic text")).toBeInTheDocument();
+ });
+
+ it("renders the related articles section", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ expect(screen.getByTestId("related-articles")).toBeInTheDocument();
+ expect(screen.getByText("Related Articles")).toBeInTheDocument();
+ expect(screen.getByTestId("related-related-1")).toBeInTheDocument();
+ expect(screen.getByTestId("related-related-2")).toBeInTheDocument();
+ });
+
+ it("renders the ask organizer section", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
+ expect(screen.getByText("Still have questions?")).toBeInTheDocument();
+ expect(
+ screen.getByText("Get answers from an experienced organizer"),
+ ).toBeInTheDocument();
+ expect(screen.getByText("Ask an organizer")).toBeInTheDocument();
+ });
+
+ it("renders decorative shapes", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ // Check for decorative shapes
+ const shapes = screen.getAllByAltText("");
+ expect(shapes).toHaveLength(2);
+
+ // Check shape sources
+ expect(shapes[0]).toHaveAttribute("src", "/assets/Content_Shape_1.svg");
+ expect(shapes[1]).toHaveAttribute("src", "/assets/Content_Shape_2.svg");
+ });
+
+ it("applies correct styling to article content", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ const contentDiv = screen
+ .getByText(/This is the article content/)
+ .closest("div.post-body");
+ expect(contentDiv).toHaveClass("post-body");
+ expect(contentDiv).toHaveClass("-mt-[var(--spacing-scale-048)]");
+ expect(contentDiv).toHaveClass(
+ "text-[var(--color-content-inverse-primary)]",
+ );
+ expect(contentDiv).toHaveClass("text-[16px]");
+ expect(contentDiv).toHaveClass("leading-[24px]");
+ });
+
+ it("applies responsive text sizing", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ const contentDiv = screen
+ .getByText(/This is the article content/)
+ .closest("div.post-body");
+ expect(contentDiv).toHaveClass("sm:text-[18px]");
+ expect(contentDiv).toHaveClass("sm:leading-[130%]");
+ expect(contentDiv).toHaveClass("lg:text-[24px]");
+ expect(contentDiv).toHaveClass("lg:leading-[32px]");
+ expect(contentDiv).toHaveClass("xl:text-[32px]");
+ expect(contentDiv).toHaveClass("xl:leading-[40px]");
+ });
+
+ it("applies responsive max-width constraints", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ const contentDiv = screen
+ .getByText(/This is the article content/)
+ .closest("div.post-body");
+ expect(contentDiv).toHaveClass("sm:mx-auto");
+ expect(contentDiv).toHaveClass("sm:max-w-[390px]");
+ expect(contentDiv).toHaveClass("md:max-w-[472px]");
+ expect(contentDiv).toHaveClass("lg:max-w-[700px]");
+ expect(contentDiv).toHaveClass("xl:max-w-[904px]");
+ });
+
+ it("includes structured data scripts", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ // Check for script elements using querySelector since RTL ignores them
+ const scripts = document.querySelectorAll(
+ 'script[type="application/ld+json"]',
+ );
+ expect(scripts).toHaveLength(2);
+
+ // Check that scripts have the correct type and content
+ scripts.forEach((script) => {
+ expect(script).toHaveAttribute("type", "application/ld+json");
+ expect(script.innerHTML).toBeTruthy();
+ });
+ });
+
+ it("handles missing post gracefully", async () => {
+ const { getBlogPostBySlug } = await import("../../lib/content");
+ vi.mocked(getBlogPostBySlug).mockReturnValue(null);
+
+ // The component should throw an error when post is null
+ // This happens because notFound() is called
+ await expect(
+ BlogPostPage({ params: { slug: "non-existent" } }),
+ ).rejects.toThrow();
+ });
+
+ it("filters out current post from related articles", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ // Current post should not appear in related articles
+ expect(
+ screen.queryByTestId("related-test-article"),
+ ).not.toBeInTheDocument();
+
+ // Other related posts should appear
+ expect(screen.getByTestId("related-related-1")).toBeInTheDocument();
+ expect(screen.getByTestId("related-related-2")).toBeInTheDocument();
+ });
+
+ it("applies correct positioning to decorative shapes", async () => {
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "test-article" },
+ });
+ render(BlogPostPageComponent);
+
+ const shapes = screen.getAllByAltText("");
+
+ // First shape (right side)
+ const rightShape = shapes[0].closest("div");
+ expect(rightShape).toHaveClass(
+ "hidden",
+ "md:block",
+ "absolute",
+ "top-1/4",
+ "right-0",
+ "pointer-events-none",
+ "z-10",
+ );
+
+ // Second shape (left side)
+ const leftShape = shapes[1].closest("div");
+ expect(leftShape).toHaveClass(
+ "hidden",
+ "md:block",
+ "absolute",
+ "top-1/2",
+ "left-0",
+ "pointer-events-none",
+ "z-10",
+ );
+ });
+
+ it("handles malformed post data gracefully", async () => {
+ const malformedPost = {
+ slug: "malformed",
+ frontmatter: {
+ title: "Malformed Post",
+ description: "A malformed post for testing",
+ author: "Test Author",
+ date: "2025-01-15",
+ },
+ htmlContent: "Content
",
+ };
+
+ const { getBlogPostBySlug } = await import("../../lib/content");
+ vi.mocked(getBlogPostBySlug).mockReturnValue(malformedPost);
+
+ const BlogPostPageComponent = await BlogPostPage({
+ params: { slug: "malformed" },
+ });
+ render(BlogPostPageComponent);
+
+ expect(screen.getByText("Malformed Post")).toBeInTheDocument();
+ expect(screen.getByText("Content")).toBeInTheDocument();
+ });
+});
diff --git a/tests/unit/ContentBanner.test.jsx b/tests/unit/ContentBanner.test.jsx
new file mode 100644
index 0000000..97143c0
--- /dev/null
+++ b/tests/unit/ContentBanner.test.jsx
@@ -0,0 +1,242 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ContentBanner from "../../app/components/ContentBanner";
+
+// Mock Next.js components
+vi.mock("next/link", () => {
+ return {
+ default: ({ children, href, ...props }) => (
+
+ {children}
+
+ ),
+ };
+});
+
+// Mock asset utils
+vi.mock("../../lib/assetUtils", () => ({
+ getAssetPath: vi.fn((asset) => `/assets/${asset}`),
+ ASSETS: {
+ CONTENT_BANNER_1: "Content_Banner_1.svg",
+ CONTENT_BANNER_2: "Content_Banner_2.svg",
+ },
+}));
+
+// Mock blog post data
+const mockPost = {
+ slug: "test-article",
+ frontmatter: {
+ title: "Test Article Title",
+ description: "This is a test article description",
+ author: "Test Author",
+ date: "2025-04-15",
+ },
+};
+
+describe("ContentBanner", () => {
+ it("renders the banner with correct structure", () => {
+ render(
+ {children}
+
+ ),
+ };
+});
+
+vi.mock("next/image", () => {
+ return {
+ default: ({ src, alt, ...props }) => Heading ");
+ expect(result).toContain("This is a paragraph.");
+ });
+
+ it("converts bold text", () => {
+ const markdown = "This is **bold** text.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("bold ");
+ });
+
+ it("converts italic text", () => {
+ const markdown = "This is *italic* text.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("italic ");
+ });
+
+ it("converts links", () => {
+ const markdown = "Visit [Google](https://google.com) for search.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain('Google ');
+ });
+
+ it("converts line breaks to Paragraph 1
");
+ expect(result).toContain("Paragraph 2
");
+ expect(result).toContain("Paragraph 3
");
+ });
+
+ it("adds md-gap class to paragraphs", () => {
+ const markdown = "Paragraph 1\n\nParagraph 2";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain('Paragraph 1
');
+ expect(result).toContain('Paragraph 2
');
+ });
+
+ it("converts unordered lists", () => {
+ const markdown = "- Item 1\n- Item 2\n- Item 3";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("Item 1 ");
+ expect(result).toContain("Item 2 ");
+ expect(result).toContain("Item 3 ");
+ expect(result).toContain(" ");
+ });
+
+ it("converts ordered lists", () => {
+ const markdown = "1. First item\n2. Second item\n3. Third item";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("First item ");
+ expect(result).toContain("Second item ");
+ expect(result).toContain("Third item ");
+ expect(result).toContain(" ");
+ });
+
+ it("converts code blocks", () => {
+ const markdown = "```javascript\nconst x = 1;\n```";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("");
+ expect(result).toContain("const x = 1;");
+ });
+
+ it("converts inline code", () => {
+ const markdown = "Use `console.log()` to debug.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("console.log()");
+ });
+
+ it("converts blockquotes", () => {
+ const markdown = "> This is a quote\n> with multiple lines";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("This is a quote");
+ expect(result).toContain("with multiple lines");
+ expect(result).toContain(" ");
+ });
+
+ it("converts horizontal rules", () => {
+ const markdown = "Text above\n\n---\n\nText below";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("Title ");
+ expect(result).toContain("bold ");
+ expect(result).toContain('link ');
+ expect(result).toContain("");
+ expect(result).toContain("List item 1 ");
+ expect(result).toContain("List item 2 ");
+ expect(result).toContain("code");
+ });
+
+ it("handles empty input", () => {
+ const result = markdownToHtml("");
+ expect(result).toBe("");
+ });
+
+ it("handles whitespace-only input", () => {
+ const result = markdownToHtml(" \n\n ");
+ expect(result).toBe("");
+ });
+
+ it("preserves HTML entities", () => {
+ const markdown = "Use < and > for HTML tags.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("<");
+ expect(result).toContain(">");
+ });
+
+ it("handles complex nested structures", () => {
+ const markdown =
+ "# Main Title\n\n## Subtitle\n\nThis is a paragraph with **bold** and *italic* text.\n\n1. First item with `code`\n2. Second item with [link](https://example.com)\n\n> This is a quote\n> with **bold** text\n\n```javascript\nconst example = 'test';\n```";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("Main Title ");
+ expect(result).toContain("Subtitle ");
+ expect(result).toContain("bold ");
+ expect(result).toContain("italic ");
+ expect(result).toContain("");
+ expect(result).toContain("code");
+ expect(result).toContain('link ');
+ expect(result).toContain("");
+ expect(result).toContain("");
+ });
+
+ it("handles malformed markdown gracefully", () => {
+ const markdown = "**Unclosed bold\n\n*Unclosed italic\n\n[Unclosed link";
+ const result = markdownToHtml(markdown);
+
+ // Should not throw an error and should handle gracefully
+ expect(typeof result).toBe("string");
+ expect(result.length).toBeGreaterThan(0);
+ });
+
+ it("converts headings of different levels", () => {
+ const markdown = "# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("H1 ");
+ expect(result).toContain("H2 ");
+ expect(result).toContain("H3 ");
+ expect(result).toContain("H4 ");
+ expect(result).toContain("H5 ");
+ expect(result).toContain("H6 ");
+ });
+
+ it("handles tables", () => {
+ const markdown =
+ "| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain(" ");
+ expect(result).toContain("");
+ expect(result).toContain("Header 1 ");
+ expect(result).toContain("Header 2 ");
+ expect(result).toContain(" ");
+ expect(result).toContain("Cell 1 ");
+ expect(result).toContain("Cell 2 ");
+ });
+ });
+});
diff --git a/tests/unit/RelatedArticles.test.jsx b/tests/unit/RelatedArticles.test.jsx
new file mode 100644
index 0000000..fac88c2
--- /dev/null
+++ b/tests/unit/RelatedArticles.test.jsx
@@ -0,0 +1,395 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import RelatedArticles from "../../app/components/RelatedArticles";
+
+// Mock Next.js components
+vi.mock("next/link", () => {
+ return {
+ default: ({ children, href, ...props }) => (
+
+ {children}
+
+ ),
+ };
+});
+
+// Mock ContentThumbnailTemplate
+vi.mock("../../app/components/ContentThumbnailTemplate", () => {
+ return {
+ default: ({ post }) => (
+
+ ),
+ };
+});
+
+// Mock blog post data
+const mockRelatedPosts = [
+ {
+ slug: "related-article-1",
+ frontmatter: {
+ title: "Related Article 1",
+ description: "This is the first related article",
+ author: "Test Author",
+ date: "2025-04-10",
+ },
+ },
+ {
+ slug: "related-article-2",
+ frontmatter: {
+ title: "Related Article 2",
+ description: "This is the second related article",
+ author: "Test Author",
+ date: "2025-04-12",
+ },
+ },
+ {
+ slug: "related-article-3",
+ frontmatter: {
+ title: "Related Article 3",
+ description: "This is the third related article",
+ author: "Test Author",
+ date: "2025-04-14",
+ },
+ },
+];
+
+describe("RelatedArticles", () => {
+ beforeEach(() => {
+ // Mock window.innerWidth for responsive tests
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ configurable: true,
+ value: 1024, // Desktop width
+ });
+ });
+
+ it("renders the section with correct structure", () => {
+ render(
+
)}
{children}
diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js
index cac8d03..1f9d20a 100644
--- a/app/components/HomeHeader.js
+++ b/app/components/HomeHeader.js
@@ -29,7 +29,7 @@ export default function HomeHeader() {
const navigationItems = [
{ href: "#", text: "Use cases", extraPadding: true },
- { href: "#", text: "Learn" },
+ { href: "/learn", text: "Learn" },
{ href: "#", text: "About" },
];
diff --git a/app/components/ImagePlaceholder.js b/app/components/ImagePlaceholder.js
new file mode 100644
index 0000000..c762aaa
--- /dev/null
+++ b/app/components/ImagePlaceholder.js
@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Simple image placeholder component for testing
+ * Generates colored backgrounds with text overlays
+ */
+const ImagePlaceholder = ({
+ width = 260,
+ height = 390,
+ text = "Blog Image",
+ color = "blue",
+ className = "",
+}) => {
+ const colors = {
+ blue: "bg-blue-500",
+ green: "bg-green-500",
+ purple: "bg-purple-500",
+ red: "bg-red-500",
+ orange: "bg-orange-500",
+ teal: "bg-teal-500",
+ };
+
+ const bgColor = colors[color] || colors.blue;
+
+ return (
+ 
-