Content Page #19

Merged

an.di merged 48 commits from adilallo/feature/Blog into main 2025-09-18 15:44:46 +00:00

Conversation 0 Commits 48 Files Changed 99

+8322 -309

an.di commented 2025-09-12 20:48:45 +00:00

Owner

Copy Link

Copy Source

Implement Complete Blog and CMS System with Markdown Files

Overview

This PR implements a complete blog and CMS system using markdown files and Next.js static generation, allowing content creators to add blog posts by simply adding markdown files to the repository. The system provides a full-featured blog with automatic related articles, SEO optimization, and seamless integration with the existing design system.

Changes

• New Blog Infrastructure: Complete /blog route with dynamic [slug] pages for individual articles
• Content Processing System: lib/content.js with markdown parsing, frontmatter handling, and related articles algorithm
• New Components:
  • ContentThumbnailTemplate - Blog listing cards with vertical/horizontal variants
  • ContentContainer - Structured content layout with icon cycling
  • ContentBanner - Article headers with background selection
  • RelatedArticles - Responsive carousel with progress bars
  • ConditionalHeader - Dynamic header based on pathname
• Enhanced Components: AskOrganizer with new "inverse" variant
• SEO & Metadata: Open Graph, Twitter Cards, structured data (JSON-LD), and comprehensive meta tags
• Content Management: Template system with _template.md and contributor documentation
• Testing: Comprehensive test suite with 432 passing tests across unit, integration, and E2E
• Storybook Integration: All new components documented with stories and variants
• Code Quality: Linting passes, Prettier formatting applied

Screenshots

How to Test

1. Run locally: npm run dev and navigate to /blog to see the blog listing
2. Test individual articles: Click on any blog post thumbnail to view full article
3. Verify responsive design: Test on mobile, tablet, and desktop breakpoints
4. Check Storybook: npm run storybook to see all new components and variants
5. Test content creation: Add a new markdown file to content/blog/ following _template.md
6. Verify SEO: Check page source for meta tags, Open Graph, and structured data
7. Test related articles: Verify related articles appear and are clickable
8. Run tests: npm test -- --run to ensure all 432 tests pass
9. Check accessibility: Use browser dev tools to verify WCAG compliance

Notes

• Content Management: Contributors can add new blog posts by creating markdown files in content/blog/
• Related Articles: Algorithm uses keyword matching from title, description, and content
• Static Generation: All blog content is statically generated at build time for optimal performance
• Design System Integration: Uses existing design tokens, spacing, and component patterns
• Documentation: Complete contributor guide in docs/CONTENT_CREATION_GUIDE.md
• Future Enhancements: System is ready for search, filtering, and pagination features
• Performance: Maintains existing app performance with optimized static generation
• Testing: Comprehensive test coverage ensures reliability and maintainability

# Implement Complete Blog and CMS System with Markdown Files ## Overview This PR implements a complete blog and CMS system using markdown files and Next.js static generation, allowing content creators to add blog posts by simply adding markdown files to the repository. The system provides a full-featured blog with automatic related articles, SEO optimization, and seamless integration with the existing design system. ## Changes - **New Blog Infrastructure**: Complete `/blog` route with dynamic `[slug]` pages for individual articles - **Content Processing System**: `lib/content.js` with markdown parsing, frontmatter handling, and related articles algorithm - **New Components**: - `ContentThumbnailTemplate` - Blog listing cards with vertical/horizontal variants - `ContentContainer` - Structured content layout with icon cycling - `ContentBanner` - Article headers with background selection - `RelatedArticles` - Responsive carousel with progress bars - `ConditionalHeader` - Dynamic header based on pathname - **Enhanced Components**: `AskOrganizer` with new "inverse" variant - **SEO & Metadata**: Open Graph, Twitter Cards, structured data (JSON-LD), and comprehensive meta tags - **Content Management**: Template system with `_template.md` and contributor documentation - **Testing**: Comprehensive test suite with 432 passing tests across unit, integration, and E2E - **Storybook Integration**: All new components documented with stories and variants - **Code Quality**: Linting passes, Prettier formatting applied ## Screenshots <!-- Visual changes include new blog listing page, individual article pages, and component variants in Storybook --> ## How to Test 1. **Run locally**: `npm run dev` and navigate to `/blog` to see the blog listing 2. **Test individual articles**: Click on any blog post thumbnail to view full article 3. **Verify responsive design**: Test on mobile, tablet, and desktop breakpoints 4. **Check Storybook**: `npm run storybook` to see all new components and variants 5. **Test content creation**: Add a new markdown file to `content/blog/` following `_template.md` 6. **Verify SEO**: Check page source for meta tags, Open Graph, and structured data 7. **Test related articles**: Verify related articles appear and are clickable 8. **Run tests**: `npm test -- --run` to ensure all 432 tests pass 9. **Check accessibility**: Use browser dev tools to verify WCAG compliance ## Notes - **Content Management**: Contributors can add new blog posts by creating markdown files in `content/blog/` - **Related Articles**: Algorithm uses keyword matching from title, description, and content - **Static Generation**: All blog content is statically generated at build time for optimal performance - **Design System Integration**: Uses existing design tokens, spacing, and component patterns - **Documentation**: Complete contributor guide in `docs/CONTENT_CREATION_GUIDE.md` - **Future Enhancements**: System is ready for search, filtering, and pagination features - **Performance**: Maintains existing app performance with optimized static generation - **Testing**: Comprehensive test coverage ensures reliability and maintainability

an.di added 23 commits 2025-09-12 20:48:46 +00:00

Infrastructure setup 3d6d4ed251

Added content processing system b54ddb16ba

Content Thumbnail default breakpoint 3a4b2d44c2

Consolidate component folders 3cca30ae28

Content Container fully implemented d1400fe52c

Cleanup Content Thumbnail fc096129dd

Remove unnecessary props and data structure 93182e6c2d

Dynamic link to blog page 5e83655f49

Update blog page asset and md loading b85b4248c0

Fix spacing on MD upload d22f10af0d

Content Banner default and sm breakpoint d500cf2c91

Content Banner md lg xl breakpoints 6123ced665

Finish text section on article page add home link ec2db8be22

Related Article section implemented 8a31671bbc

Related Articles lg breakpoint implemented 3820076435

Ask Organizer variant added f1214167e6

Add structured data for search engines 0f9bc0d74e

Fix failing tests and add unit tests c8f63ca39a

Add integration tests for content 6319d549df

Implement E2E tests for content page a3a62fab91

Content contributor documentation ea023d5ec6

Content page storybook added 8daea70cb8

Run lint and prettier 500d2d0965

an.di added 3 commits 2025-09-12 22:20:12 +00:00

Update visual regression tests 842bbe44f1

Fix performance tests 62a7046612

Add blog snapshots a276978743

an.di added 1 commit 2025-09-12 22:53:32 +00:00

Update storybook base config 9150b8a502

an.di added 1 commit 2025-09-12 22:55:19 +00:00

Update ci.yaml 54cddb5041

an.di added 2 commits 2025-09-12 23:36:41 +00:00

Fix Lighthouse CI performance tests ec6bdebc44

Run linter and prettier 26de297ac5

an.di added 3 commits 2025-09-13 22:34:13 +00:00

Fix visual regression server crash 56a42db2da

Update content documentation and implement basic learn page 102a10457a

Lint and prettier a867fc45d6

an.di added 1 commit 2025-09-13 23:34:29 +00:00

Fix failing tests e6f29a2d97

an.di added 2 commits 2025-09-14 02:47:42 +00:00

Update visual-regression.spec.ts 699de76e7f

Run Prettier 29c4e6e4bd

an.di added 1 commit 2025-09-14 03:44:29 +00:00

Fix storybook test eb9a108d86

an.di added 1 commit 2025-09-14 03:53:00 +00:00

Update ContentLockup.integration.test.jsx 337a35d367

an.di added 1 commit 2025-09-14 05:27:01 +00:00

Fix failing tests and lint df418328c6

an.di added 1 commit 2025-09-14 18:45:05 +00:00

Update CI memory allocation abd4a7f0f8

an.di added 1 commit 2025-09-14 19:19:57 +00:00

Update timeouts c030187bc8

an.di added 1 commit 2025-09-14 19:22:52 +00:00

Update ci.yaml bfa04ad096

an.di added 1 commit 2025-09-14 19:30:35 +00:00

Fix timeout communication issues c6c4425846

an.di added 1 commit 2025-09-14 19:47:09 +00:00

Batch tests 9ca35b8c02

an.di added 1 commit 2025-09-14 19:55:06 +00:00

Try splitting up unit and integration tests 2550eaa9b9

an.di added 1 commit 2025-09-14 20:18:54 +00:00

Attempt to fix visual regression test fail on first run 0e4188a390

an.di added 1 commit 2025-09-14 20:44:38 +00:00

Update ci.yaml a878fdf72f

an.di added 1 commit 2025-09-14 21:10:11 +00:00

Update ci.yaml ef5467b6c7

an.di merged commit 4b3a28f6b8 into main 2025-09-18 15:44:46 +00:00

an.di referenced this issue from a commit 2025-09-18 15:44:47 +00:00

Merge pull request 'Content Page' (#19) from adilallo/feature/Blog into main

an.di deleted branch adilallo/feature/Blog 2025-09-18 15:46:10 +00:00

an.di self-assigned this 2026-01-27 23:26:49 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

an.di (Andy DiLallo) ntnsndr (Nathan Schneider)

No Assignees an.di

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#19