From da7cd111cb9a9b15ffaf6dc1306d59270cf53809 Mon Sep 17 00:00:00 2001
From: Pete Lumbis <pete@upbound.io>
Date: Tue, 13 Sep 2022 17:35:20 -0400
Subject: [PATCH] new template components specific to docs pages

Signed-off-by: Pete Lumbis <pete@upbound.io>
---
 .../layouts/partials/docs/github-edit.html    |   7 +
 .../layouts/partials/docs/js-footer.html      | 136 ++++++++++++++++++
 .../layouts/partials/docs/version-alert.html  |  22 +++
 .../docs/versions-dropdown-selector.html      |  63 ++++++++
 4 files changed, 228 insertions(+)
 create mode 100644 themes/crossplane/layouts/partials/docs/github-edit.html
 create mode 100644 themes/crossplane/layouts/partials/docs/js-footer.html
 create mode 100644 themes/crossplane/layouts/partials/docs/version-alert.html
 create mode 100644 themes/crossplane/layouts/partials/docs/versions-dropdown-selector.html

diff --git a/themes/crossplane/layouts/partials/docs/github-edit.html b/themes/crossplane/layouts/partials/docs/github-edit.html
new file mode 100644
index 00000000..a189a5d8
--- /dev/null
+++ b/themes/crossplane/layouts/partials/docs/github-edit.html
@@ -0,0 +1,7 @@
+<div class="docs-actions">
+    {{- if eq .Page.Params.version "master" -}}
+        <a id="edit" href="{{ .Site.Params.repoLink }}/tree/master/docs/{{ .File.LogicalName }}"><img src="{{ "/images/github-teal.svg" | absURL }}" />Edit on GitHub</a>
+    {{- else -}}
+        <a id="edit" href="{{ .Site.Params.repoLink }}/tree/release-{{string .Page.Params.version}}/docs/{{ .File.LogicalName }}"><img src="{{ "/images/github-teal.svg" | absURL }}" />Edit on GitHub</a>
+    {{- end -}}
+</div>
\ No newline at end of file
diff --git a/themes/crossplane/layouts/partials/docs/js-footer.html b/themes/crossplane/layouts/partials/docs/js-footer.html
new file mode 100644
index 00000000..2d0840d4
--- /dev/null
+++ b/themes/crossplane/layouts/partials/docs/js-footer.html
@@ -0,0 +1,136 @@
+<script>
+    var menu = [];
+
+  {{- $version_pages := where .Site.Pages "Params.version" .Page.Params.version -}}
+  {{- $current := . -}}
+
+  {{- $version_sections := slice -}}
+
+  {{- range $version_pages.GroupBy "CurrentSection" -}}
+    {{- if ne .Key .Key.FirstSection -}}
+      {{- $version_sections = $version_sections | append .Key -}}
+    {{- end -}}
+  {{- end -}}
+
+
+  {{- $version_sections = sort $version_sections.ByWeight -}}
+
+  {{- $page_map := dict -}}
+  {{- range $version_sections -}}
+      {{- $page_map = merge $page_map (dict .Permalink slice ) -}}
+  {{- end -}}
+
+
+
+    {{- range $version_pages -}}
+      {{- $page_section := index $page_map .CurrentSection.Permalink -}}
+      {{- if ne .Permalink .CurrentSection.Permalink -}}
+        {{- $page_section = $page_section | append . -}}
+        {{- $page_map = merge $page_map (dict .CurrentSection.Permalink $page_section) -}}
+      {{- end -}}
+    {{- end -}}
+
+    {{- range $version_sections -}}
+      {{- $this_sections_pages := index $page_map .Permalink -}}
+        {{- $page_dict := dict "name" .Title "url" .Permalink "current" (eq . $current) "childCurrent" false "children" (slice) -}}
+
+
+        {{ if ne (len $this_sections_pages) 0 }}
+            {{- range $this_sections_pages.ByWeight -}}
+            {{- $children_dict := dict "name" .Title "url" .Permalink "current" (eq . $current) -}}
+            {{- $child_list := index $page_dict "children" -}}
+            {{- $child_list = $child_list | append $children_dict -}}
+            {{- $page_dict = merge $page_dict (dict "children" $child_list) -}}
+
+            {{ if eq . $current }}
+                {{ $page_dict = merge $page_dict (dict "childCurrent" true) }}
+                {{ end }}
+            {{- end -}}
+        {{ end }}
+
+
+        menu.push({{- ($page_dict | jsonify) | safeJS -}})
+    {{ end }}
+
+    function getEntry(item) {
+        var itemDom = document.createElement('li');
+
+        if (item.current) {
+            itemDom.innerHTML = item.name;
+            itemDom.classList.add('current');
+        } else {
+            itemDom.innerHTML = '<a href="' + item.url + '">' + item.name + '</a>';
+        }
+
+        return itemDom;
+    }
+
+    // Flush css changes as explained in: https://stackoverflow.com/a/34726346
+    // and more completely: https://stackoverflow.com/a/6956049
+    function flushCss(element) {
+        element.offsetHeight;
+    }
+
+    function addArrow(itemDom) {
+        var arrowDom = document.createElement('a');
+        arrowDom.classList.add('arrow');
+        arrowDom.innerHTML = '<div />';
+        arrowDom.onclick = function(itemDom) {
+            return function () {
+                var MAIN_ITEM_HEIGHT = 59;
+                var BOTTOM_PADDING = 16;
+
+                // Calculated full height of the opened list
+                var fullHeight = MAIN_ITEM_HEIGHT + BOTTOM_PADDING + itemDom.lastChild.clientHeight + 'px';
+
+                itemDom.classList.toggle('open');
+
+                if (itemDom.classList.contains('open')) {
+                    itemDom.style.height = fullHeight;
+                } else {
+                    // If the list height is auto we have to set it to fullHeight
+                    // without tranistion before we shrink it to collapsed height
+                    if (itemDom.style.height === 'auto') {
+                        itemDom.style.transition = 'none';
+                        itemDom.style.height = fullHeight;
+                        flushCss(itemDom);
+                        itemDom.style.transition = '';
+                    }
+                    itemDom.style.height = '59px';
+                }
+
+                return false;
+            };
+        }(itemDom);
+        itemDom.appendChild(arrowDom);
+
+        if ((item.current && item.children) || item.childCurrent) {
+            itemDom.classList.add('open');
+            itemDom.style.height = 'auto';
+        } else {
+            itemDom.style.height = '59px';
+        }
+    }
+
+    var menuDom = document.getElementById('docs-ul');
+    for (var i = 0; i < menu.length; i++) {
+        var item = menu[i];
+        var itemDom = getEntry(item);
+
+        if (item.childCurrent) {
+            itemDom.classList.add('childCurrent');
+        }
+
+        if (item.children) {
+            addArrow(itemDom);
+            itemDom.classList.add('children');
+            var children = document.createElement('ul');
+            for (var j = 0; j < item.children.length; j++) {
+                children.appendChild(getEntry(item.children[j]));
+            }
+            itemDom.appendChild(children);
+        }
+        menuDom.appendChild(itemDom);
+    }
+
+  </script>
\ No newline at end of file
diff --git a/themes/crossplane/layouts/partials/docs/version-alert.html b/themes/crossplane/layouts/partials/docs/version-alert.html
new file mode 100644
index 00000000..1d26357b
--- /dev/null
+++ b/themes/crossplane/layouts/partials/docs/version-alert.html
@@ -0,0 +1,22 @@
+{{- if eq .Page.Params.version "master" -}}
+<div class="alert master">
+    <p>
+        <b>PLEASE NOTE</b>: This document applies to an <b>unreleased</b> version of Crossplane. It is strongly recommended that you only use official releases of Crossplane, as unreleased versions are subject to changes and incompatibilities that will not be supported in the official releases.
+    </p>
+    <p>
+        If you are using an official release version of Crossplane, you should refer to the documentation for your specific version.
+    </p>
+    <strong>
+        Documentation for other releases can be found by using the version selector in the top right of any doc page.
+    </strong>
+</div>
+{{- else if lt .Page.Params.version .Site.Params.latest -}}
+<div class="alert old">
+    <p>
+        <b>PLEASE NOTE</b>: This document applies to version {{ .Page.Params.version }} and not to the latest release {{.Site.Params.latest}}
+    </p>
+    <strong>
+        Documentation for other releases can be found by using the version selector in the top right of any doc page.
+    </strong>
+</div>
+{{- end -}}
diff --git a/themes/crossplane/layouts/partials/docs/versions-dropdown-selector.html b/themes/crossplane/layouts/partials/docs/versions-dropdown-selector.html
new file mode 100644
index 00000000..83465be2
--- /dev/null
+++ b/themes/crossplane/layouts/partials/docs/versions-dropdown-selector.html
@@ -0,0 +1,63 @@
+{{ $versionList := slice }}
+{{ $master_ver := false }}
+
+<!-- get all the versions and break out semver order -->
+{{ range .Site.Sections }}
+    {{ if eq .Page.Params.version "master" }}
+        <!-- note that master is a version but don't try to sort it -->
+        {{ $master_ver = true }}
+    {{ else if ne .Page.Params.version nil }}
+        {{/* Semver slicing from https://discourse.gohugo.io/t/sort-strings-based-on-semver/14425 */}}
+        {{- $ver_major_minor := (float (replaceRE "([0-9]+\\.[0-9]+).*" "${1}" .Page.Params.version)) -}}
+        {{- $ver_micro_str := (replaceRE "[0-9]+\\.[0-9]+(.*)" "${1}" .Page.Params.version | replaceRE "-DEV" "-0.01") -}}
+        {{- $ver_micro := (div (float (or $ver_micro_str "0")) 100.00) -}}
+        {{- $ver_float := (add $ver_major_minor $ver_micro) -}}
+        {{- $versionList = $versionList | append $ver_float -}}
+    {{ end }}
+{{ end }}
+
+<!-- throw each semver into a dict so it can be sorted -->
+{{ $version_dict := slice }}
+{{ range (uniq $versionList) }}
+    {{ $version_dict = $version_dict | append (dict "ver" .)}}
+{{ end }}
+
+<!-- sort the semver dict from latest to oldest -->
+{{ $sorted_list := slice }}
+{{ range sort $version_dict "ver" "desc" }}
+    {{ range $k, $v := . }}
+        {{ $sorted_list = $sorted_list | append $v }}
+    {{ end }}
+{{ end }}
+
+{{ $cur_ver := .Page.Params.version }}
+<div id="docs-header">
+    <div>
+        <h1>Documentation</h1>
+        {{ if eq .Site.Params.latest $cur_ver }}
+            <div class="versions latest">
+        {{ else }}
+            <div class="versions">
+        {{ end }}
+        <div><div><select onchange="window.location.href = this.value">
+            {{ $master_url := replace (replace .Page.RelPermalink .Page.Params.version "master") "v" "" }}
+            {{ if $master_ver }}
+                {{ if eq .Page.Params.version $cur_ver }}
+                    <option selected="" value="{{ $master_url | absURL }}">Crossplane master</option>
+                {{ else }}
+                    <option value="{{ .Permalink }}">Crossplane master</option>
+                {{ end }}
+            {{ end }}
+            {{ range $sorted_list }}
+                {{ range where (where $.Site.Pages "Title" $.Title) ".Page.Params.version" . }}
+                    {{ if eq .Page.Params.version $cur_ver }}
+                        <option selected="" value="{{ .Permalink }}">Crossplane v{{.Page.Params.version}}</option>
+                    {{ else }}
+                        <option value="{{ .Permalink }}">Crossplane v{{.Page.Params.version}}</option>
+                    {{ end }}
+                {{ end }}
+            {{ end }}
+        </select></div></div>
+        </div>
+    </div>
+</div>