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.
This commit is contained in:
Aidan Ranney
+46
-42
@@ -1,43 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html id="blog" lang="{{ .Language }}" class="gr__kubernetes_io fontawesome-i2svg-active fontawesome-i2svg-complete">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/blog.css" | relURL }}">
|
||||
</head>
|
||||
<body>
|
||||
{{ partial "announcement.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
<section id="hero" class="light-text no-sub">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</section>
|
||||
<main>
|
||||
<div class="container-fluid" style="padding-top: 2em">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-9 text blog-content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-3 text">
|
||||
<div class="widget-content">
|
||||
{{ with site.Home.OutputFormats.Get "rss" -}}
|
||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" title="{{ site.Title }}">
|
||||
<a class="widget-link" href="{{ .Permalink | safeURL }}"><div> <i class="fas fa-rss fab-icon"> </i> <div class="widget-link-text">RSS Feed</div></div> </a>
|
||||
{{ end -}}
|
||||
<a class="widget-link" href="https://kubernetes.io/docs/contribute/start/#write-a-blog-post"><div> <i class="fa fa-edit fab-icon"></i> <div class="widget-link-text">Submit a Post</div></div></a>
|
||||
<a class="widget-link" href="https://twitter.com/kubernetesio"><div> <i class="fab fa-twitter-square fab-icon"> </i> <div class="widget-link-text"> @Kubernetesio</div></div></a>
|
||||
<a class="widget-link" href="https://github.com/kubernetes/kubernetes"><div> <i class="fab fa-github-square fab-icon"></i> <div class="widget-link-text"> on GitHub </div></div></a>
|
||||
<a class="widget-link" href="http://slack.k8s.io"><div><i class="fab fa-slack fab-icon"> </i> <div class="widget-link-text">#kubernetes-users </div></div></a>
|
||||
<a class="widget-link" href="https://stackoverflow.com/questions/tagged/kubernetes"><div><i class="fab fa-stack-overflow fab-icon"></i> <div class="widget-link-text"> Overflow</div></div></a>
|
||||
<a class="widget-link" href="https://discuss.kubernetes.io"><div> <i class="fab fa-discourse fab-icon"></i><div class="widget-link-text"> Forum </div></div></a>
|
||||
<a class="widget-link" href="https://kubernetes.io/docs/setup"><div><i class="fa fa-download fab-icon"></i> <div class="widget-link-text"> Kubernetes</div></div></a>
|
||||
</div>
|
||||
{{ partialCached "blog/archive.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{{ partialCached "footer.html" . }}
|
||||
{{ partialCached "footer-scripts.html" . }}
|
||||
</body>
|
||||
<!doctype html>
|
||||
<html lang="{{ .Site.Language.Lang }}" class="no-js">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
|
||||
<!-- Disabled as Docsy is primarily handling styles for this template now -->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="{{ "css/blog.css" | relURL }}"> -->
|
||||
</head>
|
||||
<body class="td-{{ .Kind }} td-blog">
|
||||
<header>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ partial "announcement.html" . }}
|
||||
<section class="header-hero text-center text-white font-bold pb-4">
|
||||
<h1>
|
||||
{{ $sectionHeading := .Site.GetPage "section" .Section }}
|
||||
{{ with $sectionHeading }}
|
||||
{{ .Title }}
|
||||
{{ end }}
|
||||
</h1>
|
||||
</section>
|
||||
</header>
|
||||
<div class="container-fluid td-outer">
|
||||
<div class="td-main">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
|
||||
{{ partial "blog-sidebar.html" . }}
|
||||
</div>
|
||||
<main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main">
|
||||
{{ with .CurrentSection.OutputFormats.Get "rss" -}}
|
||||
<a class="btn btn-lg -bg-orange td-rss-button d-none d-lg-block" href="{{ .Permalink | safeURL }}" target="_blank">
|
||||
RSS <i class="fa fa-rss ml-2 "></i>
|
||||
</a>
|
||||
{{ end -}}
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
<div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
|
||||
{{ partial "blog-meta-links.html" . }}
|
||||
{{ partial "toc.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "scripts.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
+39
-15
@@ -1,17 +1,41 @@
|
||||
{{ define "main" }}
|
||||
{{ $pages := ($.Paginator 1).Pages }}
|
||||
{{ with site.Params.language_alternatives }}
|
||||
{{ range . }}
|
||||
{{ with (where $.Translations ".Lang" . ) }}
|
||||
{{ $p := index . 0 }}
|
||||
{{ $pages = $pages | lang.Merge ($p.Paginator 1).Pages }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range $pages }}
|
||||
{{ .Render "post" }}
|
||||
{{ end }}
|
||||
<div class="PageNavigation">
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div>
|
||||
{{ if .Parent.IsHome }}
|
||||
{{ $.Scratch.Set "blog-pages" (where .Site.RegularPages "Section" .Section) }}
|
||||
{{ else }}
|
||||
{{$.Scratch.Set "blog-pages" .Pages }}
|
||||
{{ end }}
|
||||
<!-- This file is identical to the Docsy template, except for a check to length before
|
||||
calling Paginate. Kubernetes includes blog/index.html pages for languages which do not
|
||||
have blog posts -->
|
||||
{{ if gt (len ($.Scratch.Get "blog-pages")) 0 }}
|
||||
{{ $pag := .Paginate (( $.Scratch.Get "blog-pages").GroupByDate "2006")}}
|
||||
{{ $pageGroups := $pag.PageGroups}}
|
||||
{{ if eq $pag.PageNumber 1 }}
|
||||
{{ end }}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{{ range $pageGroups }}
|
||||
<h2>{{ T "post_posts_in" }} {{ .Key }}</h2>
|
||||
<ul class="list-unstyled mt-4">
|
||||
{{ range .Pages }}
|
||||
<li class="media mb-4">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h5>
|
||||
<p class="mb-2 mb-md-3"><small class="text-muted">{{ .Date.Format ($.Param "time_format_blog") }} {{ T "ui_in"}} {{ .CurrentSection.LinkTitle }}</small></p>
|
||||
{{ partial "featured-image.html" (dict "p" . "w" 250 "h" 125 "class" "float-left mr-3 pt-1 d-none d-md-block") }}
|
||||
<p class="pt-0 mt-0">{{ .Plain | safeHTML | truncate 250 }}</p>
|
||||
<p class="pt-0"><a href="{{ .RelPermalink }}">{{ T "ui_read_more"}}</a></p>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pl-2 pt-2">
|
||||
<div class="col">
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -1,12 +0,0 @@
|
||||
<div class="PageNavigation">
|
||||
{{ if .PrevInSection }}
|
||||
<div class="pagerButton left">
|
||||
<h4><a class=" button" href="{{ .PrevInSection.RelPermalink }}"> {{ T "layouts_blog_pager_prev" }} </a></h4>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<div class="pagerButton right">
|
||||
<h4><a class=" button" href="{{ .NextInSection.RelPermalink }}"> {{ T "layouts_blog_pager_next" }} </a></h4>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<h4 class="date-header"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format site.Params.time_format_blog }}</time></h4>
|
||||
<h3 class="post-title entry-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
|
||||
{{ .Content }}
|
||||
@@ -1,4 +0,0 @@
|
||||
{{ define "main" }}
|
||||
{{ .Render "post" }}
|
||||
{{ .Render "pager" }}
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user