diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 54b33f9f0..4ba32a6f4 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -122,8 +122,7 @@ jobs: - name: Deploy to S3 Production run: | - aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }}${{ vars.SUBPATH }} --cache-control max-age=604800 --delete - + aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }}${{ vars.SUBPATH }} --cache-control max-age=30,must-revalidate,s-maxage=604800 --delete - name: Request Invalidation to AWS Cloudfront uses: oneyedev/aws-cloudfront-invalidation@v1 with: diff --git a/.veda/ui b/.veda/ui index caed3b916..c129d118c 160000 --- a/.veda/ui +++ b/.veda/ui @@ -1 +1 @@ -Subproject commit caed3b91667c335d41c1b8d3d67478d55855f5db +Subproject commit c129d118c07cd0cc84d50326ac6694c510a0d08c diff --git a/custom-pages/learn/AnchorScroll.tsx b/custom-pages/learn/AnchorScroll.tsx new file mode 100644 index 000000000..27a59fa49 --- /dev/null +++ b/custom-pages/learn/AnchorScroll.tsx @@ -0,0 +1,28 @@ +import { useEffect, useRef } from '$veda-ui/react'; +import { useLocation } from '$veda-ui/react-router-dom'; + +function ScrollToAnchor() { + const location = useLocation(); + const lastHash = useRef(''); + + // listen to location change using useEffect with location as dependency + // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen + useEffect(() => { + if (location.hash) { + lastHash.current = location.hash.slice(1); // safe hash for further use after navigation + } + + if (lastHash.current && document.getElementById(lastHash.current)) { + setTimeout(() => { + document + .getElementById(lastHash.current) + ?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + lastHash.current = ''; + }, 100); + } + }, [location]); + + return null; +} + +export default ScrollToAnchor; \ No newline at end of file diff --git a/custom-pages/learn/AnchorSrollMenu.tsx b/custom-pages/learn/AnchorSrollMenu.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/custom-pages/learn/component.tsx b/custom-pages/learn/component.tsx new file mode 100644 index 000000000..58468925a --- /dev/null +++ b/custom-pages/learn/component.tsx @@ -0,0 +1,118 @@ +import React from "$veda-ui/react"; +import styled from "$veda-ui/styled-components"; +import { glsp } from "$veda-ui/@devseed-ui/theme-provider"; +import { + Card +} from "$veda-ui-scripts/components/common/card"; + +import { + Continuum, + ContinuumGridItem, + ContinuumCardsDragScrollWrapper, + ContinuumDragScroll +} from '$veda-ui-scripts/styles/continuum'; +import { ContinuumScrollIndicator } from '$veda-ui-scripts/styles/continuum/continuum-scroll-indicator'; +import { useReactIndianaScrollControl } from '$veda-ui-scripts/styles/continuum/use-react-indiana-scroll-controls'; +import { continuumFoldStartCols } from '$veda-ui-scripts/components/common/featured-slider-section' +import { Pill } from '$veda-ui-scripts/styles/pill'; + + +export const continuumFoldSpanCols = { + smallUp: 4, + mediumUp: 4, + largeUp: 4 +}; + +const FoldSection = styled.div` + grid-column: 1 / -1; + display: flex; + flex-flow: column nowrap; + margin-bottom: ${glsp(2)}; +`; + +const StyledCard = styled(Card)` + h3:first-child { + margin-bottom: 0; + &:before { + content: none; + } + } + img { + max-height: 250px; + } + h3 { + font-size: 1.125rem; + } + p { + font-size: 1rem; + } +` + +const StyledContinuum = styled(Continuum)` + ol { + margin-left: 0.5rem; + } +`; + + +function getEventTemporalState(startDate, endDate) { + // Convert start and end dates to Date objects + const startDateTime = new Date(startDate + 'T00:00:00-05:00'); // Assuming EST (UTC-5) + const endDateTime = new Date(endDate + 'T23:59:59-05:00'); // Assuming EST (UTC-5) + + // Get current date and time in EST + const currentDate = new Date(); + currentDate.setHours(currentDate.getHours() - 5); + // Check if current date is within the range + if (startDateTime <= currentDate && currentDate <= endDateTime) return 'Current' + else if (currentDate > endDateTime) return 'Past' + else return 'Upcoming' +} + +export function EventsComponent ({items}) { + const { isScrolling, scrollProps } = useReactIndianaScrollControl(); + + return ( + + + { + return items.map((d) => { + // const date = new Date(d[dateProperty ?? '']); + // const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; + const timeStatus = (d.startDate && d.endDate)? getEventTemporalState(d.startDate, d.endDate): null + return ( + + { + // If the user was scrolling and let go of the mouse on top of a + // card a click event is triggered. We capture the click on the + // parent and never let it reach the link. + if (isScrolling) { + e.preventDefault(); + } + }} + linkLabel='View more' + linkTo={d.asLink?.url} + title={d.name} + description={d.description} + imgSrc={d.media?.src} + imgAlt={d.media?.alt} + footerContent= + {timeStatus && + {timeStatus} + } + /> + + ); + }); + }} + /> + + + ) +}; \ No newline at end of file diff --git a/custom-pages/learn/how-to-edit-content-on-learn-page.md b/custom-pages/learn/how-to-edit-content-on-learn-page.md new file mode 100644 index 000000000..3d94f6fc4 --- /dev/null +++ b/custom-pages/learn/how-to-edit-content-on-learn-page.md @@ -0,0 +1,45 @@ +## How to edit content on Learn page + +### News Item + +1. Open 'learn-page-content.js' file in the same directory. +2. Add an item to 'NEWS_ITEMS' by copying already existing items in the array. +3. Place necessary images in `./media/news` folder. (Let's say this image has a file name 'image-name.png') +4. Edit the field as needed. Please follow the pattern like below. + +``` + { + name: 'News title', + asLink : { + url: 'https://link-for-news.com' + }, + media: { + src: new URL('./media/news/image-name.png', import.meta.url).href, + alt: 'Image description' + }, + description: 'A short paragraph to describe the news' + } +``` + +### Event Item + +1. Open 'learn-page-content.js' file in the same directory. +2. Add an item to 'EVENT_ITEMS' by copying already existing items in the array. +3. Place necessary images in `./media/events` folder. (Let's say this image has a file name 'image-name.png') +4. Edit the field as needed. Please follow the pattern like below. Note that startDate and endDate should follow 'yyyy-mm-dd' format. If it is a oneday event, put the same date for both. + +``` + { + name: 'Event title', + asLink : { + url: 'https://link-for-event.com' + }, + media: { + src: new URL('./media/events/image-name.png', import.meta.url).href, + alt: 'Image description' + }, + description: 'A short paragraph to describe the event', + startDate: '2024-01-01', + endDate: '2024-01-02' + } +``` \ No newline at end of file diff --git a/custom-pages/learn/index.mdx b/custom-pages/learn/index.mdx new file mode 100644 index 000000000..ba419fdad --- /dev/null +++ b/custom-pages/learn/index.mdx @@ -0,0 +1,116 @@ +--- +mainNavItem: + navTitle: Learn +title: Learn +description: " + US GHG Center News, Events, and Training Opportunities. +" +--- + +import { EventsComponent } from './component' +import { NEWS_ITEMS, EVENT_ITEMS } from './learn-page-content' +import AnchorScroll from './AnchorScroll' + + + + + + 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 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). + + + + + +

News and Announcements

+ + + {/*

U.S. GHG Center newsletters

+
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel nunc mauris. Integer a lacus nec ligula egestas volutpat ut a purus. Nullam tincidunt ultrices urna, sit amet placerat elit vestibulum dignissim. + +
*/} + + + + + + + + ## Events + + + + + +{/* + + ## Learn More + + + + Investigate the tutorials, demonstrations, and presentations. Also, explore opportunities to get involved with the US GHG Center. + + ### Tutorials and Demonstrations + Recorded demos of GHG Center functionality + + ### Previous Presentations + Stakeholder Meeting Recording + COP28 recording + + ### Internships + - Apply for a NASA US GHG Center Internship + - Check out other internship opportunities (@ partner organizations TBD) + + ### Carbon Monitoring System NASA Webinar Series links + + */} + + + + ## 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/) + + + + + +

Press Information

+ 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: + - Aries Keck, NASA (lead implementing agency) - Aries.Keck@nasa.gov, 202-604-2356 + - John Millet, EPA - Millett.john@epa.gov + - Richard Press, NIST - richard.press@nist.gov + - Theo Stein, NOAA - theo.stein@noaa.gov + + ### News Releases + + - 12.04.2023 - [NASA, Partners Launch US Greenhouse Gas Center to Share Climate Data](https://www.nasa.gov/news-release/nasa-partners-launch-us-greenhouse-gas-center-to-share-climate-data/) + - 11.29.2023 - [Biden-Harris Administration releases Greenhouse Gas Monitoring Strategy](https://www.noaa.gov/news-release/biden-harris-administration-releases-greenhouse-gas-monitoring-strategy) + + + + + + ## What Else Do You Need? Let Us Help You! + + Do you have a need, idea, or suggestion? Contact the US GHG Center team using the "Contact Us" button on the top or the bottom of this page. + + diff --git a/custom-pages/learn/learn-page-content.js b/custom-pages/learn/learn-page-content.js new file mode 100644 index 000000000..71fc74f3d --- /dev/null +++ b/custom-pages/learn/learn-page-content.js @@ -0,0 +1,116 @@ +export const NEWS_ITEMS = [ + { + name: 'US GHG Center announced at COP28', + asLink : { + url: 'https://www.nasa.gov/news-release/nasa-partners-launch-us-greenhouse-gas-center-to-share-climate-data/' + }, + media: { + src: new URL('./media/news/cop28-uae.jpg', import.meta.url).href, + alt: 'Cop 28 Logo' + }, + description: 'Agency partners released the US GHG Center at the 28th annual United Nations Climate Conference (COP28) on December 4, 2023.' + }, + { + 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/' + }, + media: { + src: new URL('./media/news/US_GHG_MMIS_report_cover_screenshot.png', import.meta.url).href, + alt: 'NASA logo' + }, + description: 'On November 29, 2023, the White House released the National Strategy to Advance an Integrated U.S. Greenhouse Gas Measurement, Monitoring, and Information System to Advance an Integrated U.S. Greenhouse Gas Measurement, Monitoring, and Information System. This report outlines how federal agencies will collaborate to lead the federal government’s efforts to assess and reduce GHG emissions.' + }, + { + name: 'The US GHG Center at the 2023 AGU Fall Meeting', + asLink : { + url: 'https://www.youtube.com/watch?v=8_aFRPqiXGw&feature=youtu.be&ab_channel=NASAVideo' + }, + media: { + src: new URL('./media/news/Kavvada_2023_AGU_Hyperwall_Edited.png', import.meta.url).href, + alt: 'NASA logo' + }, + 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: 'Policy Speaker Series: Implementing the U.S. Greenhouse Gas Center', + asLink : { + url: 'https://carbon.nasa.gov/pdfs/Feb%202024%20PSS%20Talk%20Announcement%20.pdf' + }, + media: { + src: new URL('./media/events/GHGC_CMS_Joint_Policy_Speaker_Series_v1.png', import.meta.url).href, + alt: 'CMS speaker series screenshot' + }, + 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', + 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 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 : { + url: 'https://www.nasa.gov/news-release/nasa-partners-launch-us-greenhouse-gas-center-to-share-climate-data/' + }, + media: { + 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 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/playlist?list=PLiuUQ9asub3RDzYAZ3N7_6wIIgmvDpZq_' + }, + media: { + src: new URL('./media/events/stakeholder-forum.png', import.meta.url).href, + alt: 'Stakeholder forum slidedeck intro slide' + }, + description: ' U.S. Greenhouse Gas Center team members presented the beta version of the US GHG Center at the Stakeholder Forum on November 28, 2023 in Washington, D.C. Presenters highlighted the capabilities and scientific potential of the website through demonstrations. Representatives of federal, state, and local governments as well as NGOs, boundary organizations, private organizations, and academia attended the forum.', + startDate: '2023-11-26', + endDate: '2023-11-28' + }, + { + name: 'Listening Session at the NASA Carbon Monitoring System Science Team Meeting', + asLink : { + url: 'https://cce-datasharing.gsfc.nasa.gov/files/conference_presentations/Talk_Combley_92_39.pptx' + }, + media: { + src: new URL('./media/events/cms.png', import.meta.url).href, + alt: 'CMS meeting logo' + }, + description: 'On September 26, 2023, several US GHG Center team members met with a community of potential users and considered how the site could best serve stakeholders. Meeting participants shared ideas on focus areas and needs for the US GHG Center and also suggested stakeholders who might be interested in a targeted Stakeholder Forum for the US GHG Center (November 2023). In addition, team members explored a potential partnership with NASA CMS stakeholder engagement.', + startDate: '2023-09-26', + endDate: '2023-11-26' + } +] \ No newline at end of file diff --git a/custom-pages/learn/media/events/AMS24_Logo.png b/custom-pages/learn/media/events/AMS24_Logo.png new file mode 100644 index 000000000..53f744cbb Binary files /dev/null and b/custom-pages/learn/media/events/AMS24_Logo.png differ 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 new file mode 100644 index 000000000..bd9ae1db3 Binary files /dev/null and b/custom-pages/learn/media/events/GHGC_CMS_Joint_Policy_Speaker_Series_v1.png differ diff --git a/custom-pages/learn/media/events/cms.png b/custom-pages/learn/media/events/cms.png new file mode 100644 index 000000000..30ce0f43a Binary files /dev/null and b/custom-pages/learn/media/events/cms.png differ diff --git a/custom-pages/learn/media/events/stakeholder-forum.png b/custom-pages/learn/media/events/stakeholder-forum.png new file mode 100644 index 000000000..da4824053 Binary files /dev/null and b/custom-pages/learn/media/events/stakeholder-forum.png differ diff --git a/custom-pages/learn/media/events/summer-school.png b/custom-pages/learn/media/events/summer-school.png new file mode 100644 index 000000000..b77a3af7b Binary files /dev/null and b/custom-pages/learn/media/events/summer-school.png differ diff --git a/custom-pages/learn/media/nasa.png b/custom-pages/learn/media/nasa.png new file mode 100644 index 000000000..d6e2dd3f1 Binary files /dev/null and b/custom-pages/learn/media/nasa.png differ diff --git a/custom-pages/learn/media/news/Kavvada_2023_AGU_Hyperwall_Edited.png b/custom-pages/learn/media/news/Kavvada_2023_AGU_Hyperwall_Edited.png new file mode 100644 index 000000000..0fe625155 Binary files /dev/null and b/custom-pages/learn/media/news/Kavvada_2023_AGU_Hyperwall_Edited.png differ diff --git a/custom-pages/learn/media/news/US_GHG_MMIS_report_cover_screenshot.png b/custom-pages/learn/media/news/US_GHG_MMIS_report_cover_screenshot.png new file mode 100644 index 000000000..c7eb794a7 Binary files /dev/null and b/custom-pages/learn/media/news/US_GHG_MMIS_report_cover_screenshot.png differ diff --git a/custom-pages/learn/media/news/cop28-uae.jpg b/custom-pages/learn/media/news/cop28-uae.jpg new file mode 100644 index 000000000..22ee77126 Binary files /dev/null and b/custom-pages/learn/media/news/cop28-uae.jpg differ diff --git a/overrides/components/page-footer/component.tsx b/overrides/components/page-footer/component.tsx index cd3a84fb8..96d530d7a 100644 --- a/overrides/components/page-footer/component.tsx +++ b/overrides/components/page-footer/component.tsx @@ -27,6 +27,10 @@ import { useMediaQuery } from "$veda-ui-scripts/utils/use-media-query"; import Partners from "../../home/partners"; import { AccessibilityMenuItem } from "../../common/styles"; + +const PRESS_PATH = '/learn#press'; + + const FooterInner = styled.div` display: flex; flex-flow: column; @@ -256,6 +260,9 @@ export default function PageFooter(props) {
  • About
    • +
  • + Press Info +
  • Subscribe diff --git a/package.json b/package.json index 286176db7..2b17af7e5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veda-config", "description": "Configuration for Veda", - "version": "1.0.2", + "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 index d37bb86ce..23802c467 100644 --- a/veda.config.js +++ b/veda.config.js @@ -28,7 +28,8 @@ 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", + "/learn": "./custom-pages/learn/index.mdx" }, strings: { @@ -41,10 +42,10 @@ module.exports = { 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: - "Graduate students and early career post-docs are invited to apply for the Summer School for Inverse Modeling of Greenhouse Gases to be held June 11-21, 2024 in Fort Collins, CO. Applications due 1/31/2024.", - tempBannerUrl: - "https://www.cira.colostate.edu/conferences/rmtgw/" + // tempBanner: + // "", + // tempBannerUrl: + // "" }, theme: {