From a5b00441234fe1fd4be95f903c134cdf32b3d351 Mon Sep 17 00:00:00 2001 From: Nikhil-Ladha Date: Mon, 6 Jun 2022 22:08:36 +0530 Subject: [PATCH 1/5] Added rotational CTA framework Signed-off-by: Nikhil-Ladha --- root-wrapper.js | 8 +- .../2022-05-27-debug-envoy-proxy/index.mdx | 4 +- .../Call-To-Actions/CTA_Bottom/index.js | 84 +++++++++++++++++++ .../Call-To-Actions/CTA_FullWidth/index.js | 83 ++++++++++++++++++ .../Call-To-Actions/CTA_ImageOnly/index.js | 43 ++++++++++ src/sections/Blog/Blog-single/index.js | 2 + 6 files changed, 221 insertions(+), 3 deletions(-) create mode 100644 src/components/Call-To-Actions/CTA_Bottom/index.js create mode 100644 src/components/Call-To-Actions/CTA_FullWidth/index.js create mode 100644 src/components/Call-To-Actions/CTA_ImageOnly/index.js diff --git a/root-wrapper.js b/root-wrapper.js index 907e89df89b0..63b981a03fcd 100644 --- 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 index cf2d43a6d837..4d42118f77f0 100644 --- 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";

The envoy command has a --log-level 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 --log-level info flag with --log-level debug. Setting the Envoy log level to debug can be particilarly useful for debugging TLS connection failures.

- +

Using container image

If you’re using the Envoy image, you can set the log level to debug through the ENVOY_LOG_LEVEL environment variable. The log level for Envoy system logs can be set using the -l or --log-level option. @@ -101,7 +101,7 @@ The default is info. $ curl -X POST http://localhost:19000/logging? component = debug - +

Access Envoy logs in Kubernetes

Accessing Envoy logs via pods can be done with the following command:

diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js new file mode 100644 index 000000000000..5b5255ce55e9 --- /dev/null +++ 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 ( + +
+

{content ? content : defaultContent}

+
+ {alt + + ); +}; \ No newline at end of file diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js new file mode 100644 index 000000000000..1a06ab684be5 --- /dev/null +++ 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 ( + + {alt +
+

{content ? content : defaultContent}

+
+ + ); +}; \ No newline at end of file diff --git a/src/components/Call-To-Actions/CTA_ImageOnly/index.js b/src/components/Call-To-Actions/CTA_ImageOnly/index.js new file mode 100644 index 000000000000..a3b4fb4211b4 --- /dev/null +++ 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 ( + + + {alt + + + ); +}; \ No newline at end of file diff --git a/src/sections/Blog/Blog-single/index.js b/src/sections/Blog/Blog-single/index.js index 8534136e00b8..6c1ee0414d54 100644 --- 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}) => { ))} + Date: Wed, 8 Jun 2022 19:29:37 -0500 Subject: [PATCH 2/5] a bit of a border-radius Signed-off-by: leecalcote --- src/components/Call-To-Actions/CTA_Bottom/index.js | 2 ++ src/components/Call-To-Actions/CTA_FullWidth/index.js | 4 +++- src/components/Call-To-Actions/CTA_ImageOnly/index.js | 6 ++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js index 5b5255ce55e9..49ab104d2d65 100644 --- a/src/components/Call-To-Actions/CTA_Bottom/index.js +++ b/src/components/Call-To-Actions/CTA_Bottom/index.js @@ -10,6 +10,7 @@ const CTA_BottomWrapper = styled.div` 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; @@ -20,6 +21,7 @@ const CTA_BottomWrapper = styled.div` height: 16rem; object-fit: cover; pointer-events: none; + border-radius: 0 0.5rem 0.5rem 0; } .cta-content { diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js index 1a06ab684be5..8c577c38c94d 100644 --- a/src/components/Call-To-Actions/CTA_FullWidth/index.js +++ b/src/components/Call-To-Actions/CTA_FullWidth/index.js @@ -10,6 +10,7 @@ const CTA_FullWidthWrapper = styled.div` 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; @@ -20,6 +21,7 @@ const CTA_FullWidthWrapper = styled.div` height: 16rem; object-fit: cover; pointer-events: none; + border-radius: 0.5rem 0 0 0.5rem; } .cta-content { @@ -76,7 +78,7 @@ export const CTA_FullWidth = ({ alt, button_text, content, image, url }) => { {alt

{content ? content : defaultContent}

-
); diff --git a/src/components/Call-To-Actions/CTA_ImageOnly/index.js b/src/components/Call-To-Actions/CTA_ImageOnly/index.js index a3b4fb4211b4..adc803983464 100644 --- a/src/components/Call-To-Actions/CTA_ImageOnly/index.js +++ b/src/components/Call-To-Actions/CTA_ImageOnly/index.js @@ -11,12 +11,14 @@ const CTA_ImageOnlyWrapper = styled.div` 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) { @@ -32,10 +34,10 @@ export const CTA_ImageOnly = ({ alt, image, url, blend }) => { return ( - {alt From 9aeb7c0ad2329efc5f733303c81af2d7386ef2c3 Mon Sep 17 00:00:00 2001 From: Nikhil-Ladha Date: Thu, 9 Jun 2022 22:13:42 +0530 Subject: [PATCH 3/5] Fixed responsiveness Signed-off-by: Nikhil-Ladha --- src/components/Call-To-Actions/CTA_Bottom/index.js | 14 +++++++++++++- .../Call-To-Actions/CTA_FullWidth/index.js | 14 +++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js index 5b5255ce55e9..dda2b83961c5 100644 --- a/src/components/Call-To-Actions/CTA_Bottom/index.js +++ b/src/components/Call-To-Actions/CTA_Bottom/index.js @@ -39,7 +39,19 @@ const CTA_BottomWrapper = styled.div` } } - @media screen and (max-width: 500px) { + @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; diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js index 1a06ab684be5..8a98eb6f1fe2 100644 --- a/src/components/Call-To-Actions/CTA_FullWidth/index.js +++ b/src/components/Call-To-Actions/CTA_FullWidth/index.js @@ -39,7 +39,19 @@ const CTA_FullWidthWrapper = styled.div` } } - @media screen and (max-width: 500px) { + @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; From 6df60464a7f672e27dcd3d970a48319192a8eda2 Mon Sep 17 00:00:00 2001 From: Nikhil-Ladha Date: Mon, 13 Jun 2022 11:15:49 +0530 Subject: [PATCH 4/5] Commented out the CTA's in the blog pages Signed-off-by: Nikhil-Ladha --- .../blog/2022/2022-05-27-debug-envoy-proxy/index.mdx | 2 -- src/sections/Blog/Blog-single/index.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) 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 index 4d42118f77f0..e5043f49fbe4 100644 --- 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,6 @@ import Code from "../../../../components/CodeBlock";

The envoy command has a --log-level 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 --log-level info flag with --log-level debug. Setting the Envoy log level to debug can be particilarly useful for debugging TLS connection failures.

-

Using container image

If you’re using the Envoy image, you can set the log level to debug through the ENVOY_LOG_LEVEL environment variable. The log level for Envoy system logs can be set using the -l or --log-level option. @@ -101,7 +100,6 @@ The default is info. $ curl -X POST http://localhost:19000/logging? component = debug -

Access Envoy logs in Kubernetes

Accessing Envoy logs via pods can be done with the following command:

diff --git a/src/sections/Blog/Blog-single/index.js b/src/sections/Blog/Blog-single/index.js index 6c1ee0414d54..d49913a20964 100644 --- a/src/sections/Blog/Blog-single/index.js +++ b/src/sections/Blog/Blog-single/index.js @@ -79,7 +79,7 @@ const BlogSingle = ({data}) => { ))} - + {/* */} Date: Mon, 13 Jun 2022 20:54:03 +0530 Subject: [PATCH 5/5] Make CTA customizable for a category of resource Signed-off-by: Nikhil-Ladha --- .../CTA_Bottom/cta_bottom_categories.js | 12 ++++ .../Call-To-Actions/CTA_Bottom/index.js | 27 +++++++-- .../CTA_FullWidth/cta_fullwidth_categories.js | 12 ++++ .../Call-To-Actions/CTA_FullWidth/index.js | 27 +++++++-- .../CTA_ImageOnly/cta_imageonly_categories.js | 9 +++ .../Call-To-Actions/CTA_ImageOnly/index.js | 27 ++++++--- src/components/Call-To-Actions/README.md | 55 +++++++++++++++++++ src/sections/Blog/Blog-single/index.js | 4 +- 8 files changed, 152 insertions(+), 21 deletions(-) create mode 100644 src/components/Call-To-Actions/CTA_Bottom/cta_bottom_categories.js create mode 100644 src/components/Call-To-Actions/CTA_FullWidth/cta_fullwidth_categories.js create mode 100644 src/components/Call-To-Actions/CTA_ImageOnly/cta_imageonly_categories.js create mode 100644 src/components/Call-To-Actions/README.md 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 new file mode 100644 index 000000000000..792ad2731078 --- /dev/null +++ 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 + } +}; \ No newline at end of file diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js index 355eddc98df8..e030963afd65 100644 --- a/src/components/Call-To-Actions/CTA_Bottom/index.js +++ b/src/components/Call-To-Actions/CTA_Bottom/index.js @@ -2,6 +2,7 @@ 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; @@ -58,12 +59,14 @@ const CTA_BottomWrapper = styled.div` 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 { @@ -85,14 +88,26 @@ const CTA_BottomWrapper = styled.div` 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 }) => { +export const CTA_Bottom = ({ alt, button_text, category, content, external_link, image, url }) => { return ( -
-

{content ? content : defaultContent}

-
- {alt + { category ? ( + <> +
+

{Categories[category]["Content"]}

+
+ {Categories[category]["Image_Alt"]} + + ) : ( + <> +
+

{content ? content : defaultContent}

+
+ {alt + + )} ); }; \ No newline at end of file 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 new file mode 100644 index 000000000000..792ad2731078 --- /dev/null +++ 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 + } +}; \ No newline at end of file diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js index 4fea3139d433..d44e0e281637 100644 --- a/src/components/Call-To-Actions/CTA_FullWidth/index.js +++ b/src/components/Call-To-Actions/CTA_FullWidth/index.js @@ -2,6 +2,7 @@ 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; @@ -58,12 +59,14 @@ const CTA_FullWidthWrapper = styled.div` 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 { @@ -84,14 +87,26 @@ const CTA_FullWidthWrapper = styled.div` 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 }) => { +export const CTA_FullWidth = ({ alt, button_text, category, content, external_link, image, url }) => { return ( - {alt -
-

{content ? content : defaultContent}

-
+ { category ? ( + <> + {Categories[category]["Image_Alt"]} +
+

{Categories[category]["Content"]}

+
+ + ) : ( + <> + {alt +
+

{content ? content : defaultContent}

+
+ + )} ); }; \ No newline at end of file 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 new file mode 100644 index 000000000000..2e38bb83fe7d --- /dev/null +++ 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" + } +}; \ No newline at end of file diff --git a/src/components/Call-To-Actions/CTA_ImageOnly/index.js b/src/components/Call-To-Actions/CTA_ImageOnly/index.js index adc803983464..fb4366bf1b17 100644 --- a/src/components/Call-To-Actions/CTA_ImageOnly/index.js +++ b/src/components/Call-To-Actions/CTA_ImageOnly/index.js @@ -2,6 +2,7 @@ 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; @@ -30,16 +31,26 @@ const CTA_ImageOnlyWrapper = styled.div` const defaultURL = "https://slack.layer5.io"; -export const CTA_ImageOnly = ({ alt, image, url, blend }) => { +export const CTA_ImageOnly = ({ alt, category, image, url, blend }) => { return ( - - {alt - + { category ? ( + + {Categories[category]["Alt"]} + + ) : ( + + {alt + + )} ); }; \ No newline at end of file diff --git a/src/components/Call-To-Actions/README.md b/src/components/Call-To-Actions/README.md new file mode 100644 index 000000000000..ff168842a4c5 --- /dev/null +++ b/src/components/Call-To-Actions/README.md @@ -0,0 +1,55 @@ +## How to use the CTA (Call To Action) + +The CTA's are meant to be used in the MDX files under the layer5 repo. +Any MDX file can have these CTA's, and you don't need to import them explicitly. +Just calling the component like `` would do the trick. + +Below, find the details on the types of CTA and where/how to use them. + +### Types of CTA: + +1. CTA_ImageOnly - This CTA is an image callout, and is meant to be used in the first half of the content. +2. CTA_FullWidth - This CTA is a full-width callout, and is meant to be used in the second half/middle of the content. +3. CTA_Bottom - This CTA is also a full-width callout, but it is meant to be used at the bottom of the content, or better after the content + in the component rendering the content. Like `Blog-single.js`. + +### How to use the CTA: + +The CTA's take in some set of props (one can find in the respective CTA component definition), to customize the default +data hardcoded in the component. Each and every field in the component can be customized with the help of props, just the +respective prop needs to be passed while calling the component. +For example: +Using `` will render the full-width CTA with the default data hardcoded in the component. +But, +``` + +``` +will render the full-width CTA with the custom data passed as props to the component. + +The `image`, `alt`, `link`, `category` props are common for all the CTA's. Preferrably, keep the ImageOnly CTA as internal callout (a lot of conditioning would be needed for external links). Rest of the props can be checked in the component definition. + +The prop `category` can be used to categorize the CTA's. That is, instead of passing same custom data for each set of custom CTA's for a group, one can use +the `category` prop to group them under a category and add that category under the respective `cta_imageonly_categories.js`, `cta_fullwidth_categories.js`, +`cta_bottom_categories.js` files for `CTA_ImageOnly`, `CTA_FullWidth` and `CTA_Bottom` respectively. + +### About the props: + +Below are the description of all the props available in the CTA's combined. Please check the props supported by the CTA's before using them. + +1. `image`: Used to pass custom image for the CTA +2. `alt`: Used to pass alt text for the custom image passed to the CTA +3. `content`: Used to pass custom content to the CTA +4. `url`: Used to pass custom link to the CTA +5. `external_link`: If the url passed above is an external link, pass `true` to it, else `false` (default) +6. `button_text`: Used to pass custom text for the button in the CTA +7. `category`: Used to categorize the CTA's for a group of blogs/news/resources. + + +_Hopefully, this would ease up the process of adding a CTA to the MDX files. Happy meshing!_ \ No newline at end of file diff --git a/src/sections/Blog/Blog-single/index.js b/src/sections/Blog/Blog-single/index.js index d49913a20964..b4ef1ab7a2b3 100644 --- a/src/sections/Blog/Blog-single/index.js +++ b/src/sections/Blog/Blog-single/index.js @@ -79,7 +79,9 @@ const BlogSingle = ({data}) => { ))} - {/* */} + {/* */}