Refactor home page (#10795)
* Fix docs home subnav link name * change linkTitle to Home * accept fix from master * refactor docs home template * bump * test * switch layout to basic * swap in cards * test card css * add launch-cards and launch-card classes * swap in content * use different layout name to not affect user journeys * revert file naming * revert docsportal.html * remove main, add kubeadm link * documentation -> docs * change kubeadm linkpull/12351/head
Andrew Chen
Kubernetes Prow Robot
parent
e5a31f8c67
commit
b3ed053c82
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -2,12 +2,10 @@
|
|||
approvers:
|
||||
- chenopis
|
||||
title: Kubernetes Documentation
|
||||
layout: docsportal_home
|
||||
noedit: true
|
||||
cid: userJourneys
|
||||
css: /css/style_user_journeys.css
|
||||
js: /js/user-journeys/home.js, https://use.fontawesome.com/4bcc658a89.js
|
||||
display_browse_numbers: true
|
||||
cid: docsHome
|
||||
layout: docsportal_home
|
||||
class: gridPage
|
||||
linkTitle: "Home"
|
||||
main_menu: true
|
||||
weight: 10
|
||||
|
|
@ -17,5 +15,5 @@ menu:
|
|||
title: "Documentation"
|
||||
weight: 20
|
||||
post: >
|
||||
<p>Learn how to use Kubernetes with the use of walkthroughs, samples, and reference documentation. You can even <a href="/editdocs/" data-auto-burger-exclude>help contribute to the docs</a>!</p>
|
||||
<p>Learn how to use Kubernetes with conceptual, tutorial, and reference documentation. You can even <a href="/editdocs/" data-auto-burger-exclude>help contribute to the docs</a>!</p>
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,102 +3,143 @@
|
|||
<h1>{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
{{ if eq .Lang "en" }}
|
||||
{{ template "docs-portal-user-journey" . }}
|
||||
{{ template "docs-portal-cards" . }}
|
||||
{{ end }}
|
||||
{{ partial "docs/browse.html" .Parent }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "content-id" }}content{{ end }}
|
||||
|
||||
{{ define "docs-portal-user-journey" }}
|
||||
{{ $data := .Site.Data }}
|
||||
<div id="user-persona-data" class="hide">
|
||||
{{ $user_personas := index $data "user-personas" }}
|
||||
{{ $user_personas | jsonify }}
|
||||
</div>
|
||||
{{ define "docs-portal-cards" }}
|
||||
<section id="mainContent">
|
||||
<div class="launch-content">
|
||||
|
||||
<div class="hide">
|
||||
{{ $skip_uj_paths := "migrators" }}
|
||||
{{ range $k, $v := $user_personas }}
|
||||
<p>Kubernetes is an open source container orchestration engine for automating deployment, scaling, and management of containerized applications. The open source project is hosted by the Cloud Native Computing Foundation (<a href="https://www.cncf.io/about">CNCF</a>).</p>
|
||||
|
||||
{{ if strings.Contains $skip_uj_paths $k }}
|
||||
{{ else }}
|
||||
{{ range $kk, $vv := $v }}
|
||||
<div class="persona-def-data" data-name="{{ $kk }}">
|
||||
{{ $persona_info := $vv }}
|
||||
{{ if $persona_info.short_desc }}
|
||||
{{ $persona_info.short_desc }}
|
||||
{{ else if $persona_info.glossary_id }}
|
||||
{{ with $persona_info.glossary_id | printf "%s.md" | ($.Site.GetPage "page" "docs/reference/glossary").Resources.GetMatch }}
|
||||
{{ .Params.short_description }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<br>
|
||||
<div class="launch-cards">
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="launch-card">
|
||||
<h4>Understand the basics</h4>
|
||||
|
||||
<p>Learn about Kubernetes and its fundamental concepts.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/concepts/overview/what-is-kubernetes/">What is Kubernetes?</a></li>
|
||||
<li><a href="/docs/concepts/overview/components/">Kubernetes components</a></li>
|
||||
<li><a href="/docs/concepts/overview/kubernetes-api/">The Kubernetes API</a></li>
|
||||
<li><a href="/docs/concepts/overview/working-with-objects/kubernetes-objects/">Understanding Kubernetes objects</a></li>
|
||||
<li><a href="/docs/concepts/workloads/pods/pod-overview/">Pod overview</a></li>
|
||||
</ul>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/concepts/';">Learn Concepts</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Try Kubernetes</h4>
|
||||
|
||||
<p>Follow tutorials to learn how to deploy applications in Kubernetes.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/tutorials/hello-minikube/">Hello Minikube</a></li>
|
||||
<li><a href="/docs/tutorials/kubernetes-basics/">Walkthrough the basics</a></li>
|
||||
<li><a href="/docs/tutorials/stateless-application/guestbook/">Stateless Example: PHP Guestbook with Redis</a></li>
|
||||
<li><a href="/docs/tutorials/stateful-application/mysql-wordpress-persistent-volume/">Stateful Example: Wordpress with Persistent Volumes</a></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/tutorials/';">View Tutorials</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Setup a cluster</h4>
|
||||
|
||||
<p>Get Kubernetes running based on your resources and needs.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/setup/pick-right-solution/#hosted-solutions">Hosted Solutions</a></li>
|
||||
<li><a href="/docs/setup/pick-right-solution/#turnkey-cloud-solutions">Turnkey Cloud Solutions</a></li>
|
||||
<li><a href="/docs/setup/pick-right-solution/#on-premises-turnkey-cloud-solutions">On-Premises Solutions</a></li>
|
||||
<li><a href="/docs/setup/pick-right-solution/#custom-solutions">Custom Solutions</a></li>
|
||||
<li><a href="/docs/setup/pick-right-solution/#local-machine-solutions">Local Machine</a></li>
|
||||
<li><a href="/docs/setup/independent/install-kubeadm/">Install the kubeadm setup tool</a></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/setup/';">Setup Kubernetes</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Learn how to use Kubernetes</h4>
|
||||
|
||||
<p>Look up common tasks and how to perform them using a short sequence of steps.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/tasks/tools/install-minikube/">Install Minikube</a></li>
|
||||
<li><a href="/docs/tasks/tools/install-kubectl/">Install kubectl</a></li>
|
||||
<li><a href="/docs/tasks/access-application-cluster/web-ui-dashboard/">Use the Web UI Dashboard</a></li>
|
||||
<li><a href="/docs/tasks/access-application-cluster/configure-access-multiple-clusters/">Configure access to multiple clusters</a></li>
|
||||
<li><a href="/docs/tasks/configure-pod-container/configure-pod-configmap/">Configure a Pod to use a ConfigMap</a></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/tasks/';">View Tasks</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Look up reference information</h4>
|
||||
|
||||
<p>Browse terminology, command line syntax, API resource types, and setup tool documentation.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/reference/glossary/?fundamental=true">Glossary</a></li>
|
||||
<li><a href="/docs/reference/kubectl/overview/">Overview of kubectl</a></li>
|
||||
<li><a href="/docs/reference/kubectl/cheatsheet/">kubectl cheat sheet</a></li>
|
||||
<li><a href="/docs/reference/setup-tools/kubeadm/kubeadm/">Overview of kubeadm</a></li>
|
||||
<li><a href="/docs/reference/using-api/api-overview/">Overview of API</a></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/reference/';">View Reference</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Contribute to the docs</h4>
|
||||
|
||||
<p>Anyone can contribute, whether you’re new to the project or you’ve been around a long time.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/contribute/start/">Start contributing</a></li>
|
||||
<li><a href="/docs/contribute/style/style-guide">Documentation style guide</a></li>
|
||||
<li><a href="/docs/contribute/localization/">Translating the docs</a></li>
|
||||
<li><a href="/docs/contribute/participating/">Participate in SIG Docs</a></li>
|
||||
<li><a href="/docs/contribute/intermediate/">Intermediate contributing</a></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='/docs/contribute/';">Contribute to the docs</button>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>Download Kubernetes</h4>
|
||||
|
||||
<p>If you are installing Kubernetes or upgrading to the newest version, refer to the current release notes.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/setup/release/notes/">Current release notes</a></li>
|
||||
<li><a href="/docs/setup/release/notes/#urgent-upgrade-notes">Urgent upgrade notes</a></li>
|
||||
<li><a href="/docs/setup/release/building-from-source/">Build from source code</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="launch-card">
|
||||
<h4>About the documentation</h4>
|
||||
|
||||
<p>This website contains documentation for the current and previous 4 versions of Kubernetes.</p>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="/docs/home/supported-doc-versions/">Supported versions of the documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id='aboutWrapper'>
|
||||
<div class="aboutsection" markdown="1">
|
||||
<p>
|
||||
Kubernetes is an open source system for managing containerized applications across multiple hosts, providing basic mechanisms for deployment, maintenance, and scaling of applications.
|
||||
The open source project is hosted by the Cloud Native Computing Foundation (<a href="https://www.cncf.io/about">CNCF</a>).
|
||||
</p>
|
||||
<div class="aboutcolumn" markdown="1">
|
||||
<a href="{{ "docs/setup/release/notes/" | relURL }}">Download Current Release</a>
|
||||
</div>
|
||||
<div class="aboutcolumn" markdown="1">
|
||||
<a href="{{ "docs/home/supported-doc-versions/" | relURL }}">Supported Doc Versions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="paths">
|
||||
<div class="navButton users">{{ T "docs_label_users" }}</div>
|
||||
<div class="navButton contributors">{{ T "docs_label_contributors" }}</div>
|
||||
<a> <div class="navButton browse">{{ T "docs_label_browse" }}</div></a>
|
||||
</div>
|
||||
|
||||
<div id="cardWrapper">
|
||||
<div class="display-bar">{{ T "docs_label_i_am" }}</div>
|
||||
<div class='cards' markdown="1">
|
||||
<div class='docsection1' id='persona-definition'>.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center;' class="applicationDeveloperContainer">
|
||||
<div class="display-bar" id="subTitle">LEVEL</div>
|
||||
<div class="levels">
|
||||
<div class="level" data-name="foundational">
|
||||
<i class="fa fa-sign-in" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
||||
<br>
|
||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
||||
Foundational
|
||||
</div>
|
||||
</div>
|
||||
<div class="level" data-name="intermediate">
|
||||
<i class="fa fa-university" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
||||
<br>
|
||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
||||
Intermediate
|
||||
</div>
|
||||
</div>
|
||||
<div class="level" data-name="advanced">
|
||||
<i class="fa fa-magic" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
||||
<br>
|
||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
||||
Advanced Topics
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='infobarWrapper'>
|
||||
<div class="infobar">
|
||||
<span style="padding-bottom: 3% ">I want to...</span>
|
||||
<div id="infobarLinks"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,28 @@
|
|||
margin-top: 1em !important;
|
||||
}
|
||||
|
||||
.gridPage .launch-content {
|
||||
position: relative;
|
||||
margin: 20px auto 50px;
|
||||
}
|
||||
|
||||
.launch-cards {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.launch-card {
|
||||
position: relative;
|
||||
width: 33%;
|
||||
padding: 0 30px 0 0;
|
||||
margin-bottom: 50px;
|
||||
min-height: 152px;
|
||||
}
|
||||
|
||||
|
||||
.gridPage p {
|
||||
color: rgb(26,26,26) !important;
|
||||
margin-left: 0 !important;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in New Issue