Methane release homepage, topics, data-toolkit and methane landing pa…

…ge content update (#668)

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": {

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 (
+        <Grid tablet={{col:8, offset: 2}}>
+          <Title> Learn More and Share Your Ideas </Title>
+
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonEnvelope size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated"> For the latest updates and information about the US GHG Center or to join a focus area group, <a href={SUBSCRIPTION_URL}>subscribe to our email updates list.</a></span>
+              </Grid>
+          </Grid>
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonTextBlock size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated"> Read more about the US GHG Center news, trainings, and workshop opportunities on the <Link to="/news-and-events">News and Events page.</Link></span>
+              </Grid>
+          </Grid>
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonSpeechBalloon size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated">  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.</span>
+              </Grid>
+          </Grid>
+        </Grid>
+    )
+}

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() {
                 <Keypoints data={focusAreaDatasets} />
                 </section>
 
-                <Grid tablet={{col:8, offset: 2}}>
-                    <Title> Learn More and Share Your Ideas </Title>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonEnvelope size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated"> For the latest updates and information about the US GHG Center or to join a focus area group, <a href={SUBSCRIPTION_URL}>subscribe to our email updates list.</a></span>
-                        </Grid>
-                    </Grid>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonTextBlock size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated"> Read more about the US GHG Center news, trainings, and workshop opportunities on the <Link to="/news-and-events">News and Events page.</Link></span>
-                        </Grid>
-                    </Grid>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonSpeechBalloon size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated">  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.</span>
-                        </Grid>
-                    </Grid>
-                </Grid>
+                <LearnMore />
             </GridContainer>
         </div>
     )

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,58 +20,27 @@ export default function HomeComponent() {
   return (
     <div className="hug-reset-container margin-bottom-8">
       <GridContainer containerSize="widescreen">
-          <Title>Content Collections by Topic</Title>
-        <CardGroup>
-          <Card layout="flagDefault" gridLayout={{tablet: {col: 10}, col: 12}} containerProps={{className:'border-0 position-relative card-shadow__hover'}}>
-            <CardMedia exdent>
-              <img src={new URL('./media/1-maia-los-angeles-1041.png', import.meta.url).href} alt="distant view of hazy cityscape." />
-            </CardMedia>
-
-            <CardHeader>
-              <h3 className="usa-card__heading margin-top-4">Urban Emissions</h3>
-            </CardHeader>
-            <CardBody>
-              <p className="padding-bottom-2 margin-bottom-4">
-              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.
-              </p>
-            </CardBody>
-            <Link className="position-absolute top-0 left-0 width-full height-full blocklink" to="/stories/urban" />
-          </Card>
-          </CardGroup>
+        <Title>Content Collections by Topic</Title>
+
+        {
+          !!topics.length && topics.map(topic => (
+            <Topic
+              title={topic.title}
+              description={topic.description}
+              href={topic.href}
+              imgSrc={topic.img.src}
+              imgAlt={topic.img.alt}
+            />
+          ))
+        }
 
         <section>
           <Title>Core Science Focus Areas</Title>
           <p className="margin-top-2 font-size-md-deprecated margin-bottom-2">The US GHG Center targets three greenhouse gas areas of study, as shown below. For the latest, <a href={SUBSCRIPTION_URL}>subscribe to our email newsletter</a>.</p>
           <Keypoints data={focusAreasStories} />
         </section>
 
-        <Grid tablet={{col:8, offset: 2}}>
-          <Title> Learn More and Share Your Ideas </Title>
-          <Grid row>
-              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                  <CollecticonEnvelope size='xlarge' color='#082a64' className="grid-col-auto" />
-              </Grid>
-              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                  <span className="margin-left-4 font-size-md-deprecated"> For the latest updates and information about the US GHG Center or to join a focus area group, <a href={SUBSCRIPTION_URL}>subscribe to our email updates list.</a></span>
-              </Grid>
-          </Grid>
-          <Grid row>
-              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                  <CollecticonTextBlock size='xlarge' color='#082a64' className="grid-col-auto" />
-              </Grid>
-              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                  <span className="margin-left-4 font-size-md-deprecated"> Read more about the US GHG Center news, trainings, and workshop opportunities on the <Link to="/news-and-events">News and Events page.</Link></span>
-              </Grid>
-          </Grid>
-          <Grid row>
-              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                  <CollecticonSpeechBalloon size='xlarge' color='#082a64' className="grid-col-auto" />
-              </Grid>
-              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                  <span className="margin-left-4 font-size-md-deprecated">  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.</span>
-              </Grid>
-          </Grid>
-        </Grid>
+        <LearnMore />
 
       </GridContainer>
     </div>

custom-pages/topics/components/Topic.tsx

@@ -0,0 +1,46 @@
+import React from "$veda-ui/react";
+import { Link } from '$veda-ui/react-router-dom';
+import {
+  Card, 
+  CardHeader,
+  CardBody,
+  CardMedia,
+  CardGroup,
+} from '$veda-ui/@trussworks/react-uswds';
+
+
+interface TopicProps {
+  title: string,
+  description: string,
+  href: string,
+  imgSrc: string,
+  imgAlt: string,
+}
+
+export default function Topic({
+    title,
+    description,
+    href,
+    imgSrc,
+    imgAlt,
+}: TopicProps) {  
+    return (
+        <CardGroup>
+          <Card layout="flagDefault" gridLayout={{tablet: {col: 10}, col: 12}} containerProps={{className:'border-0 position-relative card-shadow__hover'}}>
+            <CardMedia exdent imageClass="width-tablet-lg">
+              <img src={imgSrc} alt={imgAlt} />
+            </CardMedia>
+
+            <CardHeader>
+              <h3 className="usa-card__heading margin-top-4">{title}</h3>
+            </CardHeader>
+            <CardBody>
+              <p className="padding-bottom-2 margin-bottom-4">
+              {description}
+              </p>
+            </CardBody>
+            <Link className="position-absolute top-0 left-0 width-full height-full blocklink" to={href} />
+          </Card>
+        </CardGroup>
+    )
+}

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",
+    },
+]

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).