[WIP] Upgrade to Docsy 0.5.1 via NPM module (1.31 backport)

.gitmodules

@@ -1,7 +1,3 @@
-[submodule "themes/docsy"]
-	path = themes/docsy
-	url = https://github.com/google/docsy.git
-	branch = v0.3.0
 [submodule "api-ref-generator"]
 	path = api-ref-generator
 	url = https://github.com/kubernetes-sigs/reference-docs

Makefile

@@ -12,6 +12,19 @@ CONTAINER_IMAGE   = $(IMAGE_REGISTRY)/k8s-website-hugo:v$(HUGO_VERSION)-$(IMAGE_
 # Mount read-only to allow use with tools like Podman in SELinux mode
 # Container targets don't need to write into /src
 CONTAINER_RUN     = "$(CONTAINER_ENGINE)" run --rm --interactive --tty --volume "$(CURDIR):/src:ro,Z"
+CONTAINER_RUN_TTY = "$(CONTAINER_ENGINE)" run --rm --interactive --tty
+CONTAINER_HUGO_MOUNTS = \
+	--read-only \
+	--mount type=bind,source=$(CURDIR)/.git,target=/src/.git,readonly \
+	--mount type=bind,source=$(CURDIR)/archetypes,target=/src/archetypes,readonly \
+	--mount type=bind,source=$(CURDIR)/assets,target=/src/assets,readonly \
+	--mount type=bind,source=$(CURDIR)/content,target=/src/content,readonly \
+	--mount type=bind,source=$(CURDIR)/data,target=/src/data,readonly \
+	--mount type=bind,source=$(CURDIR)/i18n,target=/src/i18n,readonly \
+	--mount type=bind,source=$(CURDIR)/layouts,target=/src/layouts,readonly \
+	--mount type=bind,source=$(CURDIR)/static,target=/src/static,readonly \
+	--mount type=tmpfs,destination=/tmp,tmpfs-mode=01777 \
+	--mount type=bind,source=$(CURDIR)/hugo.toml,target=/src/hugo.toml,readonly
 
 CCRED=\033[0;31m
 CCEND=\033[0m
@@ -98,15 +111,13 @@ docker-push: ## Build a multi-architecture image and push that into the registry
 
 container-build: module-check
 	mkdir -p public
-	$(CONTAINER_RUN) --read-only \
-		--mount type=tmpfs,destination=/tmp,tmpfs-mode=01777 \
-		--mount type=bind,source=$(CURDIR)/public,target=/src/public $(CONTAINER_IMAGE) \
-		hugo --cleanDestinationDir --buildDrafts --buildFuture --environment preview --noBuildLock
+	$(CONTAINER_RUN_TTY) $(CONTAINER_HUGO_MOUNTS) $(CONTAINER_IMAGE) \
+		hugo --destination /tmp/public --cleanDestinationDir --buildDrafts --buildFuture --environment preview --noBuildLock
 
 # no build lock to allow for read-only mounts
 container-serve: module-check ## Boot the development server using container.
-	$(CONTAINER_RUN) --cap-drop=ALL --cap-add=AUDIT_WRITE --read-only \
-		--mount type=tmpfs,destination=/tmp,tmpfs-mode=01777 -p 1313:1313 $(CONTAINER_IMAGE) \
+	$(CONTAINER_RUN_TTY) --cap-drop=ALL --cap-add=AUDIT_WRITE $(CONTAINER_HUGO_MOUNTS) \
+		-p 1313:1313 $(CONTAINER_IMAGE) \
 		hugo server --buildDrafts --buildFuture --environment development --bind 0.0.0.0 --destination /tmp/public --cleanDestinationDir --noBuildLock
 
 test-examples:

README.md

@@ -30,7 +30,7 @@ git clone https://github.com/kubernetes/website.git
 cd website
 ```
 
-The Kubernetes website uses the [Docsy Hugo theme](https://github.com/google/docsy#readme). Even if you plan to run the website in a container, we strongly recommend pulling in the submodule and other development dependencies by running the following:
+The Kubernetes website uses git submodules. Even if you plan to run the website in a container, we strongly recommend pulling in the submodule and other development dependencies by running the following:
 
 ### Windows
 

assets/scss/_custom.scss

@@ -98,10 +98,7 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
 
 body.td-404 main .error-details {
   max-width: 1100px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 4em;
-  margin-bottom: 0;
+  margin: 0 auto;
 }
 
 /* Global - Mermaid.js diagrams */
@@ -1591,7 +1588,7 @@ html.no-js body div#announcement {
   // default background is blue; overrides are possible
   color: #fff;
   display: none; // When javascript is available, Let javascript handle the state of the announcement
-  
+
   .announcement-main {
     margin-left: auto;
     margin-right: auto;
@@ -1828,7 +1825,7 @@ div.alert > em.javascript-required {
   align-items: center;
   background-color: #fff;
   border: 1px solid #4c4c4c;
-  border-radius: 20px; 
+  border-radius: 20px;
   vertical-align: middle;
   flex-grow: 1;
   overflow-x: hidden;
@@ -1857,7 +1854,7 @@ div.alert > em.javascript-required {
 #search .pagefind-ui form input  {
   background-color: #fff;
   border: 1px solid #4c4c4c;
-  border-radius: 20px; 
+  border-radius: 20px;
   overflow-x: hidden;
   width: auto;
   padding: 6px 10px !important;
@@ -1912,7 +1909,7 @@ body.td-search #search {
 }
 
 /* CSS for 'figure' full-screen display */
- 
+
 /* Define styles for full-screen overlay */
 .figure-fullscreen-overlay {
   position: fixed;
@@ -1941,7 +1938,7 @@ body.td-search #search {
 /* Define styles for close button */
 .figure-close-button {
   position: absolute;
-  top: 1%; 
+  top: 1%;
   right: 2%;
   cursor: pointer;
   font-size: calc(5vw + 10px);
@@ -1954,6 +1951,10 @@ body.td-search #search {
   padding: 0.2rem;
 }
 
+.includecode .highlight {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 
 // handle main page features on narrow viewports
 @media screen and (max-width: 768px) {

hugo.toml

@@ -3,6 +3,7 @@ title = "Kubernetes"
 
 # Hugo allows theme composition (and inheritance). The precedence is from left to right.
 theme = ["docsy"]
+themesDir = "node_modules"
 
 # Language settings
 contentDir = "content/en"
@@ -248,44 +249,44 @@ no = 'Sorry to hear that. Please <a href="https://github.com/USERNAME/REPOSITORY
 [[params.links.user]]
 	name_key = "community_youtube_name"
 	url = "https://youtube.com/kubernetescommunity"
-	icon = "fab fa-youtube"
+	icon = "fa-brands fa-youtube"
 
 [[params.links.user]]
 	name_key = "community_forum_name"
 	url = "https://discuss.kubernetes.io"
-	icon = "fa fa-envelope"
+	icon = "fa-solid fa-envelope"
 
 [[params.links.user]]
 	name_key = "community_server_fault_name"
 	url = "https://serverfault.com/questions/tagged/kubernetes"
-	icon = "fab fa-stack-overflow"
+	icon = "fa-brands fa-stack-overflow"
 
 [[params.links.user]]
 	name_key = "community_x_name"
 	url = "https://twitter.com/kubernetesio"
-	icon = "fab fa-twitter"
+	icon = "fa-brands fa-twitter"
 # Replace with fa-x-twitter once available
 
 # 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_key = "community_contributor_site_name"
 	url = "https://k8s.dev/"
-	icon = "fas fa-laptop-code"
+	icon = "fa-solid fa-laptop-code"
 
 [[params.links.developer]]
 	name_key = "community_github_name"
 	url = "https://github.com/kubernetes/kubernetes"
-	icon = "fab fa-github"
+	icon = "fa-brands fa-github"
 
 [[params.links.developer]]
 	name_key = "community_slack_name"
 	url = "https://slack.k8s.io"
-	icon = "fab fa-slack"
+	icon = "fa-brands fa-slack"
 
 [[params.links.developer]]
 	name_key = "community_calendar_name"
 	url = "https://calendar.google.com/calendar/embed?src=calendar%40kubernetes.io"
-	icon = "fas fa-calendar-alt"
+	icon = "fa-solid fa-calendar-days"
 
 # Language definitions.
 
@@ -357,7 +358,7 @@ languageNameLatinScript = "Deutsch"
 
 [languages.hi]
 title = "Kubernetes"
-languageName = "हिन्दी (Hindi)"  
+languageName = "हिन्दी (Hindi)"
 weight = 6
 contentDir = "content/hi"
 languagedirection = "ltr"

layouts/404.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 {{ partial "handle-version-switch-404.html" . }}
+<div class="td-content">
 <section id="error-404" class="error-details">
     <p>
     {{ T "error_404_were_you_looking_for" }}
@@ -11,4 +12,5 @@
         {{ end }}
     </ul>
 </section>
+</div>
 {{ end }}

layouts/blog/baseof.html

@@ -34,7 +34,7 @@
             ><!-- inside main element -->
             {{ 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>
+              RSS <i class="fa-solid fa-rss ml-2 "></i>
             </a>
             {{ end -}}
             {{ block "main" . }}{{ end }}

layouts/partials/blog-meta-links.html

@@ -1,13 +1,13 @@
 <div class="td-page-blog-meta ml-2 pb-1 pt-2 mb-4">
   {{ 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 }}" target="_blank"><div> <i class="fas fa-rss fab-icon"> </i> <span class="widget-link-text">RSS Feed</span></div> </a>
+  <a class="widget-link" href="{{ .Permalink | safeURL }}" target="_blank"><div> <i class="fa-solid fa-rss"> </i> <span class="widget-link-text">RSS Feed</span></div> </a>
   {{ end -}}
-  <a class="widget-link" href="https://kubernetes.io/docs/contribute/new-content/blogs-case-studies/" target="_blank"><div> <i class="fa fa-edit fab-icon"></i> <span class="widget-link-text">Submit a Post</span></div></a>
-  <a class="widget-link" href="https://twitter.com/kubernetesio" target="_blank"><div> <i class="fab fa-twitter-square fab-icon"> </i> <span class="widget-link-text"> @Kubernetesio</span></div></a>
-  <a class="widget-link" href="https://github.com/kubernetes/kubernetes" target="_blank"><div> <i class="fab fa-github-square fab-icon"></i> <span class="widget-link-text"> on GitHub </span></div></a>
-  <a class="widget-link" href="http://slack.k8s.io" target="_blank"><div><i class="fab fa-slack fab-icon"> </i> <span class="widget-link-text">#kubernetes-users </span></div></a>
-  <a class="widget-link" href="https://stackoverflow.com/questions/tagged/kubernetes" target="_blank"><div><i class="fab fa-stack-overflow fab-icon"></i> <span class="widget-link-text"> Stack Overflow</span></div></a>
-  <a class="widget-link" href="https://discuss.kubernetes.io" target="_blank"><div> <i class="fab fa-discourse fab-icon"></i><span class="widget-link-text"> Forum </span></div></a>
-  <a class="widget-link" href="https://kubernetes.io/docs/setup"><div><i class="fa fa-download fab-icon"></i> <span class="widget-link-text"> Kubernetes</span></div></a>
+  <a class="widget-link" href="https://kubernetes.io/docs/contribute/new-content/blogs-case-studies/" target="_blank"><div> <i class="fa-solid fa-pen-to-square"></i> <span class="widget-link-text">Submit a Post</span></div></a>
+  <a class="widget-link" href="https://twitter.com/kubernetesio" target="_blank"><div> <i class="fa-brands fa-twitter-square"> </i> <span class="widget-link-text"> @Kubernetesio</span></div></a>
+  <a class="widget-link" href="https://github.com/kubernetes/kubernetes" target="_blank"><div> <i class="fa-brands fa-square-github"></i> <span class="widget-link-text"> on GitHub </span></div></a>
+  <a class="widget-link" href="http://slack.k8s.io" target="_blank"><div><i class="fa-brands fa-slack"> </i> <span class="widget-link-text">#kubernetes-users </span></div></a>
+  <a class="widget-link" href="https://stackoverflow.com/questions/tagged/kubernetes" target="_blank"><div><i class="fa-brands fa-stack-overflow"></i> <span class="widget-link-text"> Stack Overflow</span></div></a>
+  <a class="widget-link" href="https://discuss.kubernetes.io" target="_blank"><div> <i class="fa-brands fa-discourse"></i><span class="widget-link-text"> Forum </span></div></a>
+  <a class="widget-link" href="https://kubernetes.io/docs/setup"><div><i class="fa-solid fa-download"></i> <span class="widget-link-text"> Kubernetes</span></div></a>
 </div>

layouts/partials/blog-sidebar.html

@@ -1,4 +1,4 @@
-{{/* The blog nav organizes posts grouped by year, which represents a customized version of the 
+{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
 sidebar-tree in use elsewhere on the site. */}}
 
 {{/* We cache this partial for bigger sites and set the active class client side. */}}
@@ -8,10 +8,10 @@
 
   <form class="td-sidebar__search d-flex align-items-center">
     {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fa-solid fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
-  
+
   <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
     <!-- {{ if  (gt (len .Site.Home.Translations) 0) }}
     <div class="nav-item dropdown d-block d-lg-none">

layouts/partials/head.html

@@ -55,9 +55,9 @@
 {{ partial "css.html" . }}
 <!-- Content for social media sharing previews -->
 <!-- Facebook uses the og: stuff, while Twitter and others use twitter: -->
-<meta name="description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
-<meta property="og:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
-<meta name="twitter:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
+<meta name="description" content="{{ template "partials/page-description.html" . }}">
+<meta property="og:description" content="{{ template "partials/page-description.html" . }}">
+<meta name="twitter:description" content="{{ template "partials/page-description.html" . }}">
 <meta property="og:url" content="{{ .Permalink }}">
 <meta property="og:title" content="{{ if .Params.title }}{{ .Title }}{{ else }}{{ .Summary | truncate 10 }}{{ end }}">
 <meta name="twitter:title" content="{{ if .Params.title }}{{ .Title }}{{ else }}{{ .Summary | truncate 10 }}{{ end }}">

layouts/partials/page-meta-links.html

@@ -29,31 +29,31 @@
       <!-- Loop through the API reference links -->
         {{- range $apiReferenceMetaLinks -}}
           {{- $apiRefPageLink  := . -}}
-          {{- $apiRefPageLink  | replaceRE "<a([^>]*)>" "<a$1><i class=\"fa fa-code fa-fw\"></i> " | safeHTML -}}
+          {{- $apiRefPageLink  | replaceRE "<a([^>]*)>" "<a$1><i class=\"fa-solid fa-code fa-fw\"></i> " | safeHTML -}}
         {{- end -}}
     {{- end -}}
 
     {{ if not (.Param "auto_generated") }}
-    <a href="{{ $editURL }}" target="_blank"><i class="fa fa-edit fa-fw"></i> {{ T "post_edit_this" }}</a>
+    <a href="{{ $editURL }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
     {{- if .HasShortcode "thirdparty-content" -}}
-    <a href="#third-party-content-disclaimer" class="third-party-disclaimer-link"><i class="fa fa-icon-circle fa-fw"></i> {{ T "thirdparty_message_edit_disclaimer" | safeHTML }}</a>
+    <a href="#third-party-content-disclaimer" class="third-party-disclaimer-link"><i class="d-inline-block fa-fw"></i> {{ T "thirdparty_message_edit_disclaimer" | safeHTML }}</a>
     {{- end }}
 
-    <a href="{{ $newPageURL }}" target="_blank"><i class="fa fa-edit fa-fw"></i> {{ T "post_create_child_page" }}</a>
+    <a href="{{ $newPageURL }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_create_child_page" }}</a>
     {{ end }}
 
-    <a href="{{ $issuesURL }}" target="_blank"><i class="fab fa-github fa-fw"></i> {{ T "post_create_issue" }}</a>
+    <a href="{{ $issuesURL }}" target="_blank"><i class="fa-brands fa-github fa-fw"></i> {{ T "post_create_issue" }}</a>
     {{ if $gh_project_repo }}
       {{ $project_issueURL := printf "%s/issues/new" $gh_project_repo }}
-      <a href="{{ $project_issueURL }}" target="_blank"><i class="fas fa-tasks fa-fw"></i> {{ T "post_create_project_issue" }}</a>
+      <a href="{{ $project_issueURL }}" target="_blank"><i class="fa-solid fa-list-check fa-fw"></i> {{ T "post_create_project_issue" }}</a>
     {{ end }}
     {{- if (.Param "auto_generated") -}}
-    <a href="#auto-generated-edit-notice" class="auto-generated-notice-link"><i class="fa fa-icon-circle fa-fw"></i> {{ T "auto_generated_edit_notice" | safeHTML }}</a>
+    <a href="#auto-generated-edit-notice" class="auto-generated-notice-link"><i class="d-inline-block fa-fw"></i> {{ T "auto_generated_edit_notice" | safeHTML }}</a>
     {{- end -}}
 
   {{ end }}
   {{ with .CurrentSection.AlternativeOutputFormats.Get "print" }}
-    <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
+    <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa-solid fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
   {{ end }}
   </div>
 {{ end }}

layouts/partials/scripts.html

@@ -1,26 +1,32 @@
-<script src="/js/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
-<script src="/js/popper-1.16.1.min.js" intregrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-<script src="/js/bootstrap-4.6.1.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
 <script src="{{ "js/script.js" | relURL }}"></script>
 
+{{ $jsBs := resources.Get "vendor/bootstrap/dist/js/bootstrap.bundle.js" -}}
 {{ $jsBase := resources.Get "js/base.js" }}
 {{ $jsAnchor := resources.Get "js/anchor.js" }}
 {{ $jsSearch := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" .Site.Home }}
 {{ $jsMermaid := resources.Get "js/mermaid.js" | resources.ExecuteAsTemplate "js/mermaid.js" . }}
 {{ if .Site.Params.offlineSearch }}
 {{ $jsSearch = resources.Get "js/offline-search.js" }}
 {{ end }}
-{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsMermaid) | resources.Concat "js/main.js" }}
-{{ if hugo.IsServer }}
-<script src="{{ $js.RelPermalink }}"></script>
-{{ else }}
-{{ $js := $js | minify | fingerprint }}
-<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
-{{ end }}
-{{ with .Site.Params.prism_syntax_highlighting }}
-<!-- scripts for prism -->
-<script src='/js/prism.js'></script>
-{{ end }}
+{{ $js := (slice $jsBs $jsBase $jsAnchor $jsSearch $jsMermaid) | resources.Concat "js/main.js" -}}
+{{ if hugo.IsProduction -}}
+  {{ $js := $js | minify | fingerprint -}}
+  <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ else -}}
+  <script src="{{ $js.RelPermalink }}"></script>
+{{ end -}}
+
+{{ if .Site.Params.prism_syntax_highlighting -}}
+  <script src='{{ "js/prism.js" | relURL }}'></script>
+{{ else if false -}}
+  {{ $c2cJS := resources.Get "js/click-to-copy.js" -}}
+  {{ if hugo.IsProduction -}}
+    {{ $c2cJS = $c2cJS | minify | fingerprint -}}
+  {{ end -}}
+  <script defer src="{{ $c2cJS.RelPermalink }}" {{ with $c2cJS.Data.Integrity -}}
+    integrity="{{ . }}" {{ end -}}
+    crossorigin="anonymous"></script>
+{{ end -}}
 
 <!--for the splitter-->
 <script>
@@ -51,5 +57,4 @@
   }
 </script>
 
-
 {{ partial "hooks/body-end.html" . }}