CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update learn page

Browse Source
This commit is contained in:
adilallo
2026-05-20 22:17:00 -06:00
parent 7ee6282c1a
commit 1688ac85c9
45 changed files with 1203 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(marketing)/blog/[slug]/page.tsx
+6 -60
View File
@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
import {
getBlogPostBySlug,
getAllBlogPosts as getAllPosts,
type BlogPost,
getRelatedBlogPosts,
} from "../../../../lib/content";
import { logger } from "../../../../lib/logger";
import ContentBanner from "../../../components/sections/ContentBanner";
@@ -111,66 +111,12 @@ export default async function BlogPostPage({ params }: PageProps) {
// Get related articles with improved algorithm
const allPosts = getAllPosts();
// Create slug order for consistent background cycling
const slugOrder = allPosts.map((post) => post.slug);
// Simple related articles algorithm based on content similarity
const getRelatedArticles = (
currentPost: BlogPost,
allPosts: BlogPost[],
limit = 3,
): BlogPost[] => {
const otherPosts = allPosts.filter((p) => p.slug !== currentPost.slug);
// Score posts based on content similarity
const scoredPosts = otherPosts.map((post) => {
let score = 0;
// Check for similar keywords in title and description
const currentTitle = currentPost.frontmatter.title.toLowerCase();
const currentDesc = currentPost.frontmatter.description.toLowerCase();
const postTitle = post.frontmatter.title.toLowerCase();
const postDesc = post.frontmatter.description.toLowerCase();
// Common keywords that indicate similarity
const keywords = [
"community",
"conflict",
"decision",
"governance",
"security",
"trust",
"collaboration",
"organization",
];
keywords.forEach((keyword) => {
if (currentTitle.includes(keyword) && postTitle.includes(keyword))
score += 3;
if (currentDesc.includes(keyword) && postDesc.includes(keyword))
score += 2;
if (currentTitle.includes(keyword) && postDesc.includes(keyword))
score += 1;
if (currentDesc.includes(keyword) && postTitle.includes(keyword))
score += 1;
});
return { ...post, score };
});
// Sort by score and return top posts
return scoredPosts
.sort((a, b) => b.score - a.score)
.slice(0, limit)
.map(({ score, ...post }) => {
// Score used for sorting, removed from final result
void score;
return post;
});
};
const relatedArticles = getRelatedArticles(post, allPosts);
const relatedArticles = getRelatedBlogPosts(
post.slug,
post.frontmatter.related,
3,
);
// Generate structured data for search engines
const structuredData = {
app/(marketing)/learn/page.tsx
+10 -24
View File
@@ -6,10 +6,8 @@ import AskOrganizer from "../../components/sections/AskOrganizer";
import { getAllBlogPosts } from "../../../lib/content";
export default function LearnPage() {
// Get real blog posts from the content system
const allPosts = getAllBlogPosts();
// Use direct message access for server components
const t = (key: string) => getTranslation(messages, key);
const contentLockupData = {
@@ -31,36 +29,24 @@ export default function LearnPage() {
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
<ContentLockup {...contentLockupData} />
{/* Horizontal list (below smd) */}
<div className="smd:hidden sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)]">
{allPosts.slice(0, 3).map((post, index) => (
{allPosts.map((post) => (
<ContentThumbnailTemplate
key={`${post.slug}-${index}-${
post.frontmatter.thumbnail?.horizontal || "default"
}`}
key={`${post.slug}-horizontal`}
post={post}
variant="horizontal"
/>
))}
</div>
{/* smd and up: 2x3 grid of vertical thumbnails, repeat posts as needed */}
<div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)]">
{Array.from({ length: 16 }).map((_, i) => {
const post = allPosts[i % allPosts.length];
return (
<ContentThumbnailTemplate
key={`grid-${post.slug}-${i}-${
post.frontmatter.thumbnail?.vertical || "default"
}`}
post={post}
variant="vertical"
className={`${i >= 6 ? "hidden lg2:block" : ""} ${
i >= 10 ? "xl:hidden" : ""
}`}
/>
);
})}
<div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] [&>*]:min-w-0">
{allPosts.map((post) => (
<ContentThumbnailTemplate
key={`${post.slug}-vertical`}
post={post}
variant="vertical"
/>
))}
</div>
<AskOrganizer {...askOrganizerData} />
app/components/content/ContentContainer/ContentContainer.container.tsx
+27 -18
View File
@@ -1,7 +1,16 @@
"use client";
/**
* Figma: "Components" / Container (19614-14838, 19003-23432).
* XS thumbnail copy: title 18/22, description 12/16, metadata 10/14.
*/
import { memo } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import {
getAssetPath,
ASSETS,
contentBlogTagPath,
CONTENT_CATALOG_SLUG_ORDER,
} from "../../../../lib/assetUtils";
import ContentContainerView from "./ContentContainer.view";
import type { ContentContainerProps } from "./ContentContainer.types";
@@ -25,7 +34,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const bodyColor = onLight
? "text-[var(--color-content-default-secondary)]"
: "text-[var(--color-content-inverse-brand-royal)]";
// Get the corresponding icon based on the same logic as background images
const getIconImage = (slug: string): string => {
const icons = [
getAssetPath(ASSETS.ICON_1),
@@ -35,23 +44,24 @@ const ContentContainerContainer = memo<ContentContainerProps>(
if (!slug) return icons[0];
// Use the same cycling logic as background images to ensure matching
const slugOrder = [
"building-community-trust",
"operational-security-mutual-aid",
"making-decisions-without-hierarchy",
"resolving-active-conflicts",
];
const index = slugOrder.indexOf(slug);
const finalIndex = index >= 0 ? index % icons.length : 0;
return icons[finalIndex];
const index = CONTENT_CATALOG_SLUG_ORDER.indexOf(
slug as (typeof CONTENT_CATALOG_SLUG_ORDER)[number],
);
if (index >= 0) {
return contentBlogTagPath(slug);
}
const fallbackIndex =
Math.abs(
slug.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0),
) % icons.length;
return icons[fallbackIndex];
};
const iconImage = leadingImageSrc ?? getIconImage(post.slug);
const iconAlt =
leadingImageAlt ?? `Icon for ${post.frontmatter.title}`;
// Format date
const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
"en-US",
{
@@ -60,10 +70,9 @@ const ContentContainerContainer = memo<ContentContainerProps>(
},
);
// Choose styling based on size prop
const containerClasses =
size === "xs"
? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
? "relative z-20 flex h-full flex-col gap-[var(--measures-spacing-012)]"
: "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
const contentGapClasses =
@@ -78,7 +87,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const titleClasses =
size === "xs"
? `font-bricolage font-medium text-[18px] leading-[120%] transition-colors ${titleColor}`
? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
: `font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] transition-colors ${titleColor}`;
const descriptionClasses =
@@ -88,12 +97,12 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const authorClasses =
size === "xs"
? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
const dateClasses =
size === "xs"
? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
return (
app/components/content/ContentContainer/ContentContainer.view.tsx
+2 -3
View File
@@ -20,7 +20,7 @@ function ContentContainerView({
return (
<div
className={containerClasses}
style={size === "responsive" ? {} : { width }}
style={size === "responsive" || size === "xs" ? {} : { width }}
>
{/* Content Container - gap between icon and text */}
<div className={contentGapClasses}>
@@ -45,8 +45,7 @@ function ContentContainerView({
</div>
</div>
{/* Metadata Container - horizontal with 8px gap */}
<div className="flex items-center gap-[var(--measures-spacing-008)]">
<div className="flex min-w-0 items-end gap-[var(--measures-spacing-008)]">
{/* Author Name */}
<span className={authorClasses}>{post.frontmatter.author}</span>
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
+12 -1
View File
@@ -1,13 +1,23 @@
"use client";
/**
* Figma: "Components" / ContentThumnailTemplate (19614-14838, 19041-13415).
* Vertical 260×390 (19060-15787); horizontal 320×225.5 (19041-13550).
*/
import { memo } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
({ post, className = "", variant: variantProp = "vertical" }) => {
({
post,
className = "",
variant: variantProp = "vertical",
sizing: sizingProp = "fluid",
}) => {
const variant = variantProp;
const sizing = sizingProp;
// Get article-specific background image from frontmatter
const getBackgroundImage = (
post: ContentThumbnailTemplateProps["post"],
@@ -42,6 +52,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
post={post}
className={className}
variant={variant}
sizing={sizing}
backgroundImage={backgroundImage}
/>
);
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
+7
View File
@@ -2,6 +2,8 @@ import type { BlogPost } from "../../../../lib/content";
export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal";
export type ContentThumbnailTemplateSizingValue = "fluid" | "fixed";
export interface ContentThumbnailTemplateProps {
post: BlogPost;
className?: string;
@@ -9,6 +11,10 @@ export interface ContentThumbnailTemplateProps {
* Content thumbnail variant.
*/
variant?: ContentThumbnailTemplateVariantValue;
/**
* fluid — fill parent (Learn grid). fixed — Figma px dimensions (Related Articles).
*/
sizing?: ContentThumbnailTemplateSizingValue;
slugOrder?: string[];
}
@@ -16,5 +22,6 @@ export interface ContentThumbnailTemplateViewProps {
post: BlogPost;
className: string;
variant: "vertical" | "horizontal";
sizing: ContentThumbnailTemplateSizingValue;
backgroundImage: string;
}
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
+61 -21
View File
@@ -7,55 +7,95 @@ function ContentThumbnailTemplateView({
post,
className,
variant,
sizing,
backgroundImage,
}: ContentThumbnailTemplateViewProps) {
if (variant === "vertical") {
if (sizing === "fixed") {
return (
<Link
href={`/blog/${post.slug}`}
className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative h-[390px] w-[260px] overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt=""
className="pointer-events-none size-full object-cover"
/>
</div>
<div className="absolute left-[18px] top-[18px] z-20 w-[200px]">
<ContentContainer post={post} width="200px" size="xs" />
</div>
</div>
</Link>
);
}
return (
<Link
href={`/blog/${post.slug}`}
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
{/* Background SVG - fills container with maintained aspect */}
<div className="relative aspect-[260/390] w-full overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt={`Background for ${post.frontmatter.title}`}
className="w-full h-full object-cover"
alt=""
className="pointer-events-none size-full object-cover"
/>
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
</div>
{/* Content Section - positioned within the padding constraints */}
<ContentContainer post={post} width="200px" size="xs" />
<div className="absolute left-[6.923%] top-[4.615%] z-20 w-[76.923%]">
<ContentContainer post={post} size="xs" />
</div>
</div>
</Link>
);
}
if (sizing === "fixed") {
return (
<Link
href={`/blog/${post.slug}`}
className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative h-[225.5px] w-[320px] overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt=""
className="pointer-events-none size-full object-cover"
/>
</div>
<div className="absolute left-[14px] top-[13.75px] z-20 w-[230px]">
<ContentContainer post={post} width="230px" size="xs" />
</div>
</div>
</Link>
);
}
// Horizontal variant
return (
<Link
href={`/blog/${post.slug}`}
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
<div className="relative aspect-[320/225.5] w-full overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt={`Background for ${post.frontmatter.title}`}
className="w-full h-[225.5px] object-cover"
alt=""
className="pointer-events-none size-full object-cover"
/>
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
</div>
{/* Content - positioned within the padding constraints */}
<ContentContainer post={post} width="230px" size="xs" />
<div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%]">
<ContentContainer post={post} size="xs" />
</div>
</div>
</Link>
);
app/components/sections/RelatedArticles/RelatedArticles.view.tsx
+3 -2
View File
@@ -62,7 +62,7 @@ export function RelatedArticlesView({
</h2>
)}
{/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
{/* Horizontal Articles Row - Carousel on mobile, scrollable slider on desktop */}
<div
className={
isUseCases
@@ -86,12 +86,13 @@ export function RelatedArticlesView({
{filteredPosts.map((relatedPost) => (
<div
key={relatedPost.slug}
className="flex flex-col items-center flex-shrink-0"
className="flex flex-shrink-0 flex-col items-center"
data-testid={`related-${relatedPost.slug}`}
>
<ContentThumbnailTemplate
post={relatedPost}
variant="vertical"
sizing="fixed"
slugOrder={slugOrder}
/>
</div>