Merge pull request #11399 from dinever/installer-options

Implement a quiz-style installation instructions

netlify.toml

@@ -4,7 +4,7 @@ publish = "site/public/"
 command = "pwd && cd themes/docsy && git submodule update -f --init && cd ../.. && hugo"
 
 [build.environment]
-HUGO_VERSION = "0.68.3"
+HUGO_VERSION = "0.83.1"
 
 [context.production.environment]
 HUGO_ENV = "production"

site/assets/scss/_variables_project.scss

@@ -23,7 +23,7 @@ $gray-800: #333 !default;
 $gray-900: #222 !default;
 $black: #000 !default;
 
-$primary: #f2771a !default;
+$primary: $mk-dark !default;
 $primary-light: $mk-light;
 $secondary: #403F4C;
 $success: #3772FF !default;
@@ -228,3 +228,16 @@ div.td-content {
 div.code-toolbar > .toolbar {
     top: -.3em !important;
 }
+
+.option-button {
+    border-radius: 0.2rem !important;
+    margin-right: 0.2rem;
+}
+
+.hide {
+    display: none !important;
+}
+
+.card-body-blue {
+    background: #f3f9fa;
+}

site/content/en/docs/start/_index.md

@@ -20,61 +20,150 @@ All you need is Docker (or similarly compatible) container or a Virtual Machine
 
 <h2 class="step"><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary">1</strong></span>Installation</h2>
 
-{{% tabs %}}
+{{% card %}}
-{{% linuxtab %}}
 
-For Linux users, we provide 3 easy download options (for each architecture):
+Click on the buttons that describe your target platform. For other architectures, see [the release page](https://github.com/kubernetes/minikube/releases/latest) for a complete list of minikube binaries.
 
-### amd64 / x86_64
+{{% quiz_row base="" name="Operating system" %}}
+{{% quiz_button option="Linux" %}} {{% quiz_button option="macOS" %}} {{% quiz_button option="Windows" %}}
+{{% /quiz_row %}}
 
-#### Binary download
+{{% quiz_row base="/Linux" name="Architecture" %}}
+{{% quiz_button option="x86-64" %}} {{% quiz_button option="ARM64" %}} {{% quiz_button option="ARMv7" %}} {{% quiz_button option="ppc64" %}} {{% quiz_button option="S390x" %}}
+{{% /quiz_row %}}
 
+{{% quiz_row base="/Linux/x86-64" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}} {{% quiz_button option="Debian package" %}} {{% quiz_button option="RPM package" %}}
+{{% /quiz_row %}}
 
+{{% quiz_row base="/Linux/ARM64" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}} {{% quiz_button option="Debian package" %}} {{% quiz_button option="RPM package" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/Linux/ppc64" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/Linux/S390x" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/Linux/ARMv7" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/macOS" name="Architecture" %}}
+{{% quiz_button option="x86-64" %}} {{% quiz_button option="ARM64" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/macOS/x86-64" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}} {{% quiz_button option="Homebrew" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/macOS/ARM64" name="Installer type" %}}
+{{% quiz_button option="Binary download" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/Windows" name="Architecture" %}}
+{{% quiz_button option="x86-64" %}}
+{{% /quiz_row %}}
+
+{{% quiz_row base="/Windows/x86-64" name="Installer type" %}}
+{{% quiz_button option=".exe download" %}} {{% quiz_button option="Windows Package Manager" %}} {{% quiz_button option="Chocolatey" %}}
+{{% /quiz_row %}}
+
+{{% quiz_instruction id="/Linux/x86-64/Binary download" %}}
 ```shell
- curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
- sudo install minikube-linux-amd64 /usr/local/bin/minikube
+sudo install minikube-linux-amd64 /usr/local/bin/minikube
 ```
+{{% /quiz_instruction %}}
 
-#### Debian package
+{{% quiz_instruction id="/Linux/x86-64/Debian package" %}}
-
 ```shell
 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_amd64.deb
 sudo dpkg -i minikube_latest_amd64.deb
 ```
+{{% /quiz_instruction %}}
 
-#### RPM package
+{{% quiz_instruction id="/Linux/x86-64/RPM package" %}}
-
 ```shell
-curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.x86_64.rpm
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.x86-64.rpm
-sudo rpm -Uvh minikube-latest.x86_64.rpm
+sudo rpm -Uvh minikube-latest.x86-64.rpm
 ```
+{{% /quiz_instruction %}}
 
-### arm64 / aarch64
+{{% quiz_instruction id="/Linux/ARM64/Binary download" %}}
-
-#### Binary download
-
 ```shell
- curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-arm64
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-arm64
- sudo install minikube-linux-arm64 /usr/local/bin/minikube
+sudo install minikube-linux-arm64 /usr/local/bin/minikube
 ```
+{{% /quiz_instruction %}}
 
-#### Debian package
+{{% quiz_instruction id="/Linux/ARM64/Debian package" %}}
-
 ```shell
 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_arm64.deb
 sudo dpkg -i minikube_latest_arm64.deb
 ```
+{{% /quiz_instruction %}}
 
-#### RPM package
+{{% quiz_instruction id="/Linux/ARM64/RPM package" %}}
-
 ```shell
 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.aarch64.rpm
 sudo rpm -Uvh minikube-latest.aarch64.rpm
 ```
+{{% /quiz_instruction %}}
 
-{{% /linuxtab %}}
+{{% quiz_instruction id="/Linux/ppc64/Binary download" %}}
-{{% mactab %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-ppc64le
+sudo install minikube-linux-ppc64le /usr/local/bin/minikube
+```
+{{% /quiz_instruction %}}
 
+{{% quiz_instruction id="/Linux/ppc64/Debian package" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_ppc64le.deb
+sudo dpkg -i minikube_latest_ppc64le.deb
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/Linux/ppc64/RPM package" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.ppc64el.rpm
+sudo rpm -Uvh minikube-latest.ppc64el.rpm
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/Linux/S390x/Binary download" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-s390x
+sudo install minikube-linux-s390x /usr/local/bin/minikube
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/Linux/S390x/Debian package" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_s390x.deb
+sudo dpkg -i minikube_latest_s390x.deb
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/Linux/S390x/RPM package" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.s390x.rpm
+sudo rpm -Uvh minikube-latest.s390x.rpm
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/Linux/ARMv7/Binary download" %}}
+```shell
+curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-arm
+sudo install minikube-linux-arm /usr/local/bin/minikube
+```
+{{% /quiz_instruction %}}
+
+{{% quiz_instruction id="/macOS/x86-64/Homebrew" %}}
 If the [Brew Package Manager](https://brew.sh/) is installed:
 
 ```shell
@@ -87,49 +176,46 @@ If `which minikube` fails after installation via brew, you may have to remove th
 brew unlink minikube
 brew link minikube
 ```
+{{% /quiz_instruction %}}
 
-Otherwise, download minikube directly:
+{{% quiz_instruction id="/macOS/x86-64/Binary download" %}}
-
-### x86
-
 ```shell
 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-darwin-amd64
 sudo install minikube-darwin-amd64 /usr/local/bin/minikube
 ```
+{{% /quiz_instruction %}}
 
-### ARM
+{{% quiz_instruction id="/macOS/ARM64/Binary download" %}}
-
 ```shell
 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-darwin-arm64
 sudo install minikube-darwin-arm64 /usr/local/bin/minikube
 ```
+{{% /quiz_instruction %}}
 
-{{% /mactab %}}
+{{% quiz_instruction id="/Windows/x86-64/Windows Package Manager" %}}
-{{% windowstab %}}
-
-### Windows Package Manager
-
 If the [Windows Package Manager](https://docs.microsoft.com/en-us/windows/package-manager/) is installed, use the following command to install minikube:
 
 ```shell
 winget install minikube
 ```
+{{% /quiz_instruction %}}
 
-### Chocolatey
+{{% quiz_instruction id="/Windows/x86-64/Chocolatey" %}}
 If the [Chocolatey Package Manager](https://chocolatey.org/) is installed, use the following command:
 
 ```shell
 choco install minikube
 ```
+{{% /quiz_instruction %}}
 
-### Stand-alone Windows Installer
+{{% quiz_instruction id="/Windows/x86-64/.exe download" %}}
-Otherwise, download and run the [Windows installer](https://storage.googleapis.com/minikube/releases/latest/minikube-installer.exe)
+Download and run the stand-alone [minikube Windows installer](https://storage.googleapis.com/minikube/releases/latest/minikube-installer.exe).
-
 
 _If you used a CLI to perform the installation, you will need to close that CLI and open a new one before proceeding._
+{{% /quiz_instruction %}}
+
+{{% /card %}}
 
-{{% /windowstab %}}
-{{% /tabs %}}
 
 <h2 class="step"><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary">2</strong></span>Start your cluster</h2>
 

site/layouts/partials/hooks/body-end.html

@@ -1,3 +1,4 @@
 <!-- start: minikube override body-end partial -->
 <script language="javascript">initTabs();</script>
+<script language="javascript">initQuiz();</script>
 <!-- end: minikube override body-end partial -->

site/layouts/partials/hooks/head-end.html

@@ -2,4 +2,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Lora&family=Open+Sans:wght@600;700&display=swap" rel="stylesheet">
 <link href="/css/tabs.css" rel="stylesheet">
 <script src="/js/tabs.js"></script>
+<script src="/js/quiz.js"></script>
 <!-- end: minikube override head-end partial -->

site/layouts/shortcodes/card.html

@@ -0,0 +1 @@
+<div class="card"><div class="card-body card-body-blue">{{ .Inner }}</div></div>

site/layouts/shortcodes/quiz_button.html

@@ -0,0 +1 @@
+<button data-quiz-id="{{ .Parent.Get "base" }}/{{ .Get "option" }}" type="button" class="btn btn-outline-primary option-button">{{ .Get "option" }}</button>

site/layouts/shortcodes/quiz_instruction.html

@@ -0,0 +1,11 @@
+{{ $id := .Get "id" }}
+{{ $selected := split $id "/" }}
+
+{{ $os := index $selected 1 }}
+{{ $arch := index $selected 2 }}
+{{ $installer := index $selected 3 }}
+
+<div data-quiz-id="{{ with .Get "id"}}{{.}}{{end}}" class="quiz-instruction">
+<p>To install minikube on <b>{{ $arch }}</b> <b>{{ $os }}</b> using <b>{{ replace $installer "Binary" "binary" }}</b>:</p>
+{{ .Inner }}
+</div>

site/layouts/shortcodes/quiz_row.html

@@ -0,0 +1,8 @@
+{{ $level := .Get "base" | strings.Count "/" }}
+
+<div data-quiz-id="{{ .Get "base" }}" data-level="{{ $level }}" class="row option-row hide">
+    <div class="col-lg-2 my-auto">
+        <p>{{ with .Get "name"}}{{.}}{{end}}</p>
+    </div>
+    <div class="col-lg-10">{{ .Inner }}</div>
+</div>

site/static/js/quiz.js

@@ -0,0 +1,57 @@
+function selectQuizOption(selectedId) {
+    const currentLevel = selectedId.split('/').length - 1;
+    $('.option-row').each(function (i) {
+        const rowId = $(this).attr('data-quiz-id');
+        // don't hide option rows if it has a lower level
+        // e.g. when clicking "x86_64" under Linux, we don't want to hide the operating system row
+        if ($(this).attr('data-level') < currentLevel) {
+            return;
+        }
+        if (rowId === selectedId) {
+            $(this).removeClass('hide');
+            $(this).find('.option-button').removeClass('active');
+            return;
+        }
+        // hide all other option rows
+        $(this).addClass('hide');
+    });
+    // hide other answers
+    $('.quiz-instruction').addClass('hide');
+    // show the selected answer
+    $('.quiz-instruction[data-quiz-id=\'' + selectedId + '\']').removeClass('hide');
+
+    const buttons = $('.option-row[data-quiz-id=\'' + selectedId + '\']').find('.option-button');
+    // auto-select the first option for the user, to reduce the number of clicks
+    if (buttons.length > 0) {
+        const btn = buttons.first();
+        btn.addClass('active');
+        selectQuizOption(btn.attr('data-quiz-id'));
+    }
+}
+
+function initQuiz() {
+    try {
+        $('.option-button').click(function(e) {
+            $(this).parent().find('.option-button').removeClass('active');
+            $(this).addClass('active');
+            const dataContainerId = $(this).attr('data-quiz-id');
+
+            selectQuizOption(dataContainerId);
+        });
+        let userOS = getUserOS();
+        if (userOS === 'Mac') {
+            // use the name "macOS" to match the button
+            userOS = 'macOS';
+        }
+        $('.option-row[data-level=0]').removeClass('hide');
+        // auto-select the OS for user
+        const btn = $('.option-button[data-quiz-id=\'/' + userOS + '\']').first();
+        btn.addClass('active');
+        selectQuizOption(btn.attr('data-quiz-id'));
+    } catch(e) {
+        const elements = document.getElementsByClassName("quiz-instruction");
+        for (let element of elements) {
+            element.classList.remove("hide");
+        }
+    }
+}