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]>

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

overrides/home/ams-banner.tsx

@@ -0,0 +1,81 @@
+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 AMS_BANNER_KEY = 'show-ams-banner'
+
+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 showBanner = (localStorage.getItem(AMS_BANNER_KEY) !== 'false') && !!getString('tempBanner')?.other
+  const [ showTempBanner, setShowTempBanner ] = useState(showBanner);
+
+  function onClick () {
+    localStorage.setItem(
+      AMS_BANNER_KEY,
+      'false'
+    );
+    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>
+  )
+}

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 AMSBanner from './ams-banner';
 
 const HomeContent = styled(Hug)`
   padding: ${variableGlsp(2.5, 0)};
@@ -88,6 +89,7 @@ const InfoCalloutHeadline = styled.div`
 export default function HomeComponent() {
   return (
     <>
+    <AMSBanner />
       <HomeContent>
         <IntroHeadline>
           <VarHeading size="xxlarge">Welcome</VarHeading>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "veda-config",
   "description": "Configuration for Veda",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "source": "./.veda/ui/app/index.html",
   "license": "Apache-2.0",
   "scripts": {

veda.config.js

@@ -28,7 +28,7 @@ module.exports = {
     // Component for the header brand.
     headerBrand: "./overrides/components/header-brand/index.mdx",
     // Component for the footer.
-    pageFooter: "./overrides/components/page-footer/index.mdx",
+    pageFooter: "./overrides/components/page-footer/index.mdx"
   },
 
   strings: {
@@ -40,6 +40,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:
+        "Attending AMS Annual Meeting in Baltimore?  Join the GHG Center / VEDA workshop and learn about Greenhouse Gases using Open Source data and tools. Register Here!",
+    tempBannerUrl:
+        "https://www.ametsoc.org/index.cfm/ams/education-careers/careers/professional-development/short-courses/advancing-open-science-an-interactive-workshop-on-harnessing-veda-for-earth-science-research-at-the-u-s-greenhouse-gas-center/"
   },
 
   theme: {