Docs: use 'added' page information to display a tag on top of the pages (#37341)

diff --git a/site/content/docs/5.2/helpers/color-background.md b/site/content/docs/5.2/helpers/color-background.md
index c4174845c6660861b9d911ffbd6e3554e9e54d04..1aa9f1a54dc6b0ccf183b9882865095faca52bd0 100644 (file)
--- a/site/content/docs/5.2/helpers/color-background.md
+++ b/site/content/docs/5.2/helpers/color-background.md
@@ -9,8 +9,6 @@ added: "5.2"
 
 ## Overview
 
-{{< added-in "5.2.0" >}}
-
 Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
 
 {{< callout warning >}}

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 1a3f9c1a166188740c59669c69a5e9cf048164a8..27314c37d0b66e430f8508c0d1e4532309cd8212 100644 (file)
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -16,9 +16,12 @@
     <main class="bd-main order-1">
       <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
-            View on GitHub
-          </a>
+          <div class="mb-3 mb-md-0 d-flex">
+            <small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
+            <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+              View on GitHub
+            </a>
+          </div>
           <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
         </div>
         <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>