Add release selector to docs

- Create new partial to display links to the Nightly and  LTS release.
- Disable breadcrumb and use that space for the links.

.gitignore

@@ -6,6 +6,7 @@ node_modules/
 resources/_gen/
 public/
 assets/js/version-switcher.js
+assets/js/release-switcher.js
 
 # IDEs
 .vscode

assets/scss/_styles_project.scss

@@ -122,6 +122,12 @@ pre {
    }
 }
 
+/* Hide releases disclaimer by default, dinamically show it with js */
+
+#release-switcher { visibility: hidden }
+#nightly-release-li { visibility: hidden }
+#lts-release-li { visibility: hidden }
+
 /* Consistent borders around code blocks */
 
 pre { border: 1px solid $light;}

config.yaml

@@ -48,7 +48,7 @@ params:
   ui:
     sidebar_menu_compact: false
     sidebar_menu_foldable: true
-    breadcrumb_disable: false
+    breadcrumb_disable: true
     sidebar_search_disable: false
     navbar_logo: true
     footer_about_disable: false

content/en/docs/Installation/pipelines.md

@@ -8,7 +8,7 @@ description: >
 ---
 -->
 
-{{% readfile "/docs/Pipelines/install.md" %}}
+{{< readfile "/docs/Pipelines/install.md" >}}
 
 ---
 {{< card  >}}

layouts/docs/baseof.html

@@ -20,6 +20,9 @@
           </aside>
           <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
             {{ partial "version-banner.html" . }}
+			      {{ if strings.Contains .Page.RelPermalink "/docs/" -}}
+              {{ partial "release-selector.html" }}
+            {{ end -}}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}
           </main>

layouts/partials/release-selector.html

@@ -0,0 +1,20 @@
+{{ $jsRelSwitcher := resources.Get "js/release-switcher.js" }}
+{{ $jsRelSwitcher := $jsRelSwitcher | fingerprint }}
+<script src="{{ $jsRelSwitcher.RelPermalink }}" integrity="{{ $jsRelSwitcher.Data.Integrity }}"></script>
+<nav class="td-breadcrumbs td-breadcrumbs__single" id="release-switcher">
+  <ol class="breadcrumb font-weight-bold">
+    <li id="latest-release-li" class="breadcrumb-item active">
+      Documentation for latest release
+    </li>
+
+    <li id="nightly-release-li" class="breadcrumb-item">
+      <a id="nightly-release-link" href="#">Go to Nightly Release</a>
+    </li>
+
+    <li id="lts-release-li" class="breadcrumb-item">
+      <a id="lts-release-link" href="#">Go to Latest LTS release</a>
+    </li>
+  </ol>
+  <script>findReleases()</script>
+</nav>
+

sync/config/pipelines.yaml

@@ -394,8 +394,4 @@ tags:
       include: ['*.md']
       exclude:
       - api-spec.md
-      - deprecations.md
-      - install.md
-      - runs.md
-      - tekton-bundle-contracts.md
       - tutorial.md

sync/sync.py

@@ -500,6 +500,8 @@ def sync(config_folder, update_cache):
     versions = get_versions(config)
     # create version switcher script
     create_resource(JS_ASSET_DIR, "version-switcher.js", versions)
+    # create release switcher script
+    create_resource(JS_ASSET_DIR, "release-switcher.js", versions)
     # create index for vault
     create_resource(VAULT_DIR, FOLDER_INDEX, versions)
 

templates/release-switcher.js.template

@@ -0,0 +1,62 @@
+if (typeof componentVersions === 'undefined') {
+  const componentVersions = JSON.parse('{{ component_versions_json }}');
+}
+
+const getComponentReleases = () => {
+  const pathName = window.location.pathname;
+  const componentVersionStr = pathName.split("/")[2];
+  const componentRawName = componentVersionStr.split("-")[0];
+  let latestVersion;
+  let nightlyVersion;
+  let latestLTS;
+  let componentName;
+
+  componentVersions.forEach((componentVersion) => {
+    if (componentVersion.name.toLowerCase() === componentRawName) {
+      componentName = componentVersion.name;
+      const versions = componentVersion.tags;
+      latestVersion = versions[0].displayName;
+      if (versions.length > 1) {
+        nightlyVersion = versions[versions.length - 1].displayName;
+      }
+      versions.forEach((version) => {
+        if (version.displayName.toLowerCase().includes('lts') && !latestLTS) {
+          latestLTS = version.displayName;
+        }
+      });
+    }
+  });
+  return {
+    name: componentName,
+    latest: latestVersion,
+    nightly: nightlyVersion,
+    lts: latestLTS,
+  };
+};
+
+const findReleases = () => {
+  const componentReleases = getComponentReleases();
+
+  const releasesNode = document.getElementById('release-switcher');
+  const latestNode = document.getElementById('latest-release-li');
+  const nightlyLiNode = document.getElementById('nightly-release-li');
+  const nightlyNode = document.getElementById('nightly-release-link');
+  const ltsLiNode = document.getElementById('lts-release-li');
+  const ltsNode = document.getElementById('lts-release-link');
+
+  if (componentReleases.name) {
+    let nightlyURL = `/vault/${componentReleases.name}-${componentReleases.nightly}`;
+    let ltsURL = `/vault/${componentReleases.name}-${componentReleases.lts}`;
+    releasesNode.style.visibility = 'visible';
+    latestNode.innerText = `Documentation for ${componentReleases.name}-${componentReleases.latest}`;
+    if (componentReleases.nightly) {
+      nightlyLiNode.style.visibility = 'visible';
+      nightlyNode.setAttribute('href', nightlyURL.toLowerCase());
+    }
+    if (componentReleases.lts) {
+      ltsLiNode.style.visibility = 'visible';
+      ltsURL = (componentReleases.lts == componentReleases.latest) ? '#' : ltsURL.toLowerCase();
+      ltsNode.setAttribute('href', ltsURL);
+    }
+  }
+};