Merge pull request #2866 from Nikhil-Ladha/rotational_cta

Added rotational CTA framework
layer5io · Jun 13, 2022 · 8b3985f · 8b3985f
2 parents b9edc95 + 587cb84
commit 8b3985f
Show file tree

Hide file tree

Showing 10 changed files with 380 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
@@ -37,7 +37,6 @@ 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>
-
 <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.
@@ -102,7 +101,6 @@ The default is <span className="highlight">info</span>.
     <code>$ curl -X POST http://localhost:19000/logging? component = debug</code>
   </pre>
 </div>
-
 <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/cta_bottom_categories.js b/src/components/Call-To-Actions/CTA_Bottom/cta_bottom_categories.js
@@ -0,0 +1,12 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Image_Alt" : "Image alt text",
+    "Content" : "This callout is specific for community categorised blogs",
+    "Button_Text" : "Join Us",
+    "Link" : "https://slack.layer5.io",
+    "Link_external" : true
+  }
+};
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,113 @@
+import React from "react";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+import Button from "../../../reusecore/Button";
+import { Categories } from "./cta_bottom_categories";
+
+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);
+    border-radius: 0.5rem;
+
+    a {
+        display: block;
+    }
+
+    img {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        pointer-events: none;
+        border-radius: 0 0.5rem 0.5rem 0;
+    }
+
+    .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: 1200px) and (min-width: 700px) {
+        button {
+            min-width: 6.5rem;
+        }
+    }
+
+    @media screen and (max-width: 699px) {
+        button {
+            min-width: auto;
+        }
+    }
+
+    @media screen and (max-width: 550px) {
+        display: block;
+        width: 18rem;
+        height: 18rem;
+        margin: 1.5rem auto;
+        border-radius: 0.25rem;
+
+        img {
+            width: 18rem;
+            height: 18rem;
+            position: absolute;
+            filter: brightness(0.5);
+            border-radius: 0.25rem;
+        }
+
+        .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, category, content, external_link, image, url }) => {
+  return (
+    <CTA_BottomWrapper>
+      { category ? (
+        <>
+          <div className="cta-content">
+            <p>{Categories[category]["Content"]}</p>
+            <Button primary title={Categories[category]["Button_Text"]} url={Categories[category]["Link"]} external={Categories[category]["Link_external"]} />
+          </div>
+          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} />
+        </>
+      ) : (
+        <>        
+          <div className="cta-content">
+            <p>{content ? content : defaultContent}</p>
+            <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} external={external_link ? true : false} />
+          </div>
+          <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+        </>
+      )}
+    </CTA_BottomWrapper>
+  );
+};
diff --git a/src/components/Call-To-Actions/CTA_FullWidth/cta_fullwidth_categories.js b/src/components/Call-To-Actions/CTA_FullWidth/cta_fullwidth_categories.js
@@ -0,0 +1,12 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Image_Alt" : "Image alt text",
+    "Content" : "This callout is specific for community categorised blogs",
+    "Button_Text" : "Join Us",
+    "Link" : "https://slack.layer5.io",
+    "Link_external" : true
+  }
+};
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,112 @@
+import React from "react";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+import Button from "../../../reusecore/Button";
+import { Categories } from "./cta_fullwidth_categories";
+
+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);
+    border-radius: 0.5rem;
+
+    a {
+        display: block;
+    }
+
+    img {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        pointer-events: none;
+        border-radius: 0.5rem 0 0 0.5rem;
+    }
+
+    .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: 1200px) and (min-width: 700px) {
+        button {
+            min-width: 6.5rem;
+        }
+    }
+
+    @media screen and (max-width: 699px) {
+        button {
+            min-width: auto;
+        }
+    }
+
+    @media screen and (max-width: 550px) {
+        display: block;
+        width: 18rem;
+        height: 18rem;
+        margin: 1.5rem auto;
+        border-radius: 0.25rem;
+
+        img {
+            width: 18rem;
+            height: 18rem;
+            position: absolute;
+            filter: brightness(0.5);
+            border-radius: 0.25rem;
+        }
+
+        .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, category, content, external_link, image, url }) => {
+  return (
+    <CTA_FullWidthWrapper>
+      { category ? (
+        <>
+          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} />
+          <div className="cta-content">
+            <p>{Categories[category]["Content"]}</p>
+            <Button primary title={Categories[category]["Button_Text"]} url={Categories[category]["Link"]} external={Categories[category]["Link_external"]} />
+          </div>
+        </>
+      ) : (
+        <>        
+          <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={external_link ? true : false} />
+          </div>
+        </>
+      )}
+    </CTA_FullWidthWrapper>
+  );
+};
diff --git a/src/components/Call-To-Actions/CTA_ImageOnly/cta_imageonly_categories.js b/src/components/Call-To-Actions/CTA_ImageOnly/cta_imageonly_categories.js
@@ -0,0 +1,9 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Alt" : "Alt text",
+    "Link" : "https://slack.layer5.io"
+  }
+};
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,56 @@
+import React from "react";
+import { Link } from "gatsby";
+import image_src from "../../../assets/images/callout/callout.png";
+import styled from "styled-components";
+import { Categories } from "./cta_imageonly_categories";
+
+const CTA_ImageOnlyWrapper = styled.div`
+    float: right;
+    margin-left: 0.5rem;
+
+    a {
+        display: block;
+        height: 15rem;
+        background: rgb(201, 252, 246);
+        border-radius: 0.5rem;
+    }
+
+    img {
+        width: 20rem;
+        height: 15rem;
+        pointer-events: none;
+        border-radius: 0.5rem;
+    }
+
+    @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, category, image, url, blend }) => {
+  return (
+    <CTA_ImageOnlyWrapper>
+      { category ? (
+        <Link to={Categories[category]["Link"]}>
+          <img
+            src={Categories[category]["Image"]}
+            alt={Categories[category]["Alt"]}
+            style={{ opacity: blend ? "0.7" : "1" }}
+          />
+        </Link>
+      ) : (
+        <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>
+  );
+};