Content Upload Pipeline and Learn Page Implementation
Overview
This PR implements a new content upload pipeline for article-specific images and creates a comprehensive Learn page with responsive design. The changes replace hardcoded image rotation with dynamic, article-specific thumbnails and banners while maintaining full test coverage.
Changes
Content Upload Pipeline: Replaced hardcoded rotating images with article-specific thumbnails and banners
Learn Page Implementation: Created responsive Learn page with ContentLockup component and dynamic content loading
Image Management: Added support for horizontal/vertical thumbnails and banner images in markdown frontmatter
Test Updates: Updated all test suites (unit, integration, E2E, visual, performance, Storybook) to reflect new functionality
CI Configuration: Fixed Node.js PATH issues in Gitea Actions runner
Screenshots
How to Test
Run npm run dev and navigate to /learn to see the new Learn page
Visit individual blog posts to verify article-specific images and background colors
Test responsive behavior across breakpoints (smd: 2x3 grid, md: 3x2, lg: 3x2, lg2: 4x4, xl: 5x2)
Run npm test, npm run e2e, npm run visual:test, npm run lhci, and npm run test:sb to verify all tests pass
Check Storybook for updated component stories and documentation
Notes
Image Requirements: Articles now require thumbnail.horizontal, thumbnail.vertical, and optional thumbnail.banner in frontmatter
Background Colors: Content pages use hex codes from frontmatter for dynamic backgrounds
Fallback Logic: ContentBanner falls back to thumbnail.horizontal if banner.horizontal is missing
CI Fixed: Removed conditional Node.js setup logic that was causing CI failures in Gitea
Performance: All test suites maintain performance thresholds and coverage requirements
# Content Upload Pipeline and Learn Page Implementation
## Overview
This PR implements a new content upload pipeline for article-specific images and creates a comprehensive Learn page with responsive design. The changes replace hardcoded image rotation with dynamic, article-specific thumbnails and banners while maintaining full test coverage.
## Changes
- **Content Upload Pipeline**: Replaced hardcoded rotating images with article-specific thumbnails and banners
- **Learn Page Implementation**: Created responsive Learn page with ContentLockup component and dynamic content loading
- **Image Management**: Added support for horizontal/vertical thumbnails and banner images in markdown frontmatter
- **Responsive Design**: Implemented responsive grid layouts across breakpoints (smd, md, lg, lg2, xl)
- **Test Updates**: Updated all test suites (unit, integration, E2E, visual, performance, Storybook) to reflect new functionality
- **CI Configuration**: Fixed Node.js PATH issues in Gitea Actions runner
## Screenshots
<img width="400" alt="Screenshot 2025-09-30 at 9.11.50 PM.png" src="attachments/bb307159-87ee-4770-af23-1edf0a4d9d32">
<img width="536" alt="Screenshot 2025-09-30 at 9.13.32 PM.png" src="attachments/b9ae842a-0bbb-4d27-b2a8-e0b1d66b2dc1">
<img width="536" alt="Screenshot 2025-09-30 at 9.14.14 PM.png" src="attachments/e85a4830-0764-497a-8942-ceb71936b5d2">
## How to Test
1. Run `npm run dev` and navigate to `/learn` to see the new Learn page
2. Visit individual blog posts to verify article-specific images and background colors
3. Test responsive behavior across breakpoints (smd: 2x3 grid, md: 3x2, lg: 3x2, lg2: 4x4, xl: 5x2)
4. Run `npm test`, `npm run e2e`, `npm run visual:test`, `npm run lhci`, and `npm run test:sb` to verify all tests pass
5. Check Storybook for updated component stories and documentation
## Notes
- **Image Requirements**: Articles now require `thumbnail.horizontal`, `thumbnail.vertical`, and optional `thumbnail.banner` in frontmatter
- **Background Colors**: Content pages use hex codes from frontmatter for dynamic backgrounds
- **Fallback Logic**: ContentBanner falls back to thumbnail.horizontal if banner.horizontal is missing
- **CI Fixed**: Removed conditional Node.js setup logic that was causing CI failures in Gitea
- **Performance**: All test suites maintain performance thresholds and coverage requirements
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Content Upload Pipeline and Learn Page Implementation
Overview
This PR implements a new content upload pipeline for article-specific images and creates a comprehensive Learn page with responsive design. The changes replace hardcoded image rotation with dynamic, article-specific thumbnails and banners while maintaining full test coverage.
Changes
Screenshots
How to Test
npm run devand navigate to/learnto see the new Learn pagenpm test,npm run e2e,npm run visual:test,npm run lhci, andnpm run test:sbto verify all tests passNotes
thumbnail.horizontal,thumbnail.vertical, and optionalthumbnail.bannerin frontmatteradiallo/feature/LearnPageto adilallo/feature/LearnPageadilallo/feature/LearnPageto Learn Page and Content Pipeline Update