Add learn page

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;

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: 1,
+  mediumUp: 2,
+  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 (<ContinuumCardsDragScrollWrapper>
+    <ContinuumScrollIndicator />
+    <ContinuumDragScroll hideScrollbars={false} {...scrollProps}>
+      <StyledContinuum
+        id="continuum"
+        listAs='ol'
+        startCol={continuumFoldStartCols}
+        spanCols={continuumFoldSpanCols}
+        render={(bag) => {
+          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 (
+              <ContinuumGridItem {...bag} key={d.name}>
+                <StyledCard
+                  onCardClickCapture={(e) => {
+                    // 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 && 
+                      <Pill variation='primary'>{timeStatus}</Pill>
+                    }
+                />
+              </ContinuumGridItem>
+            );
+          });
+        }}
+      />
+    </ContinuumDragScroll>
+  </ContinuumCardsDragScrollWrapper>
+  )
+};

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'
+  }
+```

custom-pages/learn/index.mdx

@@ -0,0 +1,95 @@
+---
+mainNavItem:
+  navTitle: Learn
+title: Learn
+description: "
+  Learn about US GHG Center News, Events and Training.
+"
+---
+
+import { EventsComponent } from './component'
+import { NEWS_ITEMS, EVENT_ITEMS } from './learn-page-content'
+import AnchorScroll from './AnchorScroll'
+
+<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 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.  
+
+    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>
+</Block>
+
+<Block>
+  <Prose>
+    <h2 id="news">News and Announcements</h2>
+    <EventsComponent items={NEWS_ITEMS} />
+
+    {/* <h3 id="newsletter">U.S. GHG Center newsletters</h3>
+    <div style={{background: '#E8F0FD', border: '1px solid #B7CFFA', padding: '0.5rem', fontSize: '1rem'}}>
+
+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.
+
+    </div> */}
+  </Prose>
+</Block>
+
+
+
+<Block>
+  <Prose>
+    ## Upcoming / Past Events 
+    <EventsComponent items={EVENT_ITEMS} />
+  </Prose>
+</Block>
+
+
+{/* <Block>
+  <Prose>
+    ## Learn More
+    <Embed
+      src="https://www.youtube.com/embed/YQWespzOtzI?si=0T-HzC405nrLfsTp" 
+      height="400"
+    />
+
+
+  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
+  </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.
+
+    ### 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)
+  </Prose>
+</Block>
+
+<Block>
+  <Prose>
+    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 of this page.
+  </Prose>
+</Block>

custom-pages/learn/learn-page-content.js

@@ -0,0 +1,103 @@
+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: 'New 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](hello) 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 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',
+    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: ' 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'
+  },
+  {
+    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 workshop 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: '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.',
+    startDate: '2023-12-04',
+    endDate: '2023-12-04'
+  },
+  {
+    name: 'US GHG Center Stakeholder Forum',
+    asLink : {
+      url: 'https://www.youtube.com/watch?v=HCG7lepiGPI'
+    },
+    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'
+  }
+]