Merge pull request #8022 from sm1990/sm-banners

Update sm-banners
ballerina-platform · Oct 12, 2023 · 05469f4 · 05469f4
2 parents db98f04 + b9523d5
commit 05469f4
Show file tree

Hide file tree

Showing 21 changed files with 119 additions and 59 deletions.
diff --git a/case-studies/mosip.md b/case-studies/mosip.md
@@ -7,6 +7,7 @@ permalink: /learn/case-studies/mosip
 active: mosip
 intro: Ballerina is an open source programming language for the cloud that makes it easier to use, combine, and create network services. In addition to the powerful language features, it comes with a rich Ballerina library, which covers network data, messaging, and communication protocols. The Modular Open Source Identity Platform (MOSIP), an open-source identity platform currently being adopted by several countries to manage the digitization of their civil registries, uses the Ballerina WebSubHub module for event-driven communication.
 logo: '/images/home-page/user-logos/mosip.png'
+user: 'mosip'
 ---
 
 ## Overview

diff --git a/case-studies/wso2.md b/case-studies/wso2.md
@@ -7,6 +7,7 @@ permalink: /learn/case-studies/wso2
 active: wso2
 intro: WSO2’s digital transformation team realized that they needed to modernize the company’s own internal applications to improve operational efficiency, collaboration, and productivity. To drive these efforts, the company leveraged the Ballerina language to achieve remarkable results and empower its workforce.
 logo: '/images/home-page/user-logos/wso2.svg'
+user: 'wso2'
 ---
 
 ## Overview

diff --git a/pages/case-studies/[slug].js b/pages/case-studies/[slug].js
@@ -90,12 +90,21 @@ export default function PostPage({ frontmatter, content, slug }) {
                     property="og:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
                 />
+                <meta
+                    property="og:image"
+                    itemProp="image"
+                    content={`https://ballerina.io/images/case-studies/${frontmatter.user}-sm-banner.png`}
+                />
 
                 {/* <!--LINKED IN  --> */}
-                <meta property="og:title" content="Ballerina" />
+                <meta property="og:title" content={`Ballerina - ${frontmatter.title}`} />
+                <meta
+                    property="og:image"
+                    content={`https://ballerina.io/images/case-studies/${frontmatter.user}-sm-banner.png`}
+                />
 
                 {/* <!--TWITTER--> */}
-                <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`}/>
+                <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`} />
                 <meta
                     property="twitter:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
@@ -104,6 +113,10 @@ export default function PostPage({ frontmatter, content, slug }) {
                     property="twitter:text:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
                 />
+                <meta
+                    name="twitter:image"
+                    content={`https://ballerina.io/images/case-studies/${frontmatter.user}-sm-banner.png`}
+                />
             </Head>
             <Layout>
                 <Col xs={12} sm={10} className="mdContent caseStudies">
@@ -128,12 +141,12 @@ export default function PostPage({ frontmatter, content, slug }) {
                         </Col>
                     </Row>
 
-                    <Row className="pageContentRow innerRow" style={{marginTop:'40px', marginBottom:"0", alignItems:"center"}}>
+                    <Row className="pageContentRow innerRow" style={{ marginTop: '40px', marginBottom: "0", alignItems: "center" }}>
                         <Col xs={12} md={8}>
                             <p>{frontmatter.intro}</p>
                         </Col>
                         <Col xs={12} md={3}>
-                            <img src={frontmatter.logo}/>
+                            <img src={frontmatter.logo} />
                         </Col>
                     </Row>
 

diff --git a/pages/learn/by-example/[bbe].js b/pages/learn/by-example/[bbe].js
@@ -117,12 +117,22 @@ export default function BBEPage({ frontmatter, navContent, bbe, codes }) {
           property="og:title"
           content={`Ballerina - ${frontmatter.title}`}
         />
+        <meta
+          property="og:image"
+          itemProp="image"
+          content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
+        />
 
         {/* <!--LINKED IN  --> */}
+        <meta property="og:title" content={`Ballerina - ${frontmatter.title}`} />
         <meta property="og:description" content={frontmatter.description} />
+        <meta
+          property="og:image"
+          content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
+        />
 
         {/* <!--TWITTER--> */}
-        <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`}/>
+        <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`} />
         <meta
           property="twitter:description"
           content={frontmatter.description}
@@ -131,6 +141,10 @@ export default function BBEPage({ frontmatter, navContent, bbe, codes }) {
           property="twitter:text:description"
           content={frontmatter.description}
         />
+        <meta
+          name="twitter:image"
+          content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
+        />
       </Head>
 
       <Layout>

diff --git a/pages/learn/by-example/index.js b/pages/learn/by-example/index.js
@@ -166,14 +166,14 @@
          <meta
            property="og:image"
            itemProp="image"
-           content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+           content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
          />
 
          {/* LINKED IN */}
          <meta property="og:title" content="Ballerina - By Example" />
          <meta
            property="og:image"
-           content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+           content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
          />
          <meta
            property="og:description"
@@ -193,15 +193,15 @@
          />
          <meta
            name="twitter:image"
-           content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+           content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
          />
          <meta
            property="twitter:text:description"
            content="Ballerina by Example enables you to have complete coverage over the Ballerina language, while emphasizing incremental learning."
          />
          <meta
            property="twitter:image"
-           content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+           content="https://ballerina.io/images/ballerina-learn-ballerina-by-example-page-sm-banner.png"
          />
        </Head>
 

diff --git a/pages/learn/integration/integration-tutorials/[slug].js b/pages/learn/integration/integration-tutorials/[slug].js
@@ -93,12 +93,21 @@ export default function PostPage({ frontmatter, content, slug, codes }) {
                     property="og:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
                 />
+                <meta
+                    property="og:image"
+                    itemProp="image"
+                    content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
+                />
 
                 {/* <!--LINKED IN  --> */}
-                <meta property="og:title" content="Ballerina" />
+                <meta property="og:title" content={`Ballerina - ${frontmatter.title}`} />
+                <meta
+                    property="og:image"
+                    content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
+                />
 
                 {/* <!--TWITTER--> */}
-                <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`}/>
+                <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`} />
                 <meta
                     property="twitter:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
@@ -107,35 +116,39 @@ export default function PostPage({ frontmatter, content, slug, codes }) {
                     property="twitter:text:description"
                     content="A programming language for the cloud that makes it easier to use, combine, and create network services."
                 />
+                <meta
+                    name="twitter:image"
+                    content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
+                />
             </Head>
             <Layout>
                 <Col xs={12} sm={10} className="mdContent">
-                <Row>
-                  <Col xs={12} className="patternContent" style={{marginBottom:"20px;"}}>
-                    <Link href="/learn/integration-tutorials" passHref>
-                      <div className="backToLanding">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="30"
-                          height="30"
-                          fill="#3ad1ca"
-                          className="bi bi-box-arrow-left ms-0"
-                          viewBox="0 0 16 16"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"
-                          />
-                          <path
-                            fillRule="evenodd"
-                            d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"
-                          />
-                        </svg>
-                        <p className="m-0 p-0">Back to integration tutorials</p>
-                      </div>
-                    </Link>
-                  </Col>
-                </Row>
+                    <Row>
+                        <Col xs={12} className="patternContent" style={{ marginBottom: "20px;" }}>
+                            <Link href="/learn/integration-tutorials" passHref>
+                                <div className="backToLanding">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="30"
+                                        height="30"
+                                        fill="#3ad1ca"
+                                        className="bi bi-box-arrow-left ms-0"
+                                        viewBox="0 0 16 16"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"
+                                        />
+                                        <path
+                                            fillRule="evenodd"
+                                            d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"
+                                        />
+                                    </svg>
+                                    <p className="m-0 p-0">Back to integration tutorials</p>
+                                </div>
+                            </Link>
+                        </Col>
+                    </Row>
                     <Row className="topRow innerRow">
                         <Col xs={11}>
                             <h1>{frontmatter.title}</h1>
@@ -157,7 +170,7 @@ export default function PostPage({ frontmatter, content, slug, codes }) {
                         </Col>
                     </Row>
 
-                    <Row className="pageContentRow innerRow" style={{marginTop:'40px', marginBottom:"0", alignItems:"center"}}>
+                    <Row className="pageContentRow innerRow" style={{ marginTop: '40px', marginBottom: "0", alignItems: "center" }}>
                         <Col xs={12}>
                             <p>{frontmatter.intro}</p>
                         </Col>
@@ -168,7 +181,7 @@ export default function PostPage({ frontmatter, content, slug, codes }) {
                             <MainContent
                                 content={content}
                                 handleToc={handleToc}
-                                codes={codes}  />
+                                codes={codes} />
                         </Col>
                     </Row>
                 </Col>

diff --git a/pages/learn/integration/integration-tutorials/index.js b/pages/learn/integration/integration-tutorials/index.js
@@ -63,22 +63,22 @@ export default function Learn() {
 
         {/* FB */}
         <meta property="og:type" content="article" />
-        <meta property="og:title" content="Ballerina - Learn" />
+        <meta property="og:title" content="Ballerina: Integration tutorials" />
         <meta
           property="og:description"
           content="Ballerina is a comprehensive language that is easy to grasp for anyone with prior programming experience. Start learning with the material below."
         />
         <meta
           property="og:image"
           itemProp="image"
-          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+          content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
         />
 
         {/* LINKED IN */}
         <meta property="og:title" content="Ballerina: Integration tutorials" />
         <meta
           property="og:image"
-          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+          content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
         />
         <meta
           property="og:description"
@@ -90,23 +90,23 @@ export default function Learn() {
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="@ballerinalang" />
         <meta name="twitter:creator" content="@ballerinalang" />
-        <meta name="twitter:title" content="Ballerina" />
+        <meta name="twitter:title" content="Ballerina: Integration tutorials" />
         <meta name="twitter:card" content="summary_large_image" />
         <meta
           property="twitter:description"
           content="Ballerina is a comprehensive language that is easy to grasp for anyone with prior programming experience. Start learning with the material below."
         />
         <meta
           name="twitter:image"
-          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+          content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
         />
         <meta
           property="twitter:text:description"
           content="Ballerina is a comprehensive language that is easy to grasp for anyone with prior programming experience. Start learning with the material below."
         />
         <meta
           property="twitter:image"
-          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
+          content="https://ballerina.io/images/ballerina-learn-integration-tutorials-page-sm-banner.png"
         />
       </Head>
 

diff --git a/pages/learn/references/ballerina-specifications.js b/pages/learn/references/ballerina-specifications.js
@@ -76,11 +76,22 @@ export default function PostPage({ frontmatter, content, id }) {
           property="og:description"
           content={frontmatter.description}
         ></meta>
+        <meta
+          property="og:image"
+          itemProp="image"
+          content="https://ballerina.io/images/ballerina-learn-ballerina-specifications-page-sm-banner.png"
+        />
 
         {/* <!--LINKED IN  --> */}
+        <meta property="og:title" content={`Ballerina - ${frontmatter.title}`} />
         <meta property="og:description" content={frontmatter.description} />
+        <meta
+          property="og:image"
+          content="https://ballerina.io/images/ballerina-learn-ballerina-specifications-page-sm-banner.png"
+        />
 
         {/* <!--TWITTER--> */}
+        <meta name="twitter:title" content={`Ballerina - ${frontmatter.title}`} />
         <meta
           property="twitter:description"
           content={frontmatter.description}
@@ -89,6 +100,10 @@ export default function PostPage({ frontmatter, content, id }) {
           property="twitter:text:description"
           content={frontmatter.description}
         />
+        <meta
+          name="twitter:image"
+          content="https://ballerina.io/images/ballerina-learn-ballerina-specifications-page-sm-banner.png"
+        />
       </Head>
       <Layout>
         <Col sm={3} xxl={2} className="leftNav d-none d-sm-block">

diff --git a/pages/usecases/b2b/index.js b/pages/usecases/b2b/index.js
@@ -116,14 +116,14 @@ export default function Integrations({ samples }) {
         <meta
           property="og:image"
           itemProp="image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-use-cases-b2b-integration-sm-banner.png"
         />
 
         {/* LINKED IN */}
         <meta property="og:title" content="Ballerina - Ballerina for B2B integrations" />
         <meta
           property="og:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-use-cases-b2b-integration-sm-banner.png"
         />
         <meta
           property="og:description"
@@ -143,15 +143,15 @@ export default function Integrations({ samples }) {
         />
         <meta
           name="twitter:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-use-cases-b2b-integration-sm-banner.png"
         />
         <meta
           property="twitter:text:description"
           content="Write code with b2b-friendly abstractions."
         />
         <meta
           property="twitter:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-use-cases-b2b-integration-sm-banner.png"
         />
       </Head>