Add videos carousel

docs-website/package.json

@@ -25,6 +25,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-slick": "^0.28.1",
+    "react-youtube": "^7.13.1",
     "slick-carousel": "^1.8.1"
   },
   "browserslist": {

docs-website/src/pages/index.js

@@ -10,6 +10,8 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "./slick-theme.css";
 
+import YouTube from "react-youtube";
+
 import Image from "@theme/IdealImage";
 import CodeBlock from "@theme/CodeBlock";
 // logos for companies using
@@ -44,6 +46,13 @@ import LogoRedshift from "./logos/redshift.svg";
 import LogoSnowflake from "./logos/snowflake.svg";
 import LogoSpark from "./logos/spark.svg";
 import LogoSuperset from "./logos/superset.svg";
+// images for articles carousel
+import February2021Update from "./images/February2021Update.png";
+import March2021Update from "./images/march-2021-update.png";
+import April2021Update from "./articles/april-2021-update.png";
+import May2021Update from "./articles/may-2021-update.png";
+import SaxoDatahub from "./articles/saxo-datahub.png";
+import DataHubLineage from "./articles/datahub-lineage.png";
 
 const features = [
   {
@@ -208,6 +217,46 @@ const sourceLogos = [
   },
 ];
 
+const videos = [
+  { id: "VY57iRdG-Us" },
+  { id: "fEILyoWVpBw" },
+  { id: "3wiaqhb8UR0" },
+  { id: "dlFa4ubJ9ho" },
+];
+
+const articles = [
+  {
+    name: "Enabling Data Discovery in a Data Mesh: The Saxo Journey",
+    link: "https://medium.com/datahub-project/enabling-data-discovery-in-a-data-mesh-the-saxo-journey-451b06969c8f",
+    image: pngFormatter(SaxoDatahub),
+  },
+  {
+    name: "LinkedIn DataHub Project Updates (May 2021)",
+    link: "https://medium.com/datahub-project/linkedin-datahub-project-updates-ed98cdf913c1",
+    image: pngFormatter(May2021Update),
+  },
+  {
+    name: "Data in Context: Lineage Explorer in DataHub",
+    link: "https://medium.com/datahub-project/data-in-context-lineage-explorer-in-datahub-a53a9a476dc4",
+    image: pngFormatter(DataHubLineage),
+  },
+  {
+    name: "LinkedIn DataHub Project Updates (April 2021)",
+    link: "https://medium.com/datahub-project/linkedin-datahub-project-updates-2b0d26066b8f",
+    image: pngFormatter(April2021Update),
+  },
+  {
+    name: "LinkedIn DataHub Project Updates (March 2021)",
+    link: "https://medium.com/datahub-project/linkedin-datahub-project-updates-697f0faddd10",
+    image: pngFormatter(March2021Update),
+  },
+  {
+    name: "LinkedIn DataHub Project Updates (February 2021)",
+    link: "https://medium.com/datahub-project/linkedin-datahub-project-updates-february-2021-edition-338d2c6021f0",
+    image: pngFormatter(February2021Update),
+  },
+];
+
 const example_recipe = `
 source:
   type: "mysql"
@@ -395,6 +444,75 @@ function Home() {
         </div>
       </section>
 
+      <section className={clsx(styles.section)}>
+        <div className="container">
+          <h1 className={clsx(styles.centerText, styles.small_padding_bottom)}>
+            <span className={styles.larger_on_desktop}>Videos</span>
+          </h1>
+          <div className={styles.carousel_container}>
+            <Slider
+              dots={true}
+              infinite={true}
+              centerMode={true}
+              slidesToShow={4}
+              slidesToScroll={3}
+              infinite={true}
+              dots={true}
+              autoplay={true}
+              autoplaySpeed={100000}
+              cssEase={"linear"}
+              responsive={[
+                {
+                  breakpoint: 1080,
+                  settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 2,
+                  },
+                },
+                {
+                  breakpoint: 960,
+                  settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                  },
+                },
+                {
+                  breakpoint: 720,
+                  settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                  },
+                },
+              ]}
+            >
+              {videos.map((video) => {
+                return (
+                  <div className={styles.carousel_logo_slide} key={video.id}>
+                    <YouTube
+                      videoId={video.id}
+                      opts={{
+                        playerVars: {
+                          // https://developers.google.com/youtube/player_parameters
+                          autoplay: 0,
+                        },
+                      }}
+                      containerClassName={styles.youtubeContainer}
+                    />
+                  </div>
+                );
+              })}
+            </Slider>
+          </div>
+          <div className={styles.sources_link}>
+            <Link
+              to={"https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w"}
+            >
+              Check out our channel for more!
+            </Link>
+          </div>
+        </div>
+      </section>
+
       <section className={styles.section}>
         <div className="container">
           <h1 className={clsx(styles.centerText)}>

docs-website/src/pages/styles.module.css

@@ -207,3 +207,18 @@ html[data-theme="dark"] .sources_section {
 .section {
   padding: 4rem 0;
 }
+.youtubeContainer {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  overflow: hidden;
+}
+
+.youtubeContainer iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

docs-website/yarn.lock

@@ -3592,7 +3592,7 @@ csso@^4.0.2, csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
-[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
+[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -4274,7 +4274,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -5852,6 +5852,11 @@ load-bmfont@^1.3.1:
     xhr "^2.0.1"
     xtend "^4.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz"
@@ -7343,7 +7348,7 @@ prompts@^2.4.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7649,6 +7654,15 @@ react-waypoint@^10.1.0:
     prop-types "^15.0.0"
     react-is "^17.0.1"
 
+react-youtube@^7.13.1:
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-7.13.1.tgz#3b327599a687bf22e071468818522920b36bcb57"
+  integrity sha512-b++TLHmHDpd0ZBS1wcbYabbuchU+W4jtx5A2MUQX0BINNKKsaIQX29sn/aLvZ9v5luwAoceia3VGtyz9blaB9w==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.7.2"
+    youtube-player "5.5.2"
+
 react@^16.12.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz"
@@ -8338,6 +8352,11 @@ sirv@^1.0.7:
     mime "^2.3.1"
     totalist "^1.0.0"
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz"
@@ -9712,6 +9731,15 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+[email protected]:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz"