From c098dbe7af9c499d3dd9721eee94d4ef02d8d8c9 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Mon, 6 Nov 2023 10:38:20 -0500
Subject: [PATCH] Integration-badge factored out into its own shortcode (#3505)

---
 assets/scss/_styles_project.scss               | 17 +++++++++++++++++
 content/en/blog/2023/integrations.md           | 12 +-----------
 layouts/shortcodes/blog/integration-badge.html | 12 ++++++++++++
 3 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 layouts/shortcodes/blog/integration-badge.html

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 3318bc4c5742..1b0695921ccd 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -292,15 +292,32 @@ details {
 }
 
 .ot-integration-badge {
+  @extend .btn;
+  @extend .shadow;
+
   border-radius: 0 !important;
 
   position: relative;
+  float: right;
   transform: rotate(6deg);
   background: hsl(60, 100%, 60%);
   border-color: hsl(60, 100%, 60%);
   padding: 1rem;
   margin: 0 1rem 1rem 1rem;
 
+  &__text {
+    font-weight: $font-weight-semibold;
+  }
+
+  &__info {
+    @extend .text-warning;
+    @extend .translate-middle;
+
+    position: absolute;
+    top: 0;
+    left: 100%;
+  }
+
   &:hover {
     background: hsl(60, 100%, 60%);
     transform: rotate(4deg);
diff --git a/content/en/blog/2023/integrations.md b/content/en/blog/2023/integrations.md
index 9f309bce869d..ba4c0a412986 100644
--- a/content/en/blog/2023/integrations.md
+++ b/content/en/blog/2023/integrations.md
@@ -4,17 +4,7 @@ linkTitle: Integrations Welcome!
 date: 2023-11-08
 ---
 
-<!-- prettier-ignore -->
-<a type="button"
-  href="/blog/2023/integrations/"
-  class="ot-integration-badge btn shadow float-end"
-  title="Learn more"
-  data-bs-toggle="tooltip" data-bs-title="Learn more">
-  <span class="fw-semibold">OTel integration!</span>
-  <span class="position-absolute top-0 start-100 translate-middle text-warning">
-    <i class="fa-solid fa-circle-info"></i>
-  </span>
-</a>
+{{< blog/integration-badge >}}
 
 Embracing OpenTelemetry's [vision], we are committed to enabling high-quality
 telemetry throughout the entire software stack!
diff --git a/layouts/shortcodes/blog/integration-badge.html b/layouts/shortcodes/blog/integration-badge.html
new file mode 100644
index 000000000000..c0d876a39cce
--- /dev/null
+++ b/layouts/shortcodes/blog/integration-badge.html
@@ -0,0 +1,12 @@
+{{ $learnMore := "Click to learn more" -}}
+
+<a role="button"
+  href="/blog/2023/integrations/"
+  class="ot-integration-badge"
+  title="{{ $learnMore }}"
+  data-bs-toggle="tooltip" data-bs-title="{{ $learnMore }}">
+  <span class="ot-integration-badge__text">OTel integration!</span>
+  <span class="ot-integration-badge__info">
+    <i class="fa-solid fa-circle-info"></i>
+  </span>
+</a>