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
+45
-46
@@ -1,48 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html id="docs" lang="{{ .Language }}" class="{{ .Params.class }}">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{ partial "announcement.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ block "hero" . }}
|
||||
<!-- HERO -->
|
||||
<section id="hero" class="light-text no-sub">
|
||||
{{ partial "docs/top-menu.html" . }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ block "deprecation" . }}{{ partial "deprecation-warning.html" . }}{{ end }}
|
||||
<main>
|
||||
<section id="encyclopedia">
|
||||
{{ block "side-menu" . }}<div id="docsToc" style="display:none;"></div>{{ end }}
|
||||
<div id="{{ block "content-id" . }}docsContent{{ end }}">
|
||||
{{ block "content" . }}{{ end }}
|
||||
|
||||
{{ partial "feedback.html" . }}
|
||||
|
||||
{{ partial "git-info.html" . }}
|
||||
<!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>
|
||||
</head>
|
||||
<body class="td-{{ .Kind }}">
|
||||
<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-md-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
|
||||
{{ partial "sidebar.html" . }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ partialCached "footer.html" . }}
|
||||
{{ partialCached "footer-scripts.html" . }}
|
||||
<script language="application/javascript">
|
||||
// This script turns in-page headers into clickable and shareable
|
||||
(function addHeadingLinks(){
|
||||
var article = document.getElementById('docsContent');
|
||||
var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
|
||||
headings.forEach(function(heading){
|
||||
if(heading.id){
|
||||
var a = document.createElement('a');
|
||||
a.innerHTML = heading.innerHTML;
|
||||
a.href = '#'+heading.id;
|
||||
a.classList.add('inpage_heading');
|
||||
heading.innerHTML = '';
|
||||
heading.appendChild(a);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
<main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
|
||||
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
|
||||
{{ block "main" . }}{{ end }}
|
||||
{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
|
||||
{{ partial "feedback.html" .Site.Params.ui.feedback }}
|
||||
{{ end }}
|
||||
{{ partial "git-info.html" . }}
|
||||
{{ if (.Site.DisqusShortname) }}
|
||||
<br />
|
||||
{{ partial "disqus-comment.html" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
<div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
|
||||
{{ partial "toc.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "scripts.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
{{ define "content" }}
|
||||
{{ define "main" }}
|
||||
{{ if not .Params.notitle }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
@@ -13,37 +13,10 @@
|
||||
<p>{{ .Params.overview | safeHTML }}</p>
|
||||
<br>
|
||||
<div class="launch-cards">
|
||||
{{ template "docs-portal-card" . }}
|
||||
{{ $page := (partial "docs/docs-portal-card" .) }}
|
||||
{{ .Scratch.Set "html" $page }}
|
||||
{{ $page }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "docs-portal-card" }}
|
||||
{{ range .Params.cards }}
|
||||
<div class="launch-card">
|
||||
<h4>{{ .title }}</h4>
|
||||
<p>{{ .description }}</p>
|
||||
<br>
|
||||
<ul>
|
||||
{{ $name := .name }}
|
||||
{{ range where ($.Site.Pages.ByParam "card.weight") ".Params.card" "!=" nil }}
|
||||
{{ if eq .Params.card.name $name }}
|
||||
{{ $p := . }}
|
||||
{{ if (isset .Params.card "anchors") }}
|
||||
{{ range .Params.card.anchors }}
|
||||
<li><a href="{{ $p.Permalink }}{{ .anchor }}">{{ .title }}</a></li>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<li><a href={{ .Permalink }}>
|
||||
{{ if (isset .Params.card "title") }}{{ .Params.card.title }}{{ else }}{{ .LinkTitle }}{{ end }}
|
||||
</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<br><br>
|
||||
<button id="btn-concepts" class="button" onClick="location.href='{{ .button_path | relLangURL }}';" aria-label="{{ .title }}">{{ .button }}</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -2,7 +2,7 @@
|
||||
{{ partial "docs/side-menu.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
<link href="{{ "css/glossary.css" | relURL }}" rel="stylesheet">
|
||||
<script src="{{ "js/glossary.js" | relURL }}"></script>
|
||||
@@ -43,7 +43,7 @@
|
||||
<div>
|
||||
<div class="term-name"><b>{{ .Title }}</b><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">LINK</a></div>
|
||||
{{ with .Params.aka }}
|
||||
{{ T "layouts_docs_glossary_aka" }}: <i>{{ delimit . ", " }}</i>
|
||||
{{ T "layouts_docs_glossary_aka" }}:<i>{{ delimit . ", " }}</i>
|
||||
<br>
|
||||
{{ end }}
|
||||
<span class="preview-text">{{ .Summary }} <a href="javascript:void(0)" class="click-controller no-underline" data-target="{{ .Params.id }}">[+]</a></span>
|
||||
|
||||
+16
-18
@@ -1,19 +1,17 @@
|
||||
{{ define "content" }}
|
||||
{{ $hasContent := false }}
|
||||
{{ with .File }}
|
||||
{{ if ne .Filename "" }}
|
||||
{{ $hasContent = (ge (len $.RawContent) 100) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $hasContent }}
|
||||
{{ partial "docs/content-page" (dict "ctx" $ "page" $ ) }}
|
||||
{{ else }}
|
||||
{{ if ge (len .Pages) 1 }}
|
||||
{{ $page := index .Pages 0 }}
|
||||
{{ partial "docs/content-page" (dict "ctx" $ "page" $page) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ define "side-menu" }}
|
||||
{{ partial "docs/side-menu.html" . }}
|
||||
{{ define "main" }}
|
||||
<div class="td-content">
|
||||
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
|
||||
{{ $hasContent := false }}
|
||||
{{ with .File }}
|
||||
{{ if ne .Filename "" }}
|
||||
{{ $hasContent = (ge (len $.RawContent) 100) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $hasContent }}
|
||||
{{ partial "docs/content-page" (dict "ctx" $ "page" $ ) }}
|
||||
{{ else }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
{{ partial "section-index.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
+25
-12
@@ -1,14 +1,27 @@
|
||||
{{ define "content" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
<gcse:searchresults-only linktarget="_parent">
|
||||
<div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div>
|
||||
<div id="bing-pagination-container"></div>
|
||||
</gcse:searchresults-only>
|
||||
|
||||
{{ define "main" }}
|
||||
<section class="row td-search-result">
|
||||
<div class="col-12 col-md-8 offset-md-2">
|
||||
<h2 class="ml-4">{{ .Title }}</h2>
|
||||
{{ if .Site.Params.gcs_engine_id }}
|
||||
<script>
|
||||
(function() {
|
||||
var cx = '{{ . }}';
|
||||
var gcse = document.createElement('script');
|
||||
gcse.type = 'text/javascript';
|
||||
gcse.async = true;
|
||||
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(gcse, s);
|
||||
})();
|
||||
</script>
|
||||
<gcse:searchresults-only></gcse:searchresults-only>
|
||||
{{ else if .Site.Params.k8s_search }}
|
||||
<script src="{{ "js/search.js" | relURL }}"></script>
|
||||
<gcse:searchresults-only linktarget="_parent">
|
||||
<div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div>
|
||||
<div id="bing-pagination-container"></div>
|
||||
</gcse:searchresults-only>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -1,8 +1,4 @@
|
||||
|
||||
{{ define "content" }}
|
||||
{{ partial "docs/content-page" (dict "ctx" . "page" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "side-menu" }}
|
||||
{{ partial "docs/side-menu.html" . }}
|
||||
{{ end }}
|
||||
{{ define "main" }}
|
||||
<div class="td-content">
|
||||
{{ partial "docs/content-page" (dict "ctx" . "page" .) }}
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user