Add version selection logic to dropdown

Signed-off-by: lucperkins <[email protected]>

Makefile

@@ -5,7 +5,7 @@ setup:
 	yarn
 
 serve:
-	hugo $(SERVE)
+	hugo $(SERVER)
 
 docker-serve:
 	docker run --rm -it -v $(PWD):/src -p 1313:1313 $(DOCKER_IMG) $(SERVER)

README.md

@@ -57,7 +57,8 @@ In order to add documentation for a version of etcd, you need to:
     ```bash
     cp -rf /path/to/etcd-io/etcd/Documentation /path/to/etcd-io/website/content/docs/v4.3.2
     ```
-* Remove the `README.md` file from the new folder.
+* Remove the `README.md` file from the new directory.
+* In the `_index.md` file at the root of the new directory, update the `title` metadata to reflect the new version. The title should read `etcd version <new-version>`.
 * Add the version to the `params.versions.all` array in the [`config.toml`](./config.toml) configuration file.
 * If the version is meant to be the latest version of etcd, change the `params.versions.latest` parameter to the desired new version.
 * Submit a pull request with the changes.

assets/js/app.js

@@ -4,4 +4,8 @@ document.addEventListener("DOMContentLoaded", function(e) {
   }
 
   anchors.add('.docs-content h2, .docs-content h3');
+
+  $('.dropdown').click(function() {
+    $(this).toggleClass('is-active');
+  });
 });

layouts/partials/docs/nav-panel.html

@@ -3,6 +3,7 @@
 {{ $editUrl    := printf "https://github.com/etcd-io/website/edit/master/content/%s" .File.Path }}
 {{ $latest     := site.Params.versions.latest }}
 {{ $ghUrl      := printf "https://github.com/etcd-io/etcd/releases/tag/v%s" $latest }}
+{{ $versions   := site.Params.versions.all }}
 {{ $version    := index (split .Path "/") 2 }}
 {{ $allDocs    := where site.Sections "Section" "docs" }}
 {{ $currentUrl := .RelPermalink }}
@@ -13,13 +14,42 @@
     </a>
   </div>
 
-  <div class="buttons is-centered">
-    <a class="button is-danger is-radiusless" href="/docs/v{{ $latest }}">
-      v{{ $latest }}
-    </a>
-  </div>
-
   <div class="dashboard-panel-main is-scrollable">
+    <div class="has-text-centered">
+      <div class="dropdown">
+        <div class="dropdown-trigger">
+          <button class="button is-danger is-radiusless">
+            <span>
+              <strong>
+                v{{ $latest }}
+              </strong>
+            </span>
+            <span class="icon is-small">
+              <i class="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+
+        <div class="dropdown-menu">
+          <div class="dropdown-content">
+            {{ range $versions }}
+            {{ $version  := printf "v%s" . }}
+            {{ $latest   := printf "v%s" $latest }}
+            {{ $isLatest := eq $version $latest }}
+            <a class="navbar-item" href="/docs/v{{ . }}">
+              {{ $version }}
+              {{ if $isLatest }}
+              (<strong>latest</strong>)
+              {{ end }}
+            </a>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+
     <div class="docs-panel">
       {{ range $allDocs }}
       {{ range .Sections }}

layouts/partials/javascript.html

@@ -1,3 +1,4 @@
+<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.min.js"></script>
 {{ $js := resources.Get "js/app.js" }}
-<script src="{{ $js.RelPermalink }}"></script>
+<script async src="{{ $js.RelPermalink }}"></script>