From 33452e46a795442d2ef0f07757a5b02c5439df22 Mon Sep 17 00:00:00 2001 From: Slesa Adhikari Date: Tue, 23 Jan 2024 14:10:19 -0600 Subject: [PATCH] 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 --- overrides/about.mdx | 2 +- overrides/home/ams-banner.tsx | 81 +++++++++++++++++++++++++++++++++++ overrides/home/component.tsx | 2 + package.json | 2 +- veda.config.js | 7 ++- 5 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 overrides/home/ams-banner.tsx diff --git a/overrides/about.mdx b/overrides/about.mdx index ce7c68fae..9b2b20a74 100644 --- a/overrides/about.mdx +++ b/overrides/about.mdx @@ -5,7 +5,7 @@ description: Uniting Data and Technology to Empower Tomorrow's Climate Solutions - 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/ams-banner.tsx b/overrides/home/ams-banner.tsx new file mode 100644 index 000000000..591494640 --- /dev/null +++ b/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 && + + + + + { getString('tempBanner').other } + + + + + + ) +} \ No newline at end of file diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx index df7792dcd..bbda723eb 100644 --- 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 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 ( <> + Welcome diff --git a/package.json b/package.json index 5b9e8ff58..286176db7 100644 --- a/package.json +++ b/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": { diff --git a/veda.config.js b/veda.config.js index dc9701259..dffcd11ea 100644 --- a/veda.config.js +++ b/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: {