From 0625ced4668b819eb9789570d8b9f2c5f9fef4b9 Mon Sep 17 00:00:00 2001
From: Aidan Ranney <32148529+aidanranney@users.noreply.github.com>
Date: Mon, 15 Jun 2020 12:09:57 -0700
Subject: [PATCH] Revise the Kubernetes website to use Docsy (#20874)
* Add Docsy, required packages and config
* Apply Docsy integration work to k8s website
This encompasses significant changes to the style system, layout files,
as well as changes to some of the static assets. To examine this work
and the iterations that were performed, the original repository can be
found at https://github.com/gearbox-built/kubernetes-hugo.git
* Address issues found in review
The styling and positioning of the header, footer, some shortcodes and
main container elements are improved. A new partial is added for
favicons. The sidebars, as well as inner table of contents, have been
altered for better positioning and rendering of content. Localization
has also been addressed.
* Enable announcements
The recent Black Lives Matter announcement surfaced issues which have
been addressed.
---
.gitmodules | 3 +
assets/images/nav_logo.svg | 110 ++
assets/images/nav_logo2.svg | 108 ++
assets/js/search.js | 36 +
assets/scss/_base.scss | 834 +++++++++++++
assets/scss/_case-studies.scss | 142 +++
assets/scss/_custom.scss | 386 ++++++
assets/scss/_desktop.scss | 99 ++
assets/scss/_reset.scss | 49 +
assets/scss/_size.scss | 20 +
assets/scss/_skin.scss | 5 +
assets/scss/_tablet.scss | 211 ++++
assets/scss/_variables_project.scss | 13 +
config.toml | 127 +-
content/en/community/_index.html | 2 +-
.../kubernetes-basics/public/css/styles.css | 15 +-
content/en/partners/_index.html | 123 +-
content/fr/community/_index.html | 2 +-
content/id/community/_index.html | 2 +-
content/it/community/_index.html | 2 +-
content/ko/community/_index.html | 2 +-
content/vi/community/_index.html | 2 +-
{assets => deprecated/assets}/sass/_base.sass | 0
.../assets}/sass/_case-studies.sass | 0
.../assets}/sass/_desktop.sass | 0
.../assets}/sass/_reset.sass | 0
{assets => deprecated/assets}/sass/_size.sass | 0
{assets => deprecated/assets}/sass/_skin.sass | 0
.../assets}/sass/_tablet.sass | 0
{assets => deprecated/assets}/sass/style.sass | 0
.../users/application-developer/advanced.md | 120 ++
.../application-developer/foundational.md | 260 ++++
.../application-developer/intermediate.md | 166 +++
.../users/cluster-operator/foundational.md | 96 ++
.../users/cluster-operator/intermediate.md | 109 ++
layouts/_default/baseof.html | 35 +-
layouts/_default/list.html | 3 -
layouts/_default/single.html | 3 -
layouts/blog/baseof.html | 88 +-
layouts/blog/list.html | 54 +-
layouts/blog/pager.html | 12 -
layouts/blog/post.html | 3 -
layouts/blog/single.html | 4 -
layouts/case-studies/single-baseof.html | 5 +-
layouts/docs/baseof.html | 91 +-
layouts/docs/docsportal_home.html | 37 +-
layouts/docs/glossary.html | 4 +-
layouts/docs/list.html | 34 +-
layouts/docs/search.html | 37 +-
layouts/docs/single.html | 12 +-
layouts/partials/blog-meta-links.html | 13 +
layouts/partials/blog-sidebar.html | 92 ++
layouts/partials/css.html | 42 +-
layouts/partials/docs/content-page.html | 6 +-
layouts/partials/docs/docs-portal-card.html | 27 +
layouts/partials/favicons.html | 4 +
layouts/partials/feedback.html | 36 +-
layouts/partials/footer.html | 87 +-
layouts/partials/git-info.html | 61 +-
layouts/partials/head.html | 44 +-
layouts/partials/navbar.html | 30 +
layouts/partials/search-input.html | 10 +
layouts/partials/sidebar-tree.html | 63 +
layouts/partials/tree.html | 37 -
netlify.toml | 8 +-
package.json | 4 +-
static/css/announcement.css | 19 +-
static/css/custom-jekyll/tags.css | 2 +
static/css/newcommunity.css | 1103 +++++++++--------
static/css/training.css | 5 +-
static/js/script.js | 6 +-
themes/docsy | 1 +
72 files changed, 4174 insertions(+), 992 deletions(-)
create mode 100644 .gitmodules
create mode 100644 assets/images/nav_logo.svg
create mode 100644 assets/images/nav_logo2.svg
create mode 100644 assets/js/search.js
create mode 100644 assets/scss/_base.scss
create mode 100644 assets/scss/_case-studies.scss
create mode 100644 assets/scss/_custom.scss
create mode 100644 assets/scss/_desktop.scss
create mode 100755 assets/scss/_reset.scss
create mode 100644 assets/scss/_size.scss
create mode 100755 assets/scss/_skin.scss
create mode 100644 assets/scss/_tablet.scss
create mode 100644 assets/scss/_variables_project.scss
rename {assets => deprecated/assets}/sass/_base.sass (100%)
rename {assets => deprecated/assets}/sass/_case-studies.sass (100%)
rename {assets => deprecated/assets}/sass/_desktop.sass (100%)
rename {assets => deprecated/assets}/sass/_reset.sass (100%)
rename {assets => deprecated/assets}/sass/_size.sass (100%)
rename {assets => deprecated/assets}/sass/_skin.sass (100%)
rename {assets => deprecated/assets}/sass/_tablet.sass (100%)
rename {assets => deprecated/assets}/sass/style.sass (100%)
create mode 100644 deprecated/content/en/docs/user-journeys/users/application-developer/advanced.md
create mode 100644 deprecated/content/en/docs/user-journeys/users/application-developer/foundational.md
create mode 100644 deprecated/content/en/docs/user-journeys/users/application-developer/intermediate.md
create mode 100644 deprecated/content/en/docs/user-journeys/users/cluster-operator/foundational.md
create mode 100644 deprecated/content/en/docs/user-journeys/users/cluster-operator/intermediate.md
delete mode 100644 layouts/_default/list.html
delete mode 100644 layouts/_default/single.html
delete mode 100644 layouts/blog/pager.html
delete mode 100644 layouts/blog/post.html
delete mode 100644 layouts/blog/single.html
create mode 100644 layouts/partials/blog-meta-links.html
create mode 100644 layouts/partials/blog-sidebar.html
create mode 100644 layouts/partials/docs/docs-portal-card.html
create mode 100644 layouts/partials/favicons.html
create mode 100644 layouts/partials/navbar.html
create mode 100644 layouts/partials/search-input.html
create mode 100644 layouts/partials/sidebar-tree.html
delete mode 100644 layouts/partials/tree.html
create mode 160000 themes/docsy
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 00000000000..b76244d3b5e
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "themes/docsy"]
+ path = themes/docsy
+ url = https://github.com/google/docsy.git
diff --git a/assets/images/nav_logo.svg b/assets/images/nav_logo.svg
new file mode 100644
index 00000000000..982c04f4aa2
--- /dev/null
+++ b/assets/images/nav_logo.svg
@@ -0,0 +1,110 @@
+
+
+
diff --git a/assets/images/nav_logo2.svg b/assets/images/nav_logo2.svg
new file mode 100644
index 00000000000..92b8d19ac4e
--- /dev/null
+++ b/assets/images/nav_logo2.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/assets/js/search.js b/assets/js/search.js
new file mode 100644
index 00000000000..3d6e9d94478
--- /dev/null
+++ b/assets/js/search.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2018 Google LLC
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ https://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+(function ($) {
+ "use strict";
+
+ var Search = {
+ init: function () {
+ $(document).ready(function () {
+ $(document).on("keypress", ".td-search-input", function (e) {
+ if (e.keyCode !== 13) {
+ return;
+ }
+
+ var query = $(this).val();
+ var searchPage = "{{ "docs/search/" | absURL }}?q=" + query;
+ document.location = searchPage;
+
+ return false;
+ });
+ });
+ },
+ };
+
+ Search.init();
+})(jQuery);
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
new file mode 100644
index 00000000000..ddfee424444
--- /dev/null
+++ b/assets/scss/_base.scss
@@ -0,0 +1,834 @@
+@import "reset";
+
+// header
+$full-width-paddingX: 20px;
+
+$main-width: 100%;
+$main-max-width: 100%;
+
+$header-height: 80px;
+
+$logo-width: 180px;
+
+$nav-buttons-margin-left: 30px;
+
+$hamburger-size: 50px;
+
+// main nav
+$main-nav-padding: 140px 0 30px;
+$main-nav-h5-margin-bottom: 1em;
+$main-nav-h3-margin-bottom: 0.6em;
+$nav-box-width: 20%;
+$nav-box-sibling-margin-left: calc(20% / 3);
+$main-nav-main-sibling-margin-top: 60px;
+$main-nav-left-button-size: 50px;
+$main-nav-left-button-font-size: 18px;
+
+// hero
+$hero-padding-top: 80px;
+$headline-wrapper-margin-bottom: 40px;
+$quickstart-button-padding: 0 50px;
+$vendor-strip-height: 88px;
+$vendor-strip-font-size: 16px;
+
+// video
+$video-section-height: 200px;
+
+@import "size";
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+body {
+ background-color: white;
+}
+
+section {
+ position: relative;
+ background-color: white;
+}
+
+section,
+header,
+footer {
+ .main-section {
+ position: relative;
+ margin: auto;
+ }
+
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ }
+
+ .button {
+ display: inline-block;
+ border-radius: 6px;
+ padding: 0 20px;
+ line-height: 40px;
+ color: white;
+ background-color: $blue;
+ text-decoration: none;
+ font-size: 1rem;
+ }
+
+ #cellophane {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ }
+}
+
+// HEADER
+
+#hamburger {
+ display: inline-block;
+ position: relative;
+ margin-left: auto;
+ vertical-align: middle;
+ padding: 0;
+ border: 0;
+ background: none;
+
+ div,
+ &:before,
+ &:after {
+ position: absolute;
+ left: 15%;
+ width: 70%;
+ height: 2px;
+ background-color: $blue;
+ transition: 0.3s;
+ content: "";
+ }
+
+ div {
+ top: calc(50% - 1px);
+ }
+
+ &:before {
+ top: 24%;
+ }
+
+ &:after {
+ bottom: 24%;
+ }
+
+ &:hover {
+ div,
+ &:before,
+ &:after {
+ background-color: white;
+ }
+ }
+}
+
+// HERO
+.header-hero {
+ background-image: url(/images/texture.png);
+ background-color: $dark-grey;
+ text-align: center;
+ padding-left: 0;
+ padding-right: 0;
+ margin-bottom: 0;
+ position: relative;
+
+ &.bot-bar:after {
+ display: block;
+ margin-bottom: -24px;
+ height: 8px;
+ width: 100%;
+ background-color: transparentize(white, 0.9);
+ content: "";
+ }
+
+ &.no-sub {
+ h5 {
+ display: none;
+ }
+
+ h1 {
+ margin-bottom: 20px;
+ }
+ }
+}
+
+.td-home .header-hero:after {
+ display: none;
+}
+
+.header-hero {
+ background-color: $dark-grey;
+
+ h5 {
+ margin: 20px 0;
+ line-height: 28px;
+ }
+}
+
+#vendorStrip {
+ position: relative;
+
+ ul {
+ float: left;
+ }
+
+ li {
+ display: inline-block;
+ height: 100%;
+ }
+
+ a {
+ display: block;
+ height: 100%;
+ color: white;
+ font-size: 0.75em;
+ font-weight: bold;
+ }
+
+ li + li {
+ margin-left: 0;
+ }
+}
+
+.pi-accordion {
+ & > .container:first-child > .item:first-child > .title:first-child {
+ padding-left: 0;
+ font-size: 1.5em;
+ font-weight: 700;
+ }
+
+ & > .container:first-child > .item.yah:first-child > .title:first-child {
+ margin-left: -20px !important;
+ }
+
+ .item {
+ overflow: hidden;
+ }
+
+ .title {
+ color: $dark-grey;
+ position: relative;
+ padding: 7.5px 10px 7.5px 18px;
+ cursor: pointer;
+ transition: 0.3s;
+
+ &:hover {
+ color: $blue;
+ }
+ }
+
+ a.item > .title {
+ color: black;
+
+ &:hover {
+ color: $blue;
+ }
+ }
+
+ div.item > .title {
+ &:before {
+ content: "";
+ position: absolute;
+ top: 12px;
+ left: 2px;
+ border-style: solid;
+ border-width: 5px 0 5px 8px;
+ border-color: transparent transparent transparent $blue;
+ transform: rotate(0deg);
+ transition: 0.3s;
+ }
+ }
+
+ .wrapper {
+ position: relative;
+ width: 100%;
+ transition: height 0.3s;
+ }
+
+ .content {
+ padding-left: 20px;
+ opacity: 0;
+ transition: 0.3s;
+ }
+
+ .item.on {
+ & > .title:before {
+ transform: rotate(90deg);
+ }
+
+ & > .wrapper > .content {
+ opacity: 1;
+ }
+ }
+}
+
+dt {
+ margin-bottom: 8px;
+}
+
+dd {
+ margin-bottom: 16px;
+}
+
+.pi-pushmenu {
+ display: none;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.3s;
+
+ &.on {
+ opacity: 1;
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+
+ .sled {
+ position: absolute;
+ top: 0;
+ width: 0;
+ height: 100%;
+ background-color: white;
+ overflow: auto;
+ transition: 0.3s;
+ }
+
+ &.on .sled {
+ width: 400px;
+ max-width: 100vw;
+ }
+
+ .top-bar {
+ height: 0;
+ line-height: 60px;
+ background-color: #444;
+ }
+
+ ul {
+ margin-top: 25px;
+ }
+
+ li {
+ position: relative;
+ display: block;
+ width: 100%;
+ min-height: 45px;
+ padding: 0 60px 0 20px;
+ border-bottom: 1px solid #cccccc;
+ }
+
+ a {
+ display: inline-block;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ font-family: "Roboto", sans-serif;
+ font-size: 20px;
+ color: $blue;
+ }
+
+ .button {
+ background: none;
+ padding: 0;
+ }
+
+ ul ul {
+ padding: 0 20px;
+
+ li {
+ min-height: 40px;
+ }
+
+ a {
+ height: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ color: lighten(#222222, 20%);
+ }
+ }
+}
+
+.push-menu-close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50px;
+ height: 50px;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 25%;
+ width: 50%;
+ height: 2px;
+ background-color: black;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ transform: rotate(-45deg);
+ }
+}
+
+// ocean nodes
+$ocean-nodes-padding-Y: 60px;
+$ocean-nodes-main-margin-bottom: 60px;
+$ocean-nodes-h3-margin-bottom: 30px;
+
+// video
+$video-section-height: 200px;
+
+// features
+$features-h3-margin-bottom: 20px;
+$feature-box-div-width: 100%;
+$feature-box-margin-bottom: 0;
+$feature-box-div-margin-bottom: 40px;
+
+// Home-specific
+
+.td-home {
+ &.flip-nav,
+ &.open-nav {
+ .logo {
+ background-image: url(/images/nav_logo2.svg);
+ }
+ }
+}
+
+.header-hero {
+ margin-bottom: 0;
+ padding-bottom: 1px;
+
+ .main-section {
+ padding: 0 10px;
+ margin-bottom: 30px;
+ }
+
+ #vendorStrip {
+ display: none;
+ }
+}
+
+// Add logo to CNCF section
+section#cncf {
+ padding-top: 60px;
+ padding-bottom: 140px;
+ background-image: url(/images/cncf-color.svg);
+ background-position: center 100px;
+ background-repeat: no-repeat;
+ background-size: 300px;
+}
+
+// OCEAN NODES
+#oceanNodes {
+ padding-top: $ocean-nodes-padding-Y;
+ padding-bottom: $ocean-nodes-padding-Y;
+
+ a {
+ color: $blue;
+ }
+
+ .main-section {
+ margin-bottom: $ocean-nodes-padding-Y;
+ min-height: 160px;
+ }
+
+ .image-wrapper {
+ max-width: 75%;
+ margin: 0 auto 20px;
+ text-align: center;
+
+ img {
+ width: 100%;
+ max-width: 160px;
+ }
+ }
+
+ .main-section:first-child {
+ .image-wrapper {
+ max-width: 100%;
+
+ img {
+ max-width: 491px;
+ }
+ }
+ }
+
+ h3 {
+ margin-bottom: $ocean-nodes-h3-margin-bottom;
+ }
+}
+
+// Video thingy
+#video {
+ height: $video-section-height;
+}
+
+#video {
+ width: 100%;
+ position: relative;
+ background-position: center center;
+ background-size: cover;
+
+ & > .light-text {
+ display: none;
+ // position: absolute;
+ // top: 50%;
+ // left: 75%;
+ width: 500px;
+ padding-top: 2rem;
+ // transform: translate(-50%, -50%);
+ color: white;
+ }
+
+ h2 {
+ font-size: 32px;
+ line-height: 44px;
+ margin-bottom: 20px;
+ }
+
+ p {
+ margin-bottom: 20px;
+ }
+
+ #desktopKCButton {
+ position: relative;
+ font-size: 18px;
+ background-color: $dark-grey;
+ border-radius: 8px;
+ color: $white;
+ padding: 20px 10px 20px 10px;
+ }
+
+ #desktopShowVideoButton {
+ position: relative;
+ font-size: 24px;
+ background-color: white;
+ border-radius: 8px;
+ color: $blue;
+ padding: 15px 30px 15px 80px;
+ margin-bottom: 15px;
+
+ &:before {
+ content: "";
+ position: absolute;
+ @include pureCenter(40px);
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 10px 0 10px 20px;
+ border-color: transparent transparent transparent $blue;
+ }
+ }
+
+ #mobileShowVideoButton {
+ @include pureCenter;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background-color: transparent;
+ border: 5px solid rgba(255, 255, 255, 0.2);
+ overflow: visible;
+
+ &:after {
+ @include pureCenter;
+ left: 40px;
+ content: "";
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 20px 0 20px 30px;
+ border-color: transparent transparent transparent #ffffff;
+ }
+ }
+}
+
+#videoPlayer {
+ @include fullScreen;
+ background-color: rgba(0, 0, 0, 0.9);
+ display: none;
+
+ iframe {
+ @include pureCenter;
+ @include maintain-aspect-ratio;
+ }
+
+ #closeButton {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ border: 2px solid transparent;
+ transition: 0.3s;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 10%;
+ width: 80%;
+ height: 2px;
+ background-color: white;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ transform: rotate(-45deg);
+ }
+
+ &:hover {
+ border-color: white;
+ }
+ }
+}
+
+// KubeWeekly
+#kubeweekly {
+ background-color: $light-grey;
+ padding-top: 30px;
+ padding-bottom: 80px;
+ background-size: auto;
+ // font-family: "Roboto Mono", monospace !important;
+ font-size: 24px;
+ // font-weight: bold;
+
+ h5 {
+ font-size: 20px;
+ }
+}
+
+.subscribe-button {
+ border-radius: 6px;
+ padding: 0 20px;
+ line-height: 31px;
+ color: white;
+ background-color: blue;
+ text-decoration: none;
+ font-size: 14px;
+}
+
+// Features
+#features {
+ padding-top: 140px;
+ background-color: $light-grey;
+ background-image: url(/images/wheel.svg);
+ background-position: center 60px;
+ background-repeat: no-repeat;
+ background-size: 60px;
+}
+
+.feature-box {
+ //padding: 50px 0
+ width: 100%;
+ overflow: hidden;
+ clear: both;
+
+ h4 {
+ line-height: normal;
+ margin-bottom: 15px;
+ }
+
+ & > div:first-child {
+ float: left;
+ }
+
+ & > div:last-child {
+ float: right;
+ }
+}
+
+#features {
+ h3 {
+ margin-bottom: $features-h3-margin-bottom;
+ }
+
+ .feature-box {
+ margin-bottom: $feature-box-margin-bottom;
+
+ & > div {
+ width: $feature-box-div-width;
+ margin-bottom: $feature-box-div-margin-bottom;
+ }
+ }
+}
+
+// Talk to us
+#talkToUs {
+ h3,
+ h4 {
+ text-align: center;
+ }
+
+ h3 {
+ margin-bottom: 15px;
+ }
+
+ h4 {
+ line-height: normal;
+ margin-bottom: 50px;
+
+ br {
+ display: none;
+ }
+ }
+
+ #bigSocial {
+ overflow: hidden;
+
+ div {
+ width: 100%;
+ float: left;
+ padding: 30px;
+ padding-top: 110px;
+ background-position: center top;
+ background-size: auto;
+ background-repeat: no-repeat;
+ }
+
+ div:nth-child(1) {
+ background-image: url(/images/twitter_icon.png);
+ }
+
+ div:nth-child(2) {
+ background-image: url(/images/github_icon.png);
+ }
+
+ div:nth-child(3) {
+ background-image: url(/images/slack_icon.png);
+ }
+
+ div:nth-child(4) {
+ background-image: url(/images/stackoverflow_icon.png);
+ }
+
+ div + div {
+ margin-top: 20px;
+ margin-left: 0;
+ }
+
+ a {
+ display: inline-block;
+ color: $blue;
+ font-size: 24px;
+ font-weight: 400;
+ text-decoration: none;
+ margin-bottom: 15px;
+ }
+
+ a,
+ p {
+ text-align: center;
+ width: 100%;
+ }
+ }
+}
+
+.td-home {
+ #talkToUs {
+ .main-section {
+ padding: 30px 0;
+ }
+
+ h5 {
+ font-size: 20px;
+ }
+ }
+
+ #caseStudiesWrapper {
+ position: relative;
+ text-align: center;
+ margin-bottom: 30px;
+
+ img {
+ padding-bottom: 1rem;
+ }
+
+ div {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ min-height: 230px;
+ margin-bottom: 60px;
+ padding-right: 1rem;
+ background-position: top center;
+ }
+
+ p {
+ font-size: 20px;
+ }
+
+ a {
+ position: absolute;
+ bottom: -30px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: $blue;
+ font-weight: 400;
+ }
+ }
+}
+
+// Docs specific
+
+#editPageButton {
+ position: absolute;
+ top: 50px;
+ right: 25px;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ border-radius: 50%;
+ white-space: nowrap;
+ text-indent: 50px;
+ overflow: hidden;
+ background: $blue url(/images/icon-pencil.svg) no-repeat;
+ background-position: 12px 10px;
+ background-size: 29px 29px;
+}
+
+.feedback--response__hidden {
+ display: none;
+}
+
+// GitHub info/edit buttons
+#pre-footer {
+ margin-top: 2rem;
+
+ .button {
+ font-size: 1.1rem;
+
+ &:first-of-type {
+ margin-right: 0.75rem;
+ }
+ }
+
+ .lastedit {
+ margin-top: 1rem;
+ font-size: 1rem;
+ }
+}
diff --git a/assets/scss/_case-studies.scss b/assets/scss/_case-studies.scss
new file mode 100644
index 00000000000..d61d24189c2
--- /dev/null
+++ b/assets/scss/_case-studies.scss
@@ -0,0 +1,142 @@
+// SASS for Case Studies pages go here:
+
+hr {
+ background-color: #999999;
+}
+
+h2 {
+ margin-bottom: 15px !important;
+}
+
+.subhead {
+ padding-bottom: 2% !important;
+ padding-top: 0% !important;
+}
+
+.details {
+ margin-left: 1.9%;
+ padding-right: 5%;
+ font-size: 16px !important;
+ padding-bottom: 2% !important;
+}
+
+.section1 {
+ margin-bottom: 3%;
+
+ .cols {
+ width: 80% !important;
+ margin-left: 6.8%;
+ padding-top: 1.5%;
+
+ .col1 {
+ width: 52% !important;
+ font-weight: 300 !important;
+ }
+
+ .col2 {
+ width: 46% !important;
+ }
+ }
+}
+
+.banner2text {
+ width: 63%;
+ padding-top: 10%;
+ padding-left: 0% !important;
+ float: initial !important;
+ text-align: center;
+ margin: 0 auto;
+ position: relative;
+}
+
+.banner3text,
+.banner4text,
+.banner5text {
+ width: 63%;
+ padding-left: 0% !important;
+ float: initial !important;
+ text-align: center;
+ margin: 0 auto;
+ position: relative;
+}
+
+.fullcol {
+ float: initial !important;
+}
+
+body footer {
+ background-color: #585858 !important;
+}
+
+.section1 {
+ float: left !important;
+}
+
+.banner1 {
+ padding-left: 11.9% !important;
+}
+
+.banner2 {
+ float: initial !important;
+ padding-bottom: 2% !important;
+}
+
+footer {
+ padding: 0% 7%;
+}
+
+.banner4,
+.banner3,
+.banner5 {
+ float: initial !important;
+}
+
+@media screen and (max-width: 910px) {
+ .banner2text {
+ width: 47%;
+ padding-top: 45%;
+ }
+
+ .details {
+ margin-left: 0%;
+ margin-bottom: 3%;
+ }
+
+ .subhead {
+ padding-bottom: 0% !important;
+ padding-top: 0% !important;
+ }
+
+ .banner3 {
+ width: 100% !important;
+ }
+}
+
+@media screen and (max-width: 780px) {
+ .section1 .cols {
+ width: 100% !important;
+ margin-left: 0%;
+ padding-top: 5%;
+
+ .col1,
+ .col2 {
+ width: 100% !important;
+ margin-left: 0% !important;
+
+ .fullcol {
+ width: 90% !important;
+ margin-left: 5% !important;
+
+ .banner1 {
+ padding-left: 10% !important;
+ margin-bottom: 6% !important;
+
+ .banner2text {
+ padding-top: 60% !important;
+ padding-bottom: 2% !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
new file mode 100644
index 00000000000..52364b0a8a8
--- /dev/null
+++ b/assets/scss/_custom.scss
@@ -0,0 +1,386 @@
+/* GLOBAL */
+.td-main {
+ .row {
+ margin: 0;
+ }
+
+ main {
+ img {
+ max-width: 100%;
+ }
+
+ table {
+ margin-bottom: 1rem;
+ display: initial;
+ }
+
+ @media only screen and (min-width: 768px) {
+ padding-top: 2rem !important;
+ }
+ }
+}
+
+section {
+ .main-section {
+ @media only screen and (min-width: 1024px) {
+ max-width: 1200px;
+ }
+ }
+}
+
+.td-outer {
+ padding: 0 !important;
+}
+
+#desktopShowVideoButton {
+ border: none
+}
+
+#videoPlayer {
+ #closeButton {
+ background: transparent;
+ }
+}
+
+/* HEADER */
+
+.td-navbar {
+ position: fixed !important;
+ width: 100%;
+ padding-bottom: 1rem !important;
+ background: transparent !important;
+ transition: 0.3s;
+
+ .navbar-brand {
+ position: absolute;
+ width: 45px;
+ height: 44px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url("/images/favicon.png");
+ }
+
+ #hamburger {
+ &:focus {
+ outline: none;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ .navbar-brand {
+ background-image: url("/images/nav_logo.svg");
+ top: 1.5rem;
+ width: 180px;
+ margin-left: 1rem;
+ }
+ }
+}
+
+.td-navbar-nav-scroll {
+ overflow: visible !important;
+ display: none;
+
+ .navbar-nav {
+ overflow: visible !important;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+
+ .nav-item {
+ position: relative;
+ height: 10%;
+
+ .active::after {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ content: "";
+ bottom: -4px;
+ left: 0;
+ background: #fff;
+ }
+
+ .dropdown-menu {
+ left: -80px;
+ }
+
+ &.dropdown:hover {
+ color: $medium-grey;
+ }
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ display: block;
+ margin-top: 3.5rem !important;
+ }
+
+ @media only screen and (min-width: 1075px) {
+ margin-top: 1.5rem !important;
+ }
+}
+
+// Flip-Nav
+.flip-nav .td-navbar {
+ background-color: white !important;
+ box-shadow: 0 1px 2px $medium-grey;
+
+ .navbar-nav {
+ .nav-item {
+ &.show .nav-link,
+ .nav-link {
+ color: $dark-grey;
+
+ &:hover {
+ color: $medium-grey;
+ }
+ }
+
+ .dropdown {
+ &:hover {
+ color: $medium-grey;
+ }
+ }
+ }
+ }
+
+ .navbar-nav .nav-item .active {
+ color: $dark-grey;
+
+ &::after {
+ background: $dark-grey;
+ }
+ }
+
+ #hamburger:hover {
+ div,
+ &:before,
+ &:after {
+ background-color: $dark-grey;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ .navbar-brand {
+ background-image: url("/images/nav_logo2.svg");
+ }
+ }
+}
+
+/* FOOTER */
+footer {
+ background-color: #303030;
+ background-image: url("/images/texture.png");
+ padding: 1rem !important;
+ min-height: initial !important;
+
+ .footer__links {
+ width: 100%;
+ margin: auto;
+ padding-bottom: 1rem;
+
+ nav a {
+ display: block;
+ text-align: center;
+ }
+
+ @media only screen and (min-width: 768px) {
+ nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ }
+ }
+ }
+
+ small {
+ color: $light-grey;
+ font-size: 0.64rem;
+
+ a {
+ text-decoration: inherit;
+ color: inherit;
+
+ &:hover {
+ color: inherit;
+ }
+ }
+ }
+}
+
+/* SIDE-DRAWER MENU */
+
+.pi-pushmenu .sled {
+ .content ul {
+ padding: 0;
+
+ li {
+ &:first-child {
+ display: none;
+ }
+
+ a.nav-link {
+ padding: 0;
+ }
+ }
+ }
+ .push-menu-close-button {
+ background: transparent;
+ border: none;
+
+ &:focus {
+ outline: none;
+ }
+ }
+}
+
+/* DOCS */
+
+.launch-cards {
+ button {
+ cursor: pointer;
+ box-sizing: border-box;
+ background: none;
+ margin: 0;
+ border: 0;
+ }
+
+ ul,
+ li {
+ list-style: none;
+ padding-left: 0;
+ }
+}
+
+// table of contents
+.td-toc {
+ padding-top: 1.5rem !important;
+ top: 5rem !important;
+
+ #TableOfContents {
+ padding-top: 1rem;
+ }
+}
+
+// blockquotes and callouts
+
+blockquote {
+ padding: 0.4rem 0.4rem 0.4rem 1rem !important;
+}
+
+// callouts are contained in static CSS as well. these require override.
+
+.caution {
+ border-left-color: #f0ad4e !important;
+}
+
+.note {
+ border-left-color: #428bca !important;
+}
+
+.warning {
+ border-left-color: #d9534f !important;
+}
+
+// search & sidebar
+.td-sidebar {
+ @media only screen and (min-width: 768px) {
+ padding-top: 1.5rem !important;
+
+ .td-sidebar__inner {
+ top: 8.5rem;
+
+ @media only screen and (min-width: 1075px) {
+ top: 6.5rem;
+ }
+ }
+ }
+}
+
+.td-sidebar__inner {
+ form.td-sidebar__search {
+
+ button.td-sidebar__toggle {
+ &:hover {
+ color: $white;
+ }
+
+ color: $blue;
+ }
+ }
+}
+
+.no-underline {
+ text-decoration: none !important;
+}
+
+.hide {
+ display: none !important;
+}
+
+.td-sidebar-link__page {
+ &#m-docs-search {
+ display: none;
+ }
+
+ &#m-docs-test {
+ display: none;
+ }
+}
+
+//Tutorials
+main.content {
+ position: inherit;
+}
+
+/* BLOG */
+
+.td-blog {
+
+ .td-sidebar-nav {
+ max-height: calc(100vh - 8rem);
+ }
+
+ .widget-link {
+ margin-bottom: 1rem;
+
+ .svg-inline--fa {
+ width: 25px;
+ }
+
+ span {
+ margin-left: 0.5rem;
+ }
+ }
+}
+
+/* COMMUNITY */
+
+.newcommunitywrapper {
+ .news {
+ margin-left: 0;
+
+ @media screen and (min-width: 768px) {
+ margin-left: 10%;
+ }
+ }
+}
+
+/* CASE-STUDIES */
+
+// Many of the case studies have small variations in markup and styles;
+// some issues cannot be addressed due to inlined !important rules.
+#caseStudies {
+ section .cols {
+ margin-left: 11%;
+
+ div {
+ width: initial !important;
+ h2 {
+ margin-top: 1rem;
+ }
+ }
+ }
+}
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
new file mode 100644
index 00000000000..abff764d2ff
--- /dev/null
+++ b/assets/scss/_desktop.scss
@@ -0,0 +1,99 @@
+$main-max-width: 1200px;
+$vendor-strip-height: 44px;
+$video-section-height: 550px;
+
+@media screen and (min-width: 1024px) {
+
+ .td-home {
+ .header-hero {
+ #vendorStrip {
+ display: block;
+ }
+ }
+ }
+
+ .td-home {
+
+ section,
+ header,
+ footer {
+ .main-section {
+ max-width: 1000px;
+ }
+ }
+ }
+
+ #oceanNodes {
+ .main-section {
+ position: relative;
+
+ &:nth-child(1) {
+ max-width: 1000px;
+ padding-right: 475px;
+
+ h3,
+ p {
+ text-align: left
+ }
+
+ .image-wrapper {
+ position: absolute;
+ max-width: 48%;
+ transform: translateY(-50%);
+ }
+
+ img {
+ width: 425px;
+ }
+ }
+ }
+ }
+
+ #video {
+ height: $video-section-height;
+ position: relative;
+ background-position: center center;
+ background-size: cover;
+
+ &>.light-text {
+ margin-right: 10%;
+ }
+ }
+
+
+
+ #talkToUs {
+ h4 {
+ br {
+ display: block;
+ }
+ }
+
+ #bigSocial {
+ div {
+ width: calc(25% - 18px);
+ }
+
+ div+div {
+ margin-left: 20px;
+ }
+ }
+
+ .td-home #bigSocial {
+ div {
+ width: calc(33% - 15px);
+ }
+
+ div:nth-child(3) {
+ margin-top: inherit;
+ }
+ }
+ }
+
+ .td-home #caseStudiesWrapper {
+ div {
+ width: 24%;
+ min-height: 260px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/scss/_reset.scss b/assets/scss/_reset.scss
new file mode 100755
index 00000000000..7e3c0bbd3ac
--- /dev/null
+++ b/assets/scss/_reset.scss
@@ -0,0 +1,49 @@
+// CONVENIENCE
+.clear {
+ display: block;
+ clear: both;
+}
+
+.light-text {
+ color: white;
+}
+
+.right {
+ float: right;
+}
+
+.left {
+ float: left;
+}
+
+.center {
+ text-align: center;
+}
+
+//mixins
+@mixin fullScreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
+@mixin pureCenter($left: 50%, $top: 50%) {
+ position: absolute;
+ top: $top;
+ left: $left;
+ transform: translate(-50%, -50%);
+}
+
+@mixin maintain-aspect-ratio(
+ $width-factor: 16,
+ $height-factor: 9,
+ $target-width: 80vw,
+ $target-height: 80vh
+) {
+ width: $target-width;
+ height: $target-width * ($height-factor / $width-factor);
+ max-width: $target-height * ($width-factor / $height-factor);
+ max-height: $target-height;
+}
diff --git a/assets/scss/_size.scss b/assets/scss/_size.scss
new file mode 100644
index 00000000000..9f0b7f655fc
--- /dev/null
+++ b/assets/scss/_size.scss
@@ -0,0 +1,20 @@
+section,
+#vendorStrip {
+ padding-left: $full-width-paddingX;
+ padding-right: $full-width-paddingX;
+}
+
+#hamburger {
+ width: $hamburger-size;
+ height: $hamburger-size;
+}
+
+.header-hero {
+ padding-top: $hero-padding-top;
+}
+
+#vendorStrip {
+ height: $vendor-strip-height;
+ line-height: $vendor-strip-height;
+ font-size: $vendor-strip-font-size;
+}
diff --git a/assets/scss/_skin.scss b/assets/scss/_skin.scss
new file mode 100755
index 00000000000..32c94b9dc52
--- /dev/null
+++ b/assets/scss/_skin.scss
@@ -0,0 +1,5 @@
+$blue: #3371e3;
+$light-grey: #f7f7f7;
+$dark-grey: #303030;
+$medium-grey: #4c4c4c;
+$white: #ffffff;
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
new file mode 100644
index 00000000000..54ead8319c8
--- /dev/null
+++ b/assets/scss/_tablet.scss
@@ -0,0 +1,211 @@
+// header
+$full-width-paddingX: 20px;
+
+$main-width: 100%;
+$main-max-width: 100%;
+
+$header-height: 80px;
+
+$logo-width: 180px;
+
+$nav-buttons-margin-left: 30px;
+
+$hamburger-size: 50px;
+
+// main nav
+$main-nav-padding: 140px 0 30px;
+$main-nav-h5-margin-bottom: 1em;
+$main-nav-h3-margin-bottom: 0.6em;
+$nav-box-width: 20%;
+$nav-box-sibling-margin-left: calc(20% / 3);
+$main-nav-main-sibling-margin-top: 60px;
+$main-nav-left-button-size: 50px;
+$main-nav-left-button-font-size: 18px;
+
+// hero
+$hero-padding-top: 136px;
+$headline-wrapper-margin-bottom: 40px;
+$quickstart-button-padding: 0 50px;
+$vendor-strip-font-size: 16px;
+
+//video
+$video-section-height: 400px;
+
+//features
+$features-h3-margin-bottom: 40px;
+$feature-box-margin-bottom: 60px;
+$feature-box-div-margin-bottom: 0;
+$feature-box-div-width: 45%;
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+@media screen and (min-width: 768px) {
+ @import "size";
+
+ #hamburger {
+ display: none;
+ }
+
+ .td-home {
+ #viewDocs,
+ #tryKubernetes {
+ display: inline-block;
+ }
+ }
+
+ #vendorStrip {
+ display: block;
+ text-align: center;
+
+ img {
+ max-height: 24px;
+ vertical-align: middle;
+ margin: 0 30px;
+ }
+ }
+
+ #oceanNodes {
+ h3 {
+ text-align: left;
+ margin-bottom: 18px;
+ }
+
+ main,
+ .main-section {
+ position: relative;
+ clear: both;
+ display: table;
+ height: 160px;
+
+ .content {
+ display: table-cell;
+ position: relative;
+ vertical-align: middle;
+ }
+
+ .image-wrapper {
+ position: absolute;
+ top: 50%;
+ max-width: 25%;
+ max-height: 100%;
+ transform: translateY(-50%);
+ }
+
+ &:nth-child(odd) {
+ padding-right: 210px;
+
+ .image-wrapper {
+ right: 0;
+ }
+ }
+
+ &:nth-child(even) {
+ padding-left: 210px;
+
+ .image-wrapper {
+ left: 0;
+ }
+ }
+
+ &:nth-child(1) {
+ padding-right: 0;
+
+ h3,
+ p {
+ text-align: center;
+ }
+
+ .image-wrapper {
+ position: relative;
+ display: block;
+ float: none;
+ max-width: 100%;
+ transform: none;
+ }
+
+ .content {
+ display: block;
+ }
+ }
+
+ img {
+ width: 100%;
+ }
+ }
+ }
+
+ #video {
+ height: $video-section-height;
+ display: block;
+ height: 500px;
+
+ & > .light-text {
+ display: block;
+ float: right;
+ text-align: left;
+ margin-right: 5%;
+ }
+ }
+
+ #mobileShowVideoButton {
+ display: none;
+ }
+
+ #features {
+ padding-bottom: 60px;
+
+ .feature-box {
+ margin-bottom: 30px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ h3 {
+ margin-bottom: $features-h3-margin-bottom;
+ }
+
+ .feature-box {
+ & > div {
+ width: $feature-box-div-width;
+ margin-bottom: $feature-box-div-margin-bottom;
+ }
+ }
+ }
+
+ #talkToUs {
+ #bigSocial {
+ div {
+ width: calc(50% - 15px);
+ }
+
+ div + div {
+ margin-top: 0;
+ }
+
+ div:nth-child(2) {
+ margin-left: 20px;
+ }
+
+ div:nth-child(4) {
+ margin-left: 20px;
+ }
+
+ a {
+ display: inline-block;
+ color: $blue;
+ font-weight: 400;
+ text-decoration: none;
+ }
+ }
+ }
+
+ .td-home #caseStudiesWrapper {
+ div {
+ width: 48%;
+ }
+ }
+}
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
new file mode 100644
index 00000000000..da42c073673
--- /dev/null
+++ b/assets/scss/_variables_project.scss
@@ -0,0 +1,13 @@
+/* This file is provided by Docsy as an entry point to styling.
+Add styles or override variables from the theme here. */
+
+@import "reset";
+@import "skin";
+
+//K8S-Docsy integration
+@import "custom";
+
+//Media queries
+@import "base";
+@import "tablet";
+@import "desktop";
diff --git a/config.toml b/config.toml
index 772c160e1f4..423562ee81d 100644
--- a/config.toml
+++ b/config.toml
@@ -1,6 +1,11 @@
baseURL = "https://kubernetes.io"
title = "Kubernetes"
+# Hugo allows theme composition (and inheritance). The precedence is from left to right.
+theme = ["docsy"]
+
+# Language settings
+contentDir = "content/en"
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
enableRobotsTXT = true
@@ -10,10 +15,17 @@ disableKinds = ["taxonomy", "taxonomyTerm"]
ignoreFiles = [ "^OWNERS$", "README[-]+[a-z]*\\.md", "^node_modules$", "content/en/docs/doc-contributor-tools" ]
-contentDir = "content/en"
-
timeout = 3000
+# Highlighting config.
+pygmentsCodeFences = true
+pygmentsUseClasses = false
+# Use the new Chroma Go highlighter in Hugo.
+pygmentsUseClassic = false
+#pygmentsOptions = "linenos=table"
+# See https://help.farbox.com/pygments.html
+pygmentsStyle = "emacs"
+
# Enable Git variables like commit, lastmod
enableGitInfo = true
@@ -44,7 +56,7 @@ disableLanguages = ["hi", "no"]
style = "emacs"
tabWidth = 4
[markup.tableOfContents]
- endLevel = 2
+ endLevel = 3
ordered = false
startLevel = 2
@@ -76,7 +88,28 @@ baseName = "_headers"
isPlainText = true
notAlternative = true
+# Image processing configuration.
+[imaging]
+resampleFilter = "CatmullRom"
+quality = 75
+anchor = "smart"
+
+[services]
+[services.googleAnalytics]
+# Comment out the next line to disable GA tracking. Also disables the feature described in [params.ui.feedback].
+id = "UA-00000000-0"
+
[params]
+copyright_k8s = "The Kubernetes Authors"
+copyright_linux = "Copyright © 2020 The Linux Foundation ®."
+# privacy_policy = "https://policies.google.com/privacy"
+
+# First one is picked as the Twitter card image if not set on page.
+# images = ["images/project-illustration.png"]
+
+# Menu title if your navbar has a versions selector to access old versions of your site.
+# This menu appears only if you have at least one [params.versions] set.
+version_menu = "Versions"
time_format_blog = "Monday, January 02, 2006"
description = "Production-Grade Container Orchestration"
@@ -99,6 +132,20 @@ githubWebsiteRaw = "raw.githubusercontent.com/kubernetes/website"
announcement = true
announcement_bg = "#000000" #choose a dark color – text is white
+#Searching
+k8s_search = true
+
+#The following search parameters are specific to Docsy's implementation. Kubernetes implementes its own search-related partials and scripts.
+
+# Google Custom Search Engine ID. Remove or comment out to disable search.
+#gcs_engine_id = "011737558837375720776:fsdu1nryfng"
+
+# Enable Algolia DocSearch
+algolia_docsearch = false
+
+# Enable Lunr.js offline search
+offlineSearch = false
+
[params.pushAssets]
css = [
"callouts",
@@ -145,6 +192,80 @@ githubbranch = "v1.14.10"
docsbranch = "release-1.14"
url = "https://v1-14.docs.kubernetes.io"
+# User interface configuration
+[params.ui]
+# Enable to show the side bar menu in its compact state.
+sidebar_menu_compact = false
+# Set to true to disable breadcrumb navigation.
+breadcrumb_disable = false
+# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
+sidebar_search_disable = false
+# Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
+navbar_logo = true
+# Set to true to disable the About link in the site footer
+footer_about_disable = false
+
+# Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
+# This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.
+# If you want this feature, but occasionally need to remove the "Feedback" section from a single page,
+# add "hide_feedback: true" to the page's front matter.
+[params.ui.feedback]
+enable = true
+# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
+yes = 'Glad to hear it! Please tell us how we can improve.'
+no = 'Sorry to hear that. Please tell us how we can improve.'
+
+[params.links]
+# End user relevant links. These will show up on left side of footer and in the community page if you have one.
+[[params.links.user]]
+ name = "User mailing list"
+ url = "https://discuss.kubernetes.io"
+ icon = "fa fa-envelope"
+ desc = "Discussion and help from your fellow users"
+
+[[params.links.user]]
+ name = "Twitter"
+ url = "https://twitter.com/kubernetesio"
+ icon = "fab fa-twitter"
+ desc = "Follow us on Twitter to get the latest news!"
+
+[[params.links.user]]
+ name = "Calendar"
+ url = "https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com"
+ icon = "fas fa-calendar-alt"
+ desc = "Google Calendar for Kubernetes"
+
+[[params.links.user]]
+ name = "Youtube"
+ url = "https://youtbue.com/kubernetescommunity"
+ icon = "fab fa-youtube"
+ desc = "Youtube community videos"
+
+# Developer relevant links. These will show up on right side of footer and in the community page if you have one.
+[[params.links.developer]]
+ name = "GitHub"
+ url = "https://github.com/kubernetes/kubernetes"
+ icon = "fab fa-github"
+ desc = "Development takes place here!"
+
+[[params.links.developer]]
+ name = "Slack"
+ url = "https://slack.k8s.io"
+ icon = "fab fa-slack"
+ desc = "Chat with other project developers"
+
+[[params.links.developer]]
+ name = "Contribute"
+ url = "https://git.k8s.io/community/contributors/guide"
+ icon = "fas fa-edit"
+ desc = "Contribute to the Kubernetes website"
+
+[[params.links.developer]]
+ name = "Stack Overflow"
+ url = "https://stackoverflow.com/questions/tagged/kubernetes"
+ icon = "fab fa-stack-overflow"
+ desc = "Practical questions and curated answers"
+
# Language definitions.
[languages]
diff --git a/content/en/community/_index.html b/content/en/community/_index.html
index 0f6fb9bc04d..e1ebb9e9cb1 100644
--- a/content/en/community/_index.html
+++ b/content/en/community/_index.html
@@ -17,7 +17,7 @@ cid: community
-
+