Update capibmadm cli tool installation guide

Author: shwetha-s-poojary

.github/ISSUE_TEMPLATE/release.md

@@ -15,6 +15,7 @@ After every CAPIBM major version release:
 - [ ] [Update release support data in docs](https://github.com/kubernetes-sigs/cluster-api-provider-ibmcloud/blob/main/docs/book/src/developer/release-support-guidelines.md)
 - [ ] [Update docs with reference to latest release](https://github.com/kubernetes-sigs/cluster-api-provider-ibmcloud/blob/main/README.md#compatibility-with-cluster-api-and-kubernetes-versions)
 - [ ] Update and add documentation link for new release branch in Netlify
+- [ ] Update capibmadm tool to the latest version after each new release
 - [ ] Add new presubmit job for latest release branch in [kubernetes/test-infra](https://github.com/kubernetes/test-infra/tree/master/config/jobs/kubernetes-sigs/cluster-api-provider-ibmcloud)
     - [ ] Update kubekins-e2e image to relevent Kubernetes version
 - [ ] Add E2E CI jobs for latest release branch in [ppc64le-cloud/test-infra](https://github.com/ppc64le-cloud/test-infra/blob/master/config/jobs/periodic/cluster-api-provider-ibmcloud/test-e2e-capi-ibmcloud-periodics.yaml)

docs/book/book.toml

@@ -8,7 +8,11 @@ title = "Kubernetes Cluster API Provider IBM Cloud"
 [output.html]
 curly-quotes = true
 git-repository-url = "https://sigs.k8s.io/cluster-api-provider-ibmcloud"
-additional-css = ["theme/css/custom.css"]
+additional-css = [
+    "theme/css/custom.css",
+    "theme/tabs.css"
+]
+additional-js = ["theme/tabs.js"]
 
 [output.html.redirect]
 "/agenda.html" = "https://docs.google.com/document/d/1oWnqXy1VFv0E3kovQoZfS6IlVP0L4eaQsN-2HYC_6_A"

docs/book/src/topics/capibmadm/index.md

@@ -4,6 +4,12 @@ Kubernetes Cluster API Provider IBM Cloud Management Utility
 
 ## Install capibmadm
 
+<div class="tabs">
+<button class ="tablink" data-tab="linux-mac">Linux/MacOS</button>
+<button class ="tablink" data-tab="windows">Windows</button>
+
+<div id="linux-mac" class="tabcontent">
+
 #### Install capibmadm binary with curl on Linux / MacOS
 Run the following command to download the capibmadm binary:
 
@@ -23,6 +29,9 @@ Test to ensure the version you installed is up-to-date:
 capibmadm version -o short
 ```
 
+</div>
+<div id="windows" class="tabcontent">
+
 #### Install capibmadm binary with curl on Windows using PowerShell
 Go to the working directory where you want capibmadm downloaded.
 
@@ -43,5 +52,8 @@ Test to ensure the version you installed is up-to-date:
 capibmadm.exe version -o short
 ```
 
+</div>
+</div>
+
 ## [1. PowerVS commands](./powervs/index.md)
 ## [2. VPC commands](./vpc/index.md)

docs/book/theme/tabs.css

@@ -0,0 +1,24 @@
+.tabs {
+    margin: 1em 0;
+}
+
+.tablink {
+    background-color: var(--table-alternate-bg);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border: none;
+    font-size: 1.6rem;
+    line-height: 1.45em;
+}
+
+.tablink.active {
+    background-color: var(--table-header-bg);
+    font-weight: bold;
+    border: 1px solid #ccc;
+}
+
+.tabcontent {
+    display: none;
+    padding: 20px;
+    border: 1px solid #ccc;
+}

docs/book/theme/tabs.js

@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".tabs").forEach(tabBlock => {
+    const links = tabBlock.querySelectorAll(".tablink");
+    const contents = tabBlock.querySelectorAll(".tabcontent");
+
+    // show first by default
+    if (links.length > 0 && contents.length > 0) {
+      links[0].classList.add("active");
+      contents[0].style.display = "block";
+    }
+
+    links.forEach(link => {
+      link.addEventListener("click", () => {
+        // hide all
+        contents.forEach(c => c.style.display = "none");
+        links.forEach(l => l.classList.remove("active"));
+
+        // show clicked
+        const id = link.getAttribute("data-tab");
+        tabBlock.querySelector("#" + id).style.display = "block";
+        link.classList.add("active");
+      });
+    });
+  });
+});