Merge pull request #156 from StarlingXWeb/homepage-videos

Homepage videos

.nvmrc

@@ -1 +1 @@
-10.19.0
+12.20.1

netlify.toml

@@ -2,5 +2,6 @@
   publish = "public"
   command = "npm run build"
 [build.environment]
+  NODE_VERSION = "12.20.1"
   YARN_VERSION = "1.13.0"
   YARN_FLAGS = "--no-ignore-optional"

src/components/TopBar.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { Link } from 'gatsby'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import content from '../content/top-bar.json'
-import barLogo from '../img/svg/bar-logo.svg'
 
 const TopBar = class extends React.Component {
   constructor(props) {
@@ -18,9 +17,6 @@ const TopBar = class extends React.Component {
         <div className="bar is-dark-gray">
           <div className="container">
             <div className="bar-inner">
-              <div className="bar-logo">
-                <img src={barLogo} />
-              </div> 
               <div className="bar-entry">
                 <p>{content.bar.text}</p>
               </div>

src/components/VideoLink.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function VideoLink(props) {
+
+  function loadVideo() {
+    let link = props.link;
+    let videoPlayer = document.getElementById("video-player");
+    videoPlayer.src = link;
+  }
+
+    return (
+      <a 
+        href={props.href} 
+        link={props.link} 
+        className="text-link"
+        onClick={loadVideo}
+        >
+        {props.linkText} 
+      </a> 
+    )
+}
+
+export default VideoLink

src/components/VideoPlayer.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+function VideoPlayer(props) {
+
+    return (
+      <div className="videoWrapper">
+        <iframe 
+            id={props.id}
+            width="560" 
+            height="315" 
+            src={props.src} 
+            title="YouTube video player" 
+            frameBorder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowFullScreen>
+        </iframe>
+      </div> 
+    )
+}
+
+export default VideoPlayer

src/pages/index.md

@@ -38,30 +38,42 @@ values:
         Fault management, fast secure VM failover and live migration minimizes
         downtime
       title: Reliable
+      link: 
+      linkText:
     - image: /img/scale.svg
       text: >
         Deployable on one to thousands of distributed nodes allowing for a
         single system to be used from edge to core
       title: Scalable
+      link: https://www.youtube.com/embed/B3uGlKLNoRE
+      linkText: Watch Video
     - image: /img/footprint.svg
       text: >
         Providing a platform for edge and IoT use cases even for environments
         with tight resource constraints
       title: Small footprint
+      link: 
+      linkText: 
     - image: /img/clock.svg
       text: |
         Deterministic, tunable performance optimized for the use case
       title: Ultra-low latency
+      link: 
+      linkText: 
     - image: /img/lock.svg
       text: >
         Software security to avoid tampering at the edge, where physical
         security may be limited
       title: Secure
+      link: 
+      linkText: 
     - image: /img/lifecycle.svg
       text: >
         Simplified deployment and operations with full system management through
         comprehensive orchestration suited for the edge
       title: Lifecycle management
+      link: 
+      linkText: 
 tables:
   leftTable:
     rows:

src/style/modules/_article.scss

@@ -58,6 +58,17 @@
     font-weight: 500;
   }
 
+  .article-small__entry {
+    line-height: 20px;
+    a.text-link {
+      color: #C0A9F7;
+      text-decoration: underline;
+      font-weight: bold;
+      display: none; //Change to display: unset; to show links
+    }
+  }
+
+
   @media (max-width: 768px) {
     & {
       max-width: 375px;

src/style/modules/_btn.scss

@@ -10,6 +10,10 @@
 
   &.is-rounded {
     padding: 11px 43px;
+    margin: 0 15px;
+     @media (max-width: 767px) {
+      margin-bottom: 30px;
+    }
   }
 
   &.is-large {

src/style/modules/_container.scss

@@ -24,3 +24,9 @@
 		max-width: $container-thin-alt-max-width + $container-gutter * 2;
 	}
 }
+
+.icon-container {
+	position: relative;
+	z-index: 2;
+	overflow: hidden;
+}

src/style/modules/_section.scss

@@ -60,7 +60,21 @@
 .section-watermark {
 	background-repeat: no-repeat;
 	background-position: left center;
-	background-size: contain;
+	background-size: contain; 
+	position: relative
+}
+
+img.watermark {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	width: 50%;
+	max-width: 600px;
+	opacity: 0.8;
+
+	@media (max-width: 768px) {
+		display: none;
+	}
 }
 
 /* ------------------------------------------------------------ *\

src/style/modules/_video-player.scss

@@ -0,0 +1,18 @@
+.video-container {
+	padding: 0 30px;
+}
+
+.videoWrapper {
+	margin-top: 60px;
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	height: 0;
+
+	iframe {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	  }
+  }

src/style/style.scss

@@ -35,6 +35,7 @@
 @import "./modules/pagination";
 @import "./modules/default-page";
 @import "./modules/search";
+@import "./modules/video-player";
 
 .header-anchor {
   display: none;

src/templates/index-page.js

@@ -7,6 +7,9 @@ import Subscribe from '../components/Subscribe'
 import Header from '../components/Header'
 import { Link } from 'gatsby'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import VideoPlayer from '../components/VideoPlayer'
+import VideoLink from '../components/VideoLink'
+import Watermark from '../../static/img/watermark.png'
 
 import 'react-medium-image-zoom/dist/styles.css'
 
@@ -71,8 +74,8 @@ export const IndexPageTemplate = ({
       </div>
     </section>
 
-    <section className="section section-watermark is-dark" containerClassName="container-small" style={{backgroundImage: 'url(/img/watermark.png)'}}>
-      <div className="container container-small">
+    <section className="section section-watermark is-dark" containerClassName="container-small">
+      <div className="container container-small icon-container" >
         <div className="section section-body">
           <div className="columns is-multiline" style={{paddingTop:'50px'}}>
             {values.rows.map((value, index) => {
@@ -90,6 +93,9 @@ export const IndexPageTemplate = ({
                       <h6 className="article-small__title">{value.title}</h6>
                       <div className="article-small__entry">              
                         {value.text}
+                        <br />
+                        <br />
+                        <VideoLink link={value.link} href="/#video-player" linkText={value.linkText} />
                       </div>
                     </div>
                   </div>
@@ -98,9 +104,13 @@ export const IndexPageTemplate = ({
             })}
 
           </div>
+          <div className="video-container">
+            <VideoPlayer id="video-player" src="https://www.youtube.com/embed/B3uGlKLNoRE" />
+          </div>
           <footer className="section-foot"></footer>
         </div>
       </div>
+      <img className="watermark" src={Watermark} alt="Logo Watermark" />
     </section>    
     <section className="section section-modified">
       <div className="container">
@@ -247,6 +257,8 @@ export const pageQuery = graphql`
             }
             title
             text
+            link
+            linkText
           }
         }
         tables {

static/admin/config.yml

@@ -140,6 +140,8 @@ collections:
                 {label: Icon, name: image, widget: image},
                 {label: Title, name: title, widget: string},
                 {label: Text, name: text, widget: text},
+                {label: Link, name: link, widget: text, required: false},
+                {label: Link Text, name: linkText, widget: text, required: false},
               ]}
           ]}
           - {label: Tables, name: tables, widget: object, fields: [