feat: upgrade docsy and hugo + add theme toggle

assets/scss/_styles_project.scss

@@ -37,12 +37,12 @@
     padding-right: 0;
   }
   .td-sidebar {
-    background-color: $td-sidebar-bg-color;
+    background-color: var(--bs-body-tertiary-bg);
   }
 }
 @include media-breakpoint-up(md) {
   .td-outer {
-    background-color: $td-sidebar-bg-color;
+    background-color: var(--bs-body-tertiary-bg);
     height: unset;
   }
   .td-sidebar, .td-sidebar-toc {
@@ -52,9 +52,6 @@
     padding-left: 0;
     padding-right: 0;
   }
-  main {
-    background-color: #ffffff;
-  }
 }
 
 // --------------------------------------------------

go.mod

@@ -0,0 +1,5 @@
+module github.com/kubeflow/website
+
+go 1.23.4
+
+require github.com/google/docsy v0.10.0 // indirect

go.sum

@@ -0,0 +1,4 @@
+github.com/FortAwesome/Font-Awesome v0.0.0-20240402185447-c0f460dca7f7/go.mod h1:IUgezN/MFpCDIlFezw3L8j83oeiIuYoj28Miwr/KUYo=
+github.com/google/docsy v0.10.0 h1:6tMDacPwAyRWNCfvsn/9qGOZDQ8b0aRzjRZvnZPY5dg=
+github.com/google/docsy v0.10.0/go.mod h1:c0nIAqmRTOuJ01F85U/wJPQtc3Zj9N58Kea9bOT2AJc=
+github.com/twbs/bootstrap v5.3.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

config.toml → hugo.toml

@@ -4,7 +4,7 @@ description = "Kubeflow makes deployment of ML Workflows on Kubernetes straightf
 
 enableRobotsTXT = true
 
-theme = ["docsy"]
+theme = ["github.com/google/docsy"]
 
 ###############################################################################
 # Docsy
@@ -254,6 +254,8 @@ enable = true
     # Disable about button in footer
     footer_about_disable = true
 
+    showLightDarkModeMenu = true
+
       # 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,
@@ -287,3 +289,10 @@ enable = true
       url = "/docs/about/community/#kubeflow-community-meetings"
       icon = "fa fa-calendar"
       desc = "View the Kubeflow Community Calendars!"
+
+[module]
+proxy = "direct"
+[[module.imports]]
+path = "github.com/google/docsy"
+
+

layouts/partials/head.html

@@ -22,6 +22,7 @@
   {{ end -}}
 </title>
 <meta name="description" content="{{ template "partials/page-description.html" . }}">
+{{ template "_internal/opengraph.html" . -}}
 {{ template "_internal/schema.html" . -}}
 
 <!-- include our custom "social_image_generator" partial -->
@@ -32,8 +33,8 @@
 
 {{ partialCached "head-css.html" . "asdf" -}}
 <script
-  src="https://code.jquery.com/jquery-3.6.0.min.js"
-  integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"
+  src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
   crossorigin="anonymous"></script>
 {{ if .Site.Params.offlineSearch -}}
 <script defer
@@ -70,6 +71,6 @@
   {{ if (or $enableGtagForUniversalAnalytics (hasPrefix .Site.GoogleAnalytics "G-")) -}}
     {{ template "_internal/google_analytics_gtag.html" . -}}
   {{ else -}}
-    {{ template "_internal/google_analytics_async.html" . -}}
+    {{ template "_internal/google_analytics.html" . -}}
   {{ end -}}
 {{ end -}}

layouts/partials/navbar.html

@@ -60,6 +60,11 @@
         {{ partial "navbar-lang-selector.html" . -}}
       </li>
       {{ end -}}
+      {{ if .Site.Params.ui.showLightDarkModeMenu -}}
+      <li class="td-light-dark-menu nav-item dropdown mt-1 mt-lg-0 mr-2">
+        {{ partial "theme-toggler" . }}
+      </li>
+      {{ end -}}
     </ul>
   </div>
 </div>

layouts/partials/scripts.html

@@ -1,7 +1,13 @@
-{{/* NOTE: we disable Docsy's default versions of these libraries, because they are very old. */ -}}
-{{ $needKaTeX  := false -}}
-{{ $needmhchem := false -}}
-{{ $needmermaid := false -}}
+{{ $needKaTeX  := or .Site.Params.katex.enable .Params.math .Params.chem -}}
+{{ $needmhchem := or .Site.Params.katex.mhchem.enable .Params.chem -}}
+{{ if ge hugo.Version "0.93.0" -}}
+  {{ $needKaTeX = or $needKaTeX (.Page.Store.Get "hasKaTeX") (.Page.Store.Get "hasmhchem") -}}
+  {{ $needmhchem = or $needmhchem (.Page.Store.Get "hasmhchem") -}}
+{{ else -}}
+  {{ if or $needKaTeX $needmhchem -}}
+    {{ warnf "Outdated Hugo version %s, consider upgrading to make full use of all theme features" hugo.Version  }}
+  {{ end -}}
+{{ end -}}
 
 {{ if .Site.Params.markmap.enable -}}
 <style>
@@ -30,44 +36,45 @@
 
 {{ if  $needKaTeX -}}
 {{/* load stylesheet and scripts for KaTeX support */ -}}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/katex.min.css"
-      integrity="sha512-6VMVcy7XQNyarhVuiL50FzpgCFKsyTd6YO93aaQEyET+BNaWvj0IgKR86Bf6+AmWczxAcSnL+JGjo+iStgO1gQ==" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].10/dist/katex.min.css"
+      integrity="sha512-r2+FkHzf1u0+SQbZOoIz2RxWOIWfdEzRuYybGjzKq18jG9zaSfEy9s3+jMqG/zPtRor/q4qaUCYQpmSjTw8M+g==" crossorigin="anonymous">
   {{/* The loading of KaTeX is deferred to speed up page rendering */ -}}
-<script defer src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/katex.min.js"
-        integrity="sha512-b9IKj4LCNrtCPBhceRcoYOHWW/S2q9fpl7iAJlyxYpykRj1SKM7FE9+E0NEnJ8g8ni47LBr2GuX9qzg/xeuwzQ=="
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected].10/dist/katex.min.js"
+        integrity="sha512-INps9zQ2GUEMCQD7xiZQbGUVnqnzEvlynVy6eqcTcHN4+aQiLo9/uaQqckDpdJ8Zm3M0QBs+Pktg4pz0kEklUg=="
         crossorigin="anonymous">
 </script>
   {{ if $needmhchem -}}
   {{/* To add support for displaying chemical equations and physical units, load the mhchem extension: */ -}}
-<script defer src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/contrib/mhchem.min.js"
-        integrity="sha512-V1hl0fnOXW6Cdqe5ZVqtw8TBpJVpu3XRDRQti96j/04+tMarPrCdXEUE3UdfvfKYTpOn9DV4zEZBVr0HhDiuiQ=="
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected].10/dist/contrib/mhchem.min.js"
+        integrity="sha512-mxjNw/u1lIsFC09k/unscDRY3ofIYPVFbWkP8slrePcS36ht4d/OZ8rRu5yddB2uiqajhTcLD8+jupOWuYPebg=="
         crossorigin="anonymous">
 </script>
   {{ end -}}
   {{/* To automatically render math in text elements, include the auto-render extension: */ -}}
-<script defer src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/contrib/auto-render.min.js"
-       integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" crossorigin="anonymous"
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected].10/dist/contrib/auto-render.min.js"
+       integrity="sha512-YJVxTjqttjsU3cSvaTRqsSl0wbRgZUNF+NGGCgto/MUbIvaLdXQzGTCQu4CvyJZbZctgflVB0PXw9LLmTWm5/w==" crossorigin="anonymous"
        {{ printf "onload='renderMathInElement(%s, %s);'" (( $.Page.Site.Params.katex.html_dom_element | default "document.body" ) | safeJS ) ( printf "%s" ( $.Page.Site.Params.katex.options | jsonify )) | safeHTMLAttr }}>
 </script>
 {{ end -}}
 
 {{ $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" . -}}
 {{ $jsMarkmap := resources.Get "js/markmap.js" | resources.ExecuteAsTemplate "js/markmap.js" . -}}
 {{ $jsPlantuml := resources.Get "js/plantuml.js" | resources.ExecuteAsTemplate "js/plantuml.js" . -}}
 {{ $jsDrawio := resources.Get "js/drawio.js" | resources.ExecuteAsTemplate "js/drawio.js" . -}}
 {{ if .Site.Params.offlineSearch -}}
   {{ $jsSearch = resources.Get "js/offline-search.js" -}}
 {{ end -}}
 
-{{ $jsArray := slice $jsBs $jsBase $jsAnchor $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}}
+{{ $jsArray := slice $jsBs $jsBase $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}}
 
-{{ if $needmermaid -}}
-{{ $jsArray = $jsArray | append $jsMermaid -}}
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" integrity="sha512-IX+bU+wShHqfqaMHLMrtwi4nK6W/Z+QdZoL4kPNtRxI2wCLyHPMAdl3a43Fv1Foqv4AP+aiW6hg1dcrTt3xc+Q==" crossorigin="anonymous"></script>
+{{ if .Page.Store.Get "hasmermaid" -}}
+{{- partial "scripts/mermaid.html" . -}}
+{{ end -}}
+
+{{ if .Site.Params.ui.showLightDarkModeMenu -}}
+  {{ $jsArray = $jsArray | append (resources.Get "js/dark-mode.js") -}}
 {{ end -}}
 
 {{ $js := $jsArray | resources.Concat "js/main.js" -}}
@@ -80,7 +87,7 @@
 
 {{ if .Site.Params.prism_syntax_highlighting -}}
   <script src='{{ "js/prism.js" | relURL }}'></script>
-{{ else if false -}}
+{{ else if ( not .Site.Params.disable_click2copy_chroma ) -}}
   {{ $c2cJS := resources.Get "js/click-to-copy.js" -}}
   {{ if hugo.IsProduction -}}
     {{ $c2cJS = $c2cJS | minify | fingerprint -}}
@@ -89,6 +96,3 @@
     integrity="{{ . }}" {{ end -}}
     crossorigin="anonymous"></script>
 {{ end -}}
-
-<script src='{{ "js/tabpane-persist.js" | relURL }}'></script>
-{{ partial "hooks/body-end.html" . -}}

netlify.toml

@@ -2,16 +2,16 @@
   publish = "public"
   # setting baseURL is required for `PAGE.Permalink` to correctly include the full `https://DOMAIN/` prefix
   # which is required for things like `twitter:image` meta tags to work correctly
-  command = "cd themes/docsy && git submodule update -f --init && npm install && cd ../.. && hugo --gc --minify"
+  command = "hugo mod get github.com/google/[email protected] && hugo --gc --minify"
 
 [context.deploy-preview]
   # for deploy previews, the domain will be `https://deploy-preview-PR_NUMBER--competent-brattain-de2d6d.netlify.app/`
   # which can be read from the `DEPLOY_PRIME_URL` environment variable in Netlify
-  command = "cd themes/docsy && git submodule update -f --init && npm install && cd ../.. && hugo --gc --minify --baseURL $DEPLOY_PRIME_URL"
+  command = "hugo mod get github.com/google/[email protected] && hugo --gc --minify --baseURL $DEPLOY_PRIME_URL"
 
 [context.production]
   # for production, the domain will be `https://www.kubeflow.org/`
-  command = "cd themes/docsy && git submodule update -f --init && npm install && cd ../.. && hugo --gc --minify --baseURL https://www.kubeflow.org/"
+  command = "hugo mod get github.com/google/[email protected] && hugo --gc --minify --baseURL https://www.kubeflow.org/"
 
 [[context.deploy-preview.plugins]]
 package = "netlify-plugin-checklinks"
@@ -51,15 +51,18 @@ package = "netlify-plugin-checklinks"
 
 [context.deploy-preview.environment]
   HUGO_ENV = "development"
-  HUGO_VERSION = "0.124.1"
+  HUGO_VERSION = "0.125.4"
   NODE_VERSION = "18"
+  GO_VERSION = "1.23.4"
 
 [context.production.environment]
   HUGO_ENV = "production"
-  HUGO_VERSION = "0.124.1"
+  HUGO_VERSION = "0.125.4"
   NODE_VERSION = "18"
+  GO_VERSION = "1.23.4"
 
 [context.branch-deploy.environment]
   HUGO_ENV = "development"
-  HUGO_VERSION = "0.124.1"
+  HUGO_VERSION = "0.125.4"
   NODE_VERSION = "18"
+  GO_VERSION = "1.23.4"