Thanks for contributing to gridlook.
This project is a Vue 3 + TypeScript + Vite application for exploring Earth system model output on native grids in the browser. The notes below are meant to keep contributions aligned with the current tooling and release workflow.
- Node.js
>=20.17as defined inpackage.json npm
CI currently runs on newer Node versions as well, so using a recent LTS release locally is a good default.
npm installnpm run devThe app is served at http://localhost:3000.
Run these before opening a pull request:
npm run lint
npm run typecheck
npm run buildThere is currently no dedicated test suite in the repository. The main quality gate today is:
- ESLint
- TypeScript type checking
- A production build
Git hooks are installed through Husky on npm install:
pre-commitrunslint-stagedandnpm run typechecklint-stagedruns ESLint with--fixand Prettier on staged JS, TS, and Vue files, and Prettier on staged JSON and Markdown filescommit-msgruns Commitlint to verify the commit message format
In practice, Husky checks commit messages and runs linting, automatic fixes where possible, and type checking during the commit flow. If a hook fails, fix the remaining issue locally before retrying the commit.
- Create a focused branch from
main. - Keep changes scoped to one concern when possible.
- Run the local checks above.
- Open a pull request with a clear description of the change.
For UI or rendering changes, include screenshots or a short screen recording if the visual result is not obvious from the diff.
This repository follows the Conventional Commit Guidelines and validates commit messages with Commitlint.
Use this format:
type(scope): short description
Scope is optional but recommended. A commit without a scope is also valid:
type: short description
Allowed commit types:
featfor user-facing featuresfixfor user-facing bug fixesrefactortestchorestyledocs
Allowed scopes:
uilibconfigdepsdocsassets
Examples:
feat(ui): add variable search to selector
fix(lib): handle reduced gaussian longitude wrapping
docs(docs): clarify cloud dataset requirements
The main branch is wired to Release Please, so commit history is part of the
release process. Use descriptive commit messages and avoid manually editing
CHANGELOG.md unless the change
explicitly requires it. In the current release flow, only feat and fix
commits result in changelog entries, so choose those types when the change
should appear in release notes. As a rule, reserve feat and fix for
user-facing changes; use refactor, chore, or docs for internal work
unless the implementation change is large enough that it meaningfully affects
the release narrative.
Key directories:
src/uifor Vue UI, overlays, and grid presentation componentssrc/libfor rendering, projection, layer, and data-access logicsrc/storefor shared state and URL/presenter synchronizationsrc/utilsfor general helperspublic/staticfor static datasets, geojson, and colormap assetsdocsfor project documentation and presentation materialscriptsfor maintenance scripts
ESLint boundary rules enforce the high-level dependency flow between these
areas. If you introduce a new import path or module location, check
eslint.config.js and keep the layering consistent.
In particular, keep src/lib as self-contained as
possible. Core rendering and data logic should have little to no dependencies
on code outside src/lib other than shared utilities or assets that already
fit the existing boundary rules.
- Prefer TypeScript for logic changes.
- Vue components must use
<script setup lang="ts">. - Use the
@alias for imports rooted atsrc/(e.g.import Foo from "@/lib/Foo"). - Keep imports ordered; ESLint will flag issues.
- Prettier is the formatting baseline for JS, TS, Vue, JSON, and Markdown.
- Favor small, targeted changes over broad refactors unless the refactor is the actual goal of the PR.
If you change colormap shader definitions in
src/lib/shaders/colormapShaders.ts,
regenerate the preview swatches:
python3 scripts/generate_colormap_swatches.pyThat script requires Pillow:
pip install PillowWhen contributing example data or static assets, keep file sizes reasonable and prefer formats already used in the repository.
Before requesting review, confirm that:
- the change is described clearly in the PR body
npm run lint,npm run typecheck, andnpm run buildpass locally- screenshots are attached for visible UI changes
- commit messages follow the required convention
- generated files are included when your change depends on them
If you are unsure about scope, architecture, or dataset-specific behavior, open an issue or start a draft pull request early so discussion can happen on the actual code.