diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 3c952953..7f743864 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -5,6 +5,10 @@ on: pull_request: workflow_dispatch: +concurrency: + group: lint-${{ github.event.number || github.ref }} + cancel-in-progress: true + permissions: contents: read packages: read diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 00000000..358420a8 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,35 @@ +--- +name: Test + +on: + pull_request: + workflow_dispatch: + +concurrency: + group: test-${{ github.event.number || github.ref }} + cancel-in-progress: true + +permissions: + contents: read + +jobs: + test: + name: Unit tests + runs-on: ubuntu-slim + steps: + - name: Checkout repo + uses: actions/checkout@v6 + + - name: Set up Node.js + uses: actions/setup-node@v6 + with: + node-version-file: package.json + + - name: Configure sustainable npm + uses: lowlydba/sustainable-npm@31d51025884f424f58f22e4e6578178bb4e79632 # v3.0.0 + + - name: Install NPM dependencies + run: npm ci + + - name: Run tests + run: npm test diff --git a/community/community-projects.json b/community/community-projects.json new file mode 100644 index 00000000..30d17022 --- /dev/null +++ b/community/community-projects.json @@ -0,0 +1,322 @@ +[ + { + "title": "city2graph: A Python package to construct a morphological Graph from Overture Maps", + "url": "https://city2graph.net/examples/morphological_graph_from_overturemaps.html", + "creator": "Yuta Sato, Geographic Data Science Lab", + "creatorUrl": "https://www.linkedin.com/in/yuta-sato-633750161/", + "release": "July 2025", + "tags": ["python", "buildings", "analysis", "visualization"] + }, + { + "title": "Enrich Your Dataset With GERS and Create a Tile Server", + "url": "https://docs.fused.io/blog/overture-tiles/", + "creator": "Plinio Guzman (Fused) and Jennings Anderson (Meta)", + "creatorUrl": null, + "release": "September 2024", + "tags": ["gers", "tiles", "tutorial"] + }, + { + "title": "AI-Extracted Asian Building Footprints", + "url": "https://tech.marksblogg.com/asian-building-footprints-from-google-maps.html", + "creator": "Mark Litwintschik", + "creatorUrl": "https://www.linkedin.com/in/marklitwintschik/", + "release": "August 2024", + "tags": ["buildings", "analysis"] + }, + { + "title": "PostGIS Meets DuckDB: Crunchy Bridge for Analytics Goes Spatial", + "url": "https://www.crunchydata.com/blog/postgis-meets-duckdb-crunchy-bridge-for-analytics-goes-spatial", + "creator": "Mark Slot, Crunchy Data", + "creatorUrl": "https://www.crunchydata.com/", + "release": "August 2024", + "tags": ["postgis", "duckdb", "tutorial"] + }, + { + "title": "Overture Maps GPT", + "url": "https://chatgpt.com/g/g-onSLtzQQB-overture-maps-gpt", + "creator": "Volodymyr Bilonenko, Vay", + "creatorUrl": "https://vay.io/", + "release": "August 2024", + "tags": ["places", "tools"] + }, + { + "title": "Fetch Overture: a Node.js Data Downloader", + "url": "https://github.com/Krizz/fetch_overture", + "creator": "Kristjan", + "creatorUrl": "https://github.com/Krizz", + "release": "August 2024", + "tags": ["javascript", "library"] + }, + { + "title": "Translation of Overture Documentation to Traditional Chinese (zh-Hant)", + "url": "https://overture-maps-docs.vercel.app/zh-Hant", + "creator": "Each Chen", + "creatorUrl": "https://github.com/iach526526", + "release": "July 2024", + "tags": ["docs"] + }, + { + "title": "Using Vector Embeddings to Resolve Duplicates in Place/Venue Datasets", + "url": "https://whosonfirst.org/blog/2024/08/16/dedupe/", + "creator": "Aaron Straup Cope", + "creatorUrl": "https://github.com/thisisaaronland", + "release": "July 2024", + "tags": ["places", "analysis"] + }, + { + "title": "overtureR: Load Overture Datasets as dbplyr and sf-Ready Data Frames", + "url": "https://github.com/arthurgailes/overtureR", + "creator": "Arthur Gailes", + "creatorUrl": "https://github.com/arthurgailes/", + "release": "July 2024", + "tags": ["r", "library"] + }, + { + "title": "Generate Vector Tiles from Open Map Data with PostGIS and Supabase", + "url": "https://supabase.com/blog/postgis-generate-vector-tiles", + "creator": "Brandon Liu & Thor Schaeff", + "creatorUrl": null, + "release": "June 2024", + "tags": ["tiles", "postgis", "tutorial"] + }, + { + "title": "Using DuckDB to Map Overture GERS IDs to US Census FIPS Codes", + "url": "https://www.dbreunig.com/2024/06/25/using-duckdb-spatial-joins-to-map-overture-gers-ids-to-us-census-fips-codes.html", + "creator": "Drew Breunig", + "creatorUrl": null, + "release": "June 2024", + "tags": ["duckdb", "gers", "analysis"] + }, + { + "title": "Overture Maps R Library", + "url": "https://github.com/denironyx/overturemapsr", + "creator": "Dennis Irorere", + "creatorUrl": null, + "release": "May 2024", + "tags": ["r", "library"] + }, + { + "title": "Getting and Visualizing Overture Maps Buildings Data in R", + "url": "https://walker-data.com/posts/overture-buildings/", + "creator": "Kyle Walker", + "creatorUrl": null, + "release": "May 2024", + "tags": ["r", "buildings", "visualization", "tutorial"] + }, + { + "title": "Exploring Overture Map Data: a Qualitative and Quantitative Analysis", + "url": "https://www.openstreetmap.org/user/Kshitijraj%20Sharma/diary", + "creator": "Kshitij Raj Sharma, Humanitarian OpenStreetMap", + "creatorUrl": "https://github.com/kshitijrajsharma", + "release": "May 2024", + "tags": ["analysis", "buildings", "places"] + }, + { + "title": "Using the Overture Maps Python Library With Lonboard", + "url": "https://developmentseed.org/lonboard/latest/examples/overture-maps/", + "creator": "Kyle Barron, Development Seed", + "creatorUrl": null, + "release": "April 2024", + "tags": ["python", "visualization"] + }, + { + "title": "Overture Maps Data in Big Query and Snowflake: How to Use it With Carto", + "url": "https://carto.com/blog/overture-maps-data-now-on-the-cloud-use-it-with-carto", + "creator": "Javier de la Torre & Helen McKenzie, Carto", + "creatorUrl": null, + "release": "April 2024", + "tags": ["tutorial", "analysis"] + }, + { + "title": "Making Overture Maps Data More Efficient With GeoParquet and Apache Sedona", + "url": "https://wherobots.com/overture-maps-data-cloud-native-geoparquet-apache-sedona/", + "creator": "Feng Jiang, Microsoft; Jia Yu and William Lyon, Wherobots", + "creatorUrl": null, + "release": "April 2024", + "tags": ["spark", "tutorial"] + }, + { + "title": "Overture Maps Downloader", + "url": "https://pypi.org/project/overturemapsdownloader/", + "creator": "Youssef Harby", + "creatorUrl": null, + "release": "April 2024", + "tags": ["python", "library"] + }, + { + "title": "Exploring Overture Buildings in Fused", + "url": "https://docs.fused.io/basics/tutorials/overture/", + "creator": "Fused.io team", + "creatorUrl": "https://www.fused.io/", + "release": "March 2024", + "tags": ["buildings", "visualization"] + }, + { + "title": "Go Cloud Native! Overture GeoParquet, From Object Store to Feature Layer via Online Notebook", + "url": "https://community.esri.com/t5/arcgis-data-interoperability-blog/go-cloud-native-overture-geoparquet-from-object/ba-p/1371965", + "creator": "Bruce Harold, Esri", + "creatorUrl": null, + "release": "January 2024", + "tags": ["tutorial", "arcgis"] + }, + { + "title": "Getting Overture Maps Data Into PostGIS", + "url": "https://python.plainenglish.io/downloading-overture-map-foundations-buildings-data-using-apache-sedona-with-docker-python-and-473f5175f241", + "creator": "Pavlos Demetriades", + "creatorUrl": null, + "release": "January 2024", + "tags": ["postgis", "buildings", "tutorial"] + }, + { + "title": "Tokyo Walking Guide Tour", + "url": "https://tech.marksblogg.com/tokyo-walking-tour-guide.html", + "creator": "Mark Litwintschik, Consultant", + "creatorUrl": null, + "release": "January 2024", + "tags": ["places", "visualization"] + }, + { + "title": "Planetiler Overture Demo", + "url": "https://msbarry.github.io/planetiler-overture-demo/#13.99/42.35625/-71.06989", + "creator": "Michael Barry", + "creatorUrl": null, + "release": "December 2023", + "tags": ["tiles", "visualization"] + }, + { + "title": "Mapping the Future: How Overture Transportation Network Data Model Enhances Geospatial Applications", + "url": "https://engineering.tomtom.com/overture-transportation-network-linear-referencing/", + "creator": "Siavash Shakeri, TomTom", + "creatorUrl": null, + "release": "November 2023", + "tags": ["transportation", "analysis"] + }, + { + "title": "How to Query Overture Maps Data in ArcGIS Pro With DuckDB", + "url": "https://www.spatialnode.net/articles/how-to-query-overture-maps-foundation-data-in-arcgis-pro-with-duck-dbc094f9", + "creator": "Emmanuel Jolaiya Ayodele", + "creatorUrl": null, + "release": "November 2023", + "tags": ["duckdb", "arcgis", "tutorial"] + }, + { + "title": "Overture's Global Geospatial Datasets", + "url": "https://tech.marksblogg.com/overture-gis-data.html", + "creator": "Mark Litwintschik, Consultant", + "creatorUrl": null, + "release": "November 2023", + "tags": ["analysis"] + }, + { + "title": "Enriching Overture Data With GERS", + "url": "https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/enriching-overture-data-with-gers/", + "creator": "Deane Kensok, Esri", + "creatorUrl": null, + "release": "October 2023", + "tags": ["gers", "arcgis", "tutorial"] + }, + { + "title": "Creating Map Tiles From Overture Data", + "url": "https://github.com/bdon/overture-tiles", + "creator": "Brandon Liu, Protomaps", + "creatorUrl": "https://protomaps.com/", + "release": "October 2023", + "tags": ["tiles"] + }, + { + "title": "A Workflow for Using Overture Places Data in OSM", + "url": "https://www.openstreetmap.org/user/mikelmaron/diary/402600", + "creator": "Mikel Maron, Earth Genome", + "creatorUrl": "https://www.earthgenome.org/", + "release": "October 2023", + "tags": ["places", "tutorial"] + }, + { + "title": "Using Overture Maps Data in GeoAnalytics Engine", + "url": "https://community.esri.com/t5/geoanalytics-engine-blog/using-overture-maps-data-in-geoanalytics-engine/ba-p/1341493", + "creator": "Sarah Battersby, Esri", + "creatorUrl": null, + "release": "October 2023", + "tags": ["arcgis", "analysis"] + }, + { + "title": "Tools for Working With Open Building Datasets", + "url": "https://open.gishub.org/open-buildings/", + "creator": "Chris Holmes, Radiant Earth", + "creatorUrl": null, + "release": "October 2023", + "tags": ["buildings", "tools"] + }, + { + "title": "Let's Explore Overture Maps", + "url": "https://medium.com/@singh.tanya3298/lets-explore-overture-maps-3209c25d6c97", + "creator": "Tanya Singh, unicube geospatial solutions", + "creatorUrl": null, + "release": "October 2023", + "tags": ["tutorial", "places", "buildings"] + }, + { + "title": "Importing Overture Maps Data Into Neo4j", + "url": "https://lyonwj.com/blog/importing-overture-maps-neo4j-aws-athena-spatial-sql-query", + "creator": "William Lyon, Wherobots", + "creatorUrl": null, + "release": "July 2023", + "tags": ["analysis", "places"] + }, + { + "title": "Overture Maps Data for Japan", + "url": "https://shi-works.github.io/Overture-Maps-Data-for-GIS/#16.18/35.680945/139.767552/-12.7/60", + "creator": "@shi_works", + "creatorUrl": "https://twitter.com/shi__works", + "release": "July 2023", + "tags": ["visualization"] + }, + { + "title": "Overture Places Quality Analysis", + "url": "https://observablehq.com/d/9847c08c46f56ed6", + "creator": "Willie Marcel, Development Seed", + "creatorUrl": "https://developmentseed.org/", + "release": "July 2023", + "tags": ["places", "analysis"] + }, + { + "title": "Harnessing Overture Maps Data: Apache Sedona's Journey From Parquet to GeoParquet", + "url": "https://medium.com/@dr.jiayu/harnessing-overture-maps-data-apache-sedonas-journey-from-parquet-to-geoparquet-d99f7767a499", + "creator": "Jia Yu, Wherobots", + "creatorUrl": null, + "release": "July 2023", + "tags": ["spark", "tutorial"] + }, + { + "title": "Overture Cheat Sheet, work in progress", + "url": "https://www.postholer.com/articles/Overature-Cheat-Sheet", + "creator": "Scott Parks, postholer.com", + "creatorUrl": "https://www.postholer.com/", + "release": "July 2023", + "tags": ["docs"] + }, + { + "title": "Accessing Overture Maps' Global Dataset Using Athena (AWS)", + "url": "https://feyeandal.me/blog/access_overture_data_using_athena", + "creator": "Feye Andal, Humanitarian OpenStreetMap Team", + "creatorUrl": "https://www.hotosm.org/", + "release": "July 2023", + "tags": ["tutorial", "analysis"] + }, + { + "title": "Exploring the Overture Maps Places Data Using DuckDB, sqlite-utils and Datasette", + "url": "https://til.simonwillison.net/overture-maps/overture-maps-parquet", + "creator": "Simon Willison, Datasette", + "creatorUrl": "https://datasette.io/", + "release": "July 2023", + "tags": ["duckdb", "places", "tutorial"] + }, + { + "title": "Overture Buildings and Places (Cloud-Native Geo Experiments)", + "url": "https://beta.source.coop/repositories/cholmes/overture/description/", + "creator": "Chris Holmes, Radiant Earth", + "creatorUrl": null, + "release": "July 2023", + "tags": ["buildings", "places"] + } +] diff --git a/community/index.mdx b/community/index.mdx index 69a60484..de6a3c1c 100644 --- a/community/index.mdx +++ b/community/index.mdx @@ -2,50 +2,10 @@ title: Made by the Overture Community --- +import CommunityTable from '@site/src/components/CommunityTable'; + # Made by the Overture Community We invite you to explore the many tutorials, blog posts, and projects created by the Overture community. Want to build your own project? Get started [here](/getting-data). - -| Project | Creator | Data Release | -| ---------- | -------- | -------- | -| [city2graph: A Python package to construct a morphological Graph from Overture Maps](https://city2graph.net/examples/morphological_graph_from_overturemaps.html) | [Yuta Sato, Geographic Data Science Lab](https://www.linkedin.com/in/yuta-sato-633750161/) | July 2025 | -| [Enrich Your Dataset With GERS and Create a Tile Server](https://docs.fused.io/blog/overture-tiles/) | Plinio Guzman (Fused) and Jennings Anderson (Meta) | September 2024 | -| [AI-Extracted Asian Building Footprints](https://tech.marksblogg.com/asian-building-footprints-from-google-maps.html) | [Mark Litwintschik](https://www.linkedin.com/in/marklitwintschik/) | August 2024 | -| [PostGIS Meets DuckDB: Crunchy Bridge for Analytics Goes Spatial](https://www.crunchydata.com/blog/postgis-meets-duckdb-crunchy-bridge-for-analytics-goes-spatial) | Mark Slot, [Crunchy Data](https://www.crunchydata.com/) | August 2024 | -| [Overture Maps GPT](https://chatgpt.com/g/g-onSLtzQQB-overture-maps-gpt) | Volodymyr Bilonenko, [Vay](https://vay.io/) | August 2024 | -| [Fetch Overture: a Node.js Data Downloader](https://github.com/Krizz/fetch_overture) | [Kristjan](https://github.com/Krizz) | August 2024 | -| [Translation of Overture Documentation to Traditional Chinese (zh-Hant)](https://overture-maps-docs.vercel.app/zh-Hant) | [Each Chen](https://github.com/iach526526) | July 2024 | -| [Using Vector Embeddings to Resolve Duplicates in Place/Venue Datasets](https://whosonfirst.org/blog/2024/08/16/dedupe/) | [Aaron Straup Cope](https://github.com/thisisaaronland) | July 2024 | -| [overtureR: Load Overture Datasets as `dbplyr` and `sf`-Ready Data Frames](https://github.com/arthurgailes/overtureR) | [Arthur Gailes](https://github.com/arthurgailes/) | July 2024 | -| [Generate Vector Tiles from Open Map Data with PostGIS and Supabase](https://supabase.com/blog/postgis-generate-vector-tiles) | [Brandon Liu](https://x.com/bdon) & [Thor Schaeff](https://x.com/thorwebdev) | June 2024 | -| [Using DuckDB to Map Overture GERS IDs to US Census FIPS Codes](https://www.dbreunig.com/2024/06/25/using-duckdb-spatial-joins-to-map-overture-gers-ids-to-us-census-fips-codes.html) | Drew Breunig | June 2024 | -| [Overture Maps R Library](https://github.com/denironyx/overturemapsr) | Dennis Irorere | May 2024 | -| [Getting and Visualizing Overture Maps Buildings Data in R](https://walker-data.com/posts/overture-buildings/) | Kyle Walker | May 2024 | -| [Exploring Overture Map Data: a Qualitative and Quantitative Analysis](https://www.openstreetmap.org/user/Kshitijraj%20Sharma/diary) | [Kshitij Raj Sharma, Humanitarian Open Street Map](https://github.com/kshitijrajsharma) | May 2024 | -| [Using the Overture Maps Python Library With Lonboard](https://developmentseed.org/lonboard/latest/examples/overture-maps/) | Kyle Barron, Development Seed | April 2024 | -| [Overture Maps Data in Big Query and Snowflake: How to Use it With Carto](https://carto.com/blog/overture-maps-data-now-on-the-cloud-use-it-with-carto) | Javier de la Torre & Helen McKenzie, Carto | April 2024 | -| [Making Overture Maps Data More Efficient With GeoParquet and Apache Sedona](https://wherobots.com/overture-maps-data-cloud-native-geoparquet-apache-sedona/) | Feng Jiang, Microsoft; Jia Yu and William Lyon, Wherobots | April 2024 | -| [Overture Maps Downloader](https://pypi.org/project/overturemapsdownloader/) | Youssef Harby | April 2024 | -| [Exploring Overture Buildings in Fused](https://docs.fused.io/basics/tutorials/overture/) | [Fused.io](https://www.fused.io/) team | March 2024 | -| [Go Cloud Native! Overture GeoParquet, From Object Store to Feature Layer via Online Notebook](https://community.esri.com/t5/arcgis-data-interoperability-blog/go-cloud-native-overture-geoparquet-from-object/ba-p/1371965) | Bruce Harold, Esri | January 2024 | -| [Getting Overture Maps Data Into PostGIS](https://python.plainenglish.io/downloading-overture-map-foundations-buildings-data-using-apache-sedona-with-docker-python-and-473f5175f241) | Pavlos Demetriades | January 2024 | -| [Tokyo Walking Guide Tour](https://tech.marksblogg.com/tokyo-walking-tour-guide.html) | Mark Litwintschik, Consultant | January 2024 | -| [Planetiler Overture Demo](https://msbarry.github.io/planetiler-overture-demo/#13.99/42.35625/-71.06989) | Michael Barry | December 2023 | -| [Mapping the Future: How Overture Transportation Network Data Model Enhances Geospatial Applications](https://engineering.tomtom.com/overture-transportation-network-linear-referencing/) | Siavash Shakeri, TomTom | November 2023 | -| [How to Query Overture Maps Data in ArcGIS Pro With DuckDB](https://www.spatialnode.net/articles/how-to-query-overture-maps-foundation-data-in-arcgis-pro-with-duck-dbc094f9) | Emmanuel Jolaiya Ayodele | November 2023 | -| [Overture's Global Geospatial Datasets](https://tech.marksblogg.com/overture-gis-data.html) | Mark Litwintschik, Consultant | November 2023 | -| [Enriching Overture Data With GERS](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/enriching-overture-data-with-gers/) | Deane Kensok, Esri | October 2023 | -| [Creating Map Tiles From Overture Data](https://github.com/bdon/overture-tiles) | Brandon Liu, [Protomaps](https://protomaps.com/) | October 2023 | -| [A Workflow for Using Overture Places Data in OSM](https://www.openstreetmap.org/user/mikelmaron/diary/402600) | Mikel Maron, [Earth Genome](https://www.earthgenome.org/) | October 2023 | -| [Using Overture Maps Data in GeoAnalytics Engine](https://community.esri.com/t5/geoanalytics-engine-blog/using-overture-maps-data-in-geoanalytics-engine/ba-p/1341493) | Sarah Battersby, Esri | October 2023 | -| [Tools for Working With Open Building Datasets](https://open.gishub.org/open-buildings/) | Chris Holmes, Radiant Earth | October 2023 | -| [Let's Explore Overture Maps](https://medium.com/@singh.tanya3298/lets-explore-overture-maps-3209c25d6c97) | Tanya Singh, unicube geospatial solutions | October 2023 | -| [Importing Overture Maps Data Into Neo4j](https://lyonwj.com/blog/importing-overture-maps-neo4j-aws-athena-spatial-sql-query) | William Lyon, Wherobots | July 2023 | -| [Overture Maps Data for Japan](https://shi-works.github.io/Overture-Maps-Data-for-GIS/#16.18/35.680945/139.767552/-12.7/60) | [@shi_works](https://twitter.com/shi__works) | July 2023 | -| [Overture Places Quality Analysis](https://observablehq.com/d/9847c08c46f56ed6) | Willie Marcel, [Development Seed](https://developmentseed.org/) | July 2023 | -| [Harnessing Overture Maps Data: Apache Sedona's Journey From Parquet to GeoParquet](https://medium.com/@dr.jiayu/harnessing-overture-maps-data-apache-sedonas-journey-from-parquet-to-geoparquet-d99f7767a499) | Jia Yu, Wherobots | July 2023 | -| [Overture Cheat Sheet, work in progress](https://www.postholer.com/articles/Overature-Cheat-Sheet) | Scott Parks, [postholer.com](https://www.postholer.com/) | July 2023 | -| [Accessing Overture Maps' Global Dataset Using Athena (AWS)](https://feyeandal.me/blog/access_overture_data_using_athena) | Feye Andal, [Humanitarian OpenStreetMap Team](https://www.hotosm.org/) | July 2023 | -| [Exploring the Overture Maps Places Data Using DuckDB, sqlite-utils and Datasette](https://til.simonwillison.net/overture-maps/overture-maps-parquet) | Simon Willison, [Datasette](https://datasette.io/) | July 2023 | -| [Overture Buildings and Places (Cloud-Native Geo Experiments)](https://beta.source.coop/repositories/cholmes/overture/description/) | Chris Holmes, Radiant Earth | July 2023 | + diff --git a/src/components/CommunityTable.jsx b/src/components/CommunityTable.jsx new file mode 100644 index 00000000..7871a08f --- /dev/null +++ b/src/components/CommunityTable.jsx @@ -0,0 +1,112 @@ +import React, { useState, useMemo } from 'react'; +import ENTRIES from '@site/community/community-projects.json'; +import styles from './CommunityTable.module.css'; + +// Ordered groups for the filter UI +const TAG_GROUPS = [ + { + label: 'Theme', + tags: ['buildings', 'places', 'transportation', 'tiles', 'gers'], + }, + { + label: 'Tool', + tags: ['duckdb', 'postgis', 'python', 'r', 'spark', 'javascript', 'arcgis'], + }, + { + label: 'Type', + tags: ['tutorial', 'library', 'visualization', 'analysis', 'tools', 'docs'], + }, +]; + +export default function CommunityTable() { + const [activeTags, setActiveTags] = useState(new Set()); + + const toggle = (tag) => { + setActiveTags((prev) => { + const next = new Set(prev); + if (next.has(tag)) { + next.delete(tag); + } else { + next.add(tag); + } + return next; + }); + }; + + const filtered = useMemo(() => { + if (activeTags.size === 0) return ENTRIES; + const selectedTags = [...activeTags]; + return ENTRIES.filter((e) => selectedTags.every((t) => e.tags.includes(t))); + }, [activeTags]); + + return ( +
+
+ {TAG_GROUPS.map((group) => ( +
+ {group.label} + {group.tags.map((tag) => ( + + ))} +
+ ))} + {activeTags.size > 0 && ( +
+ + + {' '}— {filtered.length} of {ENTRIES.length} entries + +
+ )} +
+ + + + + + + + + + + {filtered.map((entry) => ( + + + + + + ))} + +
ProjectCreatorData Release
+ + {entry.title} + +
+ {entry.tags.map((tag) => ( + + {tag} + + ))} +
+ 		+ {entry.creatorUrl ? ( + + {entry.creator} + + ) : ( + entry.creator + )} + {entry.release}
+
+ ); +} diff --git a/src/components/CommunityTable.module.css b/src/components/CommunityTable.module.css new file mode 100644 index 00000000..7ce2c701 --- /dev/null +++ b/src/components/CommunityTable.module.css @@ -0,0 +1,68 @@ +.filterBar { + margin-bottom: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.group { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.4rem; +} + +.groupLabel { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--ifm-color-emphasis-600); + margin-right: 0.25rem; + min-width: 5rem; +} + +.pill { + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 1rem; + font-size: 0.75rem; + cursor: pointer; + border: 1px solid var(--ifm-color-emphasis-300); + background-color: transparent; + color: var(--ifm-color-emphasis-700); + transition: all 0.15s; + user-select: none; +} + +.pillActive { + border-color: var(--ifm-color-primary); + background-color: var(--ifm-color-primary); + color: #fff; +} + +.clearBtn { + font-size: 0.75rem; + cursor: pointer; + color: var(--ifm-color-primary); + background: none; + border: none; + padding: 0.2rem 0; + text-decoration: underline; +} + +.count { + font-size: 0.8rem; + color: var(--ifm-color-emphasis-600); + margin-top: 0.25rem; +} + +.entryTag { + display: inline-block; + padding: 0.1rem 0.45rem; + border-radius: 0.75rem; + font-size: 0.7rem; + background-color: var(--ifm-color-emphasis-100); + color: var(--ifm-color-emphasis-700); + margin-right: 0.25rem; + margin-top: 0.15rem; +} diff --git a/src/components/__tests__/CommunityTable.test.jsx b/src/components/__tests__/CommunityTable.test.jsx new file mode 100644 index 00000000..484954cc --- /dev/null +++ b/src/components/__tests__/CommunityTable.test.jsx @@ -0,0 +1,147 @@ +// @vitest-environment jsdom +import React from 'react'; +import { describe, it, expect, afterEach } from 'vitest'; +import { render, screen, cleanup, fireEvent } from '@testing-library/react'; +import CommunityTable from '../CommunityTable'; +import ENTRIES from '../../../community/community-projects.json'; + +afterEach(cleanup); + +describe('CommunityTable', () => { + describe('initial render', () => { + it('renders table headers', () => { + render(); + expect(screen.getByText('Project')).toBeInTheDocument(); + expect(screen.getByText('Creator')).toBeInTheDocument(); + expect(screen.getByText('Data Release')).toBeInTheDocument(); + }); + + it('renders all entries by default', () => { + render(); + const rows = screen.getAllByRole('row'); + // subtract header row + expect(rows.length - 1).toBe(ENTRIES.length); + }); + + it('renders filter pill for every tag', () => { + render(); + const expectedTags = [ + 'buildings', 'places', 'transportation', 'tiles', 'gers', + 'duckdb', 'postgis', 'python', 'r', 'spark', 'javascript', 'arcgis', + 'tutorial', 'library', 'visualization', 'analysis', 'tools', 'docs', + ]; + for (const tag of expectedTags) { + expect(screen.getByRole('button', { name: tag })).toBeInTheDocument(); + } + }); + + it('does not show clear-filters button initially', () => { + render(); + expect(screen.queryByRole('button', { name: /clear filters/i })).not.toBeInTheDocument(); + }); + + it('renders entry titles as links', () => { + render(); + const firstEntry = ENTRIES[0]; + const link = screen.getByRole('link', { name: firstEntry.title }); + expect(link).toHaveAttribute('href', firstEntry.url); + }); + + it('renders creator as a link when creatorUrl is set', () => { + render(); + const entryWithUrl = ENTRIES.find((e) => e.creatorUrl); + const link = screen.getByRole('link', { name: entryWithUrl.creator }); + expect(link).toHaveAttribute('href', entryWithUrl.creatorUrl); + }); + + it('renders creator as plain text when creatorUrl is null', () => { + render(); + const entryWithoutUrl = ENTRIES.find((e) => !e.creatorUrl); + expect(screen.getAllByText(entryWithoutUrl.creator).length).toBeGreaterThan(0); + // Confirm it's not wrapped in an anchor pointing somewhere + const creatorLinks = screen + .queryAllByRole('link') + .filter((el) => el.textContent === entryWithoutUrl.creator); + expect(creatorLinks).toHaveLength(0); + }); + }); + + describe('tag filtering', () => { + it('filters entries when a tag pill is clicked', () => { + render(); + const tag = 'duckdb'; + fireEvent.click(screen.getByRole('button', { name: tag })); + + const expectedCount = ENTRIES.filter((e) => e.tags.includes(tag)).length; + const rows = screen.getAllByRole('row'); + expect(rows.length - 1).toBe(expectedCount); + }); + + it('applies AND logic when multiple tags are selected', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'duckdb' })); + fireEvent.click(screen.getByRole('button', { name: 'tutorial' })); + + const expectedCount = ENTRIES.filter( + (e) => e.tags.includes('duckdb') && e.tags.includes('tutorial'), + ).length; + const rows = screen.getAllByRole('row'); + expect(rows.length - 1).toBe(expectedCount); + }); + + it('deselecting a tag restores the broader filtered set', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'duckdb' })); + fireEvent.click(screen.getByRole('button', { name: 'tutorial' })); + // deselect tutorial + fireEvent.click(screen.getByRole('button', { name: 'tutorial' })); + + const expectedCount = ENTRIES.filter((e) => e.tags.includes('duckdb')).length; + const rows = screen.getAllByRole('row'); + expect(rows.length - 1).toBe(expectedCount); + }); + + it('deselecting all tags shows all entries again', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'duckdb' })); + fireEvent.click(screen.getByRole('button', { name: 'duckdb' })); + + const rows = screen.getAllByRole('row'); + expect(rows.length - 1).toBe(ENTRIES.length); + }); + + it('shows clear-filters button when a tag is active', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'buildings' })); + expect(screen.getByRole('button', { name: /clear filters/i })).toBeInTheDocument(); + }); + + it('clear-filters button resets to all entries', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'buildings' })); + fireEvent.click(screen.getByRole('button', { name: /clear filters/i })); + + const rows = screen.getAllByRole('row'); + expect(rows.length - 1).toBe(ENTRIES.length); + expect(screen.queryByRole('button', { name: /clear filters/i })).not.toBeInTheDocument(); + }); + + it('shows entry count when filtered', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'duckdb' })); + + const expectedCount = ENTRIES.filter((e) => e.tags.includes('duckdb')).length; + expect( + screen.getByText(new RegExp(`${expectedCount} of ${ENTRIES.length}`)), + ).toBeInTheDocument(); + }); + + it('tag pills have keyboard-accessible attributes', () => { + render(); + // role="button" makes pills keyboard-reachable. Full keydown→toggle + // behaviour requires @testing-library/user-event and is covered by the + // onClick tests above. + expect(screen.getByRole('button', { name: 'tiles' })).toBeInTheDocument(); + }); + }); +}); diff --git a/vitest.config.js b/vitest.config.js index fe4dbed3..2e9805eb 100644 --- a/vitest.config.js +++ b/vitest.config.js @@ -1,6 +1,13 @@ import { defineConfig } from 'vitest/config'; +import path from 'path'; export default defineConfig({ + resolve: { + alias: { + // Mirror the @site alias that Docusaurus/webpack provides at build time + '@site': path.resolve(__dirname), + }, + }, test: { include: ['src/**/__tests__/**/*.test.{js,jsx}'], setupFiles: ['./src/setupTests.js'],