Add inline CTA for tracking conversions on promoted posts

blog/2024-10-02-availability/index.mdx

@@ -23,6 +23,7 @@ authors: [ks, xe]
 tags: [object storage, reliability, performance]
 ---
 
+import InlineCta from "@site/src/components/InlineCta";
 import PullQuote from "@site/src/components/PullQuote";
 
 At Tigris Data, we provide object storage to our users. People put bytes into
@@ -114,6 +115,12 @@ is still a successful request (as the system is correctly denying access or not
 finding a file that may not exist), but an internal server error (500) would be
 a failed request and thus count against us.
 
+<InlineCta
+  title={"Want to try it out?"}
+  subtitle={"Make a global bucket with no egress fees"}
+  button={"Get Started"}
+/>
+
 ## Why these metrics matter
 
 It’s easy to be reliable when nobody uses your service. There’s also annoying

blog/2024-10-25-object-notifications/index.mdx

@@ -13,6 +13,8 @@ authors: [garren]
 tags: [object storage, s3, event streaming, changes, notifications]
 ---
 
+import InlineCta from "@site/src/components/InlineCta";
+
 ![Autumn trees on a dusty road in Magoebaskloof, South Africa](./trees.jpg)
 
 <center>
@@ -75,6 +77,12 @@ To solve this, when a change is received at a region it looks at the
 needs to be applied or if the region has already seen a newer change. It will
 discard the change if it is old.
 
+<InlineCta
+  title={"Want to try it out?"}
+  subtitle={"Make a global bucket with no egress fees"}
+  button={"Get Started"}
+/>
+
 ### The Object Notification Hub
 
 When object notifications are enabled for a bucket, we assign one region to be

package.json

@@ -41,7 +41,7 @@
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.29.4",
-    "prettier": "2.6.2",
+    "prettier": "2.8.8",
     "typescript": "~5.2.2"
   },
   "engines": {

src/components/InlineCta.js

@@ -0,0 +1,49 @@
+import tigrisConfig from "@site/tigris.config.js";
+import React from "react";
+import PropTypes from "prop-types";
+
+function InlineCta(props) {
+  return (
+    <div>
+      <div>
+        <div className="is--color_gradient_back">
+          <div className="sl_card_m-2 card_static cta-flex">
+            <div className="cta-margin-left">
+              <h1 className="sl_title_m fix-1px">{props.title}</h1>
+              <p>{props.subtitle}</p>
+            </div>
+            <div className="cta-flex-item cta-margin-right">
+              <div style={{ "white-space": "nowrap" }}>
+                <a href={tigrisConfig.getStartedUrl} className="cta-link">
+                  <div>
+                    {props.button}
+                    <svg
+                      width="13.5"
+                      height="13.5"
+                      aria-hidden="true"
+                      viewBox="0 0 24 24"
+                      className="iconExternalLink_node_modules-@docusaurus-theme-classNameic-lib-theme-Icon-ExternalLink-styles-module"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                      ></path>
+                    </svg>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+InlineCta.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  button: PropTypes.string,
+};
+
+export default InlineCta;