Skip to content

Commit 17639eb

Browse files
authored
Merge pull request #41 from CodeForPittsburgh/modernize-2026
It's time.
2 parents 6aec156 + c4e5193 commit 17639eb

166 files changed

Lines changed: 7267 additions & 36120 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.env.example

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
VITE_FISHFRY_API_URL=https://data.pghfishfry.org/api/fishfries/
2+
VITE_FISHFRY_FALLBACK_URL=/data/fishfrymap.geojson
3+
VITE_FISHFRY_YEAR=2026
4+
VITE_MAPBOX_TOKEN=
5+
VITE_CLIENT_ERROR_DSN=
6+
VITE_CLIENT_ERROR_SAMPLE_RATE=1

.github/workflows/ci.yml

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
- master
8+
pull_request:
9+
10+
jobs:
11+
test-and-build:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: 22
22+
cache: npm
23+
24+
- name: Install dependencies
25+
run: npm ci
26+
27+
- name: Build
28+
run: npm run build
29+
30+
- name: Unit tests
31+
run: npm run test:unit
32+
33+
- name: Install Playwright Chromium
34+
run: npx playwright install --with-deps chromium
35+
36+
- name: Parity tests
37+
run: npm run test:parity

.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/_site
22
/.vscode
33
/node_modules
4+
/dist
5+
/.env
6+
/test-results
7+
/playwright-report
48
/nbproject/private/
5-
/nbproject
9+
/nbproject

README.md

Lines changed: 94 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,128 @@ The Pittsburgh Lenten Fish Fry Map is the brainchild of Hollen Barmer, who has t
66

77
The raw data isn't here! That is by design. The map gets data from the Fish Fry API @ [fishfry.codeforpgh.com/api/fishfries](http://fishfry.codeforpgh.com/api/fishfries). Anyone can use that URL to get data to make their own fish fry map, or do things with the Fish Fry data that we haven't thought of. If you want to learn more about the database and API, head over to the [Fish Fry Form](https://github.com/CodeForPittsburgh/fishfryform) repository.
88

9-
Occassional snapshots of the data from are being dumped into the `data` folder of this repo, but only for posterity.
9+
Occassional snapshots of the data are kept in `public/data` for local fallback and posterity.
1010

11-
## Development
12-
13-
This is a static web site. We're serving it up with GitHub pages, but it can run on any web server as-is, really.
11+
## Developer Quickstart
1412

1513
### Prerequisites
1614

17-
To develop this, you have [NodeJS](https://nodejs.org/en/) installed, such that you can call `node` and `npm` from the command line.
15+
- Node.js `22.x` (matches CI)
16+
- npm `10+`
17+
18+
### 1) Install dependencies
19+
20+
```bash
21+
npm ci
22+
```
23+
24+
### 2) Configure environment
25+
26+
Create a local env file:
27+
28+
```bash
29+
cp .env.example .env
30+
```
31+
32+
Current variables:
33+
34+
- `VITE_FISHFRY_API_URL=https://data.pghfishfry.org/api/fishfries/`
35+
- `VITE_FISHFRY_FALLBACK_URL=/data/fishfrymap.geojson`
36+
- `VITE_MAPBOX_TOKEN=` (optional, enables Mapbox geocoding suggestions)
37+
- `VITE_CLIENT_ERROR_DSN=` (optional, client-side error reporting target)
38+
- `VITE_CLIENT_ERROR_SAMPLE_RATE=1` (`0..1`)
39+
40+
### 3) Start local development server
41+
42+
```bash
43+
npm run dev
44+
```
45+
46+
App runs at `http://localhost:5173`.
1847

19-
Then, in the root of this directory, run:
48+
### 4) Run tests
2049

21-
`npm install`
50+
Unit tests:
2251

23-
This will use the `package.json` file to get and install NodeJS dependencies locally, in a `node_modules` folder.
52+
```bash
53+
npm run test:unit
54+
```
2455

25-
You will also need these things (available on [NPM](https://www.npmjs.com)):
56+
Playwright parity tests (first-time setup):
2657

27-
* [GulpJS](https://www.npmjs.com/package/gulp), with `gulp` callable from the command line. Install with `npm install gulp@4.0 -g`
28-
* [Http-Server](https://www.npmjs.com/package/http-server), with `http-server` callable from the command line. Install with: `npm install http-server -g`
58+
```bash
59+
npx playwright install --with-deps chromium
60+
npm run test:parity
61+
```
2962

30-
Those two things need to be available globally. the `-g` flag in those commands makes sure of that.
63+
Run all tests:
3164

32-
### Building and Watching
65+
```bash
66+
npm test
67+
```
3368

34-
GulpJS is a task-runner that compiles and bundles source code from `src` folder into the `assets` folder. Since the deployment path for this is GitHub pages, we put things into the `assets` folder, which is where Jekyll, the software that runs GitHub pages, expects those things to be.
69+
### 5) Build and preview production bundle
3570

36-
We run those tasks with `npm` scripts.
71+
```bash
72+
npm run build
73+
npm run preview
74+
```
3775

38-
Running `npm run build` will compile and bundle the source code one time.
76+
`npm run build` outputs to `dist/`.
3977

40-
Running `npm run dev` will do that, plus run `http-server`, open the site in a web browser at [http://localhost:3000](http://localhost:3000), and, upon detecting changes to files in `src`, re-runs compiling/bundling and refreshes your browser. Nice!
78+
## Scripts
4179

42-
If the site doesn't load after `pnpm run dev`, check [http://localhost:4000](http://localhost:4000) in your browser. This is where `http-server` lives. If you don't see anything there, make sure you can run `http-server` from the command line (see **prerequisites** above).
80+
- `npm run dev` starts Vite dev server
81+
- `npm run build` builds production bundle
82+
- `npm run preview` serves the production bundle
83+
- `npm run test:unit` runs Vitest unit tests
84+
- `npm run test:parity` runs Playwright parity tests
85+
- `npm test` runs both suites
4386

44-
### Where the functionality lives / where you can hack on the code
87+
## Project Layout
4588

46-
Most of the work is happening in `src/js/app.js`. The rest happens in `index.html`.
89+
- `src/` app source code
90+
- `src/features/` UI and map features
91+
- `src/store/` Redux Toolkit slices and APIs
92+
- `src/domain/` shared business logic (filters, date logic, normalization)
93+
- `src/styles/` app styles and theme overrides
94+
- `public/data/fishfrymap.geojson` fallback dataset used when API is unavailable
4795

48-
> TODO: the source code for this app is a bit of a mess...the result of quick prototyping.
96+
## Theming
4997

50-
### Deploying this Site
98+
- Base theme: `bootswatch/dist/darkly/bootstrap.min.css` (imported in `src/main.jsx`)
99+
- Brand overrides: `src/styles/theme-overrides.css`
100+
- App-level custom styles: `src/styles/app.css`
51101

52-
Run `npm run build`, commit changes, and push as-is to GitHub to deploy.
102+
Primary brand color is set to `#fcb82e` in `src/styles/theme-overrides.css`.
103+
104+
## Data Source
105+
106+
Map data is fetched from:
107+
108+
- `https://data.pghfishfry.org/api/fishfries/`
109+
110+
If the primary API is unavailable, the app falls back to:
111+
112+
- `/data/fishfrymap.geojson`
113+
114+
If you want to learn more about the API and curation tooling, see:
115+
116+
- [CodeForPittsburgh/fishfryform](https://github.com/CodeForPittsburgh/fishfryform)
117+
118+
## Deployment
119+
120+
Run `npm run build` and deploy the generated `dist/` assets.
53121

54122
## Credits
55123

56124
The Fish Fry Map is built and maintained by members of Code for Pittsburgh.
57125

58-
It started with <a href='https://github.com/bmcbride/bootleaf'>Bootleaf</a> (which we've adapted it and modified heavily for this project), and uses <a href="http://getbootstrap.com/">Bootstrap 3</a>, <a href="http://leafletjs.com/" target="_blank">Leaflet</a>, and <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>, among other things.
59-
60126
### Basemaps
61127

62-
Our nice basemaps come from all over!
63-
64-
* **Light** and **Dark** basemaps: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CARTO</a>
65-
* **Black n' Gold** basemap: Map tiles from <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> license. Basemap data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a> license.
128+
- **Light** and **Dark** basemaps: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CARTO</a>
129+
- **Black n' Gold** basemap: Map tiles from <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> license. Basemap data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a> license.
66130

67131
### Icons
68132

69-
Church and Warehouse icons come from © Mapbox.
133+
Church and Warehouse icons come from &copy; Mapbox.

assets/README.MD

Lines changed: 0 additions & 5 deletions
This file was deleted.

assets/css/bundle.core.css

Lines changed: 0 additions & 14 deletions
This file was deleted.

assets/css/images/layers-2x.png

-1.23 KB
Binary file not shown.

assets/css/images/layers.png

-696 Bytes
Binary file not shown.
-2.41 KB
Binary file not shown.

assets/css/images/marker-icon.png

-1.43 KB
Binary file not shown.

0 commit comments

Comments
 (0)