Backport #31339 (#31414)

* Backport #31339

Add view on GitHub links for easier content editing from the docs

2 files changed, 21 insertions, 1 deletions

diff --git a/site/_layouts/docs.html b/site/_layouts/docs.html
index b9381923bc..08788a2547 100644
--- a/site/_layouts/docs.html
+++ b/site/_layouts/docs.html
@@ -21,7 +21,10 @@
         {% endif %}
 
         <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
+            <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="{{ site.repo }}/tree/v4-dev/site/{{ page.path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
+            <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+          </div>
           <p class="bd-lead">{{ page.description | smartify }}</p>
           {% include ads.html %}
           {{ content }}
diff --git a/site/docs/4.5/assets/scss/_buttons.scss b/site/docs/4.5/assets/scss/_buttons.scss
index 8d35fef460..6a2d703e63 100644
--- a/site/docs/4.5/assets/scss/_buttons.scss
+++ b/site/docs/4.5/assets/scss/_buttons.scss
@@ -36,3 +36,20 @@
     box-shadow: 0 0 0 3px rgba($bd-download, .25);
   }
 }
+
+.btn-bd-light {
+  color: $gray-600;
+  border-color: $gray-300;
+
+  .show > &,
+  &:hover,
+  &:active {
+    color: $bd-purple-bright;
+    background-color: $white;
+    border-color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}