Update learn page contents (#274)

* Production deploy v1.0.1 (#242) - Fix link to OCO2 MIP data notebook * Update meta image, home page text (#243) * Add source data production citation for eccodarwin dataset * Update cover image for for US Methane Sources story (#247) * v1.0.1 (#263) # Changelog ## 🎉 Features 🦗 ## 🚀 Improvements - Add data source citation in Air-Sea CO₂ Flux, ECCO-Darwin Model v5 dataset overview - Update cover image in U.S. Gridded Anthropogenic Greenhouse Gas Emissions data insight - Update website meta image to a clearer version ## 🐛 Fixes - Fix user notebook URL for OCO-2 MIP Top-down CO₂ Budgets dataset - Fix broken external link to gas flaring photo * Add temporary AMS banner in homepage (#270) * Work on AMS banner * Add tempBanner info in config * Add tempbanner string * Change padding * Change banner link color to white * Update version * Update link to the specific course * Fix a grammar error --------- Co-authored-by: Hanbyul Jo <[email protected]> * Edit lean page contents * Update banner to summer school info (#277) * Update banner to summer school content * Generalize banner * edited based on comments by aries * reorder the content * contact in media inquiries uodated * lear more section added * learn more section added with description and presentations * changes made after HQs feedback * cms event added * cms speaker event added * updates on cms * Update cms speakers series event image * Remove banner * Increment version * Resize cms speaker image --------- Co-authored-by: Hanbyul Jo <[email protected]> Co-authored-by: siddharth0248 <[email protected]>
NASA-IMPACT · Feb 12, 2024 · a98ab46 · a98ab46
1 parent ab859b9
commit a98ab46
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 21 deletions.
diff --git a/custom-pages/learn/index.mdx b/custom-pages/learn/index.mdx
@@ -3,7 +3,7 @@ mainNavItem:
   navTitle: Learn
 title: Learn
 description: "
-  Learn about US GHG Center News, Events and Training.
+  US GHG Center News, Events, and Training Opportunities.
 "
 ---
 
@@ -15,9 +15,9 @@ import AnchorScroll from './AnchorScroll'
 <Block >
   <Prose>
 
-    The U.S. Greenhouse Gas Center provides researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens with trusted data. This site helps users to better understand GHG datasets and put the data and information to use. 
+    The U.S. Greenhouse Gas Center is for researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens. It provides trusted greenhouse gas emission and flux data, as well as methods and tools to analyze, visualize and interpret the data. This site helps users to better understand greenhouse gas datasets and put the data and information to use.
 
-    The US GHG Center website is always evolving, and this page highlights the latest US GHG Center news and available training and workshop opportunities. New data and information is added often and website features and capabilities will always continue to improve.  
+    The US GHG Center website is always evolving with new data and information. This page highlights US GHG Center news, trainings, and workshop opportunities.  
 
     If you would like to stay informed, please [subscribe to our email newsletter](https://docs.google.com/forms/d/e/1FAIpQLSfDxq_jR3z_006WkUnNKriGFlAdXhiZxC0ppkxV9fDXSM_FxQ/viewform).
   </Prose>
@@ -73,12 +73,32 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel nunc mauris
   </Prose>
 </Block> */}
 
+<Block>
+  <Prose>
+    ## Learn More
+
+    Investigate US GHG Center demonstrations and presentations and explore opportunities to get involved.
+
+    - Presentations 
+      - [Stakeholder Meeting Nov. 28](https://www.youtube.com/playlist?list=PLiuUQ9asub3RDzYAZ3N7_6wIIgmvDpZq_) 
+        - [Part 1](https://www.youtube.com/watch?v=MPWow413i-o&list=PLiuUQ9asub3RDzYAZ3N7_6wIIgmvDpZq_&index=1&pp=iAQB) (Introductions and Science)
+        - [Part 2](https://www.youtube.com/watch?v=CrnBY4iYVeA&list=PLiuUQ9asub3RDzYAZ3N7_6wIIgmvDpZq_&index=2&t=136s&pp=iAQB) (Website overview; Focus area details; National Strategy)
+      - [COP28 State Department Announcement](https://www.youtube.com/watch?v=cw8ku_qfAao)
+      - [US GHG Center Hyperwall Presentation at AGU](https://youtu.be/8_aFRPqiXGw)
+      - [Carbon Monitoring System NASA Webinar Series](https://cce-datasharing.gsfc.nasa.gov/programs/meetings/10/h/1/)  
+    </Prose>
+</Block>
+
 <Block>
   <Prose>
    <h2 id="press"> Press Information </h2>
    The U.S. Greenhouse Gas Center is a multi-agency effort to provide researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens with trusted data on greenhouse gases. 
 
-    For Media Inquiries, contact Aries Keck, NASA Communications, [email protected], 202-604-2356.
+    For Media Inquiries:
+    - Aries Keck, NASA (lead implementing agency) - [email protected], 202-604-2356
+    - John Millet, EPA - [email protected]
+    - Richard Press, NIST - [email protected] 
+    - Theo Stein, NOAA - [email protected]
 
     ### News Releases
 

diff --git a/custom-pages/learn/learn-page-content.js b/custom-pages/learn/learn-page-content.js
@@ -8,10 +8,10 @@ export const NEWS_ITEMS = [
       src: new URL('./media/news/cop28-uae.jpg', import.meta.url).href,
       alt: 'Cop 28 Logo'
     },
-    description: 'Agency partners released the US GHG Center and portal at the 28th annual United Nations Climate Conference (COP28) on December 4, 2023.'
-  },
+    description: 'Agency partners released the US GHG Center at the 28th annual United Nations Climate Conference (COP28) on December 4, 2023.'
+  },  
   {
-    name: 'New U.S. national strategy for measuring and monitoring GHG emissions',
+    name: 'A U.S. national strategy for measuring and monitoring GHG emissions',
     asLink : {
       url: 'https://www.whitehouse.gov/omb/briefing-room/2023/11/29/interagency-working-group-releases-national-strategy-enhance-nation-greenhouse-gas-measurement-monitoring-capabilities/'
     },
@@ -30,37 +30,50 @@ export const NEWS_ITEMS = [
       src: new URL('./media/news/Kavvada_2023_AGU_Hyperwall_Edited.png', import.meta.url).href,
       alt: 'NASA logo'
     },
-    description: 'The US GHG Center and portal was a new and prominent effort highlighted at the 2023 AGU Fall Meeting in San Francisco, December 11th - 15th. Several presentations and posters featured the Center’s content, design, and functionality.'
+    description: 'The US GHG Center and beta portal was a new and prominent effort highlighted at the 2023 AGU Fall Meeting in San Francisco, December 11th - 15th. Several presentations and posters featured the Center’s content, design, and functionality.'
   }
 ]
 
 export const EVENT_ITEMS = [
   {
-    name: 'American Meteorological Society (AMS) Annual Meeting',
+    name: 'Policy Speaker Series: Implementing the U.S. Greenhouse Gas Center',
     asLink : {
-      url: 'https://us-ghg-center.github.io/ams-2024-workshop/ghg-center-at-ams-2024.html'
+      url: 'https://carbon.nasa.gov/pdfs/Feb%202024%20PSS%20Talk%20Announcement%20.pdf'
     },
     media: {
-      src: new URL('./media/events/AMS24_Logo.png', import.meta.url).href,
-      alt: 'AMS 24 logo'
+      src: new URL('./media/events/GHGC_CMS_Joint_Policy_Speaker_Series_v1.png', import.meta.url).href,
+      alt: 'CMS speaker series screenshot'
     },
-    description: ' Join members of the GHG Center team for several events at the 2024 AMS Annual Meeting in Baltimore, January 28 - February 1.',
-    startDate: '2024-01-28',
-    endDate: '2024-02-01'
+    description: 'The US GHG Center is joining with NASA’s Carbon Monitoring System (CMS) Initiative to present a webinar on Tuesday, February 20, 2024 from 12-1PM ET. Dr. Argyro Kavvada, Dr. Lesley Ott, and Dr. Erin McDuffie will discuss development and implementation for the multi-agency US GHG Center and links to the national GHG strategy. Participants can attend on-site at GSFC in Building 33, conference room H114 or virtually through WebEx. Attendees must register.',
+    startDate: '2024-06-11',
+    endDate: '2024-06-21'
   },
   {
-    name: 'US GHG Center Summer School Registration',
+    name: 'US GHG Center Summer School',
     asLink : {
       url: 'https://www.cira.colostate.edu/conferences/rmtgw/'
     },
     media: {
       src: new URL('./media/events/summer-school.png', import.meta.url).href,
       alt: 'Summer school info screenshot'
     },
-    description: 'The US GHG Center announces a Summer School for Inverse Modeling of Greenhouse Gases (SSIM-GHG) that is planned for June 11-21, 2024 at Fort Collins, CO, USA.  Graduate students and early career post-docs are invited to apply by January 31st.',
+    description: 'The US GHG Center is hosting a Summer School for Inverse Modeling of Greenhouse Gases (SSIM-GHG), June 11-21, 2024 at Fort Collins, CO, USA. The goal of the summer school is to present and provide guidance and instruction of the state of the art in atmospheric data assimilation techniques needed to support current and future GHG observing systems.',
     startDate: '2024-06-11',
     endDate: '2024-06-21'
   },
+  {
+    name: 'American Meteorological Society (AMS) Annual Meeting',
+    asLink : {
+      url: 'https://us-ghg-center.github.io/ams-2024-workshop/ghg-center-at-ams-2024.html'
+    },
+    media: {
+      src: new URL('./media/events/AMS24_Logo.png', import.meta.url).href,
+      alt: 'AMS 24 logo'
+    },
+    description: '  Members of the GHG Center team hosted a workshop, town hall, and several presentations at the 2024 AMS Annual Meeting in Baltimore, January 28 – February 1. Workshop participants analyzed and visualized data using open-source tools and datasets. At the town hall and multiple presentations AMS attendees shared feedback and saw demonstrations of the US GHG Center.',
+    startDate: '2024-01-28',
+    endDate: '2024-02-01'
+  },
   {
     name: 'Launch of the US Greenhouse Gas Center at COP28 (12-4-23)',
     asLink : {
@@ -70,14 +83,14 @@ export const EVENT_ITEMS = [
       src: new URL('./media/news/cop28-uae.jpg', import.meta.url).href,
       alt: 'COP 23 UAE logo'
     },
-    description: 'NASA Administrator Bill Nelson, U.S. Environmental Protection Agency (EPA) Administrator Michael Regan, and other United States government leaders unveiled the U.S. Greenhouse Gas Center.',
+    description: 'NASA Administrator Bill Nelson, U.S. Environmental Protection Agency (EPA) Administrator Michael Regan, and other United States government leaders unveiled the U.S. Greenhouse Gas Center  Monday, Dec. 4 during the 28th annual United Nations Climate Conference (COP28).',
     startDate: '2023-12-04',
     endDate: '2023-12-04'
   },
   {
     name: 'US GHG Center Stakeholder Forum',
     asLink : {
-      url: 'https://www.youtube.com/watch?v=HCG7lepiGPI'
+      url: 'https://www.youtube.com/playlist?list=PLiuUQ9asub3RDzYAZ3N7_6wIIgmvDpZq_'
     },
     media: {
       src: new URL('./media/events/stakeholder-forum.png', import.meta.url).href,

diff --git a/custom-pages/learn/media/events/GHGC_CMS_Joint_Policy_Speaker_Series_v1.png b/custom-pages/learn/media/events/GHGC_CMS_Joint_Policy_Speaker_Series_v1.png
diff --git a/overrides/about.mdx b/overrides/about.mdx
@@ -5,7 +5,7 @@ description: Uniting Data and Technology to Empower Tomorrow's Climate Solutions
 
 <Block>
   <Prose>
-  The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas (GHG) information from observations and models. Scientific experts from NASA, EPA, NIST, and NOAA worked together to curate this catalog GHG datasets and analysis tools. The goal is to better understand GHG fluxes and emissions from natural and human-caused sources. The US GHG Center helps researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens understand GHG datasets and put them to use.
+  The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas (GHG) information from observations and models. Scientific experts from NASA, EPA, NIST, and NOAA worked together to curate this catalog of GHG datasets and analysis tools. The goal is to better understand GHG fluxes and emissions from natural and human-caused sources. The US GHG Center helps researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens understand GHG datasets and put them to use.
 
   The initial two-year demonstration phase targets three GHG areas of study:
   1.	Human-caused GHG emissions

diff --git a/overrides/home/banner.tsx b/overrides/home/banner.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from '$veda-ui/react'
+import { Button } from "$veda-ui/@devseed-ui/button";
+import { CollecticonXmarkSmall } from "$veda-ui/@devseed-ui/collecticons";
+import styled from '$veda-ui/styled-components';
+import {
+  glsp,
+  media,
+  themeVal
+} from '$veda-ui/@devseed-ui/theme-provider';
+import Hug from "$veda-ui-scripts/styles/hug";
+import { getString } from 'veda';
+
+const BANNER_KEY = 'dismissedBannerUrl'
+
+const BannerBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  
+  background-color: #C75D61;
+  text-align: center;
+  font-size: 1rem;
+
+  a {
+    color: ${themeVal('color.surface')};
+  }
+`
+
+const BannerContainer = styled(Hug)`
+  width: 100%;
+  padding: ${glsp(0, 0.25)};
+  ${media.mediumDown`
+    padding: ${glsp(0.25, 0.25)};
+  `}
+`;
+
+const BannerContent = styled.div`
+  grid-column: content-start / content-end;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  font-weight: 600;
+  ${media.mediumDown`
+    text-align: left;
+    font-size: 0.75rem;
+  `}
+  a:link, a:visited {
+    color: white;
+  }
+`
+
+export default function Banner() {
+  const bannerUrl = getString('tempBannerUrl')?.other || "";
+  const showBanner = (localStorage.getItem(BANNER_KEY) !== bannerUrl) && !!getString('tempBanner')?.other
+  const [ showTempBanner, setShowTempBanner ] = useState(showBanner);
+
+  function onClick () {
+    localStorage.setItem(
+      BANNER_KEY,
+      bannerUrl
+    );
+    setShowTempBanner(false);
+  }
+
+  return (showTempBanner && 
+      <BannerBox className="banner">
+        <BannerContainer>
+          <BannerContent>
+            <a href={getString('tempBannerUrl')?.other || "" } target="_blank"> 
+              { getString('tempBanner').other }
+            </a>
+            <Button onClick={onClick} variation="base-text" fitting="skinny">
+              <CollecticonXmarkSmall title="Dismiss banner" color="white" meaningful />
+            </Button>
+            </BannerContent>
+          </BannerContainer>
+      </BannerBox>
+  )
+}
diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -11,6 +11,7 @@ import { variableGlsp } from "$veda-ui-scripts/styles/variable-utils";
 import Partners from "./partners";
 import Keypoints from "./keypoints";
 import { ArrowLink } from "./arrow-link";
+import Banner from './banner';
 
 const HomeContent = styled(Hug)`
   padding: ${variableGlsp(2.5, 0)};
@@ -88,6 +89,7 @@ const InfoCalloutHeadline = styled.div`
 export default function HomeComponent() {
   return (
     <>
+    <Banner />
       <HomeContent>
         <IntroHeadline>
           <VarHeading size="xxlarge">Welcome</VarHeading>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "veda-config",
   "description": "Configuration for Veda",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "source": "./.veda/ui/app/index.html",
   "license": "Apache-2.0",
   "scripts": {

diff --git a/veda.config.js b/veda.config.js
@@ -41,6 +41,11 @@ module.exports = {
         "Explore the guided narratives below to learn more about greenhouse gas measurement, changes over time, events and human-related causes and contributions.",
     dataCatalogBanner:
         "This dashboard is for exploring key datasets that provide insight into greenhouse gas sources, sinks, emissions, fluxes, and events.",
+    // Temporary Banner Text/URL
+    // tempBanner:
+    //     "<Text for Notification Banner at the top of the Homepage>",
+    // tempBannerUrl:
+    //     "<URL to go to on clicking the Notification Banner>"
   },
 
   theme: {