Update to Bootstrap v5: initial work (google#517)

* Update to bootstrap v5: initial work
* Utilities: rename .ml-* and .mr-* to .ms-* and .me-*
* Bump bootstrap to latest version 5.2.3 (npm + module)

Co-authored-by: Patrice Chalin

assets/scss/_boxes.scss

@@ -3,7 +3,7 @@
 
 // box-variant creates the main style for a colored section used on the site.
 @mixin box-variant($parent, $color-name, $color-value) {
-    $text-color: color-yiq($color-value);
+    $text-color: color-contrast($color-value);
     $link-color: mix($blue, $text-color, lightness($color-value));
     $link-hover-color: rgba($link-color, 0.5) !default;
 

assets/scss/_colors.scss

@@ -1,6 +1,6 @@
 // Add some local palette classes so you can do -bg-warning -text-warning etc. Even -bg-1 if you want to paint by numbers.
 @mixin palette-variant($color-name, $color-value) {
-    $text-color: color-yiq($color-value);
+    $text-color: color-contrast($color-value);
     $link-color: mix($blue, $text-color, lightness($color-value));
 
     $link-hover-color: rgba($link-color, .5) !default;

dependencies/go.mod

@@ -4,5 +4,5 @@ go 1.12
 
 require (
 	github.com/FortAwesome/Font-Awesome v0.0.0-20221115183454-96cafbd73ec4 // indirect
-	github.com/twbs/bootstrap v4.6.2+incompatible // indirect
+	github.com/twbs/bootstrap v5.2.3+incompatible // indirect
 )

go.mod

@@ -5,5 +5,5 @@ go 1.12
 require (
 	github.com/FortAwesome/Font-Awesome v0.0.0-20221115183454-96cafbd73ec4 // indirect
 	github.com/google/docsy/dependencies v0.6.0 // indirect
-	github.com/twbs/bootstrap v4.6.2+incompatible // indirect
+	github.com/twbs/bootstrap v5.2.3+incompatible // indirect
 )

go.sum

@@ -10,3 +10,5 @@ github.com/google/docsy/dependencies v0.5.1-0.20221014161617-be5da07ecff1/go.mod
 github.com/google/docsy/dependencies v0.5.1/go.mod h1:EDGc2znMbGUw0RW5kWwy2oGgLt0iVXBmoq4UOqstuNE=
 github.com/twbs/bootstrap v4.6.2+incompatible h1:TDa+R51BTiy1wEHSYjmqDb8LxNl/zaEjAOpRE9Hwh/o=
 github.com/twbs/bootstrap v4.6.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.2.3+incompatible h1:lOmsJx587qfF7/gE7Vv4FxEofegyJlEACeVV+Mt7cgc=
+github.com/twbs/bootstrap v5.2.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

layouts/_default/search.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <section class="row td-search-result">
 <div class="col-12 col-md-8 offset-md-2">
-<h2 class="ml-4">{{ .Title }}</h2>
+<h2 class="ms-4">{{ .Title }}</h2>
 {{ with .Site.Params.gcs_engine_id }}
 <script>
 (function() {

layouts/blog/list.html

@@ -23,7 +23,7 @@ <h5 class="mt-0 mb-1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
 								{{ partial "reading-time.html" . }}
 							{{ end }}
 						</header>
-						{{ partial "featured-image.html" (dict "p" . "w" 250 "h" 125 "class" "float-left mr-3 pt-1 d-none d-md-block") }}
+						{{ partial "featured-image.html" (dict "p" . "w" 250 "h" 125 "class" "float-left me-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 }}" aria-label="{{ T "ui_read_more"}} - {{ .LinkTitle }}">{{ T "ui_read_more"}}</a></p>
 					</div>

layouts/partials/featured-image.html

@@ -1,7 +1,7 @@
 {{ $w := .w | default 480 }}
 {{ $h := .h | default 180 }}
 {{ $p := .p }}
-{{ $class := .class | default "ml-3" }}
+{{ $class := .class | default "ms-3" }}
 {{ $image := ($p.Resources.ByType "image").GetMatch "**featured*" }}
 {{ with $image }}
 {{ $image := .Fill (printf "%dx%d" $w $h ) }}

layouts/partials/footer.html

@@ -18,7 +18,7 @@
       </div>
       <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
         {{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small>{{ end }}
-        {{ with .Site.Params.privacy_policy }}<small class="ml-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
+        {{ with .Site.Params.privacy_policy }}<small class="ms-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
 	{{ if not .Site.Params.ui.footer_about_disable }}
 		{{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
 	{{ end }}

layouts/partials/navbar.html

@@ -20,11 +20,11 @@
     </span>
     {{- /**/ -}}
   </a>
-  <div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+  <div class="td-navbar-nav-scroll ms-md-auto" id="main_navbar">
     <ul class="navbar-nav mt-2 mt-lg-0">
       {{ $p := . -}}
       {{ range .Site.Menus.main -}}
-      <li class="nav-item mr-4 mb-2 mb-lg-0">
+      <li class="nav-item me-4 mb-2 mb-lg-0">
         {{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
         {{ with .Page }}{{ $active = or $active ( $.IsDescendant .) }}{{ end -}}
         {{ $pre := .Pre -}}
@@ -45,12 +45,12 @@
       </li>
       {{ end -}}
       {{ if .Site.Params.versions -}}
-      <li class="nav-item dropdown mr-4 d-none d-lg-block">
+      <li class="nav-item dropdown me-4 d-none d-lg-block">
         {{ partial "navbar-version-selector.html" . -}}
       </li>
       {{ end -}}
       {{ if (gt (len .Site.Home.Translations) 0) -}}
-      <li class="nav-item dropdown mr-4 d-none d-lg-block">
+      <li class="nav-item dropdown me-4 d-none d-lg-block">
         {{ partial "navbar-lang-selector.html" . -}}
       </li>
       {{ end -}}

layouts/partials/page-meta-links.html

@@ -5,7 +5,7 @@
 {{ $gh_subdir := ($.Param "github_subdir") -}}
 {{ $gh_project_repo := ($.Param "github_project_repo") -}}
 {{ $gh_branch := (default "main" ($.Param "github_branch")) -}}
-<div class="td-page-meta ml-2 pb-1 pt-2 mb-0">
+<div class="td-page-meta ms-2 pb-1 pt-2 mb-0">
 {{ if $gh_url -}}
   {{ warnf "Warning: use of `github_url` is deprecated. For details see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}}
   <a href="{{ $gh_url }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>

layouts/partials/pager.html

@@ -1,8 +1,8 @@
 <ul class="list-unstyled d-flex justify-content-between align-items-center mb-0 pt-5">
   <li>
-    <a {{if .PrevInSection}}href="{{.PrevInSection.RelPermalink}}" aria-label="{{ T "ui_pager_prev" }} - {{.PrevInSection.Title}}" {{end}}class="btn btn-primary{{if not .PrevInSection}} disabled{{end}}"><span class="mr-1">←</span>{{ T "ui_pager_prev" }}</a>
+    <a {{if .PrevInSection}}href="{{.PrevInSection.RelPermalink}}" aria-label="{{ T "ui_pager_prev" }} - {{.PrevInSection.Title}}" {{end}}class="btn btn-primary{{if not .PrevInSection}} disabled{{end}}"><span class="me-1">←</span>{{ T "ui_pager_prev" }}</a>
   </li>
   <li>
-    <a {{if .NextInSection}}href="{{.NextInSection.RelPermalink}}" aria-label="{{ T "ui_pager_next" }} - {{.NextInSection.Title}}" {{end}}class="btn btn-primary{{if not .NextInSection}} disabled{{end}}">{{ T "ui_pager_next" }}<span class="ml-1">→</span></a>
+    <a {{if .NextInSection}}href="{{.NextInSection.RelPermalink}}" aria-label="{{ T "ui_pager_next" }} - {{.NextInSection.Title}}" {{end}}class="btn btn-primary{{if not .NextInSection}} disabled{{end}}">{{ T "ui_pager_next" }}<span class="ml-1">?</span></a>
   </li>
 </ul>

layouts/partials/sidebar-tree.html

@@ -5,14 +5,14 @@
   {{ if not .Site.Params.ui.sidebar_search_disable -}}
   <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-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ms-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
   {{ else -}}
   <div id="content-mobile">
   <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-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ms-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
   </div>

package.json

@@ -14,15 +14,15 @@
     "get:submodule": "set -x && git submodule update --init ${DEPTH:- --depth 1}",
     "serve": "npm run cd:docs serve",
     "update:pkg:hugo": "npm install --save-exact -D hugo-extended@latest",
-    "update:pkg:dep": "npm install --save-exact @fortawesome/fontawesome-free@6 bootstrap@4"
+    "update:pkg:dep": "npm install --save-exact @fortawesome/fontawesome-free@6 bootstrap@5"
   },
   "cspell": "cSpell:ignore docsy userguide fortawesome fontawesome ",
   "prettier": {
     "proseWrap": "always"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.2.1",
-    "bootstrap": "4.6.2"
+    "bootstrap": "5.2.3"
   },
   "devDependencies": {
     "hugo-extended": "0.107.0"