Documentation and delta-ui update

.env

@@ -13,6 +13,9 @@ API_RASTER_ENDPOINT='https://staging-raster.delta-backend.xyz'
 # Endpoint for the STAC server. No trailing slash.
 API_STAC_ENDPOINT='https://staging-stac.delta-backend.xyz'
 
+# The mapbox public token obtained from your account
+MAPBOX_TOKEN='pk.eyJ1IjoiY292aWQtbmFzYSIsImEiOiJja2F6eHBobTUwMzVzMzFueGJuczF6ZzdhIn0.8va1fkyaWgM57_gZ2rBMMg'
+
 # If the app is being served in from a subfolder, the domain url must be set.
 # For example, if the app is served from /mysite:
 # PUBLIC_URL=http://example.com/mysite

.github/workflows/deploy-staging.yml

@@ -7,7 +7,7 @@ on:
 
 env:
  NODE: 16
- SURGE_STAGING_DOMAIN: https://vizex.surge.sh
+ SURGE_STAGING_DOMAIN: https://visex.surge.sh
 
 jobs:
  build:

README.md

@@ -1,105 +1,15 @@
-# Delta config
+# Welcome to Delta
 
-This repo contains all the content and configuration needed to setup your own instance of [delta-ui](https:/NASA-IMPACT/delta-ui).
+Delta is a dashboard to explore data.
 
-The `delta-config` relies on the `delta-ui` submodule. Use `--recursive` flag when cloning `delta-config`, or initialize the submodules with:
-```
-git submodule update --init --recursive
-```
+Delta is organized around the concept of Thematic areas. Each thematic area explores a topic in detail via datasets and discoveries. 
+A Dataset represents a piece of geo-referenced data displayed as a set of related layers on a map. 
+Discoveries are long form pieces of content that tell a story about some interesting portion of the data.
 
-## Installation
-To set up the development environment for this website, you'll need to install the following on your system:
+## Getting started
 
-- [Node](http://nodejs.org/) v16 (To manage multiple node versions we recommend [nvm](https:/creationix/nvm))
-- [Yarn](https://yarnpkg.com/) Package manager
+1) Check [SETUP](./docs/SETUP.md) to see how you can run the project locally. (You'll need this to preview content.)
+2) Check [CONFIGURATION](./docs/CONFIGURATION.md) to see a list of configuration options for Delta.
+3) Check [CONTENT](./docs/CONTENT.md) for how to structure the content pieces.
 
-If you use [`nvm`](https:/creationix/nvm), activate the desired Node version:
-
-```
-nvm install
-```
-
-Setup the project
-```
-./.delta/setup
-``` 
-
-## Configuration
-
-The base properties used by Delta are set through the `.env` file. This includes values like the application title, and contact email. These values are then used throughout the app.
-
-## Content
-
-Delta is divided into Thematic Areas, Datasets, and Discoveries.
-Each piece of content is written in [MDX](https://mdxjs.com/docs/what-is-mdx/#what-is-mdx) with configuration frontmatter between a set of `---`.
-A file will look something like:
-```
----
-id: theme1
-name: Thematic area 1 
----
-
-# About theme 1
-
-<WidgetMdx prop='example' />
-```
-
-After adding some content we need to tell Delta where to find it using the `delta.config.js` file. 
-It assumes the following as defaults:
-```
-thematics: './thematic/*.thematic.mdx'
-datasets: './datasets/*.data.mdx'
-discoveries: './discoveries/*.discoveries.mdx'
-```
-But the content can be stored wherever you'd like.
-
-### Thematic Areas
-TODO: info
-
-### Datasets
-TODO: info
-
-### Discoveries
-TODO: info
-
-# Development
-There's not much development to be done in the config repo. The UI part of Delta is stored at [delta-ui](https:/NASA-IMPACT/delta-ui), and connected to the config via a git submodule.
-
-**To avoid breaking changes, the version of `delta-ui` is pinned to a specific commit making use of a [git-submodule](https://www.atlassian.com/git/tutorials/git-submodule).** This allows development to continue without breaking existent instances.
-You can see the version running:
-```
-./.delta/delta --info
-```
-
-The commit you may want to pin the `delta-ui` to will depend, but to get the latest changes from the `main` branch you could do:
-```
-# Go into the submodule
-cd .delta/ui
-
-# Update the submodule info
-git fetch
-
-# Switch to the branch you want.
-# You can also choose a specific tag.
-git switch main
-
-# Get the latest changes
-git pull
-
-# Get back to the root directory
-cd -
-```
-
-At this point you will have changed the commit the submodule is pointed to. 
-If you run a diff on the submodule `git diff .delta/ui` you'll see that the commit changed.
-```diff
-diff --git a/.delta/ui b/.delta/ui
-index 67c68c4..57d18a1 160000
---- a/.delta/ui
-+++ b/.delta/ui
-@@ -1 +1 @@
--Subproject commit 67c68c4115283a76fe8f3e0921fcd43ad281077a
-+Subproject commit 57d18a12a4c17eaf436e128bd06904cba75f3e4a
-```
-
-The only thing left to do is to commit this change like you'd normally do.
+If you plan to add features to `delta-config` check [DEVELOPMENT](./docs/DEVELOPMENT.md).

datasets/no2.data.mdx

@@ -40,7 +40,7 @@ layers:
  mapLabel: |
  ::js ({ datetime, dateFns }) => {
  const comparingDate = dateFns.sub(datetime, { years: 1 });
- return `${dateFns.format(datetime, 'LLL yyyy')} - ${dateFns.format(comparingDate, 'LLL yyyy')}`;
+ return `${dateFns.format(datetime, 'LLL yyyy')} VS ${dateFns.format(comparingDate, 'LLL yyyy')}`;
  }
  legend:
  type: gradient

delta.config.js

@@ -1,5 +1,16 @@
 module.exports = {
+ /**
+ * Glob path for the thematic areas.
+ */
  thematics: './thematic/*.thematic.mdx',
+
+ /**
+ * Glob path for the datasets.
+ */
  datasets: './datasets/*.data.mdx',
+
+ /**
+ * Glob path for the discoveries.
+ */
  discoveries: './discoveries/*.discoveries.mdx'
 };

discoveries/air-quality-and-covid-19.discoveries.mdx

@@ -16,57 +16,74 @@ thematics:
  - covid-19
 ---
 
-<Block type='full'>
-<Prose>
-## Going through changes
-
-When governments began implementing shutdowns at the start of the COVID-19 pandemic, scientists wondered how the atmosphere would respond to the sudden change in human behavior.
-
-With people largely confined to their homes to slow the spread of the novel coronavirus, scientists expected there were likely to be fewer cars, planes, and ships burning and emitting fossil fuels.
-
-As the pandemic has progressed, these scenarios have largely played out: during the strictest lockdown periods, locations around the world experienced substantial reductions in transportation-related fossil fuel emissions.
-
-The impacts on specific air pollutants have been varied and dependant on their lifespan in the atmosphere. Those pollutants with short lifespans, such as nitrogen dioxide (NO2), decreased dramatically and quickly along with emissions.
-
-Today, air quality levels are beginning to approach pre-pandemic levels, and scientists are just beginning to dive into the new measurements collected throughout this unprecedented time.
-</Prose>
-<Figure>
- <Map
+<ScrollytellingBlock>
+ <Chapter
+ center={[0, 0]}
+ zoom={2}
  datasetId='no2'
  layerId='no2-monthly-diff'
- dateTime='2018-03-01'
- />
- <Caption 
- attrAuthor='NASA' 
- attrUrl='https://nasa.gov/'
+ datetime='2021-03-01'
  >
- This layer shows changes in nitrogen dioxide (NO₂) levels in µmol/m₂. Redder colors indicate increases in NO₂. Bluer colors indicate lower levels of NO₂.
- </Caption> 
-</Figure>
-</Block>
-
-<Block type='full'>
-<Figure>
- <Map
+ ## Going through changes
+ When governments began implementing shutdowns at the start of the COVID-19 pandemic, scientists wondered how the atmosphere would respond to the sudden change in human behavior.
+ </Chapter>
+ <Chapter
+ center={[-83.0059, 34.3382]}
+ zoom={4.5}
  datasetId='no2'
- layerId='no2-monthly'
- dateTime='2021-03-01'
- isComparing
- />
- <Caption 
- attrAuthor='NASA' 
- attrUrl='https://nasa.gov/'
+ layerId='no2-monthly-diff'
+ datetime='2020-03-01'
  >
- Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
- </Caption> 
-</Figure>
-</Block>
+ With people largely confined to their homes to slow the spread of the novel coronavirus, scientists expected there were likely to be fewer cars, planes, and ships burning and emitting fossil fuels.
+ </Chapter>
+ <Chapter
+ center={[117.5001, 28.7899]}
+ zoom={4}
+ datasetId='no2'
+ layerId='no2-monthly-diff'
+ datetime='2020-03-01'
+ >
+ As the pandemic has progressed, these scenarios have largely played out: during the strictest lockdown periods, locations around the world experienced substantial reductions in transportation-related fossil fuel emissions. The impacts on specific air pollutants have been varied and dependent on their lifespan in the atmosphere.
+ </Chapter>
+ <Chapter
+ center={[6.7151, 47.3183]}
+ zoom={4}
+ datasetId='no2'
+ layerId='no2-monthly-diff'
+ datetime='2020-03-01'
+ >
+ Those pollutants with short lifespans, such as nitrogen dioxide (NO2), decreased dramatically and quickly along with emissions.
+ </Chapter>
+ <Chapter
+ center={[0, 0]}
+ zoom={2}
+ datasetId='no2'
+ layerId='no2-monthly-diff'
+ datetime='2021-03-01'
+ >
+ Today, air quality levels are beginning to approach pre-pandemic levels, and scientists are just beginning to dive into the new measurements collected throughout this unprecedented time.
+ </Chapter>
+</ScrollytellingBlock>
 
-<Block>
-<Prose>
-## Measuring Air Pollution on the Ground at Airports
-New research during the pandemic is also looking at how COVID-related travel bans are impacting air quality around airports. Current conditions create a unique opportunity to study airport-related pollutants, especially nitrogen dioxide and formaldehyde. While travel bans and strict regulations around air travel have been in place, air traffic has yet to return to previous levels, and many planes remain grounded.
+<Block type='full'>
+ <Prose>
+ ## Measuring Air Pollution on the Ground at Airports
+ New research during the pandemic is also looking at how COVID-related travel bans are impacting air quality around airports. Current conditions create a unique opportunity to study airport-related pollutants, especially nitrogen dioxide and formaldehyde. While travel bans and strict regulations around air travel have been in place, air traffic has yet to return to previous levels, and many planes remain grounded.
 
-Scientists have installed two sensors at the Baltimore-Washington International Airport and two sensors at the Hartsfield-Jackson Atlanta International Airport to better characterize how airplanes contribute to air pollution. They are comparing the on-the-ground sensor information from NASA's [Pandora Project](https://pandora.gsfc.nasa.gov/ "Explore the Pandora Project") with satellite information from TROPOMI. So far, they have found that nitrogen dioxide hotspots in Atlanta shifted from the airport, shown here, to the city center from April-June 2020. By September, however, satellites revealed the airport had reemerged as a dominant nitrogen dioxide emission source.
-</Prose>
-</Block>
+ Scientists have installed two sensors at the Baltimore-Washington International Airport and two sensors at the Hartsfield-Jackson Atlanta International Airport to better characterize how airplanes contribute to air pollution. They are comparing the on-the-ground sensor information from NASA's [Pandora Project](https://pandora.gsfc.nasa.gov/ "Explore the Pandora Project") with satellite information from TROPOMI. So far, they have found that nitrogen dioxide hotspots in Atlanta shifted from the airport, shown here, to the city center from April-June 2020. By September, however, satellites revealed the airport had reemerged as a dominant nitrogen dioxide emission source.
+ </Prose>
+ <Figure>
+ <Map
+ datasetId='no2'
+ layerId='no2-monthly'
+ dateTime='2021-03-01'
+ isComparing
+ />
+ <Caption 
+ attrAuthor='NASA' 
+ attrUrl='https://nasa.gov/'
+ >
+ Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
+ </Caption> 
+ </Figure>
+</Block>

docs/CONFIGURATION.md

@@ -0,0 +1,19 @@
+# Configuration
+
+The base properties used by Delta are set through the `.env` file. 
+This includes values like the application title, and contact email. These values are then used throughout the app.
+
+The `.env` file contains a list of all available variables and comments explaining what they are used for.
+
+## delta.config.js
+
+The `delta.config.js` file is an additional configuration file for delta. 
+It is through this file that you specify how the Delta content can be found.
+
+This is done by providing a glob path for each one of the [content types](./CONTENT.md). (Thematic areas, Datasets, Discoveries). 
+The default configuration is:
+```js
+thematics: './thematic/*.thematic.mdx'
+datasets: './datasets/*.data.mdx'
+discoveries: './discoveries/*.discoveries.mdx'
+```