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

Learn Page and Content Pipeline Update #20

Merged
an.di merged 20 commits from adiallo/feature/LearnPage into main 2025-10-01 03:15:23 +00:00
Conversation 0 Commits 20 Files Changed 102
+133443 -1174
an.di commented 2025-09-30 23:03:20 +00:00
Owner
Copy Link
Copy Source

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

Screenshot 2025-09-30 at 9.11.50 PM.png Screenshot 2025-09-30 at 9.13.32 PM.png Screenshot 2025-09-30 at 9.14.14 PM.png

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
# 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
Screenshot 2025-09-30 at 9.11.50 PM.png
203 KiB
Screenshot 2025-09-30 at 9.13.32 PM.png
317 KiB
Screenshot 2025-09-30 at 9.14.14 PM.png
180 KiB
an.di added 19 commits 2025-09-30 23:03:20 +00:00
Update package-lock.json e4f3beb662
Update header for additional pages fa257984d6
update header tests and storybook b309971c6c
Learn page content lockup 6580f428c6
Learn page content thumbnails at default breakpoint eadfe561b8
Adjust content image upload pipeline d530e43664
Learn page default breakpoint 8d97e647e7
Resolving article images cc1d2ec7de
Update content page background af4a08b934
Update content page bg color documentation 27692750a6
Learn page smd breakpoint 6d86ede87d
Learn page md breakpoint dfca76a320
Learn page lg breakpoint 91e60d5b30
Learn page lg and lg2 breakpoint fd006d1605
Learn page xl breakpoint e47e955c7d
Add third banner image to content upload pipeline febf04b059
Update storybook and tests b15f913a14
Update tests e11f333915
Update storybook testing
CI Pipeline / test (20) (pull_request) Successful in 8m52s
Details
CI Pipeline / test (18) (pull_request) Successful in 9m56s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 6m35s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 6m33s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 5m47s
Details
CI Pipeline / visual-regression (pull_request) Successful in 9m32s
Details
CI Pipeline / storybook (pull_request) Successful in 9m12s
Details
CI Pipeline / performance (pull_request) Successful in 15m1s
Details
CI Pipeline / lint (pull_request) Failing after 3m14s
Details
CI Pipeline / build (pull_request) Successful in 3m53s
Details
f48fdff716
an.di added 1 commit 2025-09-30 23:49:07 +00:00
Run prettier
CI Pipeline / test (20) (pull_request) Successful in 8m20s
Details
CI Pipeline / test (18) (pull_request) Successful in 8m41s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m26s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 4m36s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m39s
Details
CI Pipeline / performance (pull_request) Successful in 2m43s
Details
CI Pipeline / visual-regression (pull_request) Successful in 6m5s
Details
CI Pipeline / storybook (pull_request) Successful in 1m25s
Details
CI Pipeline / lint (pull_request) Successful in 1m25s
Details
CI Pipeline / build (pull_request) Successful in 1m48s
Details
74b09eaf09
an.di merged commit e3861f6857 into main 2025-10-01 03:15:23 +00:00
an.di changed title from adiallo/feature/LearnPage to adilallo/feature/LearnPage 2025-10-01 03:15:37 +00:00
an.di changed title from adilallo/feature/LearnPage to Learn Page and Content Pipeline Update 2025-10-01 03:16:02 +00:00
an.di self-assigned this 2026-01-27 23:26:40 +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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#20
Delete Branch "adiallo/feature/LearnPage"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?