Implement a quiz-style installation instructions

[dinever]

Hi,

This PR fixes #10353, see #10353 (comment)

The idea is to add a "quiz" style installation page. Inspired by CUDA and PyTorch:

CUDA	PyTorch

Showcase:

Some features:

• Since this style is more scalable, I've added ARMv7, ppc64 and S390x architecture under Linux as well
• If a row has only one option, it's automatically selected. e.g. Windows -> x86_64
  
• The first row (OS) is automatically selected based on the user's OS

Would love to hear some feedback! Thanks!

[k8s-ci-robot]

Hi @dinever. Thanks for your PR.

I'm waiting for a kubernetes member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[minikube-bot]

Can one of the admins verify this patch?

[dinever]

I don't think this primary color is actually used anywhere, and it's orange. So I changed it to our theme color which is the k8s blue.

[medyagh]

@dinever thank you very much for taking this task ! I am so happy to see this page getting simplified,
btw the netlify site build is failing, https://app.netlify.com/sites/kubernetes-sigs-minikube/deploys/609ccc2bb8a7a400089227d0

[dinever]

@dinever thank you very much for taking this task ! I am so happy to see this page getting simplified,
btw the netlify site build is failing, https://app.netlify.com/sites/kubernetes-sigs-minikube/deploys/609ccc2bb8a7a400089227d0

Thanks! I've fixed the build failure.

I have to upgrade our Hugo version from 0.68.3 to 0.74.3since I need to use thestrings.Count` template function.

The site is now available for preview at: https://deploy-preview-11399--kubernetes-sigs-minikube.netlify.app/docs/start/

Thanks!

[k8s-ci-robot]

@dinever: PR needs rebase.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[medyagh]

@dinever thank you very much this looks much much better ! Is it possible that we have a default case on first view ?
For example in case of Linux show x86 binary

And also we used to have an auto detection for Mac and Linux and windows.... Does this pr preserve that ?

[dinever]

@dinever thank you very much this looks much much better ! Is it possible that we have a default case on first view ?
For example in case of Linux show x86 binary

And also we used to have an auto detection for Mac and Linux and windows.... Does this pr preserve that ?

Thanks!

It auto-detects the OS and chooses it for the user. I've tested on Linux and macOS and the auto-detection worked as expected. Will test on Windows, too.

Is it possible that we have a default case on first view ?

Sounds good. I can make it go one step further:

1. If user OS is Linux: default to Linux -> x86 -> binary
2. If user OS is macOS: default to macOS -> x86 -> binary
3. If user OS is Windows: default to Windows -> x86 -> .exe download
4. If user OS can't be detected: default to Linux -> x86 -> binary

[dinever]

Hi @medyagh,

I've pushed the latest commit cc0d065 to make sure the first option of each row is auto-selected (OS->x86->binary download). In addition, I've confirmed that OS auto-detection works for all 3 platforms. This way we can minimize the number of clicks users need to perform.

Please see the following GIF for a quick demo, and feel to try it at https://deploy-preview-11399--kubernetes-sigs-minikube.netlify.app/docs/start/. Thanks a lot for the feedback!

[medyagh]

thank you very much @dinever it looks great,

only thing is, possible to make the whole Install Section have a different background color simmilar to old way ? a light green/blue-ish ?

btw in another note, not related to this PR but I wish our Boxes were not too long
for example the gray box for minikube start becomes very very long

[medyagh]

do u mind also pasting screenshot for a user who has disabled JavaScript, will it still have an acceptable look in case of no javascript ?

[medyagh]

@dinever here is the screenshot without Javascript, could we make it in a way that a user without javascript can see the default page (even if it is ugly) ?

[dinever]

Hi all,

Thanks for the feedback! I've pushed the latest commits:

1. ed78279: Update Hugo version to the latest 0.83.1 since I needed some template functions.
2. a7d8a06: Reuse the existing getUserOS from tabs.js
3. d50e861: Wrap the installation section within a blue card:
   
4. 120925e: Revert the changes in release_build_and_upload.sh
5. d29d0a8: Make sure the page renders acceptable result when JS is disabled:

With JavaScript	Without JavaScript or with browsers that don't support jQuery (IE6)

Feel free to try the preview site at https://deploy-preview-11399--kubernetes-sigs-minikube.netlify.app/docs/start/.

Thanks a lot!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: dinever, medyagh

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [medyagh]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[medyagh]

thank you very much @dinever

[medyagh]

looks amazing