[FEATURE] Convert Community page to filterable card grid#403
Merged
Conversation
- Replace table layout with responsive CSS Grid card layout - Cards support optional image field; fall back to cached og:image - Add scripts/fetch-og-images.mjs to fetch and validate og:image at build time (HEAD request confirms content-type: image/*); results committed to community/og-image-cache.json - Placeholder gradient (brand colors, 45% opacity) for imageless cards - Filter pills colored per group: Theme=navy, Tool=teal, Type=lime - Add date sort control (newest/oldest first) - Add Overture Maps brand palette as CSS custom properties in custom.css - Update CommunityTable tests for card-based DOM (testid, no table rows) - Fix active+hovered pill contrast (brightness filter, explicit bg restore) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
had a problem deploying
to
staging
GitHub Actions
Error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
requested a review
from Jennings Anderson (jenningsanderson)
John McCall (lowlydba)
temporarily deployed
to
staging
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Community page by replacing the projects table with a responsive, filterable card grid and adds supporting styling and tooling (brand palette CSS variables + an og:image cache fetcher script) to improve discoverability and visuals.
Changes:
- Replaced the table-based Community listing with a card grid layout, including card-level tag interactions and a newest/oldest sort toggle.
- Added Overture Maps brand palette CSS custom properties and updated component CSS to support pill coloring and card styling.
- Added a Node script to fetch/validate
og:imageURLs into a committed JSON cache, plus an npm script to run it.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/css/custom.css |
Adds Overture Maps brand palette CSS variables for reuse across the site. |
src/components/CommunityTable.module.css |
Implements the new filter/sort UI styling and the card grid/card presentation. |
src/components/CommunityTable.jsx |
Switches rendering from a table to a card grid; adds image selection + sorting logic. |
src/components/__tests__/CommunityTable.test.jsx |
Updates tests for the card UI and introduces coverage for the sort toggle. |
scripts/fetch-og-images.mjs |
Adds a build-time helper to fetch and validate og:image URLs into a local cache file. |
package.json |
Adds npm run fetch-og to run the og:image cache script. |
community/og-image-cache.json |
Adds the committed og:image URL cache consumed by the Community page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
🗺️ OMF Docs previews are live!
Auto-gen schema site is now available. This is an early preview of a future workflow where we will automatically generate and publish reference docs for the Overture Maps Format schema. The auto-gen schema site may contain incomplete or inaccurate information as we are still refining the generation process, so please compare against the repo schema site and refer to the official Overture documentation for authoritative information. Note ♻️ This preview updates automatically with each push to this PR. |
… mutation Replaces onError DOM manipulation with useState(imageError) so React controls visibility. Fixes potential SSG hydration mismatches and phantom keyboard tab stops on hidden anchor elements. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
had a problem deploying
to
staging
GitHub Actions
Error
- README: 'repo' -> 'repository' (NATURAL_LANGUAGE lint) - CommunityTable: parse 'Month YYYY' explicitly for Safari-safe sorting - CommunityTable: replace focusable aria-hidden placeholder <a> with <div> - CommunityTable.module.css: dark text on lime active pills (WCAG contrast) - Tests: assert actual card order on oldest-first sort, not just count Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
temporarily deployed
to
staging
GitHub Actions
Inactive
Tags on cards now inherit the same color token (navy/teal/lime) as their corresponding filter-bar pill group, using a TAG_COLOR_CLASS lookup map derived from TAG_GROUPS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
had a problem deploying
to
staging
GitHub Actions
Error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
had a problem deploying
to
staging
GitHub Actions
Error
… pills Lime was too light for readable text at small sizes. Green-teal is a brand secondary color, distinct from navy/teal-dark, and passes WCAG AA with white text — no dark-text overrides needed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
…l distinction Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: John McCall <john@overturemaps.org>
John McCall (lowlydba)
had a problem deploying
to
staging
GitHub Actions
Error
Alex Iannicelli (atiannicelli)
approved these changes
May 28, 2026
Alex Iannicelli (atiannicelli)
left a comment
Alex Iannicelli (atiannicelli)
left a comment
Contributor
There was a problem hiding this comment.
Cool! Big improvement!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Community page previously displayed projects as a plain HTML table, which limited visual appeal and discoverability. This PR converts it to a card-based, filterable grid layout inspired by https://docusaurus.community/plugindirectory.
Closes #402
What changed
Card grid layout
<table>with a responsive CSS Grid (auto-fill, minmax(280px, 1fr))Images
"image"fieldscripts/fetch-og-images.mjs) fetchesog:imagemetadata for entries without an explicit image, validates each URL via HEAD request (content-type: image/*), and writes results tocommunity/og-image-cache.json(committed so CI never hits external URLs)onErroron<img>hides broken images gracefully at runtimeFiltering and sorting
"Month YYYY"release strings; composes with active tag filtersBrand palette
--om-primary-*,--om-secondary-*,--om-accent-*, etc.) incustom.cssfor reuse across the sitePreview
Notes
npm run fetch-ogafter adding new entries to populate og:image cache