World Water Atlas

Website for action, sharing compelling narratives on water.

Development

Quick start

Initial setup

git clone git@github.com:Deltares/wwa.git
cd wwa
npm ci

Set environment

All needed environment variables are listed in the .env.example file. To automatically set them fill in a .env file following the same structure as the example file.

cp .env.example .env

Running

Development

Fetch content from DatoCMS, start Netlify Dev and Nuxt.js to preview the website.

npm run start

Production

Fetch content and generate static website files.

npm run build && npm run generate

Adding geographical data

You can add geographical data by using the following approach

• Prepare a dataset (geojson, kml, shape file, or pre-rendered tiff file in RGBA)
• Upload it to mapbox and do some styling
• You get back a mapbox://style/url
• Add the mapbox://style/url to your story
• Click publish

Codebase

Data fetching

There are two ways data is fetched from DatoCMS:

1. Classic way, dump data using datocms-client
2. New preferred way, fetch using DatoCMS GraphQL API from Nuxt asyncData