Skip to content

Rebuild the learn hub with indexed article cards and a category tab bar#17

Merged
benpeter merged 1 commit into
mainfrom
conti-learn-hub
Jul 25, 2026
Merged

Rebuild the learn hub with indexed article cards and a category tab bar#17
benpeter merged 1 commit into
mainfrom
conti-learn-hub

Conversation

@benpeter

Copy link
Copy Markdown
Collaborator

Fix #16

Rebuild the /learn hub toward the live layout, and drive its article list from the query index added in #15.

Two new blocks. article-cards fetches /learn/query-index.json and renders the articles as a responsive card grid, newest first, with a load-more button. category-tabs styles the section links as a horizontal tab bar like the live hub.

The /learn hub content now has the hero, the tab bar, product highlights, an indexed article grid of all 214 articles, and the EV band. This replaces the seven hardcoded news cards. Rows with no image are skipped, and the " | Continental Tire" title suffix is dropped for display.

Testing: npm test covers the grid, load-more, newest-first order, and skipping imageless rows. Live-tested on a local aem up server against the real index: tabs render as a bar, 12 cards then load-more to 24, dark titles.

Test URLs:

article-cards fetches /learn/query-index.json and renders the articles as a
responsive card grid, newest first. It shows a first batch with a load-more
button. category-tabs styles the section links as a horizontal tab bar like
the live hub.

The /learn hub now uses both, alongside the hero, product highlights, and the
EV band. Rows without an image are skipped. The article title suffix is
dropped for display.

Tested: npm test covers the grid, load-more, newest-first order, and skipping
imageless rows. Live-tested on a local aem up server against the real /learn
index of 214 articles. Tabs styled, 12 cards then load-more to 24, dark titles.
@aem-code-sync

aem-code-sync Bot commented Jul 25, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Jul 25, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 /learn PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /learn Timeout Exceeded PSI

@benpeter
benpeter merged commit bc40eee into main Jul 25, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Learn hub: match the live layout and drive articles from an index

1 participant