diff --git a/.veda/ui b/.veda/ui
index dcb5fdf45..4f9c6799a 160000
--- a/.veda/ui
+++ b/.veda/ui
@@ -1 +1 @@
-Subproject commit dcb5fdf45ac1003bddd53eb210800345ce3ed1b5
+Subproject commit 4f9c6799a0a99f9be28929e6098abaff831dc9ad
diff --git a/common/constants.js b/common/constants.js
index 8a60de744..f7fdccfd2 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -88,7 +88,7 @@ export const dataEngagements = [
"desc": "Detailed dataset information for insight into greenhouse gas sources, sinks, emissions, and large events.",
"img": {
"src": new URL('./media/data_catalog.png', import.meta.url).href,
- "alt": "image of oil refinery"
+ "alt": "icon showing file drawers with an earth representing data card catalog."
},
"link": {
"url": "/data-catalog",
@@ -101,7 +101,7 @@ export const dataEngagements = [
"desc": "The exploration and analysis environment can be used to visually examine data on a customizable map and create a time series of basic statistics.",
"img": {
"src": new URL('./media/interactive_map.png', import.meta.url).href,
- "alt": "image of green wetlands"
+ "alt": "icon drawing showing map with a magnifying glass and indicating a clock for temporal data."
},
"link": {
"url": "/exploration",
@@ -114,13 +114,40 @@ export const dataEngagements = [
"desc": "With JupyterHub, users can analyze cloud archives of Earth science data using an interactive environment. Log in or request access here.",
"img": {
"src": new URL('./media/jupyter_hub.png', import.meta.url).href,
- "alt": "image of colorful polygon against satellite landscape surface in brown"
+ "alt": "icon drawing code, plots and figures made with data in the cloud."
},
"link": {
"url": "https://hub.ghg.center",
"text": "View more"
},
"footer": null
+ },
+ {
+ "title": "Documentation",
+ "desc": "Access technical documentation for US GHG Center data services, including a collection of code notebooks, and instructions for accessing data via API.",
+ "img": {
+ "src": new URL('./media/documentation.png', import.meta.url).href,
+ "alt": "icon of an open laptop surrounded by icons of documents, and a chart."
+ },
+ "link": {
+ "url": "https://us-ghg-center.github.io/ghgc-docs/",
+ "text": "View more"
+ },
+ "footer": null
+ }
+ ,
+ {
+ "title": "Documentation",
+ "desc": "Access technical documentation for US GHG Center data services including a collection of code notebooks, and instructions for accessing data via API.",
+ "img": {
+ "src": new URL('./media/documentation.png', import.meta.url).href,
+ "alt": "image of colorful polygon against satellite landscape surface in brown"
+ },
+ "link": {
+ "url": "https://us-ghg-center.github.io/ghgc-docs/",
+ "text": "View more"
+ },
+ "footer": null
}
,
{
@@ -141,9 +168,9 @@ export const dataEngagements = [
export const customInterfaces = [
{
"title": "GOES Methane Plume Viewer",
- "desc": "A sample of methane plumes from point sources observed since 2019 by the U.S. Geostationary Operational Environmental Satellites (GOES) over North and South America",
+ "desc": "Detailed information for methane plumes identified using GOES.",
"img": {
- "src": new URL('./media/emit.jpg', import.meta.url).href,
+ "src": new URL('./media/GOES_Methane_Plume_viewer_card.png', import.meta.url).href,
"alt": "view of colored shape overlaid on satellite landscape image with boxes of information containing plume details"
},
"link": {
@@ -156,7 +183,7 @@ export const customInterfaces = [
"title": "EMIT Methane Plume Viewer",
"desc": "Detailed information for methane plumes identified using EMIT.",
"img": {
- "src": new URL('./media/emit.jpg', import.meta.url).href,
+ "src": new URL('./media/EMIT_Plume_Viewer_card.png', import.meta.url).href,
"alt": "view of colored shape overlaid on satellite landscape image with boxes of information containing plume details"
},
"link": {
@@ -169,7 +196,7 @@ export const customInterfaces = [
"title": "NOAA Concentration Viewer",
"desc": "Measurements of carbon dioxide and methane concentrations from ground stations throughout the US and worldwide.",
"img": {
- "src": new URL('./media/co2.jpg', import.meta.url).href,
+ "src": new URL('./media/NOAA_Methane_Concentration_Viewer_card.png', import.meta.url).href,
"alt": "map showing Mauna Loa location of station with a time series of data below the map"
},
"link": {
@@ -193,7 +220,7 @@ export const customInterfaces = [
"title": "NIST Tower Data Viewer",
"desc": "Measurements of carbon dioxide and methane concentrations from urban tower instruments.",
"img": {
- "src": new URL('./media/nist-co2-nwb.jpg', import.meta.url).href,
+ "src": new URL('./media/NIST_NEC_Methane_Viewer_card1.png', import.meta.url).href,
"alt": "map showing Northwest Baltimore, MD location of station with a time series of data below the map"
},
"link": {
diff --git a/common/media/EMIT_Plume_Viewer_card.png b/common/media/EMIT_Plume_Viewer_card.png
new file mode 100644
index 000000000..ee0c8e1fb
Binary files /dev/null and b/common/media/EMIT_Plume_Viewer_card.png differ
diff --git a/common/media/EPA_Gridded_Methane_card.png b/common/media/EPA_Gridded_Methane_card.png
new file mode 100644
index 000000000..982feae67
Binary files /dev/null and b/common/media/EPA_Gridded_Methane_card.png differ
diff --git a/common/media/GOES_Methane_Plume_viewer_card.png b/common/media/GOES_Methane_Plume_viewer_card.png
new file mode 100644
index 000000000..ebeb292f8
Binary files /dev/null and b/common/media/GOES_Methane_Plume_viewer_card.png differ
diff --git a/common/media/NIST_NEC_Methane_Viewer_card1.png b/common/media/NIST_NEC_Methane_Viewer_card1.png
new file mode 100644
index 000000000..c852b719b
Binary files /dev/null and b/common/media/NIST_NEC_Methane_Viewer_card1.png differ
diff --git a/common/media/NOAA_Methane_Concentration_Viewer_card.png b/common/media/NOAA_Methane_Concentration_Viewer_card.png
new file mode 100644
index 000000000..97125cd0d
Binary files /dev/null and b/common/media/NOAA_Methane_Concentration_Viewer_card.png differ
diff --git a/common/media/co2.jpg b/common/media/co2.jpg
deleted file mode 100644
index 9a6f2a2a3..000000000
Binary files a/common/media/co2.jpg and /dev/null differ
diff --git a/common/media/emit.jpg b/common/media/emit.jpg
deleted file mode 100644
index 634cb361b..000000000
Binary files a/common/media/emit.jpg and /dev/null differ
diff --git a/common/media/nist-co2-nwb.jpg b/common/media/nist-co2-nwb.jpg
deleted file mode 100644
index 156f7078c..000000000
Binary files a/common/media/nist-co2-nwb.jpg and /dev/null differ
diff --git a/custom-pages/common/LearnMore.tsx b/custom-pages/common/LearnMore.tsx
new file mode 100644
index 000000000..c98e07f12
--- /dev/null
+++ b/custom-pages/common/LearnMore.tsx
@@ -0,0 +1,48 @@
+import React from "$veda-ui/react";
+import { Link } from '$veda-ui/react-router-dom';
+import {
+ Grid,
+} from '$veda-ui/@trussworks/react-uswds';
+
+import {
+ CollecticonTextBlock,
+ CollecticonEnvelope,
+ CollecticonSpeechBalloon,
+} from '$veda-ui/@devseed-ui/collecticons';
+
+import { Title } from "../../common/styled-components";
+import { SUBSCRIPTION_URL } from "../../constants";
+
+
+export default function LearnMore() {
+ return (
+
+ Learn More and Share Your Ideas
+
+
+
+
+
+
+ For the latest updates and information about the US GHG Center or to join a focus area group, subscribe to our email updates list.
+
+
+
+
+
+
+
+ Read more about the US GHG Center news, trainings, and workshop opportunities on the News and Events page.
+
+
+
+
+
+
+
+ Do you have a US GHG Center portal suggestion or question? Reach the team using the "Contact Us" button at the top or bottom of every page.
+
+
+
+ )
+}
diff --git a/custom-pages/data-toolkit/component.tsx b/custom-pages/data-toolkit/component.tsx
index 592f37ffb..37a5a7fa0 100644
--- a/custom-pages/data-toolkit/component.tsx
+++ b/custom-pages/data-toolkit/component.tsx
@@ -1,19 +1,13 @@
import React from "$veda-ui/react";
-import { Link } from "$veda-ui/react-router-dom";
import '$veda-ui/@trussworks/react-uswds/lib/index.css'
import {
- Grid,
GridContainer,
} from '$veda-ui/@trussworks/react-uswds';
-import {
- CollecticonTextBlock,
- CollecticonEnvelope,
- CollecticonSpeechBalloon,
-} from '$veda-ui/@devseed-ui/collecticons';
-
import Keypoints from "../../common/keypoints";
+import LearnMore from "../common/LearnMore";
+
import { dataEngagements, focusAreaDatasets, customInterfaces } from "../../common/constants";
import { SUBSCRIPTION_URL } from "../../constants";
@@ -48,33 +42,7 @@ export default function Component() {
-
- Learn More and Share Your Ideas
-
-
-
-
-
- For the latest updates and information about the US GHG Center or to join a focus area group, subscribe to our email updates list.
-
-
-
-
-
-
-
- Read more about the US GHG Center news, trainings, and workshop opportunities on the News and Events page.
-
-
-
-
-
-
-
- Do you have a US GHG Center portal suggestion or question? Reach the team using the "Contact Us" button at the top or bottom of every page.
-
-
-
+
)
diff --git a/custom-pages/topics/component.tsx b/custom-pages/topics/component.tsx
index 7bc7b948a..1fe70e538 100644
--- a/custom-pages/topics/component.tsx
+++ b/custom-pages/topics/component.tsx
@@ -1,27 +1,17 @@
import React from "$veda-ui/react";
-import { Link } from '$veda-ui/react-router-dom';
import {
- Card,
- CardHeader,
- CardBody,
- CardMedia,
- CardGroup,
- Grid,
GridContainer,
} from '$veda-ui/@trussworks/react-uswds';
-import {
- CollecticonTextBlock,
- CollecticonEnvelope,
- CollecticonSpeechBalloon,
-} from '$veda-ui/@devseed-ui/collecticons';
-
import { focusAreasStories } from "../../common/constants";
import { Title } from "../../common/styled-components";
import Keypoints from "../../common/keypoints";
+import Topic from "./components/Topic";
+import LearnMore from "../common/LearnMore";
import { SUBSCRIPTION_URL } from "../../constants";
+import topics from "./topics";
import '../../common/styles.scss';
import './topics.scss';
@@ -30,24 +20,19 @@ export default function HomeComponent() {
return (
- Content Collections by Topic
-
-
-
-
-
-
-
-
Urban Emissions
-
-
-
- Cities and metropolitan regions, where most of the world's population live, are responsible for approximately 70% of greenhouse gas emissions. Researchers are making rapid advances in urban emissions measurement and modeling to provide robust, accurate, and reliable emissions estimates at fine scales. The U.S. Greenhouse Gas Center offers an introduction to new urban-relevant datasets and highlights innovative emissions research in cities across the country.
-
-
-
-
-
+ Content Collections by Topic
+
+ {
+ !!topics.length && topics.map(topic => (
+
+ ))
+ }
Core Science Focus Areas
@@ -55,33 +40,7 @@ export default function HomeComponent() {
-
- Learn More and Share Your Ideas
-
-
-
-
-
- For the latest updates and information about the US GHG Center or to join a focus area group, subscribe to our email updates list.
-
-
-
-
-
-
-
- Read more about the US GHG Center news, trainings, and workshop opportunities on the News and Events page.
-
-
-
-
-
-
-
- Do you have a US GHG Center portal suggestion or question? Reach the team using the "Contact Us" button at the top or bottom of every page.
-
-
-
+
+
+
+
+
+ )
+}
diff --git a/custom-pages/topics/topics.js b/custom-pages/topics/topics.js
new file mode 100644
index 000000000..396b7cb56
--- /dev/null
+++ b/custom-pages/topics/topics.js
@@ -0,0 +1,20 @@
+export default [
+ {
+ "title": "Methane Emissions",
+ "description": "Methane is a greenhouse gas emitted by a complex mix of natural sources and human activities. The structure of methane molecules makes the chemical compound particularly powerful at trapping heat: compared with carbon dioxide, methane can trap 80 times more heat over 20 years. These attributes make methane an attractive target for both public and private efforts to research and reduce emissions, with near-term benefits for global temperatures, air quality, and industrial efficiency.",
+ "img": {
+ "src": new URL('../../overrides/media/Methane_Carousel_card.png', import.meta.url).href,
+ "alt": "globe with purple gas swirls and overlaid text showing the word methane and CH4."
+ },
+ "href": "/stories/methane",
+ },
+ {
+ "title": "Urban Emissions",
+ "description": "Cities and metropolitan regions, where most of the world's population live, are responsible for approximately 70% of greenhouse gas emissions. Researchers are making rapid advances in urban emissions measurement and modeling to provide robust, accurate, and reliable emissions estimates at fine scales. The U.S. Greenhouse Gas Center offers an introduction to new urban-relevant datasets and highlights innovative emissions research in cities across the country.",
+ "img": {
+ "src": new URL('./media/1-maia-los-angeles-1041.png', import.meta.url).href,
+ "alt": "distant view of hazy cityscape."
+ },
+ "href": "/stories/urban",
+ },
+]
diff --git a/datasets/gosat-based-ch4budget-yeargrid-v1.data.mdx b/datasets/gosat-based-ch4budget-yeargrid-v1.data.mdx
index 9265f4806..95ca32e52 100644
--- a/datasets/gosat-based-ch4budget-yeargrid-v1.data.mdx
+++ b/datasets/gosat-based-ch4budget-yeargrid-v1.data.mdx
@@ -46,7 +46,7 @@ infoDescription: |
- Data Latency: Updated yearly
layers:
- id: post-total
- stacCol: gosat-based-ch4budget-yeargrid-v1-test
+ stacCol: gosat-based-ch4budget-yeargrid-v2
name: Satellite-Corrected Total Methane Emissions
type: raster
description: Total methane emissions per grid cell derived using GOSAT data in the GEOS-Chem global chemistry transport model (posterior).
@@ -101,7 +101,7 @@ layers:
src: ::file ./media/gosat-based-ch4budget-yeargrid-v1.thumbnails.posterior.total.png
alt: GOSAT-based Top-down Total and Natural Methane Emissions - Posterior Total
- id: post-wetland
- stacCol: gosat-based-ch4budget-yeargrid-v1-test
+ stacCol: gosat-based-ch4budget-yeargrid-v2
name: Satellite-Corrected Wetland Methane Emissions
type: raster
description: Total wetland methane emissions per grid cell derived using GOSAT data in the GEOS-Chem global chemistry transport model (posterior).
diff --git a/datasets/media/CarbonTracker_Image1_FINAL.png b/datasets/media/CarbonTracker_Image1_FINAL.png
new file mode 100644
index 000000000..e05dc1745
Binary files /dev/null and b/datasets/media/CarbonTracker_Image1_FINAL.png differ
diff --git a/datasets/media/goes-ch4plume--cover.jpg b/datasets/media/goes-ch4plume--cover.jpg
index 2a8728bc0..16c729da8 100644
Binary files a/datasets/media/goes-ch4plume--cover.jpg and b/datasets/media/goes-ch4plume--cover.jpg differ
diff --git a/e2e/tests/catalogRouting.spec.ts b/e2e/tests/catalogRouting.spec.ts
index c0940b6d1..7b7b521b4 100644
--- a/e2e/tests/catalogRouting.spec.ts
+++ b/e2e/tests/catalogRouting.spec.ts
@@ -5,38 +5,39 @@ const visibleCatalogs = JSON.parse(fs.readFileSync('e2e/playwrightTestData.json'
test.describe('catalog card routing', () => {
for (const item of visibleCatalogs) {
- test(`${item} routes from catalog to details page`, async({
- page,
- catalogPage,
- datasetPage,
- notebookConnectModal,
- }) => {
- let pageErrorCalled = false;
- // Log all uncaught errors to the terminal
- page.on('pageerror', exception => {
- console.log(`Uncaught exception: "${exception}"`);
- pageErrorCalled = true;
- });
- await page.goto('/data-catalog');
- await expect(catalogPage.header, `catalog page should load`).toBeVisible();
- await catalogPage.clickCatalogCard(item);
-
- await expect(datasetPage.header.filter({ hasText: item}), `${item} page should load`).toBeVisible();
-
- // scroll page to bottom
- await test.step('scroll to bottom of page', async() => {
- await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
- });
-
- expect(pageErrorCalled, 'no javascript exceptions thrown on page').toBe(false)
-
- await test.step('click access data button', async() => {
- await catalogPage.accessDataButton.click();
+ test(`${item} routes from catalog to details page`, async({
+ page,
+ catalogPage,
+ datasetPage,
+ notebookConnectModal,
+ }) => {
+ let pageErrorCalled = false;
+ // Log all uncaught errors to the terminal
+ page.on('pageerror', exception => {
+ console.log(`Uncaught exception: "${exception}"`);
+ pageErrorCalled = true;
+ });
+
+ await page.goto('/data-catalog');
+ await expect(catalogPage.header, `catalog page should load`).toBeVisible();
+ await catalogPage.clickCatalogCard(item);
+
+ await expect(datasetPage.header.filter({ hasText: item}), `${item} page should load`).toBeVisible();
+
+ // scroll page to bottom
+ await test.step('scroll to bottom of page', async() => {
+ await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+ });
+
+ expect(pageErrorCalled, 'no javascript exceptions thrown on page').toBe(false)
+
+ await test.step('click access data button', async() => {
+ await catalogPage.accessDataButton.click();
+ })
+
+ await expect(notebookConnectModal.heading, 'modal should be visisble').toBeVisible();
})
-
- await expect(notebookConnectModal.heading, 'modal should be visisble').toBeVisible();
- })
}
});
diff --git a/e2e/tests/storiesRouting.spec.ts b/e2e/tests/storiesRouting.spec.ts
index e1d419919..206dd093b 100644
--- a/e2e/tests/storiesRouting.spec.ts
+++ b/e2e/tests/storiesRouting.spec.ts
@@ -4,30 +4,32 @@ const visibleStories = JSON.parse(require('fs').readFileSync('e2e/playwrightTest
test.describe('stories card routing', () => {
for (const item of visibleStories) {
+ // skip external link
+ if (item !== 'GOES validation') {
+ test(`${item} routes from stories to details page`, async({
+ page,
+ storyPage,
+ datasetPage,
+ }) => {
+ let pageErrorCalled = false;
+ // Log all uncaught errors to the terminal
+ page.on('pageerror', exception => {
+ console.log(`Uncaught exception: "${exception}"`);
+ pageErrorCalled = true;
+ });
- test(`${item} routes from stories to details page`, async({
- page,
- storyPage,
- datasetPage,
- }) => {
- let pageErrorCalled = false;
- // Log all uncaught errors to the terminal
- page.on('pageerror', exception => {
- console.log(`Uncaught exception: "${exception}"`);
- pageErrorCalled = true;
- });
+ await page.goto('/stories');
+ await expect(storyPage.header, `stories page should load`).toBeVisible();
- await page.goto('/stories');
- await expect(storyPage.header, `stories page should load`).toBeVisible();
-
- await test.step(`click on ${item} article card`, async() => {
- const storyCard = storyPage.mainContent.getByRole('article').getByRole('heading', { level: 3, name: item, exact: true}).last();
- await storyCard.scrollIntoViewIfNeeded();
- await storyCard.click({force: true});
- })
- await expect(datasetPage.header.filter({ hasText: item}), `${item} page should load`).toBeVisible();
- expect(pageErrorCalled, 'no javascript exceptions thrown on page').toBe(false)
- })
+ await test.step(`click on ${item} article card`, async() => {
+ const storyCard = storyPage.mainContent.getByRole('article').getByRole('heading', { level: 3, name: item, exact: true}).last();
+ await storyCard.scrollIntoViewIfNeeded();
+ await storyCard.click({force: true});
+ })
+ await expect(datasetPage.header.filter({ hasText: item}), `${item} page should load`).toBeVisible();
+ expect(pageErrorCalled, 'no javascript exceptions thrown on page').toBe(false)
+ })
+ }
}
});
diff --git a/overrides/home/carousel/items.js b/overrides/home/carousel/items.js
index bfe07ebf9..63e76ed47 100644
--- a/overrides/home/carousel/items.js
+++ b/overrides/home/carousel/items.js
@@ -1,7 +1,14 @@
export default [
+ {
+ link: '/stories/methane',
+ title: 'Spotlight on Methane Emissions',
+ description: 'The U.S. Greenhouse Gas Center offers a collection of tools, stories, training, and datasets to support greater understanding of methane emissions around the world.',
+ image: new URL('../../media/Methane_Carousel_card.png', import.meta.url).href,
+ imageAlt: 'Earth shown with purple gas indicating atmospheric methane.'
+ },
{
link: 'https://us-ghg-center.github.io/agu-2024-workshop/ghg-center-at-agu-2024.html',
- title: 'Schedule: US GHG Center at AGU 2024',
+ title: 'US GHG Center at AGU 2024',
description: 'Join us at the annual American Geophysical Union (AGU) meeting, held December 9-13 in Washington, D.C.',
image: new URL('../../media/AGU2024_carousel_2.png', import.meta.url).href,
imageAlt: 'US GHG Center at AGU 2024.'
@@ -10,14 +17,8 @@ export default [
link: 'https://appliedsciences.nasa.gov/get-involved/training/english/arset-methane-observations-large-emission-event-detection-and',
title: 'New Training on Methane Observations',
- description: "Registration is open now on ARSET, NASA's remote sensing training program, for large emission event detection and monitoring.",
+ description: "View training and materials from ARSET, NASA’s remote sensing training program, for large emission event detection and monitoring.",
image: new URL('../../media/Methane_Website_Header.png', import.meta.url).href,
imageAlt: 'Register: Stakeholder Engagement Forum.'
},
- {
- link: '/stories/urban',
- title: 'Spotlight on Urban Emissions',
- description: 'The U.S. Greenhouse Gas Center offers an introduction to the latest national and city scale datasets and highlights innovative emissions research in cities across the country.',
- image: 'https://www.nasa.gov/wp-content/uploads/2023/03/1-maia-los-angeles-1041.jpg',
- imageAlt: 'Los Angeles skyline shown with visible haze of air pollution.'
-}]
+]
diff --git a/overrides/media/Methane_Carousel_card.png b/overrides/media/Methane_Carousel_card.png
new file mode 100644
index 000000000..447ef1a11
Binary files /dev/null and b/overrides/media/Methane_Carousel_card.png differ
diff --git a/stories/goes-validation.stories.mdx b/stories/goes-validation.stories.mdx
new file mode 100644
index 000000000..81ef4ee91
--- /dev/null
+++ b/stories/goes-validation.stories.mdx
@@ -0,0 +1,22 @@
+---
+id: "geos-validation"
+name: "GOES validation"
+description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+isHidden: false
+asLink:
+ url: https://www.pnas.org/doi/10.1073/pnas.2310797120
+media:
+ src: https://www.nasa.gov/wp-content/uploads/2022/10/2-pia25592_emit_methane_turkmenistan_figure_a.jpg
+ alt: Map of total U.S. gridded methane emissions in the year 2020
+ author:
+ name: Environmental Protection Agency
+ url: "https://www.epa.gov"
+pubDate: 2024-09-20
+taxonomy:
+ - name: Topics
+ values:
+ - Large Emission Events
+ - name: Gas
+ values:
+ - CH₄
+---
\ No newline at end of file
diff --git a/stories/methane.stories.mdx b/stories/methane.stories.mdx
new file mode 100644
index 000000000..bcebd4a62
--- /dev/null
+++ b/stories/methane.stories.mdx
@@ -0,0 +1,23 @@
+---
+id: "methane"
+name: "Topic: Methane Emissions"
+isHidden: true
+# media:
+# src: ::file ./media/total-methane-2020.png
+# alt: Map of total U.S. gridded methane emissions in the year 2020
+# author:
+# name: Environmental Protection Agency
+# url: "https://www.epa.gov"
+# pubDate: 2024-09-20
+# taxonomy:
+# - name: Topics
+# values:
+# - Anthropogenic Emissions
+# - name: Gas
+# values:
+# - CH₄
+---
+
+import Cmp from "./methane/component"
+
+
\ No newline at end of file
diff --git a/stories/methane/component.tsx b/stories/methane/component.tsx
new file mode 100644
index 000000000..84b2760c1
--- /dev/null
+++ b/stories/methane/component.tsx
@@ -0,0 +1,97 @@
+import React from "$veda-ui/react";
+import { Link } from "$veda-ui/react-router-dom";
+import {
+ Grid,
+ GridContainer,
+} from '$veda-ui/@trussworks/react-uswds';
+
+import Block from "$veda-ui-scripts/components/common/blocks/";
+import Figure from '$veda-ui-scripts/components/common/blocks/figure';
+import { ContentBlockProse as Prose } from '$veda-ui-scripts/styles/content-block';
+import { Caption } from '$veda-ui-scripts/components/common/blocks/images';
+
+
+import Keypoints from "../../common/keypoints";
+import { Title } from "../../common/styled-components";
+
+import {
+ tools,
+ stories,
+ trainings,
+ datasets,
+} from './content';
+
+
+export default function Urban() {
+ return (
+ <>
+
+
+
About Methane
+
+ Methane is a greenhouse gas emitted by a complex mix of natural sources and human activities. Although it is short-lived in the atmosphere, the structure of methane molecules makes the chemical compound particularly powerful at trapping heat: compared with carbon dioxide, methane can trap 80 times more heat over 20 years. These attributes make methane an attractive focus for efforts to research and reduce emissions, which can help to limit rising temperatures, improve air quality, and support operational efficiency within some industrial sectors.
+
+ To meet the growing need for information, innovative new observations and coordination across public and private data providers are enhancing trust and transparency in methane data. Explore below to learn how researchers and data providers are working to understand emissions around the world and support local scale views of methane sources.
+
+
+
+
+ Explore below to see how new data are providing new views of methane on local scales and how researchers are working to scale up to understand emissions around the world.
+
+
+
+
Volumetric visualization of the total Methane (CH₄) on a global scale added on Earth's atmosphere over the course of the year 2021.
+
Video credit: NASA Scientific Visualization Studio
+
+
+
+
+
+
+
+ Methane Visualization Tools
+
+ View and explore methane emissions data with customized, interactive visualization tools from the U.S. Greenhouse Gas Center.
+
+
+
+
+
+ Stories: Innovations in Methane Research & Monitoring
+
+ A look into the innovative technologies, observations, Earth system models, and public-private collaborations that are driving deeper understanding and informing responses to methane emissions. For more, explore the full listing of methane stories.
+
+
+
+
+ {/* */}
+
+ Training: Using Methane Data
+
+ Participate in the latest training opportunity to learn how to use methane observations available on the U.S. Greenhouse Gas Center portal.
+
+
+
+
+
+ Resources for Data Users
+
+ Would you like to engage directly with the data? To discover detailed dataset information and download the data, explore the full listing of methane datasets. Users can also access the full data catalog, interactive maps, data visualizations, and open source tools by clicking “Data Toolkit” at the top or bottom of any page.
+
+
+
+
+
+ )
+}
diff --git a/stories/methane/content.js b/stories/methane/content.js
new file mode 100644
index 000000000..cfc9fdc6e
--- /dev/null
+++ b/stories/methane/content.js
@@ -0,0 +1,246 @@
+export const tools = [
+ {
+ "title": "EMIT Methane Plume Viewer",
+ "desc": "NASA’s EMIT instrument measures carbon dioxide and methane from its position aboard the International Space Station. This updated interactive plume viewer offers a global map of large, point source methane plumes. New functionalities include EMIT observation passes over time, geographic plume quantifications, and a point-and-click plume measurement tool.",
+ "img": {
+ "src": new URL('../../common/media/EMIT_Plume_Viewer_card.png', import.meta.url).href,
+ "alt": "view of colored shape overlaid on satellite landscape image with boxes of information containing plume details"
+ },
+ "link": {
+ "url": "/data-catalog/emit-ch4plume-v1",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "GOES Methane Plume Viewer",
+ "desc": "Primarily a weather satellite, NOAA’s GOES also measures greenhouse gases on a continental scale. It is capable of detecting large methane plumes from sources like oil and gas production and agriculture. This brand new interactive plume viewer is based on novel data from the newest satellite, GOES-19, with more plumes to be added soon.",
+ "img": {
+ "src": new URL('../../common/media/GOES_Methane_Plume_viewer_card.png', import.meta.url).href,
+ "alt": "map showing colorful methane gas plume from GOES over a green surface satellite image on June 15, 2020 in Indiana"
+ },
+ "link": {
+ "url": "/data-catalog/goes-ch4plume-v1",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "U.S. Gridded Anthropogenic Methane Emissions Inventory",
+ "desc": "Use the exploration and analysis environment to customize maps of high-resolution methane emission estimates from the EPA based on its Inventory of U.S. Greenhouse Gas Emissions and Sinks (U.S. GHGI). The U.S. GHGI synthesizes estimates from multiple agencies to calculate emissions from many different sources.",
+ "img": {
+ "src": new URL('../../common/media/EPA_Gridded_Methane_card.png', import.meta.url).href,
+ "alt": "satellite map of western US region with areas of color indicating annual methane emissions for 2018"
+ },
+ "link": {
+ "url": "/exploration?datasets=%5B%7B%22id%22%3A%22total-methane%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%5D%2C%22colorMap%22%3A%22epa-ghgi-ch4%22%2C%22scale%22%3A%7B%22min%22%3A0%2C%22max%22%3A20%7D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2020-01-01T06%3A00%3A00.000Z",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "NOAA Concentration Viewer",
+ "desc": "Get a bird’s-eye view of NOAA’s atmospheric methane measurements from ground stations around the globe, and explore how methane concentrations have changed over time. These data include several different types of measurements as part of NOAA’s Global Greenhouse Gas Reference Network.",
+ "img": {
+ "src": new URL('../../common/media/NOAA_Methane_Concentration_Viewer_card.png', import.meta.url).href,
+ "alt": "map showing Mauna Loa location of station with a time series of data below the map"
+ },
+ "link": {
+ "url": "/data-catalog/noaa-gggrn-co2-concentrations",
+ "text": "See more"
+ },
+ "footer": {
+ "links": [
+ {
+ "title": "Carbon Dioxide",
+ "url": "/data-catalog/noaa-gggrn-co2-concentrations"
+ },
+ {
+ "title": "Methane",
+ "url": "/data-catalog/noaa-gggrn-ch4-concentrations"
+ }
+ ]
+ }
+ },
+ {
+ "title": "NIST Tower Data Viewer",
+ "desc": "An interactive methane and carbon dioxide data tool for NIST’s Urban GHG Measurements Testbed System, using measurements from ground-based observing networks in three urban testbeds across the U.S.",
+ "img": {
+ "src": new URL('../../common/media/NIST_NEC_Methane_Viewer_card1.png', import.meta.url).href,
+ "alt": "map showing Northwest Baltimore, MD location of station with a time series of data below the map"
+ },
+ "link": {
+ "url": "/data-catalog/noaa-gggrn-ch4-concentrations",
+ "text": "See more"
+ },
+ "footer": {
+ "links": [
+ {
+ "title": "Indianapolis Flux Experiment (INFLUX)",
+ "url": "/data-catalog/influx-testbed-ghg-concentrations"
+ },
+ {
+ "title": "Los Angeles Megacity Carbon Project",
+ "url": "/data-catalog/lam-testbed-ghg-concentrations"
+ },
+ {
+ "title": "Northeast Corridor (NEC) Urban Test Bed",
+ "url": "/data-catalog/nec-testbed-ghg-concentrations"
+ }
+ ]
+ }
+ },
+ ]
+
+export const stories = [
+ {
+ "title": "NASA Expands Capabilities in Methane Detection from Air and Space",
+ "desc": "To meet needs for methane measurement, two key NASA technologies have made recent steps. The Earth Surface Mineral Dust Source Investigation (EMIT) project is expanding its methane detection from space, and Airborne Visible/Infrared Imaging Spectrometer (AVIRIS) test flights are helping to improve scientific understanding of sources of methane. ",
+ "img": {
+ "src": new URL('./media/EMIT_story_card.png', import.meta.url).href,
+ "alt": "the international space station in orbit over the earth with a zoomed in view of the EMIt instrument on the station"
+ },
+ "link": {
+ "url": "/stories/",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "NIST Developing Consensus Standards for Growing Volume of Methane Plume Satellite Data",
+ "desc": "Methane measurements have seen a boom in data volume within the last decade as remote sensing technologies have advanced and new space-based instruments have taken flight. To support greater transparency and interoperability, NIST is leading an effort to standardize protocols for methane plume data reporting, processing, and comparison.",
+ "img": {
+ "src": new URL('./media/NIST_Methane_Intercomparisons_card.png', import.meta.url).href,
+ "alt": "industrial smokestack background overlaid with connected points of light and human in foreground looking at the scene"
+ },
+ "link": {
+ "url": "/stories/",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "Earth System Models to Uncover Drivers of Natural Methane Emissions",
+ "desc": "Major natural sources of methane, like wetlands, create complications in identifying types and quantities of emissions. Researchers from NASA and NOAA are using advanced technology and models to deepen understanding of the role of natural sources and sinks in global atmospheric concentrations and support improved estimates in the global methane budget.",
+ "img": {
+ "src": new URL('./media/Wetlands_image_v2_rs.png', import.meta.url).href,
+ "alt": "view of wetland and brush/forest area from above"
+ },
+ "link": {
+ "url": "/stories/",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "Advanced Technology to Detect Methane “Super Emitters” from Oil and Natural Gas Operations",
+ "desc": "text TBA by EPA",
+ "img": {
+ "src": new URL('./media/Gray_box.png', import.meta.url).href,
+ "alt": "gray box"
+ },
+ "link": {
+ "url": "/stories/",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "NOAA’s GOES Satellites Can Provide Quicker Detection of Methane Gas Leaks",
+ "desc": "Results of a new experiment show technology aboard NOAA’s GOES satellites can help scientists better detect emissions of methane – a potent greenhouse gas – as often as every seven seconds. This will provide faster, more complete data on the location and amount of methane emissions to enable more rapid and successful mitigation efforts.",
+ "img": {
+ "src": new URL('./media/GOES_story_card_image.png', import.meta.url).href,
+ "alt": "colorful regions representing methane plumes over brown surface as observed by GOES satellite"
+ },
+ "link": {
+ "url": "https://research.noaa.gov/",
+ "text": "See more"
+ },
+ "footer": null
+ }
+]
+
+export const trainings = [
+ {
+ "title": "ARSET Training on Large Emission Event Detection and Monitoring",
+ "desc": "This introductory two-part training introduces the U.S. Greenhouse Gas Center and provides an overview of how methane observations from the Earth surface Mineral dust Source Investigation (EMIT) mission can be used to identify and monitor areas of high methane enhancement.",
+ "img": {
+ "src": new URL('../../overrides/media/Methane_Website_Header.png', import.meta.url).href,
+ "alt": "the ARSET logo overlaid on an image of a colorful area representing an EMIT methane plume "
+ },
+ "link": {
+ "url": "https://appliedsciences.nasa.gov/get-involved/training/english/arset-methane-observations-large-emission-event-detection-and",
+ "text": "See more"
+ },
+ "footer": null
+ }
+]
+
+
+export const datasets = [
+ {
+ "title": "U.S. Gridded Anthropogenic Methane Emissions Inventory",
+ "desc": "Spatially disaggregated 0.1°x 0.1° maps of annual U.S. anthropogenic methane emissions from over 25 emission sources, consistent with the U.S. Inventory of Greenhouse Gas Emissions and Sinks.",
+ "img": {
+ "src": new URL('../../datasets/media/epa-annual--cover.jpg', import.meta.url).href,
+ "alt": "Total Gridded Methane Emissions from the U.S. Inventory of Greenhouse Gas Emissions and Sinks"
+ },
+ "link": {
+ "url": "/data-catalog/epa-ch4emission-yeargrid-v2express",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "Geostationary Satellite Observations of Extreme and Transient Methane Emissions from Oil and Gas Infrastructure",
+ "desc": "A sample of methane plumes from point sources observed since 2019 by the U.S. Geostationary Operational Environmental Satellites (GOES) over North and South America",
+ "img": {
+ "src": new URL('../../datasets/media/goes-ch4plume--cover.jpg', import.meta.url).href,
+ "alt": "emission from industry"
+ },
+ "link": {
+ "url": "/data-catalog/goes-ch4plume-v1",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "Wetland Methane Emissions, LPJ-EOSIM Model ",
+ "desc": "Global monthly and daily 0.5 degree resolution estimates of wetland methane emissions from the LPJ-EOSIM model, version 1",
+ "img": {
+ "src": new URL('../../datasets/media/ch4-wetland--cover.jpeg', import.meta.url).href,
+ "alt": "svs visualiztion"
+ },
+ "link": {
+ "url": "/data-catalog/lpjeosim-wetlandch4-grid-v1",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "CarbonTracker-CH₄ Isotopic Methane Inverse Fluxes",
+ "desc": "Global, monthly 1 degree resolution methane emission estimates from microbial, fossil and pyrogenic sources derived using inverse modeling, version 2023",
+ "img": {
+ "src": new URL('../../datasets/media/ct-ch4-monthgrid-v2023-cover.jpg', import.meta.url).href,
+ "alt": "three dimensional plot of methane in the atmosphere"
+ },
+ "link": {
+ "url": "/data-catalog/ct-ch4-monthgrid-v2023",
+ "text": "See more"
+ },
+ "footer": null
+ },
+ {
+ "title": "GOSAT-based Top-down Total and Natural Methane Emissions ",
+ "desc": "Total and natural methane emissions derived using the GEOS-Chem global chemistry transport model with inclusion of GOSAT data. Methane emission values for both before and after adding GOSAT to the model are mapped to a 1° resolution grid. Version 1.0 contains data only for 2019",
+ "img": {
+ "src": new URL('../../datasets/media/oco2-mip-ch4budget-yeargrid-v1--cover.jpg', import.meta.url).href,
+ "alt": "Dried/Burned trees"
+ },
+ "link": {
+ "url": "/data-catalog/gosat-based-ch4budget-yeargrid-v1",
+ "text": "See more"
+ },
+ "footer": null
+ }
+]
\ No newline at end of file
diff --git a/stories/methane/media/EMIT_story_card.png b/stories/methane/media/EMIT_story_card.png
new file mode 100644
index 000000000..405b59b70
Binary files /dev/null and b/stories/methane/media/EMIT_story_card.png differ
diff --git a/stories/methane/media/GOES_story_card_image.png b/stories/methane/media/GOES_story_card_image.png
new file mode 100644
index 000000000..acce1e11f
Binary files /dev/null and b/stories/methane/media/GOES_story_card_image.png differ
diff --git a/stories/methane/media/Gray_box.png b/stories/methane/media/Gray_box.png
new file mode 100644
index 000000000..d1721ba14
Binary files /dev/null and b/stories/methane/media/Gray_box.png differ
diff --git a/stories/methane/media/NIST_Methane_Intercomparisons_card.png b/stories/methane/media/NIST_Methane_Intercomparisons_card.png
new file mode 100644
index 000000000..add5694ea
Binary files /dev/null and b/stories/methane/media/NIST_Methane_Intercomparisons_card.png differ
diff --git a/stories/methane/media/Wetlands_image_v2_rs.png b/stories/methane/media/Wetlands_image_v2_rs.png
new file mode 100644
index 000000000..48eac9586
Binary files /dev/null and b/stories/methane/media/Wetlands_image_v2_rs.png differ