feat(home): split Active and Past products into distinct sections by ghostleek · Pull Request #17 · String-sg/reports

ghostleek · 2026-05-09T02:21:38Z

Summary

The homepage product grid mixed actively-maintained products with deprecated ones in a single 3-column layout. With 7 cards, this produced an awkward "row of 3, row of 3, orphan" arrangement and made the deprecated/active distinction rely entirely on the small status badge.

This change splits the grid into two sections:

Active products (Building / Maintenance / Prototype) — keeps the existing md:grid-cols-2 lg:grid-cols-3 layout.
Past products (Deprecated) — md:grid-cols-2 under a muted Past products heading, separated by mb-12.

The Past section is hidden entirely when there are no deprecated products, so future product additions won't render an empty heading.

Test plan

npm run build compiles
Visit /: confirm 5 active cards render in the top grid and 2 deprecated cards (Remarks Co-Pilot, Whine) in a clearly-labeled lower section
Verify Past products heading is visually muted (not competing with Products h2)
Resize to mobile / tablet to confirm both grids reflow cleanly

Generated by Claude Code

Replace the single product grid with two: Active (Building / Maintenance / Prototype) and Past (Deprecated). Past products render under a muted 'Past products' heading in a 2-column grid, hidden entirely when no deprecated products exist. This makes the deprecated/active distinction visually obvious instead of relying on the badge alone, and reduces the orphan-card awkwardness on the homepage.

vercel · 2026-05-09T02:21:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
reports	Ready	Preview, Comment	May 9, 2026 3:23am

ghostleek · 2026-05-09T02:26:39Z

@copilot share BEFORE and AFTER screenshots

Copilot

Pull request overview

Splits the homepage “Products” listing into separate Active vs Past (Deprecated) sections to improve layout and make the deprecated/active distinction clearer.

Changes:

Partitioned the sorted projects list into ACTIVE_PROJECTS and PAST_PROJECTS.
Rendered active products in the existing responsive 2/3-column grid.
Added a conditional “Past products” section (heading + 2-column grid) shown only when deprecated products exist.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {SORTED_PROJECTS.map((project) => (
+        {/* Active products */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">


ghostleek · 2026-05-09T02:31:31Z

+              {PAST_PROJECTS.map((project) => (
+                <ProjectCard
+                  key={project.slug}
+                  slug={project.slug}
+                  name={project.name}
+                  tagline={project.tagline}
+                  status={project.status}
+                  since={project.since}
+                  audience={project.audience}
+                  contributors={project.contributors}
+                  volunteers={project.volunteers}
+                  highlightStat={project.highlightStat}
+                  url={project.url}
+                />


@copilot apply changes based on this feedback

Implemented in commit a67a8d6.

Address review feedback: - Spread project props onto ProjectCard so the active and past grids share one render expression instead of duplicating the prop list. - Move the 12-unit gap from the active grid's bottom to the Past section's top so the layout doesn't grow taller when there are no deprecated products.

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/01a37293-e8fb-41c9-aeea-a543fcbf54b7 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

Copilot · 2026-05-09T02:30:55Z

@copilot share BEFORE and AFTER screenshots

Added in commit 1fd8415.

Before (parent commit)

After (this PR)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fonts.googleapis.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/reports/reports/node_modules/.bin/next build (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node /tmp/reports-before/node_modules/next/dist/server/lib/start-server.js (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node /home/REDACTED/work/reports/reports/node_modules/next/dist/server/lib/start-server.js (dns block)
va.vercel-scripts.com
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

ghostleek · 2026-05-09T02:34:10Z

@copilot can you add one more for deprecated product
name: CherGPT (make it an inactive card) - blurb would be: GPT-powered teaching assistant. Users: Teachers, Students. 1000+ users, 4 volunteers. Try it url https://github.com/String-sg/chergpt-basic

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

Copilot · 2026-05-09T02:36:54Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fonts.googleapis.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/reports/reports/node_modules/.bin/next build (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node /home/REDACTED/work/reports/reports/node_modules/next/dist/server/lib/start-server.js (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/reports/reports/node_modules/.bin/next build mit-msg chro�� get --global git commit.gpgsign (dns block)
va.vercel-scripts.com
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/13c04c7b-51e3-4764-8c92-542f87c957a1 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

Copilot · 2026-05-09T02:39:24Z

@copilot can you add one more for deprecated product
name: CherGPT (make it an inactive card) - blurb would be: GPT-powered teaching assistant. Users: Teachers, Students. 1000+ users, 4 volunteers. T...

Implemented in commit f0b1453.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fonts.googleapis.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/reports/reports/node_modules/.bin/next build (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node /home/REDACTED/work/reports/reports/node_modules/next/dist/server/lib/start-server.js (dns block)
va.vercel-scripts.com
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

ghostleek · 2026-05-09T03:21:01Z

@copilot past products should also follow the same 3 column layout. make the layout consistent

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/9ad5801c-f601-4a25-be98-af41cecdce64 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

Copilot · 2026-05-09T03:23:22Z

@copilot past products should also follow the same 3 column layout. make the layout consistent

Implemented in commit 53bf573.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fonts.googleapis.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/reports/reports/node_modules/.bin/next build (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node /home/REDACTED/work/reports/reports/node_modules/next/dist/server/lib/start-server.js (dns block)
va.vercel-scripts.com
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

vercel Bot deployed to Preview May 9, 2026 02:21 View deployment

ghostleek requested a review from Copilot May 9, 2026 02:26

Copilot started work on behalf of ghostleek May 9, 2026 02:26 View session

ghostleek marked this pull request as ready for review May 9, 2026 02:26

Copilot started reviewing on behalf of ghostleek May 9, 2026 02:27 View session

Copilot AI reviewed May 9, 2026

View reviewed changes

vercel Bot deployed to Preview May 9, 2026 02:29 View deployment

docs: add before and after homepage screenshots

1fd8415

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/01a37293-e8fb-41c9-aeea-a543fcbf54b7 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

vercel Bot deployed to Preview May 9, 2026 02:31 View deployment

Copilot finished work on behalf of ghostleek May 9, 2026 02:31

Copilot started work on behalf of ghostleek May 9, 2026 02:31 View session

refactor(home): reuse shared ProjectCard renderer

f95c9ab

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

vercel Bot deployed to Preview May 9, 2026 02:34 View deployment

Copilot AI and others added 4 commits May 9, 2026 02:34

refactor(home): extract shared project grid renderer

01767af

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

refactor(home): rename shared grid helper to component

cfc142e

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

refactor(home): align shared grid naming with product terminology

ff9007b

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

refactor(home): polish shared ProductGrid typing

a67a8d6

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/8e415d74-7408-4f17-b202-8bfc52cea805 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

vercel Bot deployed to Preview May 9, 2026 02:36 View deployment

Copilot finished work on behalf of ghostleek May 9, 2026 02:37

Copilot started work on behalf of ghostleek May 9, 2026 02:37 View session

feat(data): add deprecated CherGPT product card

f0b1453

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/13c04c7b-51e3-4764-8c92-542f87c957a1 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

vercel Bot deployed to Preview May 9, 2026 02:39 View deployment

Copilot finished work on behalf of ghostleek May 9, 2026 02:39

Copilot started work on behalf of ghostleek May 9, 2026 03:21 View session

fix(home): align past products with 3-column layout

53bf573

Agent-Logs-Url: https://github.com/String-sg/reports/sessions/9ad5801c-f601-4a25-be98-af41cecdce64 Co-authored-by: ghostleek <44336310+ghostleek@users.noreply.github.com>

vercel Bot deployed to Preview May 9, 2026 03:23 View deployment

Copilot finished work on behalf of ghostleek May 9, 2026 03:23

Conversation

ghostleek commented May 9, 2026

Summary

Test plan

Uh oh!

vercel Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghostleek commented May 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

ghostleek May 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

ghostleek commented May 9, 2026

Uh oh!

Copilot AI commented May 9, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

ghostleek commented May 9, 2026

Uh oh!

Copilot AI commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented May 9, 2026 •

edited

Loading

Copilot AI commented May 9, 2026 •

edited

Loading

Copilot AI commented May 9, 2026 •

edited

Loading

Copilot AI commented May 9, 2026 •

edited

Loading