add youtube links

Author: haxzie

contents/blogs/01-06-2020-stream-mobile-games/index.md

@@ -7,6 +7,7 @@ title: Stream PUBG or Call Of Duty mobile games to Instagram Live with OBS Studi
 description: Learn how to stream your mobile gaming sessions of PUBG, Call of duty from Android device to Instagram Live using OBS Studio and Streamon easily.
 author: Musthaq Ahamad
 username: haxzie
+youtube: https://www.youtube.com/watch?v=TyyuMCTpjNY
 keywords:
   - instagram
   - OBS studio

src/components/WatchOnYouTubeCard/index.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import styles from "./styles.module.scss"
+import PlayButton from "../../images/play-button.svg"
+
+export default function WatchOnYouTubeCard({ link }) {
+  return (
+    <div className={styles.watchOnYouTubeCard}>
+      <img className={styles.playIcon} src={PlayButton} />
+      
+        <p>
+          This tutorial is available as a video. <a target="_blank" rel="noopener" href={link}>Watch this tutorial on YouTube</a>
+        </p>
+    </div>
+  )
+}

src/components/WatchOnYouTubeCard/styles.module.scss

@@ -0,0 +1,39 @@
+@import "../../styles/setup/mixins";
+
+.watchOnYouTubeCard {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #fdad0231;
+    border-radius: 5px;
+    margin: 10px 20px;
+    padding: 15px;
+
+    @include respond-below(sm) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .playIcon {
+        width: 30px;
+        height: 30px;
+        margin: 0 15px 0 0;
+
+        @include respond-below(sm) {
+            margin: 0 0 15px 0;
+        }
+    }
+
+    p {
+        color: #e48314;
+        margin: 0;
+
+        a {
+            color: #a33807;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}

src/images/play-button.svg

@@ -3,6 +3,7 @@ import Layout from "../../components/Layout"
 import styles from "./styles.module.scss"
 import GatsbyImage from "gatsby-image"
 import SEO from "../../components/seo"
+import WatchOnYouTubeCard from "../../components/WatchOnYouTubeCard"
 
 export default function BlogTemplate({ data }) {
   const { html: contents, frontmatter } = data.markdownRemark
@@ -14,18 +15,16 @@ export default function BlogTemplate({ data }) {
         image={frontmatter.cover_image.publicURL}
         author={frontmatter.author}
         twitterCardType={`summary_large_image`}
-        meta={
-          [
-            {
-              name: "keywords",
-              content: frontmatter.keywords.join(',')
-            },
-            {
-              name: "robots",
-              content: "index, follow"
-            }
-          ]
-        }
+        meta={[
+          {
+            name: "keywords",
+            content: frontmatter.keywords.join(","),
+          },
+          {
+            name: "robots",
+            content: "index, follow",
+          },
+        ]}
       />
       <div className={styles.blogContainer}>
         <h1 className={styles.title}>{frontmatter.title}</h1>
@@ -34,6 +33,12 @@ export default function BlogTemplate({ data }) {
           className={styles.cover}
           fluid={frontmatter.cover_image.childImageSharp.fluid}
         />
+        {frontmatter.youtube ? (
+          <WatchOnYouTubeCard link={frontmatter.youtube} />
+        ) : (
+          <></>
+        )}
+
         <div
           className={styles.blogContents}
           dangerouslySetInnerHTML={{ __html: contents }}
@@ -57,6 +62,7 @@ export const query = graphql`
         date(formatString: "DD / MM / YYYY")
         author
         keywords
+        youtube
         cover_image {
           publicURL
           childImageSharp {