OTel-specific changes as a result of the Docsy upgrade

open-telemetry · Mar 12, 2023 · b910afc · b910afc
1 parent 7a9db89
commit b910afc
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 95 deletions.
diff --git a/assets/js/registrySearch.js b/assets/js/registrySearch.js
@@ -200,7 +200,7 @@ function setInput(key, value) {
 
 // Filters items based on language and component filters
 function updateFilters() {
-  let allItems = [...document.getElementsByClassName('media')];
+  let allItems = [...document.getElementsByClassName('registry-entry')];
   if (selectedComponent === 'all' && selectedLanguage === 'all') {
     allItems.forEach((element) => element.classList.remove('d-none'));
   } else {

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -109,24 +109,29 @@
   padding-top: 1rem;
 }
 
-// Homepage
-#cncf {
-  width: 100%;
-  text-align: center;
-
-  p {
-    font-size: 18px;
-    margin-bottom: 0;
+.td-home {
+  .td-main {
+    // Remove the gap between the last block shortcode and the footer (on homepage)
+    flex-grow: 0;
   }
 
-  img {
-    margin-top: 1rem;
-    width: 20rem;
-    max-width: 80%;
-  }
+  .cncf {
+    text-align: center;
+
+    p {
+      font-size: 1.2rem;
+      margin-bottom: 0;
+    }
 
-  a.external-link:after {
-    display: none;
+    img {
+      width: 20rem;
+      padding-top: 1rem;
+      max-width: 80%;
+    }
+
+    a.external-link:after {
+      display: none;
+    }
   }
 }
 
@@ -269,3 +274,25 @@
     }
   }
 }
+
+// Registry
+
+.td-section.registry {
+  .td-outer {
+    height: auto;
+  }
+
+  .registry-entry {
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 0.5rem;
+
+    .h5 {
+      margin-bottom: 0.2rem;
+    }
+
+    &-body {
+      flex: 1;
+    }
+  }
+}
diff --git a/content/en/_index.md b/content/en/_index.md
@@ -1,5 +1,8 @@
 ---
 title: OpenTelemetry
+description: >-
+  High-quality, ubiquitous, and portable telemetry to enable effective
+  observability
 show_banner: true
 developer_note:
   The blocks/cover shortcode (used below) will use as a background image any
@@ -10,9 +13,14 @@ spelling: cSpell:ignore shortcode
 <div class="d-none"><a rel="me" href="https://fosstodon.org/@opentelemetry"></a></div>
 
 {{< blocks/cover image_anchor="top" height="max" color="primary" >}}
-<img src="/img/logos/opentelemetry-horizontal-color.svg" class="otel-logo" alt="OpenTelemetry"/>
 
-## High-quality, ubiquitous, and portable telemetry to enable effective observability
+<!-- prettier-ignore -->
+![OpenTelemetry](/img/logos/opentelemetry-horizontal-color.svg)
+{.otel-logo}
+
+<!-- prettier-ignore -->
+{{% param description %}}
+{.display-6}
 
 <div class="l-primary-buttons mt-5">
 
@@ -43,7 +51,7 @@ you analyze your software's performance and behavior.
 
 {{% /blocks/lead %}}
 
-{{% blocks/section color="dark" %}}
+{{% blocks/section color="dark" type="row" %}}
 
 {{% blocks/feature icon="fas fa-chart-line" title="Traces, Metrics, Logs"%}}
 
@@ -69,19 +77,15 @@ Installation and integration can be as simple as a few lines of code.
 
 {{% /blocks/section %}}
 
-{{% blocks/section color="secondary" %}}
-
-<div id="cncf">
+{{% blocks/section color="secondary" type="cncf" %}}
 
-**OpenTelemetry is a [CNCF][] [incubating][] project**.
-
-Formed through a merger of the OpenTracing and OpenCensus projects.
+**OpenTelemetry is a [CNCF][] [incubating][] project**.<br> Formed through a
+merger of the OpenTracing and OpenCensus projects.
 
 [![CNCF logo][]][cncf]
 
 [cncf]: https://cncf.io
 [cncf logo]: /img/logos/cncf-white.svg
 [incubating]: https://www.cncf.io/projects/
 
-</div>
 {{% /blocks/section %}}
diff --git a/content/en/docs/getting-started/_index.md b/content/en/docs/getting-started/_index.md
@@ -8,7 +8,7 @@ weight: 1
 
 Select a role[^1] to get started:
 
-<div class="l-get-started-buttons justify-content-start mt-3 ml-3">
+<div class="l-get-started-buttons justify-content-start mt-3 ms-3">
 
 - [Dev](dev/)
 - [Ops](ops/)
@@ -18,7 +18,7 @@ Select a role[^1] to get started:
 You can also try out the official [OpenTelemetry Demo][demo] to _see_ what
 observability with OpenTelemetry looks like!
 
-<div class="l-primary-buttons justify-content-start mt-3 mb-5 ml-3">
+<div class="l-primary-buttons justify-content-start mt-3 mb-5 ms-3">
 
 - [Try the demo][demo]
 

diff --git a/content/en/ecosystem/registry/_index.md b/content/en/ecosystem/registry/_index.md
@@ -7,6 +7,7 @@ aliases: [/registry/*]
 type: default
 layout: registry
 outputs: [html, json]
+body_class: registry
 weight: 20
 ---
 
@@ -18,7 +19,7 @@ weight: 20
 
 {{% /blocks/lead %}}
 
-{{% blocks/section type="section" color="dark" %}}
+{{% blocks/section color="dark" %}}
 
 ## What do you need?
 
@@ -35,4 +36,8 @@ OpenTelemetry ecosystem.
 
 {{% /blocks/section %}}
 
+{{< blocks/section color="white" type="container-lg" >}}
+
 {{<registry-search-form>}}
+
+{{< /blocks/section >}}
diff --git a/content/en/status.md b/content/en/status.md
@@ -5,7 +5,7 @@ aliases: [/project-status, /releases]
 description: Maturity-level of the main OpenTelemetry components
 ---
 
-{{% blocks/section type="section" color="white" %}}
+{{% blocks/section color="white" %}}
 
 ## {{% param title %}}
 

diff --git a/layouts/shortcodes/registry-search-form.html b/layouts/shortcodes/registry-search-form.html
@@ -26,72 +26,88 @@
 {{ end -}}
 {{ $types = $types | uniq | sort -}}
 
-<div class="td-content td-box">
-  <section class="row section pb-5">
-    <div class="col align-self-center">
-      <form action="{{ "/ecosystem/registry" }}" id="searchForm">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text" id="basic-addon1" title="{{ len $registry }} entries">Search</span>
-          </div>
-          <input type="text" name="s" class="form-control" id="search-query" aria-label="Registry Search Input Field">
-          <input type="hidden" name="component" id="input-component" value="" />
-          <input type="hidden" name="language" id="input-language" value="" />
+<div class="pb-4">
+  <form action="/ecosystem/registry" id="searchForm">
+    <div class="input-group">
+      <span class="input-group-text" id="basic-addon1" title="{{ len $registry }} entries">Search</span>
+      <input class="form-control w-auto" id="search-query" type="text" name="s"
+        aria-label="Registry search input field">
 
-          <div class="input-group-append flex-wrap">
-            <button type="button" class="btn btn-outline-success" onclick="document.getElementById('searchForm').submit();">Submit</button>
-            <button type="button" class="btn btn-outline-danger"  onclick="document.getElementById('search-query').value = ''; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">Reset</button>
-            <div>
-              <button class="btn btn-outline-secondary dropdown-toggle" id="languageDropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</button>
-              <div class="dropdown-menu" id="languageFilter">
-                <a value="all" class="dropdown-item">Any Language</a>
-                {{ range $langs -}}
-                  <a value="{{ . }}" id="language-item-{{ . }}" class="dropdown-item">{{ $languageNames.Get . | default (humanize .) }}</a>
-                {{ end -}}
-              </div>
-            </div>
-            <div>
-              <button class="btn btn-outline-secondary dropdown-toggle" id="componentDropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Type</button>
-              <div class="dropdown-menu" id="componentFilter">
-                <a value="all" class="dropdown-item">Any Component</a>
-                {{ range $types -}}
-                    <a value="{{ . }}" id="component-item-{{ . }}" class="dropdown-item">{{ humanize . }}</a>
-                {{ end -}}
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </section>
+      <input type="hidden" name="component" id="input-component" value="" />
+      <input type="hidden" name="language" id="input-language" value="" />
 
-  <section class="row section pt-0">
-    <div class="col mx-auto">
-      <ul class="list-unstyled" id="search-results"></ul>
-      <ul class="list-unstyled" id="default-body">
-      {{ range $registry -}}
-        <li class="media" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
-          <div class="media-body">
-            <a href="{{ .repo }}" target="_blank" rel="noopener"><h5 class="mt-0 mb-1">{{ .title }}</h5></a>
-            {{ .description }}
-            <span class="badge badge-{{.registryType}} float-right">{{ .registryType }}</span>
-            <span class="badge badge-{{.language}} float-right mr-2">{{ .language }}</span>
-          </div>
-        </li>
-      {{ end -}}
-      </ul>
-    </div>
-  </section>
-  <script id="search-result-template" type="text/x-js-template">
-    <li class="media" data-registrytype="${registryType}" data-registrylanguage="${language}">
-      <div class="media-body">
-        <a href=${repo}><h5 class="mt-0 mb-1">${title}</h5></a>
-        ${description}
-        <span class="badge badge-${registryType} float-right">${registryType}</span>
-        <span class="badge badge-${language} float-right mr-2">${language}</span>
+      <button type="button" class="btn btn-outline-success"
+        onclick="document.getElementById('searchForm').submit();">Submit</button>
+      <button type="button" class="btn btn-outline-danger"
+        onclick="document.getElementById('search-query').value = ''; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">Reset</button>
+
+      <button class="btn btn-outline-secondary dropdown-toggle" id="languageDropdown" type="button"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</button>
+      <div class="dropdown-menu" id="languageFilter">
+        <a value="all" class="dropdown-item">Any Language</a>
+        {{ range $langs -}}
+        <a value="{{ . }}" id="language-item-{{ . }}" class="dropdown-item">{{ $languageNames.Get . | default (humanize
+          .) }}</a>
+        {{ end -}}
       </div>
-    </li>
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
-  {{ partial "script.html" (dict "src" "js/registrySearch.js") -}}
+
+      <button class="btn btn-outline-secondary dropdown-toggle" id="componentDropdown" type="button"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Type</button>
+      <div class="dropdown-menu" id="componentFilter">
+        <a value="all" class="dropdown-item">Any Component</a>
+        {{ range $types -}}
+        <a value="{{ . }}" id="component-item-{{ . }}" class="dropdown-item">{{ humanize . }}</a>
+        {{ end -}}
+      </div>
+
+    </div>
+  </form>
 </div>
+
+<div class="mx-auto">
+  <ul class="list-unstyled" id="search-results"></ul>
+  <ul class="list-unstyled" id="default-body">
+    {{ range $registry -}}
+      {{ template "registry-entry" . }}
+    {{ end -}}
+  </ul>
+</div>
+
+{{-
+  $fuseVar := (dict
+    "description" "${description}"
+    "language" "${language}"
+    "registryType" "${registryType}"
+    "repo" "${repo}"
+    "title" "${title}"
+  )
+-}}
+<script id="search-result-template" type="text/x-js-template">
+  {{ template "registry-entry" $fuseVar }}
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
+{{ partial "script.html" (dict "src" "js/registrySearch.js") -}}
+</div>
+
+{{- define "registry-entry" -}}
+<li class="registry-entry" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
+  <div class="registry-entry-body">
+    <div class="h5">
+      <a href="{{ .repo }}" target="_blank" rel="noopener">
+        {{- .title -}}
+      </a>
+    </div>
+    <span class="me-auto">
+      {{- .description | markdownify -}}
+    </span>
+    <div class="float-end">
+      {{ with .language -}}
+        <span class="badge badge-{{ . }}">{{ . }}</span>
+      {{- end }}
+      {{ with .registryType -}}
+        <span class="badge badge-{{ . }} me-1">{{ . }}</span>
+      {{- end -}}
+    </div>
+  </div>
+</li>
+{{- end -}}
diff --git a/static/refcache.json b/static/refcache.json
@@ -899,6 +899,22 @@
     "StatusCode": 206,
     "LastSeen": "2023-02-15T21:03:39.650397-05:00"
   },
+  "https://docs.sentry.io/platforms/java/performance/instrumentation/opentelemetry/": {
+    "StatusCode": 206,
+    "LastSeen": "2023-03-11T14:17:12.914539-05:00"
+  },
+  "https://docs.sentry.io/platforms/node/performance/instrumentation/opentelemetry/": {
+    "StatusCode": 206,
+    "LastSeen": "2023-03-11T14:17:18.015995-05:00"
+  },
+  "https://docs.sentry.io/platforms/python/performance/instrumentation/opentelemetry/": {
+    "StatusCode": 206,
+    "LastSeen": "2023-03-11T14:17:23.207009-05:00"
+  },
+  "https://docs.sentry.io/platforms/ruby/performance/instrumentation/opentelemetry/": {
+    "StatusCode": 206,
+    "LastSeen": "2023-03-11T14:17:28.309561-05:00"
+  },
   "https://docs.traceloop.dev": {
     "StatusCode": 206,
     "LastSeen": "2023-02-26T11:00:42.522142-08:00"
@@ -1415,6 +1431,10 @@
     "StatusCode": 200,
     "LastSeen": "2023-02-20T08:04:27.366762-05:00"
   },
+  "https://github.com/gosnmp/gosnmp": {
+    "StatusCode": 200,
+    "LastSeen": "2023-03-11T14:17:07.656637-05:00"
+  },
   "https://github.com/hashicorp/nomad-open-telemetry-getting-started": {
     "StatusCode": 200,
     "LastSeen": "2023-02-20T07:50:08.100098-05:00"