add scroll to top button

assets/js/scroll-to-top.js

@@ -0,0 +1,19 @@
+// Get the button
+let scrollToTopBtn = document.getElementById('scrollToTopBtn');
+
+// When the user scrolls down 200px from the top of the document, show the button
+window.onscroll = function () {
+  if (
+    document.body.scrollTop > 200 ||
+    document.documentElement.scrollTop > 200
+  ) {
+    scrollToTopBtn.style.display = 'block';
+  } else {
+    scrollToTopBtn.style.display = 'none';
+  }
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopBtn.onclick = function () {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};

assets/scss/_registry.scss

@@ -39,3 +39,31 @@
 .registry-entry {
   @extend .shadow;
 }
+
+// Scroll-to-top button styling
+.scroll-to-top-btn {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  background-color: #007bff; 
+  color: white;
+  border: none;
+  padding: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none; // Initially hidden
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; 
+
+  &:hover {
+    background-color: #0056b3; 
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .scroll-to-top-btn {
+    bottom: 20px; 
+    right: 20px;
+    padding: 10px;
+  }
+}

content/en/ecosystem/registry/_index.md

@@ -29,6 +29,12 @@ weight: 20
 
 {{% /blocks/lead %}}
 
+<div style="text-align: center; margin-top: 20px;">
+<button id="scrollToTopBtn" class="scroll-to-top-btn">
+    <i class="fas fa-arrow-up"></i>
+</button>
+</div>
+
 {{< blocks/section color="white" type="container-lg" >}}
 
 {{< ecosystem/registry/search-form >}}

layouts/_default/baseof.html

@@ -19,3 +19,6 @@
     {{ partialCached "scripts.html" . }}
   </body>
 </html>
+
+{{ $js := resources.Get "js/scroll-to-top.js" | minify | fingerprint }}
+<script src="{{ $js.Permalink }}"></script>

layouts/partials/ecosystem/registry/entry.html

@@ -1,222 +1,237 @@
 {{ $languageNames := .languageNames -}}
 
 {{ with .value -}}
-    {{ 
-        $remoteRegistries := dict
-            "npm" (dict 
-                "urlPattern" "https://npmjs.com/package/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "installLine" "npm install %s"
-                "icon" "fab fa-npm")
-            "packagist" (dict
-                "urlPattern" "https://packagist.org/packages/%s"
-                "installLine" "composer require %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-box-open")
-            "gems" (dict
-                "urlPattern" "https://rubygems.org/gems/%s"
-                "installLine" "gem install %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-gem")
-            "go" (dict
-                "urlPattern" "https://pkg.go.dev/%s"
-                "installLine" "go get %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-brands fa-golang")
-            "go-collector" (dict
-                "urlPattern" "https://pkg.go.dev/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/collector.md"
-                "icon" "fa-solid fa-box-open")
-            "nuget" (dict
-                "urlPattern" "https://www.nuget.org/packages/%s"
-                "installLine" "dotnet add package %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-box-open")
-            "pip" (dict
-                "urlPattern" "https://pypi.org/project/%s"
-                "installLine" "pip install %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-brands fa-python")
-            "hex" (dict
-                "urlPattern" "https://hex.pm/packages/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/hex.md"
-                "icon" "fa-brands fa-erlang")
-            "crates" (dict
-                "urlPattern" "https://crates.io/crates/%s"
-                "installLine" "cargo add %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fab fa-rust")
-    -}}
+{{
+$remoteRegistries := dict
+"npm" (dict
+"urlPattern" "https://npmjs.com/package/%s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"installLine" "npm install %s"
+"icon" "fab fa-npm")
+"packagist" (dict
+"urlPattern" "https://packagist.org/packages/%s"
+"installLine" "composer require %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-box-open")
+"gems" (dict
+"urlPattern" "https://rubygems.org/gems/%s"
+"installLine" "gem install %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-gem")
+"go" (dict
+"urlPattern" "https://pkg.go.dev/%s"
+"installLine" "go get %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-brands fa-golang")
+"go-collector" (dict
+"urlPattern" "https://pkg.go.dev/%s"
+"installTemplate" "ecosystem/registry/quickinstall/collector.md"
+"icon" "fa-solid fa-box-open")
+"nuget" (dict
+"urlPattern" "https://www.nuget.org/packages/%s"
+"installLine" "dotnet add package %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-box-open")
+"pip" (dict
+"urlPattern" "https://pypi.org/project/%s"
+"installLine" "pip install %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-brands fa-python")
+"hex" (dict
+"urlPattern" "https://hex.pm/packages/%s"
+"installTemplate" "ecosystem/registry/quickinstall/hex.md"
+"icon" "fa-brands fa-erlang")
+"crates" (dict
+"urlPattern" "https://crates.io/crates/%s"
+"installLine" "cargo add %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fab fa-rust")
+-}}
 
-    {{ $isNative := and (or (eq .registryType "instrumentation") (eq .registryType "application integration")) (.isNative) }}
-    {{ $isFirstParty := and (or (eq .registryType "instrumentation") (eq .registryType "application integration")) (.isFirstParty) }}
-    {{ $currentTime := (time now) -}}
-    {{ $delta := $currentTime.Sub (time.AsTime .createdAt) -}}
-    {{ $isNew := lt $delta.Hours 730 -}}
-    {{ $usedInDemo := and (isset . "urls") (isset .urls "demo") }}
-    {{ $deprecated := and (isset . "deprecated") (isset .deprecated "reason") }}
-    {{ $package := "" -}}
-    {{ if and (.package) (isset $remoteRegistries .package.registry) -}}
-        {{ $package = merge .package (index $remoteRegistries .package.registry) -}}
-        {{ $package = merge $package (dict "type" .registryType) -}}
-    {{ end -}}
-    {{ $highlightStyle := "" -}}
-    {{ if $isNew -}}
-        {{ $highlightStyle = "border-info" -}}
-    {{ end -}}
-    {{ if $isNative -}}
-        {{ $highlightStyle = "border-success" -}}
-    {{ end -}}
-    {{ if $isFirstParty -}}
-        {{ $highlightStyle = "border-success" -}}
-    {{ end -}}
-    {{ if $usedInDemo -}}
-        {{ $highlightStyle = "border-secondary" -}}
-    {{ end -}}
-    {{ if $deprecated -}}
-        {{ $highlightStyle = "border-danger" -}}
-    {{ end -}}
-    {{ $primaryUrl := "" -}}
-    {{ if .urls.repo -}}
-        {{ $primaryUrl = .urls.repo -}}
-    {{ else if .urls.website -}}
-        {{ $primaryUrl = .urls.website -}}
-    {{ else if .urls.docs -}}
-    {{ errorf "The %q registry entry requires a repo or website URL." .title }}
-    {{ end -}}
-    {{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}}
-    <li class="card my-3 registry-entry {{ $highlightStyle }}" data-registry-id="{{ ._key }}" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
-        <div class="card-body container">
+{{ $isNative := and (or (eq .registryType "instrumentation") (eq .registryType "application integration")) (.isNative)
+}}
+{{ $isFirstParty := and (or (eq .registryType "instrumentation") (eq .registryType "application integration"))
+(.isFirstParty) }}
+{{ $currentTime := (time now) -}}
+{{ $delta := $currentTime.Sub (time.AsTime .createdAt) -}}
+{{ $isNew := lt $delta.Hours 730 -}}
+{{ $usedInDemo := and (isset . "urls") (isset .urls "demo") }}
+{{ $deprecated := and (isset . "deprecated") (isset .deprecated "reason") }}
+{{ $package := "" -}}
+{{ if and (.package) (isset $remoteRegistries .package.registry) -}}
+{{ $package = merge .package (index $remoteRegistries .package.registry) -}}
+{{ $package = merge $package (dict "type" .registryType) -}}
+{{ end -}}
+{{ $highlightStyle := "" -}}
+{{ if $isNew -}}
+{{ $highlightStyle = "border-info" -}}
+{{ end -}}
+{{ if $isNative -}}
+{{ $highlightStyle = "border-success" -}}
+{{ end -}}
+{{ if $isFirstParty -}}
+{{ $highlightStyle = "border-success" -}}
+{{ end -}}
+{{ if $usedInDemo -}}
+{{ $highlightStyle = "border-secondary" -}}
+{{ end -}}
+{{ if $deprecated -}}
+{{ $highlightStyle = "border-danger" -}}
+{{ end -}}
+{{ $primaryUrl := "" -}}
+{{ if .urls.repo -}}
+{{ $primaryUrl = .urls.repo -}}
+{{ else if .urls.website -}}
+{{ $primaryUrl = .urls.website -}}
+{{ else if .urls.docs -}}
+{{ errorf "The %q registry entry requires a repo or website URL." .title }}
+{{ end -}}
+{{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}}
+<li class="card my-3 registry-entry {{ $highlightStyle }}" data-registry-id="{{ ._key }}"
+    data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
+    <div class="card-body container">
         <h4 class="card-title mb-0 d-flex flex-row">
             <a {{ $primaryHref }} target="_blank" rel="noopener" class="me-auto">
-            {{- .title | markdownify -}}
+                {{- .title | markdownify -}}
             </a>
             <div class="ms-auto">
-            {{ if $isNew -}}
-            <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
-            {{ end -}}
-            {{ if $isNative -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-puzzle-piece"></i> native</span>
-            {{ end -}}
-            {{ if $isFirstParty -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-heart"></i> first party integration</span>
-            {{ end -}}
-            {{ if $usedInDemo -}}
-            <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
-            {{ end -}}
-            {{ if $deprecated -}}
-            <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i> deprecated</span>
-            {{ end -}}
-            {{ if .cncfProjectLevel -}}
-            <span class="badge rounded-pill text-bg-primary text-white" title="CNCF {{ .cncfProjectLevel}} Project">
-                <img alt="CNCF" style="display: inline-block; width: 14px; height: 14px; border: none; margin:0px; padding: 0; vertical-align:middle" src="/img/cncf-icon-white.svg"> {{ .cncfProjectLevel }}
-            </span>
-            {{ end -}}
+                {{ if $isNew -}}
+                <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
+                {{ end -}}
+                {{ if $isNative -}}
+                <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-puzzle-piece"></i>
+                    native</span>
+                {{ end -}}
+                {{ if $isFirstParty -}}
+                <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-heart"></i> first
+                    party integration</span>
+                {{ end -}}
+                {{ if $usedInDemo -}}
+                <span class="badge rounded-pill text-bg-secondary text-white"
+                    title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel
+                    Demo</span>
+                {{ end -}}
+                {{ if $deprecated -}}
+                <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i>
+                    deprecated</span>
+                {{ end -}}
+                {{ if .cncfProjectLevel -}}
+                <span class="badge rounded-pill text-bg-primary text-white" title="CNCF {{ .cncfProjectLevel}} Project">
+                    <img alt="CNCF"
+                        style="display: inline-block; width: 14px; height: 14px; border: none; margin:0px; padding: 0; vertical-align:middle"
+                        src="/img/cncf-icon-white.svg"> {{ .cncfProjectLevel }}
+                </span>
+                {{ end -}}
             </div>
         </h4>
         <p class="card-text">
             <small class="text-body-secondary">
-            by 
-            {{ range $index, $author := .authors -}}
+                by
+                {{ range $index, $author := .authors -}}
                 {{ if $index }}, {{ end }}
                 {{ if eq $author.name "OpenTelemetry Authors" -}}
-                    <a href="/" class="badge rounded-pill text-bg-primary">🔭 {{ $author.name }} 🔭</a>
+                <a href="/" class="badge rounded-pill text-bg-primary">🔭 {{ $author.name }} 🔭</a>
                 {{ else if isset $author "url" }}
-                    {{ $href := printf "href=%q" $author.url | safeHTMLAttr -}}
-                    <a {{ $href }} target="_blank" rel="noopener" class="card-link external-link">{{ $author.name }}</a>
+                {{ $href := printf "href=%q" $author.url | safeHTMLAttr -}}
+                <a {{ $href }} target="_blank" rel="noopener" class="card-link external-link">{{ $author.name }}</a>
                 {{ else -}}
-                    {{ $author.name -}}
+                {{ $author.name -}}
+                {{ end -}}
                 {{ end -}}
-            {{ end -}}
             </small>
         </p>
         <div class="row p-2">
             <div class="col col-md-9 col-lg-10">
                 <div class="mb-3">
                     {{ if $deprecated -}}
-                        <div class="alert alert-danger" role="alert">
-                            <h4 class="alert-heading">Deprecated</h4>
-                            {{ .deprecated.reason | markdownify }}
-                        </div>
+                    <div class="alert alert-danger" role="alert">
+                        <h4 class="alert-heading">Deprecated</h4>
+                        {{ .deprecated.reason | markdownify }}
+                    </div>
                     {{ end -}}
                     {{- .description | markdownify -}}
                 </div>
                 {{ with $package -}}
-                    {{ if not (eq .quickInstall false) }}
-                    <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
-                    <p>{{ (partial .installTemplate .) | markdownify -}}
-                    </p>
-                    {{ end -}}
+                {{ if not (eq .quickInstall false) }}
+                <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
+                <p>{{ (partial .installTemplate .) | markdownify -}}
+                </p>
+                {{ end -}}
                 {{- end -}}
             </div>
             <div class="col col-md-3 col-lg-2">
-            <ul class="list-group list-group-flush">
-            {{ if .package.version -}}
-            <li class="list-group-item">
-                <div class="ms-2 me-auto">
-                <div class="fw-bold">
-                    {{ .package.version }}
-                </div>
-                <small>Version</small>
-                </div>      
-            </li>
-            {{- end -}}
-            {{ with .language -}}
-            <li class="list-group-item">
-                <div class="ms-2 me-auto">
-                <div class="fw-bold">
-                    {{ $languageNames.Get . | default (humanize .) }}
-                </div>
-                <small>Language</small>
-                </div>      
-            </li>
-            {{- end }}
-            {{ with .registryType -}}
-            <li class="list-group-item">
-                <div class="ms-2 me-auto">
-                <div class="fw-bold">
-                    {{ . | humanize }}
-                </div>
-                <small>Component</small>
-                </div>      
-            </li>
-            {{- end -}}
-            {{ with .license -}}
-            <li class="list-group-item">
-                <div class="ms-2 me-auto">
-                <div class="fw-bold">
-                    {{ . }}
-                </div>
-                <small>License</small>
-                </div>      
-            </li>
-            {{- end -}}
+                <ul class="list-group list-group-flush">
+                    {{ if .package.version -}}
+                    <li class="list-group-item">
+                        <div class="ms-2 me-auto">
+                            <div class="fw-bold">
+                                {{ .package.version }}
+                            </div>
+                            <small>Version</small>
+                        </div>
+                    </li>
+                    {{- end -}}
+                    {{ with .language -}}
+                    <li class="list-group-item">
+                        <div class="ms-2 me-auto">
+                            <div class="fw-bold">
+                                {{ $languageNames.Get . | default (humanize .) }}
+                            </div>
+                            <small>Language</small>
+                        </div>
+                    </li>
+                    {{- end }}
+                    {{ with .registryType -}}
+                    <li class="list-group-item">
+                        <div class="ms-2 me-auto">
+                            <div class="fw-bold">
+                                {{ . | humanize }}
+                            </div>
+                            <small>Component</small>
+                        </div>
+                    </li>
+                    {{- end -}}
+                    {{ with .license -}}
+                    <li class="list-group-item">
+                        <div class="ms-2 me-auto">
+                            <div class="fw-bold">
+                                {{ . }}
+                            </div>
+                            <small>License</small>
+                        </div>
+                    </li>
+                    {{- end -}}
             </div>
         </div>
         <div>
 
         </div>
         {{ with .urls.website -}}
         {{ $websiteHref := printf "href=%q" . | safeHTMLAttr -}}
-        <a {{ $websiteHref }} target="_blank" rel="noopener" class="card-link"><i class="fas fa-house" aria-hidden="true"></i>&nbsp;Website</a>
+        <a {{ $websiteHref }} target="_blank" rel="noopener" class="card-link"><i class="fas fa-house"
+                aria-hidden="true"></i>&nbsp;Website</a>
         {{- end -}}
         {{ with .urls.docs -}}
         {{ $docsHref := printf "href=%q" . | safeHTMLAttr -}}
-        <a {{ $docsHref }} target="_blank" rel="noopener" class="card-link"><i class="fas fa-book" aria-hidden="true"></i>&nbsp;Documentation</a>
+        <a {{ $docsHref }} target="_blank" rel="noopener" class="card-link"><i class="fas fa-book"
+                aria-hidden="true"></i>&nbsp;Documentation</a>
         {{- end -}}
         {{ with $package -}}
         {{ $packageUrl := printf "href=%q" (printf .urlPattern .name) | safeHTMLAttr -}}
-        <a {{ $packageUrl }} target="_blank" rel="noopener" class="card-link"><i class="{{ .icon }}" aria-hidden="true"></i>&nbspPackage Details ({{ .registry }})</a>
+        <a {{ $packageUrl }} target="_blank" rel="noopener" class="card-link"><i class="{{ .icon }}"
+                aria-hidden="true"></i>&nbspPackage Details ({{ .registry }})</a>
         {{- end -}}
         {{ with .urls.repo -}}
         {{ $icon := cond ( hasPrefix . "https://github.com/" ) "fa-brands fa-github" "fab fa-git-alt" -}}
         {{ $repoHref := printf "href=%q" . | safeHTMLAttr -}}
-        <a {{ $repoHref }} target="_blank" rel="noopener" class="card-link"><i class="{{ $icon }}" aria-hidden="true"></i>&nbsp;Repository</a>
+        <a {{ $repoHref }} target="_blank" rel="noopener" class="card-link"><i class="{{ $icon }}"
+                aria-hidden="true"></i>&nbsp;Repository</a>
         {{- end -}}
         {{ with .urls.demo -}}
         {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}}
-        <a {{ $demoUrl }} target="_blank" rel="noopener" class="card-link"><i class="fa-solid fa-shapes" aria-hidden="true"></i>&nbsp;Demo Service</a>
+        <a {{ $demoUrl }} target="_blank" rel="noopener" class="card-link"><i class="fa-solid fa-shapes"
+                aria-hidden="true"></i>&nbsp;Demo Service</a>
         {{- end -}}
-        </div>
-    </li>
-  {{ end -}}
+    </div>
+</li>
+{{ end -}}