Merge pull request #104 from NASA-IMPACT/develop

Deploy v0.1.2

overrides/components/hyperwall-cta.tsx

@@ -0,0 +1,114 @@
+import React from "$veda-ui/react";
+import {
+  Fold,
+  FoldBody,
+} from "$veda-ui-scripts/components/common/fold";
+import styled from "$veda-ui/styled-components";
+import Hug from "$veda-ui-scripts/styles/hug";
+import { glsp, media } from "$veda-ui/@devseed-ui/theme-provider";
+import { ExpandLink } from "./expand-link";
+import { StyledVarHeading } from "../common/style";
+import { Button } from "$veda-ui/@devseed-ui/button";
+import HyperwallImg from "../home/media/hyperwall-image1.png";
+
+const BottomContent = styled(Hug)`
+  display: flex;
+  gap: ${glsp(2)};
+  flex-flow: column;
+  width: ${({width}) => width || '100%'};
+  margin: auto;
+
+  ${media.mediumDown`
+      width: 100%
+  `}
+`;
+
+const InfoImageContent = styled.div`
+  display: flex;
+  flex-flow: row;
+  background-color: black;
+  color: #ffffff;
+  width: 100%;
+  height: 300px;
+  position: relative; // Make sure this is relative for positioning pseudo-elements
+  overflow: hidden; // Ensures that the pseudo-element respects the container's border-radius
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(${HyperwallImg});
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(4px);
+    z-index: 1; // Ensure this is behind the content
+  }
+
+  div {
+    display: flex;
+    flex-flow: column;
+    gap: ${glsp()};
+    padding-left: ${glsp(3)};
+    padding-right: ${glsp()};
+    justify-content: center;
+    z-index: 2; // Ensure content is above the blurred background
+    position: relative;
+    background: linear-gradient(
+      to right,
+      rgba(0,0,0,1),
+      rgba(0,0,0,0.9),
+      rgba(0,0,0,0));
+  }
+
+  a {
+    width: 18.5rem;
+    z-index: 2; // Ensure links are above the blurred background
+    position: relative;
+  }
+  grid-column: full-start / full-end;
+
+  ${media.largeUp`
+    grid-column: content-2 / content-12;
+    height: 350px;
+  `}
+`;
+
+
+export default function HyperwallCTA({
+    width
+  }:
+  {
+    width?: string
+  }) {
+  return (
+    <Fold>
+      <FoldBody>
+        <BottomContent width={width}>
+          <InfoImageContent>
+            <div>
+              <StyledVarHeading size="small" as="h2">
+                Live Earth Dashboard
+              </StyledVarHeading>
+              <span>
+                An interactive way to explore what's happening on Earth right now
+              </span>
+              <Button
+                forwardedAs="a"
+                href="/stories/hyperwall"
+                size="medium"
+                radius="square"
+                variation="primary-fill"
+              >
+                Visit the Live Earth Dashboard
+              </Button>
+            </div>
+          </InfoImageContent>
+        </BottomContent>
+      </FoldBody>
+    </Fold>
+  )
+};

overrides/components/page-footer/component.tsx

@@ -27,6 +27,7 @@ import { useMediaQuery } from "$veda-ui-scripts/utils/use-media-query";
 import Partners from "../../home/partners";
 import BrandLogo from "../header-brand/logo.svg";
 import { AccessibilityMenuItem } from "../../common/style";
+import { CollecticonExpandTopRight } from '$veda-ui/@devseed-ui/collecticons';
 
 const FooterInner = styled.div`
   display: flex;
@@ -81,6 +82,7 @@ const CreditsInfo = styled.div`
   gap: ${glsp(0.25)};
   p {
     text-align: right;
+    margin-top: ${glsp(1.0)};
   }
 `;
 
@@ -112,6 +114,19 @@ const DisclaimerModalFooter = styled(ModalFooter)`
   margin-top: ${glsp(2)};
 `;
 
+const AccessbilityStatementLink = styled.a`
+  color: ${themeVal("color.link")} !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  display: inline-flex;
+  align-items: center;
+  margin-top: ${glsp(0.5)};
+
+  > svg {
+    margin-left: ${glsp(0.5)};
+  }
+`;
+
 const DISCLAIMER_MODALS_DISMISSED_KEY = "disclaimerModalsDismissedKey";
 const EXPLORE_PATH = "/explore";
 
@@ -294,26 +309,31 @@ export default function PageFooter(props) {
         </FooterContent>
         <FooterContacts>
           <div>
-            <a href="/">
-              <LogoWrapper>
-                <img src={BrandLogo} alt="Earth.gov" />
-              </LogoWrapper>
-              <span>By</span> <strong>{process.env.APP_TITLE}</strong>{" "}
-              <span>on</span>{" "}
-              <time dateTime={String(nowDate.getFullYear())}>
-                {nowDate.getFullYear()}
-              </time>
-            </a>
-            {" • "}
-            <Tip
-              content={`Released on ${format(
-                new Date(+props.appBuildTime),
-                "PPPP"
-              )} (veda-ui v${props.appUiVersion})`}
-            >
-              <span>v{props.appVersion}</span>
-            </Tip>
-          </div>
+            <div>
+              <a href="/">
+                <LogoWrapper>
+                  <img src={BrandLogo} alt="Earth.gov" />
+                </LogoWrapper>
+                <span>By</span> <strong>{process.env.APP_TITLE}</strong>{" "}
+                <span>on</span>{" "}
+                <time dateTime={String(nowDate.getFullYear())}>
+                  {nowDate.getFullYear()}
+                </time>
+              </a>
+              {" • "}
+              <Tip
+                content={`Released on ${format(
+                  new Date(+props.appBuildTime),
+                  "PPPP"
+                )} (veda-ui v${props.appUiVersion})`}
+              >
+                <span>v{props.appVersion}</span>
+              </Tip>
+            </div>
+              <AccessbilityStatementLink href="https://www.nasa.gov/accessibility/" target='_blank' rel='noopener'>
+                Our commitment to accessibility<CollecticonExpandTopRight />
+              </AccessbilityStatementLink>
+            </div>
           <CreditsInfo>
             <TintBox>
               <Partners variation="positive" size="small" />

overrides/home/component.tsx

@@ -17,6 +17,7 @@ import { variableGlsp } from "$veda-ui-scripts/styles/variable-utils";
 import ThemeCards from "../components/theme-cards";
 import { themeLandingPageIds } from "../common/story-data";
 import VisitGHG from "../components/visit-ghg";
+import HyperwallCTA from "../components/hyperwall-cta";
 
 import Partners from "./partners";
 
@@ -105,6 +106,7 @@ export default function HomeComponent() {
             <Partners size="small" top={4} />
           </IntroHeadline>
         </HomeDescription>
+        <HyperwallCTA width="82%"/>
         <VisitGHG width="82%"/>
       </GradientWrapper>
         <Fold>

package.json

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

stories/locfeature.HYPER.mdx

@@ -30,6 +30,11 @@ import contentArray from './locfeature.HYPER/carousel_content.json';
 
 <Block type='wide'>
   <Figure>
-    <Carousel items={contentArray} />
+    <Embed
+      style={{
+        width:"100%",
+        height:"calc(95vw * 9/32)"
+      }}
+        src="https://svs.gsfc.nasa.gov/webapps/hyperweb/index.html" />
   </Figure>
 </Block>

stories/teach.ALL.stem_group.mdx

@@ -25,5 +25,5 @@ import CardGallery from "./components/card_gallery";
 
 <CardGallery
   title={"STEM Resources"}
-  storyIds={["stem_resources","climate_kids", "earth_observatory", "globe_k13_learning"]} />
+  storyIds={["stem_resources","climate_kids", "earth_observatory", "globe_k13_learning","earthrise"]} />
 

stories/teach.K12.earthrise.mdx

@@ -0,0 +1,29 @@
+---
+featuredOn:
+  - teach
+id: "earthrise"
+name: Earthrise Newsletter
+description: "Through Earthrise, elevate Earth and climate science in your classroom with STEM resources from NASA and our federal partners."
+theme: true
+asLink:
+  url: https://www.nasa.gov/stem-content/earthrise/
+media:
+  src: ::file ./external_headers/earthrise.webp
+  alt: "
+    View of Earth from space, centered over North America. Stylized text at the bottom reads: 'Earthrise' and underneath that 'Elevating Earth and Climate Science in the Classroom.'
+  "
+  author:
+    name: "NASA"
+    url: "https://nasa.gov"
+pubDate: 2024-03-26
+taxonomy:
+  - name: Teaching Resource
+    values:
+      - STEM 
+---
+
+<Block type="wide">
+  <Prose>
+  link out
+  </Prose>
+</Block>