Integration-badge factored out into its own shortcode (#3505)

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);

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!

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>