Add more items to Learn page

US-GHG-Center · Jan 3, 2024 · 3c00ed6 · 3c00ed6
1 parent 186f733
commit 3c00ed6
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 98 deletions.
diff --git a/custom-pages/learn/AnchorScroll.tsx b/custom-pages/learn/AnchorScroll.tsx
@@ -8,7 +8,6 @@ function ScrollToAnchor() {
   // 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(() => {
-    console.log("hello~")
     if (location.hash) {
       lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
     }

diff --git a/custom-pages/learn/component.tsx b/custom-pages/learn/component.tsx
@@ -4,32 +4,45 @@ import { glsp, media } from "$veda-ui/@devseed-ui/theme-provider";
 import { Fold, FoldBody } from "$veda-ui-scripts/components/common/fold";
 import {
   Card,
-  CardList
+  CardList,
+  CardTopicsList
 } 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';
 import AnchorScroll from './AnchorScroll'
 
+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 FlexibleListWrapper = styled(CardList)`
-  ${media.largeUp`
-    grid-template-columns: ${(props) => (props.cardAmount %2 ==0 ? "repeat(2, 1fr)" : "repeat(3, 1fr)")}
-  `}
-`
-
 const StyledCard = styled(Card)`
   h3:first-child {
     margin-bottom: 0;
     &:before {
       content: none;
     }
   }
-
+  img {
+    max-height: 250px;
+  }
   h3 {
     font-size: 1.125rem;
   }
@@ -38,71 +51,71 @@ const StyledCard = styled(Card)`
   }
 `
 
-const CardFooter = styled.div`
-  font-size: 1rem;
-`
-
-
-const StyledNewsItem = styled.div`
-  h3:first-child:before {
-    content: none;
-  }
-  h3 {
-    font-size: 1.125rem;
-  }
-  p {
-    font-size: 1rem;
+const StyledContinuum = styled(Continuum)`
+  ol {
+    margin-left: 0.5rem;
   }
+`;
 
-  border: 1px solid grey;
-  padding: ${glsp(1)}
-`
-
-function NewsItem({item}) {
-  return (<StyledNewsItem>
-    <a href={item.link}>
-      <h3>{item.title}</h3>
-    </a>
-    <p>{item.description}</p>
-  </StyledNewsItem>)
-}
 
-export function NewsComponent ({items}) {
-  return (
-    <FlexibleListWrapper>
-      {items.map(item => {
-        return <NewsItem item={item} />
-      })}
-    </FlexibleListWrapper>
-  )
-}
+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)
 
-function EventItem({t}) {
-  return (
-    <StyledCard 
-      linkLabel="View more"
-      linkTo={t.asLink?.url?? `/stories/${t.id}`}
-      title={t.name}
-      description={t.date}
-      imgSrc={t.media.src}
-      imgAlt={t.media.alt}
-      footerContent= {
-        <CardFooter>{t.description}</CardFooter>
-      }
-    />
-  )
+  // 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}) {
-  return (
-    <FlexibleListWrapper>
-      {items.map(item => {
-        const itemWithId = {
-          ...item,
-          id: item.name.replace(/\s+/g, '-').toLowerCase()
-        }
-        return <EventItem t={item} />
-      })}
-    </FlexibleListWrapper>
+  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.id}>
+                <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>
   )
-}
+};
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
@@ -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 'NEWS_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/news/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',
+  }
+```
diff --git a/custom-pages/learn/index.mdx b/custom-pages/learn/index.mdx
@@ -17,26 +17,25 @@ import { NEWS_ITEMS, EVENT_ITEMS } from './learn-page-content'
 <Block >
   <Prose>
 
-  The U.S. Greenhouse Gas Center provides researchers, climate change mitigation practitioners, policymakers, data service providers, and concerned citizens with trusted data to help them better understand GHG datasets and put the data and information to use. 
+    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. New data and information is added monthly, and website features and capabilities continue to improve.  
-
-  This page highlights the latest site enhancements and US GHG Center news. If you would like to stay informed about site updates, please subscribe to our email list to receive periodic newsletters. 
+    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.
   </Prose>
 </Block>
 
 <Block>
   <Prose>
     <h2 id="news">News and Announcements</h2>
-    <NewsComponent items={NEWS_ITEMS} />
+    <EventsComponent items={NEWS_ITEMS} />
 
-    <h3 id="newsletter">U.S. GHG Center newsletters</h3>
+    {/* <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>
+    </div> */}
   </Prose>
 </Block>
 
@@ -50,20 +49,49 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel nunc mauris
 </Block>
 
 
-
 <Block>
   <Prose>
-    ## Learning Opportunities 
+    ## 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>
-    ## Get Help
+    ## 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, 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
+    - 11.29.2023 - 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 this form.
   </Prose>
 </Block>