From 6808ccfc46e452178dd58e6eab4072e677fcc7f2 Mon Sep 17 00:00:00 2001 From: Peixuan Ding Date: Sun, 9 May 2021 02:05:07 -0400 Subject: [PATCH] docs: better installation style Signed-off-by: Peixuan Ding --- hack/jenkins/release_build_and_upload.sh | 6 + site/assets/scss/_variables_project.scss | 15 +- site/content/en/docs/start/_index.md | 182 +++++++++++++----- site/layouts/partials/hooks/body-end.html | 1 + site/layouts/partials/hooks/head-end.html | 3 +- site/layouts/shortcodes/quiz_button.html | 1 + site/layouts/shortcodes/quiz_instruction.html | 4 + site/layouts/shortcodes/quiz_row.html | 14 ++ site/static/js/quiz.js | 71 +++++++ site/static/js/tabs.js | 2 +- 10 files changed, 253 insertions(+), 46 deletions(-) create mode 100644 site/layouts/shortcodes/quiz_button.html create mode 100644 site/layouts/shortcodes/quiz_instruction.html create mode 100644 site/layouts/shortcodes/quiz_row.html create mode 100644 site/static/js/quiz.js diff --git a/hack/jenkins/release_build_and_upload.sh b/hack/jenkins/release_build_and_upload.sh index 701d05329f0e..86f136307f69 100755 --- a/hack/jenkins/release_build_and_upload.sh +++ b/hack/jenkins/release_build_and_upload.sh @@ -90,8 +90,14 @@ make checksum # unversioned names to avoid updating upstream Kubernetes documentation each release cp "out/minikube_${DEB_VERSION}-0_amd64.deb" out/minikube_latest_amd64.deb cp "out/minikube_${DEB_VERSION}-0_arm64.deb" out/minikube_latest_arm64.deb +cp "out/minikube-${DEB_VERSION}-0_armhf.deb" out/minikube_latest_armhf.deb +cp "out/minikube-${DEB_VERSION}-0_ppc64el.deb" out/minikube_latest_ppc64el.deb +cp "out/minikube-${DEB_VERSION}-0_s390x.deb" out/minikube_latest_s390x.deb cp "out/minikube-${RPM_VERSION}-0.x86_64.rpm" out/minikube-latest.x86_64.rpm cp "out/minikube-${RPM_VERSION}-0.aarch64.rpm" out/minikube-latest.aarch64.rpm +cp "out/minikube-${RPM_VERSION}-0.armv7hl.rpm" out/minikube-latest.armv7hl.rpm +cp "out/minikube-${RPM_VERSION}-0.ppc64le.rpm" out/minikube-latest.ppc64le.rpm +cp "out/minikube-${RPM_VERSION}-0.s390x.rpm" out/minikube-latest.s390x.rpm gsutil -m cp out/* "gs://$BUCKET/releases/$TAGNAME/" diff --git a/site/assets/scss/_variables_project.scss b/site/assets/scss/_variables_project.scss index 536b3b4a01f4..7f556f509491 100644 --- a/site/assets/scss/_variables_project.scss +++ b/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-row { + margin-bottom: 0.5rem; +} + +.option-button { + border-radius: 0.2rem !important; + margin-right: 0.2rem; +} + +.hide { + display: none !important; +} diff --git a/site/content/en/docs/start/_index.md b/site/content/en/docs/start/_index.md index afd43a16b853..027a0c6abf43 100644 --- a/site/content/en/docs/start/_index.md +++ b/site/content/en/docs/start/_index.md @@ -20,62 +20,163 @@ All you need is Docker (or similarly compatible) container or a Virtual Machine

1Installation

-{{% tabs %}} -{{% linuxtab %}} +Click on the buttons that describe your target platform: -For Linux users, we provide 3 easy download options (for each architecture): +{{% quiz_row base="" name="Operating system" %}} +{{% quiz_button option="Linux" %}} {{% quiz_button option="macOS" %}} {{% quiz_button option="Windows" %}} +{{% /quiz_row %}} -### amd64 / x86_64 +{{% 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 %}} -#### Binary download +{{% 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_button option="Debian package" %}} {{% quiz_button option="RPM package" %}} +{{% /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="Homebrew" %}} {{% quiz_button option="Binary download" %}} +{{% /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="Architecture" %}} +{{% quiz_button option="Windows Package Manager" %}} {{% quiz_button option="Chocolatey" %}} {{% quiz_button option=".exe download" %}} +{{% /quiz_row %}} + +{{% quiz_instruction type="/Linux/x86-64/Binary download" %}} ```shell - curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64 - sudo install minikube-linux-amd64 /usr/local/bin/minikube +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64 +sudo install minikube-linux-amd64 /usr/local/bin/minikube ``` +{{% /quiz_instruction %}} -#### Debian package - +{{% quiz_instruction type="/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 type="/Linux/x86-64/RPM package" %}} +```shell +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.x86-64.rpm +sudo rpm -Uvh minikube-latest.x86-64.rpm +``` +{{% /quiz_instruction %}} +{{% quiz_instruction type="/Linux/ARM64/Binary download" %}} ```shell -curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.x86_64.rpm -sudo rpm -Uvh minikube-latest.x86_64.rpm +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-arm64 +sudo install minikube-linux-arm64 /usr/local/bin/minikube ``` +{{% /quiz_instruction %}} -### arm64 / aarch64 +{{% quiz_instruction type="/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 %}} -#### Binary download +{{% quiz_instruction type="/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 %}} +{{% quiz_instruction type="/Linux/ppc64/Binary download" %}} ```shell - curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-arm64 - sudo install minikube-linux-arm64 /usr/local/bin/minikube +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-ppc64le +sudo install minikube-linux-ppc64le /usr/local/bin/minikube ``` +{{% /quiz_instruction %}} -#### Debian package +{{% quiz_instruction type="/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 type="/Linux/ppc64/RPM package" %}} ```shell -curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_arm64.deb -sudo dpkg -i minikube_latest_arm64.deb +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.ppc64el.rpm +sudo rpm -ivh minikube-latest.ppc64el.rpm ``` +{{% /quiz_instruction %}} -#### RPM package +{{% quiz_instruction type="/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 type="/Linux/S390x/Debian package" %}} ```shell -curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.aarch64.rpm -sudo rpm -Uvh minikube-latest.aarch64.rpm +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_s390x.deb +sudo dpkg -i minikube_latest_s390x.deb +``` +{{% /quiz_instruction %}} + +{{% quiz_instruction type="/Linux/S390x/RPM package" %}} +```shell +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.s390x.rpm +sudo rpm -ivh minikube-latest.s390x.rpm +``` +{{% /quiz_instruction %}} + +{{% quiz_instruction type="/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 %}} -{{% /linuxtab %}} -{{% mactab %}} +{{% quiz_instruction type="/Linux/ARMv7/Debian package" %}} +```shell +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_armhf.deb +sudo dpkg -i minikube_latest_armhf.deb +``` +{{% /quiz_instruction %}} + +{{% quiz_instruction type="/Linux/ARMv7/RPM package" %}} +```shell +curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-latest.armv7hl.rpm +sudo rpm -ivh minikube-latest.armv7hl.rpm +``` +{{% /quiz_instruction %}} -If the [Brew Package Manager](https://brew.sh/) installed: +{{% quiz_instruction type="/macOS/x86-64/Homebrew" %}} +If the [Brew Package Manager](https://brew.sh/) is installed: ```shell brew install minikube @@ -87,49 +188,44 @@ 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: - -### x86 - +{{% quiz_instruction type="/macOS/x86-64/Binary download" %}} ```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 type="/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 %}} -{{% windowstab %}} - -### Windows Package Manager - +{{% quiz_instruction type="/Windows/x86-64/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 type="/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 -Otherwise, download and run the [Windows installer](https://storage.googleapis.com/minikube/releases/latest/minikube-installer.exe) - +{{% quiz_instruction type="/Windows/x86-64/.exe download" %}} +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._ +_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 %}} -{{% /windowstab %}} -{{% /tabs %}}

2Start your cluster

diff --git a/site/layouts/partials/hooks/body-end.html b/site/layouts/partials/hooks/body-end.html index 93866b2d3d66..cabf92c90d59 100644 --- a/site/layouts/partials/hooks/body-end.html +++ b/site/layouts/partials/hooks/body-end.html @@ -1,3 +1,4 @@ + diff --git a/site/layouts/partials/hooks/head-end.html b/site/layouts/partials/hooks/head-end.html index bf082de3bd90..308555d158ac 100644 --- a/site/layouts/partials/hooks/head-end.html +++ b/site/layouts/partials/hooks/head-end.html @@ -2,4 +2,5 @@ - \ No newline at end of file + + diff --git a/site/layouts/shortcodes/quiz_button.html b/site/layouts/shortcodes/quiz_button.html new file mode 100644 index 000000000000..1100d1e92a41 --- /dev/null +++ b/site/layouts/shortcodes/quiz_button.html @@ -0,0 +1 @@ + diff --git a/site/layouts/shortcodes/quiz_instruction.html b/site/layouts/shortcodes/quiz_instruction.html new file mode 100644 index 000000000000..058718d19666 --- /dev/null +++ b/site/layouts/shortcodes/quiz_instruction.html @@ -0,0 +1,4 @@ +
+

Installation instructions:

+{{ .Inner }} +
diff --git a/site/layouts/shortcodes/quiz_row.html b/site/layouts/shortcodes/quiz_row.html new file mode 100644 index 000000000000..b278d160e3f1 --- /dev/null +++ b/site/layouts/shortcodes/quiz_row.html @@ -0,0 +1,14 @@ +{{ $level := .Get "base" | strings.Count "/" }} + +{{ $hide := "" }} +{{ if gt $level 0 }} + {{ $hide = "hide" }} +{{ end }} + +
+
+ {{ with .Get "name"}}{{.}}{{end}} +
+
{{ .Inner }}
+
+ diff --git a/site/static/js/quiz.js b/site/static/js/quiz.js new file mode 100644 index 000000000000..afc75ec6b640 --- /dev/null +++ b/site/static/js/quiz.js @@ -0,0 +1,71 @@ +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'); + // if there is only one option, auto-select that option for the user + if (buttons.length === 1) { + const btn = $(buttons[0]); + 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); + }); + const userOS = getQuizUserOS(); + const buttons = $('.option-button[data-quiz-id=\'/' + userOS + '\']'); + if (buttons.length === 1) { + const btn = $(buttons[0]); + btn.addClass('active'); + selectQuizOption(btn.attr('data-quiz-id')); + } + + } catch(e) { + console.log(e); + const elements = document.getElementsByClassName("quiz-instruction"); + for (let element of elements) { + element.classList.remove("hide"); + } + } +} + +const getQuizUserOS = () => { + let os = ['Linux', 'Mac', 'Windows']; + let userAgent = navigator.userAgent; + for (let currentOS of os) { + if (userAgent.indexOf(currentOS) !== -1) { + if (currentOS === 'Mac') { + // return the official OS name "macOS" instead + return 'macOS'; + } + return currentOS; + } + } + return 'Linux'; +} diff --git a/site/static/js/tabs.js b/site/static/js/tabs.js index 1cd97571d440..56ab6ca9b1c7 100644 --- a/site/static/js/tabs.js +++ b/site/static/js/tabs.js @@ -17,7 +17,7 @@ function initTabs() { let tabSelector = getTabSelector(this); $(this).find('div'+tabSelector).addClass('active'); }) - + $('.nav-tabs a').click(function(e){ e.preventDefault(); var tab = $(this).parent(),