Added rotational CTA framework

Signed-off-by: Nikhil-Ladha <[email protected]>
layer5io · Jun 6, 2022 · a5b0044 · a5b0044
1 parent 87cc057
commit a5b0044
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 3 deletions.
diff --git a/root-wrapper.js b/root-wrapper.js
@@ -1,6 +1,9 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import Code from "./src/components/CodeBlock";
+import { CTA_ImageOnly } from "./src/components/Call-To-Actions/CTA_ImageOnly";
+import { CTA_FullWidth } from "./src/components/Call-To-Actions/CTA_FullWidth";
+import { CTA_Bottom } from "./src/components/Call-To-Actions/CTA_Bottom";
 
 const components = {
   pre: ({ children: { props } }) => {
@@ -15,7 +18,10 @@ const components = {
         />
       );
     }
-  }
+  },
+  CTA_ImageOnly,
+  CTA_FullWidth,
+  CTA_Bottom
 };
 
 export const wrapRootElement = ({ element }) => (

diff --git a/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx b/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx
@@ -36,7 +36,7 @@ import Code from "../../../../components/CodeBlock";
 <p>
   The envoy command has a <code>--log-level</code> flag that can be useful for debugging. By default, it’s set to info. To change it to debug, edit the envoy DaemonSet in the istio-system namespace and replace the <code>--log-level info</code> flag with <code>--log-level debug</code>. Setting the Envoy log level to debug can be particilarly useful for debugging TLS connection failures.
 </p>
-
+<CTA_ImageOnly />
 <h3>Using container image</h3>
 <p>
   If you’re using the Envoy image, you can set the log level to debug through the <code>ENVOY_LOG_LEVEL</code> environment variable. The log level for Envoy system logs can be set using the <code>-l</code> or <code>--log-level</code> option.
@@ -101,7 +101,7 @@ The default is <span className="highlight">info</span>.
     <code>$ curl -X POST http://localhost:19000/logging? component = debug</code>
   </pre>
 </div>
-
+<CTA_FullWidth />
 <h3>Access Envoy logs in Kubernetes</h3>
 
 <p>Accessing Envoy logs via pods can be done with the following command:</p>

diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js
@@ -0,0 +1,84 @@
+import React from "react";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+import Button from "../../../reusecore/Button";
+
+const CTA_BottomWrapper = styled.div`
+    display: flex;
+    flex: 0 0 100%;
+    width: 98%;
+    height: 16rem;
+    margin: 2rem auto 1.5rem;
+    box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
+
+    a {
+        display: block;
+    }
+
+    img {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        pointer-events: none;
+    }
+
+    .cta-content {
+        padding: 0.5rem;
+        display: flex;
+        flex: auto;
+        background: rgba(201, 252, 246, 0.3);
+        text-align: center;
+        align-items: center;
+        height: 100%;
+
+        p {
+            flex: 0 0 75%;
+        }
+        a {
+            flex: 0 0 25%;
+        }
+    }
+
+    @media screen and (max-width: 500px) {
+        display: block;
+        width: 18rem;
+        height: 18rem;
+        margin: 1.5rem auto;
+
+        img {
+            width: 18rem;
+            height: 18rem;
+            position: absolute;
+            filter: brightness(0.5);
+        }
+
+        .cta-content {
+            position: absolute;
+            height: 18rem;
+            display: block;
+            width: 18rem;
+            background: none;
+            padding: 4rem 1rem;
+            z-index: 1;
+
+            p {
+                color: white;
+            }
+        }
+    }
+`;
+
+const defaultContent = "Join the Layer5 community and explore the world of service meshes!";
+const defaultURL = "https://slack.layer5.io";
+
+export const CTA_Bottom = ({ alt, button_text, content, image, url }) => {
+  return (
+    <CTA_BottomWrapper>
+      <div className="cta-content">
+        <p>{content ? content : defaultContent}</p>
+        <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} />
+      </div>
+      <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+    </CTA_BottomWrapper>
+  );
+};
diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js
@@ -0,0 +1,83 @@
+import React from "react";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+import Button from "../../../reusecore/Button";
+
+const CTA_FullWidthWrapper = styled.div`
+    display: flex;
+    flex: 0 0 100%;
+    width: 98%;
+    height: 16rem;
+    margin: 1.5rem auto;
+    box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
+
+    a {
+        display: block;
+    }
+
+    img {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        pointer-events: none;
+    }
+
+    .cta-content {
+        padding: 0.5rem;
+        display: flex;
+        flex: auto;
+        background: rgba(201, 252, 246, 0.3);
+        text-align: center;
+        align-items: center;
+        height: 100%;
+
+        p {
+            flex: 0 0 75%;
+        }
+        a {
+            flex: 0 0 25%;
+        }
+    }
+
+    @media screen and (max-width: 500px) {
+        display: block;
+        width: 18rem;
+        height: 18rem;
+        margin: 1.5rem auto;
+
+        img {
+            width: 18rem;
+            height: 18rem;
+            position: absolute;
+            filter: brightness(0.5);
+        }
+
+        .cta-content {
+            position: absolute;
+            height: 18rem;
+            display: block;
+            width: 18rem;
+            background: none;
+            padding: 4rem 1rem;
+
+            p {
+                color: white;
+            }
+        }
+    }
+`;
+
+const defaultContent = "Join the Layer5 community and explore the world of service meshes!";
+const defaultURL = "https://slack.layer5.io";
+
+export const CTA_FullWidth = ({ alt, button_text, content, image, url }) => {
+  return (
+    <CTA_FullWidthWrapper>
+      <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+      <div className="cta-content">
+        <p>{content ? content : defaultContent}</p>
+        <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} external ={true} />
+      </div>
+    </CTA_FullWidthWrapper>
+  );
+};
diff --git a/src/components/Call-To-Actions/CTA_ImageOnly/index.js b/src/components/Call-To-Actions/CTA_ImageOnly/index.js
@@ -0,0 +1,43 @@
+import React from "react";
+import { Link } from "gatsby";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+
+const CTA_ImageOnlyWrapper = styled.div`
+    float: right;
+    margin-left: 0.5rem;
+
+    a {
+        display: block;
+        height: 15rem;
+        background: rgb(201, 252, 246);
+    }
+
+    img {
+        width: 20rem;
+        height: 15rem;
+        pointer-events: none;
+    }
+
+    @media screen and (max-width: 500px) {
+        float: none;
+        width: 20rem;
+        margin: 1.5rem auto;
+    }
+`;
+
+const defaultURL = "https://slack.layer5.io";
+
+export const CTA_ImageOnly = ({ alt, image, url, blend }) => {
+  return (
+    <CTA_ImageOnlyWrapper>
+      <Link to={url ? url : defaultURL}>
+        <img 
+          src={image ? image : image_src}
+          alt={alt ? alt : "Alt Text"}
+          style={{opacity: blend ? "0.7" : "1"}}
+        />
+      </Link>
+    </CTA_ImageOnlyWrapper>
+  );
+};
diff --git a/src/sections/Blog/Blog-single/index.js b/src/sections/Blog/Blog-single/index.js
@@ -9,6 +9,7 @@ import RelatedPosts from "../../../components/Related-Posts";
 import BlogPageWrapper from "./blogSingle.style";
 import BlogPostSignOff from "../BlogPostSignOff";
 import RelatedPostsFactory from "../../../components/Related-Posts/relatedPostsFactory";
+import { CTA_Bottom } from "../../../components/Call-To-Actions/CTA_Bottom";
 
 const BlogSingle = ({data}) => {
   const { frontmatter, body, fields } = data.mdx;
@@ -78,6 +79,7 @@ const BlogSingle = ({data}) => {
                 ))}
               </div>
             </div>
+            <CTA_Bottom />
           </div>
           <RelatedPosts
             postType="blogs"