Address issues in version dropdown.

.gitignore

@@ -26,6 +26,9 @@ kpt/kpt
 # VS Code individual configurations
 .vscode/
 
+# Firebase cache
+.firebase/
+
 # Node dependencies
 node_modules/
 package-lock.json

site/index.html

@@ -10,6 +10,10 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+    />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
@@ -39,6 +43,8 @@
     <script src="//cdn.jsdelivr.net/npm/prismjs@1.22/components/prism-go.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1.22/components/prism-typescript.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/@gouch/to-title-case@2.2.1/to-title-case.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
     <!--Fallback content on 404s can go here.-->
   </body>
 </html>

site/static/css/site.css

@@ -19,18 +19,59 @@
   --pagination-title-font-size: 0px;
 }
 
+.close,
+.close:focus,
+.close:hover {
+  float: unset;
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  color: unset;
+  text-shadow: unset;
+  filter: unset;
+  opacity: unset;
+}
+
 .cover-main h1 img {
   height: 72px;
 }
 
+.cover-main blockquote {
+  border-left: unset;
+}
+
+.cover.show {
+  display: flex !important;
+}
+
+body {
+  background-color: unset;
+  line-height: unset;
+  font-family: unset;
+  font-size: unset;
+}
+h1 {
+  line-height: unset;
+}
+
+.dropdown-toggle {
+  background: var(--theme-color);
+  border: none;
+}
+
 .sidebar {
   color: rgba(255, 255, 255, 0.75);
+  font-size: 16px;
 }
 
 .sidebar-toggle {
   bottom: 0;
 }
 
+.sidebar > h1 {
+  font-size: var(--sidebar-name-font-size);
+}
+
 .sidebar > h1 img {
   height: 32px;
 }

site/static/js/config.js

@@ -11,7 +11,10 @@ window.$docsify = {
     "/*.*/sidebar.md": "/sidebar.md",
   },
   coverpage: "coverpage.md",
-  crossOriginLinks:["https://catalog.kpt.dev/"],
+  crossOriginLinks: [
+    "https://catalog.kpt.dev/",
+    "https://googlecontainertools.github.io/kpt/installation/",
+  ],
   auto2top: true,
   repo: "true",
   pagination: {

site/static/js/plugins.js

@@ -43,6 +43,23 @@ function convertFromHugo(content) {
   return content.replace(hugoHideDirectives, "").replace(hugoDirectiveTags, "");
 }
 
+async function addVersionDropdown() {
+  const sidebar = document.getElementsByClassName("sidebar").item(0);
+  const versionDropdown = `
+  <div class="dropdown">
+                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">v1.0.0-alpha.3
+                <span class="caret"></span></button>
+                <ol class="dropdown-menu">
+                <li><a href="/installation/">v1 beta 1</a></li>
+                <li><a href="https://googlecontainertools.github.io/kpt/installation/" target="_self">v0.39</a></li>
+                </ol>
+              </div>
+                `;
+  const node = document.createElement("div");
+  node.innerHTML = versionDropdown;
+  sidebar.getElementsByClassName("app-name").item(0).appendChild(node);
+}
+
 function showBookPageFooters() {
   const paginationFooters = Array.from(
     document.getElementsByClassName("docsify-pagination-container")
@@ -162,6 +179,8 @@ function localPlugins(hook, _vm) {
   // Add title to book Markdown pages based on directory structure.
   hook.beforeEach(processBookPageTitle);
 
+  hook.mounted(addVersionDropdown);
+
   // Show navigation footer for book pages.
   hook.doneEach(showBookPageFooters);