Display Registry Implementation Plan

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { ProjectCard as ProjectCardType } from '@/shared/types/api';
 
interface ProjectCardProps {
    project: ProjectCardType;
}
 
export const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
    return (
        <Link
            href={`/projects/${project.slug}`}
            className="card card--hoverable card--link"
        >
            {project.image_url && (
                <Image
                    src={project.image_url}
                    alt={project.title}
                    width={400}
                    height={160}
                    className="project-image"
                />
            )}
 
            <h3 className="section-title mb-sm">
                {project.title}
                {project.is_featured && (
                    <span className="badge--featured">
                        Featured
                    </span>
                )}
            </h3>
 
            <p className="text-text-secondary mb-lg">
                {project.summary}
            </p>
 
            {project.technologies.length > 0 && (
                <div className="tech-tags">
                    {project.technologies.map((tech) => (
                        <span key={tech} className="tech-tag">
                            {tech}
                        </span>
                    ))}
                </div>
            )}
 
            <div className="project-links">
                {project.github_url && (
                    <span className="text-text-secondary text-sm">
                        GitHub
                    </span>
                )}
                {project.live_url && (
                    <span className="text-text-secondary text-sm">
                        Live Demo
                    </span>
                )}
            </div>
        </Link>
    );
};

export { ProjectCard } from './ProjectCard';

// Components
export * from './components';

git add frontend/src/modules/projects/
git commit -m "feat(registry): add projects module with ProjectCard component"

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import apiClient from '@/shared/lib/api-client';
import { ProjectCard as ProjectCardType } from '@/shared/types/api';
import { ProjectCard } from '@/modules/projects';

{!loading && !error && projects.length > 0 && (
    <div className="grid grid--responsive">
        {projects.map((project) => (
            <ProjectCard key={project.id} project={project} />
        ))}
    </div>
)}

git add frontend/src/pages/projects.tsx
git commit -m "refactor(projects): use ProjectCard component from projects module"

import React from 'react';
import Link from 'next/link';
import type { Session } from 'next-auth';
import { formatDate } from '@/shared/utils/formatDate';
import { Story } from '@/shared/types/api';
import { LazyStoryContent } from './LazyStoryContent';
 
const REACTION_ICONS: Record<string, string> = {
    thumbup: '👍',
    heart: '❤️',
    surprise: '😮',
    celebrate: '🎉',
    insightful: '💡',
};
 
/**
 * Safely gets the story URL based on the slug
 * Falls back to ID if slug is not available
 */
const getStoryPath = (story: Story): string => {
    if (!story.slug || story.slug.trim() === '') {
        return `/stories/${story.id}`;
    }
    return `/stories/${story.slug}`;
};
 
const canEditStory = (session: Session | null, story: Story): boolean => {
    if (!session?.user) return false;
    if (session.user.role === 'admin') return true;
    if (story.user_id && session.user.id === story.user_id) return true;
    return false;
};
 
export interface EngagementCounts {
    reactions: Record<string, number>;
    comment_count: number;
}
 
export interface StoryCardProps {
    story: Story;
    session: Session | null;
    onEdit: (story: Story) => void;
    onDelete: (story: Story) => Promise<void>;
    deleteLoading: boolean;
    engagementCounts?: EngagementCounts;
}
 
export const StoryCard = React.memo(({
    story,
    session,
    onEdit,
    onDelete,
    deleteLoading,
    engagementCounts
}: StoryCardProps) => {
    const isDraft = !story.is_published;
    const storyPath = getStoryPath(story);
    const canEdit = canEditStory(session, story);
 
    return (
        <div
            key={story.id}
            className={`card ${isDraft ? 'card--draft' : ''}`}
            data-testid={`story-card-${story.id}`}
        >
            <div className="story-header">
                <div className="story-header__actions">
                    {isDraft && (
                        <span className="badge badge--draft" data-testid={`story-draft-badge-${story.id}`}>
                            DRAFT
                        </span>
                    )}
                    {canEdit && (
                        <div className="flex gap-2">
                            <button
                                onClick={() => onEdit(story)}
                                className="btn btn--primary btn--sm"
                                data-testid={`story-edit-${story.id}`}
                            >
                                Edit
                            </button>
                            {isDraft && (
                                <button
                                    onClick={() => onDelete(story)}
                                    disabled={deleteLoading}
                                    className="btn btn--danger btn--sm"
                                    data-testid={`story-delete-${story.id}`}
                                >
                                    {deleteLoading ? 'Deleting...' : 'Delete'}
                                </button>
                            )}
                        </div>
                    )}
                </div>
 
                <Link
                    href={storyPath}
                    className={`${isDraft ? 'pointer-events-none' : ''}`}
                    data-testid={`story-title-link-${story.id}`}
                >
                    <h2
                        className={`story-title ${!isDraft ? 'story-title--link' : 'story-title--draft'}`}
                        title={story.title}
                        data-testid={`story-title-${story.id}`}
                    >
                        {story.title}
                    </h2>
                </Link>
 
                <div className="story-header__meta">
                    <span>{formatDate(story.createdDate)}</span>
                    {story.updatedDate !== story.createdDate && (
                        <span className="opacity-70">
                            (Updated: {formatDate(story.updatedDate)})
                        </span>
                    )}
                </div>
            </div>
 
            {!isDraft && (
                <>
                    <Link href={storyPath} className="block" data-testid={`story-content-link-${story.id}`}>
                        <LazyStoryContent
                            content={story.content}
                            className="story-content prose--card"
                        />
                        <div className="mt-4">
                            <span className="btn btn--secondary btn--sm" data-testid={`story-read-more-${story.id}`}>
                                Read full story →
                            </span>
                        </div>
                    </Link>
                    {engagementCounts && (
                        <div className="mt-4 flex items-center justify-end gap-4 text-sm" style={{ color: 'var(--color-text-secondary)' }}>
                            {Object.entries(engagementCounts.reactions).length > 0 && (
                                <span className="flex items-center gap-3">
                                    {Object.entries(engagementCounts.reactions).map(([tag, count]) => (
                                        <span key={tag} className="flex items-center gap-1">
                                            {REACTION_ICONS[tag]} {count}
                                        </span>
                                    ))}
                                </span>
                            )}
                            {engagementCounts.comment_count > 0 && (
                                <span>💬 {engagementCounts.comment_count}</span>
                            )}
                        </div>
                    )}
                </>
            )}
            {isDraft && (
                <LazyStoryContent
                    content={story.content}
                    className="story-content prose--card"
                />
            )}
        </div>
    );
});
 
StoryCard.displayName = 'StoryCard';

export { default as StoryList } from './StoryList';
export { LazyStoryContent } from './LazyStoryContent';
export { StoryCard } from './StoryCard';
export type { StoryCardProps, EngagementCounts } from './StoryCard';

git add frontend/src/modules/stories/components/
git commit -m "feat(stories): extract StoryCard component"

import { StoryCard } from './StoryCard';
import type { EngagementCounts } from './StoryCard';

const storyItems = useMemo(() => {
    return stories.map(story => (
        <StoryCard
            key={story.id}
            story={story}
            session={session}
            onEdit={handleEdit}
            onDelete={handleDelete}
            deleteLoading={deleteLoading}
            engagementCounts={engagementCounts[`story:${story.id}`]}
        />
    ));
}, [stories, session, handleEdit, handleDelete, deleteLoading, engagementCounts]);

git add frontend/src/modules/stories/components/StoryList.tsx
git commit -m "refactor(stories): use StoryCard component in StoryList"

import { ComponentType } from 'react';
 
/**
 * Display types determine HOW content is rendered (layout)
 */
export type DisplayType = 'feed' | 'card-grid' | 'static-page';
 
/**
 * Content types determine WHAT is being rendered
 */
export type ContentType = 'story' | 'project' | 'page';
 
/**
 * Content registry entry - maps a content type to its list and detail components
 */
export interface ContentEntry<T = unknown> {
    /** Component for rendering item in a list (null if not listable) */
    listItem: ComponentType<{ item: T }> | null;
    /** Component for rendering item detail (null if no detail view) */
    detail: ComponentType<{ item: T }> | null;
}
 
/**
 * Props for FeedDisplay - infinite scroll list
 */
export interface FeedDisplayProps<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
    onLoadMore: () => void;
    hasMore: boolean;
    isLoading?: boolean;
}
 
/**
 * Props for CardGridDisplay - responsive grid
 */
export interface CardGridDisplayProps<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
}
 
/**
 * Props for StaticPageDisplay - single content block
 */
export interface StaticPageDisplayProps {
    content: string;
    title?: string;
}

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add registry module with types"

import React from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import ClipLoader from 'react-spinners/ClipLoader';
import { FeedDisplayProps } from '../types';
 
export function FeedDisplay<T extends { id: string }>({
    items,
    renderItem,
    onLoadMore,
    hasMore,
    isLoading = false,
}: FeedDisplayProps<T>) {
    if (items.length === 0 && isLoading) {
        return (
            <div className="flex justify-center items-center py-8">
                <ClipLoader color="var(--color-brand-primary)" loading={true} size={35} />
            </div>
        );
    }
 
    return (
        <div className="mt-4" data-testid="feed-display">
            <InfiniteScroll
                dataLength={items.length}
                next={onLoadMore}
                hasMore={hasMore}
                loader={
                    <div className="flex justify-center items-center py-4">
                        <ClipLoader color="var(--color-brand-primary)" loading={true} size={35} />
                    </div>
                }
                endMessage={
                    items.length > 0 ? (
                        <div className="text-center py-4 text-text-secondary" data-testid="feed-end">
                            You&apos;ve reached the end
                        </div>
                    ) : null
                }
            >
                <div className="flex flex-col space-y-6">
                    {items.map(item => (
                        <React.Fragment key={item.id}>
                            {renderItem(item)}
                        </React.Fragment>
                    ))}
                </div>
            </InfiniteScroll>
        </div>
    );
}

export { FeedDisplay } from './FeedDisplay';

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';
 
// Displays
export { FeedDisplay } from './displays';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add FeedDisplay component"

import React from 'react';
import { CardGridDisplayProps } from '../types';
 
export function CardGridDisplay<T extends { id: string }>({
    items,
    renderItem,
}: CardGridDisplayProps<T>) {
    if (items.length === 0) {
        return null;
    }
 
    return (
        <div className="grid grid--responsive" data-testid="card-grid-display">
            {items.map(item => (
                <React.Fragment key={item.id}>
                    {renderItem(item)}
                </React.Fragment>
            ))}
        </div>
    );
}

export { FeedDisplay } from './FeedDisplay';
export { CardGridDisplay } from './CardGridDisplay';

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';
 
// Displays
export { FeedDisplay, CardGridDisplay } from './displays';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add CardGridDisplay component"

import React from 'react';
import DOMPurify from 'isomorphic-dompurify';
import { StaticPageDisplayProps } from '../types';
 
export const StaticPageDisplay: React.FC<StaticPageDisplayProps> = ({
    content,
    title,
}) => {
    return (
        <div className="card" data-testid="static-page-display">
            {title && (
                <h1 className="page-title mb-lg">{title}</h1>
            )}
            <div className="prose prose--card">
                {/* Admin-controlled CMS content - DOMPurify sanitization is appropriate */}
                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />
            </div>
        </div>
    );
};

export { FeedDisplay } from './FeedDisplay';
export { CardGridDisplay } from './CardGridDisplay';
export { StaticPageDisplay } from './StaticPageDisplay';

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';
 
// Displays
export { FeedDisplay, CardGridDisplay, StaticPageDisplay } from './displays';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add StaticPageDisplay component"

import { StoryCard } from '@/modules/stories';
import { ProjectCard } from '@/modules/projects';
import { ContentType, ContentEntry } from './types';
import { Story, ProjectCard as ProjectCardType, Page } from '@/shared/types/api';
 
/**
 * Content registry maps content types to their rendering components.
 *
 * - listItem: Component for rendering in lists/feeds
 * - detail: Component for rendering full detail view (null = no detail page)
 *
 * Note: Detail components will be added in Phase 4 when we add StoryDetail/ProjectDetail.
 */
export const contentRegistry: Record<ContentType, ContentEntry> = {
    story: {
        listItem: null, // StoryCard requires additional props (session, handlers)
        detail: null,   // StoryDetail to be extracted later
    },
    project: {
        listItem: ProjectCard as unknown as ContentEntry<ProjectCardType>['listItem'],
        detail: null,   // ProjectDetail to be extracted later
    },
    page: {
        listItem: null, // Pages don't appear in lists
        detail: null,   // StaticPageDisplay handles pages directly
    },
};
 
// Type-safe getter for content components
export function getContentComponents<T>(contentType: ContentType): ContentEntry<T> {
    return contentRegistry[contentType] as ContentEntry<T>;
}

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';
 
// Displays
export { FeedDisplay, CardGridDisplay, StaticPageDisplay } from './displays';
 
// Registries
export { contentRegistry, getContentComponents } from './contentRegistry';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add content registry"

import { ComponentType } from 'react';
import { DisplayType, FeedDisplayProps, CardGridDisplayProps, StaticPageDisplayProps } from './types';
import { FeedDisplay, CardGridDisplay, StaticPageDisplay } from './displays';
 
/**
 * Display registry maps display types to their layout components.
 *
 * Each display type determines HOW content is laid out:
 * - feed: Infinite scroll list (stories)
 * - card-grid: Responsive grid (projects)
 * - static-page: Single content block (about, contact)
 */
export const displayRegistry: Record<DisplayType, ComponentType<unknown>> = {
    'feed': FeedDisplay as ComponentType<unknown>,
    'card-grid': CardGridDisplay as ComponentType<unknown>,
    'static-page': StaticPageDisplay as ComponentType<unknown>,
};
 
// Type-safe getters
export function getFeedDisplay(): ComponentType<FeedDisplayProps<unknown>> {
    return FeedDisplay;
}
 
export function getCardGridDisplay(): ComponentType<CardGridDisplayProps<unknown>> {
    return CardGridDisplay;
}
 
export function getStaticPageDisplay(): ComponentType<StaticPageDisplayProps> {
    return StaticPageDisplay;
}

// Types
export type {
    DisplayType,
    ContentType,
    ContentEntry,
    FeedDisplayProps,
    CardGridDisplayProps,
    StaticPageDisplayProps,
} from './types';
 
// Displays
export { FeedDisplay, CardGridDisplay, StaticPageDisplay } from './displays';
 
// Registries
export { contentRegistry, getContentComponents } from './contentRegistry';
export {
    displayRegistry,
    getFeedDisplay,
    getCardGridDisplay,
    getStaticPageDisplay,
} from './displayRegistry';

git add frontend/src/modules/registry/
git commit -m "feat(registry): add display registry"

git add -A
git commit -m "fix(registry): address issues found in verification"

# Creating Content Types
 
How to add new content types to the registry system.
 
## Overview
 
Content types define WHAT is rendered (stories, projects, pages). Display types define HOW it's rendered (feed, grid, static). The registry system connects them.
 
## Quick Reference
 
### Adding a New Content Type
 
1. Create the module: `modules/your-type/`
2. Create card component: `YourTypeCard.tsx`
3. Register in `contentRegistry.ts`
4. Use with appropriate display
 
## Step-by-Step: Adding a Content Type
 
### 1. Create the Module
 

### 2. Create the Card Component

```tsx
// components/ExperimentCard.tsx
import React from 'react';
import Link from 'next/link';

interface ExperimentCardProps {
    item: {
        id: string;
        title: string;
        description: string;
        slug: string;
    };
}

export const ExperimentCard: React.FC<ExperimentCardProps> = ({ item }) => {
    return (
        <Link href={`/experiments/${item.slug}`} className="card card--hoverable">
            <h3>{item.title}</h3>
            <p>{item.description}</p>
        </Link>
    );
};

// components/index.ts
export { ExperimentCard } from './ExperimentCard';
 
// index.ts
export * from './components';

import { ExperimentCard } from '@/modules/experiments';
 
export const contentRegistry = {
    // ... existing types
    experiment: {
        listItem: ExperimentCard,
        detail: null,
    },
};

export type ContentType = 'story' | 'project' | 'page' | 'experiment';

// pages/experiments.tsx
import { CardGridDisplay } from '@/modules/registry';
import { ExperimentCard } from '@/modules/experiments';
 
export default function ExperimentsPage({ experiments }) {
    return (
        <CardGridDisplay
            items={experiments}
            renderItem={(item) => <ExperimentCard item={item} />}
        />
    );
}

interface FeedDisplayProps<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
    onLoadMore: () => void;
    hasMore: boolean;
    isLoading?: boolean;
}

interface CardGridDisplayProps<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
}

interface StaticPageDisplayProps {
    content: string;
    title?: string;
}

**Step 2: Update guides _meta.ts**

Modify `docs-site/pages/guides/_meta.ts`:

```ts
export default {
  index: 'Overview',
  'adding-a-module': 'Adding a Module',
  'creating-content-types': 'Creating Content Types',
  'ssr-patterns': 'SSR Patterns',
  'database-migrations': 'Database Migrations',
  'error-handling-system': 'Error Handling',
  'logging-usage-guide': 'Logging',
  'video-processing-setup': 'Video Processing',
  'github-actions-video-setup': 'GitHub Actions Video Setup'
}

- [Creating Content Types](/guides/creating-content-types) - Add new content types to the registry

git add docs-site/pages/guides/
git commit -m "docs: add creating-content-types guide"

**Status:** Design complete, ready for implementation

**Status:** Complete

git add docs-site/pages/features/dynamic-sections/phase3.mdx
git commit -m "docs: mark Phase 3 complete"