feat: Upgrade Bootstrap to version 5 and update related SCSS and HTML…

assets/scss/_boxes.scss

@@ -3,8 +3,8 @@
 
 // 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);
-    $link-color: mix($blue, $text-color, lightness($color-value));
+    $text-color: color-contrast($color-value);
+    $link-color: mix($blue, $text-color);
     $link-hover-color: rgba($link-color, 0.5) !default;
 
     #{$parent} {
@@ -27,12 +27,18 @@
                     content: "";
                 }
             }
+
+            p > a {
+                color: $link-color;
+
+                &:hover,
+                &:focus {
+                    color: $link-hover-color;
+                }
+            }
         }
     }
 
-    // Improve contrast for the links in paragraphs.
-    @include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
-
     @if $enable-gradients {
         @include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value,true);
     }

assets/scss/_colors.scss

@@ -1,18 +1,23 @@
 // 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);
-    $link-color: mix($blue, $text-color, lightness($color-value));
+    $text-color: color-contrast($color-value);
+    $link-color: mix($blue, $text-color);
 
     $link-hover-color: rgba($link-color, .5) !default;
 
     .-bg-#{$color-name} {
         color: $text-color;
         background-color: $color-value;
-    }
 
-    // Make links in paragraphs stand out more.
-    @include link-variant(".-bg-#{$color-name} p > a", $link-color, $link-hover-color, false);
-
+        p > a {
+            color: $link-color;
+
+            &:hover,
+            &:focus {
+                color: $link-hover-color;
+            }
+        }
+    }
 
     .-text-#{$color-name} {
         color: $color-value;
@@ -35,7 +40,7 @@
 @for $i from 1 through length($td-box-colors) {
     $value: nth($td-box-colors, $i);
     $name: $i - 1;
-    $text-color: color-yiq($value);
+    $text-color: color-contrast($value);
 
     @include palette-variant($name, $value);
 }

assets/scss/_nav.scss

@@ -79,7 +79,7 @@
     min-width: 100px;
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     padding-right: 0.5rem;
     padding-left: 0.75rem;
 

assets/scss/_sidebar-tree.scss

@@ -157,7 +157,7 @@
     #content-desktop {display: block;}
     #content-mobile {display: none;}
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
 
     #content-desktop {display: none;}
     #content-mobile {display: block;}

assets/scss/_variables.scss

@@ -6,7 +6,7 @@ See https://github.com/twbs/bootstrap/pull/23260
 
 @fa-font-path :        "../webfonts";
 
-// Bootstrap flags. For more, see https://getbootstrap.com/docs/4.0/getting-started/theming/
+// Bootstrap flags. For more, see https://getbootstrap.com/docs/5.3/customize/options/
 $enable-gradients: true !default;
 $enable-rounded: true !default;
 $enable-shadows: true !default;
@@ -100,14 +100,15 @@ $h6-font-size: $font-size-base !default;
 
 // Display styles
 
-$display1-weight: $font-weight-bold !default;
-$display2-weight: $font-weight-bold !default;
-$display3-weight: $font-weight-bold !default;
-$display4-weight: $font-weight-bold !default;
-$display1-size: 3rem !default;
-$display2-size: 2.5rem !default;
-$display3-size: 2rem !default;
-$display4-size: 1.75rem !default;
+$display-font-weight: $font-weight-bold !default;
+$display-font-sizes: (
+  1: 3rem,
+  2: 2.5rem,
+  3: 2rem,
+  4: 1.75rem,
+  5: 1.5rem,
+  6: 1.25rem
+) !default;
 
 // Space
 
@@ -129,5 +130,5 @@ $navbar-dark-hover-color: rgba($white, 0.5) !default;
 $navbar-dark-active-color: $white !default;
 $navbar-dark-disabled-color: rgba($white, 0.25) !default;
 
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light".
-$yiq-contrasted-threshold: 200 !default;
+// The minimum contrast ratio for text readability.
+$min-contrast-ratio: 3 !default;

assets/scss/home.scss

@@ -152,7 +152,7 @@
 .home-used-by-wrapper {
   padding: 0 15vw !important;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

assets/scss/main.scss

@@ -45,7 +45,7 @@ html {
 footer {
     min-height: 150px;
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
         min-height: 200px;
     }
 }

content/en/_index.html

@@ -129,7 +129,7 @@ <h2>And more!</h2>
 
 {{< blocks/section color="white" type="home-logo-warp">}}
 <h2 class="home-section-title">Created by</h2>
-<div class="row home-used-by-wrapper home-used-by-created">
+<div class="home-used-by-wrapper home-used-by-created">
     <a class="home-used-by-item" href="/" target="_blank" rel="noopener">
         <img class="used-by-logo" src="/img/usedby/ByteDance-en.png" alt="bytedance logo">
     </a>

content/zh/_index.html

@@ -129,13 +129,13 @@ <h2>其它</h2>
 
 {{< blocks/section color="white" type="home-logo-warp">}}
 <h2 class="home-section-title">出品方</h2>
-<div class="row home-used-by-wrapper home-used-by-created">
+<div class="home-used-by-wrapper home-used-by-created">
     <a class="home-used-by-item" href="/" target="_blank" rel="noopener">
         <img class="used-by-logo" src="/img/usedby/bytedance.png" alt="bytedance logo">
     </a>
 </div>
 <h2 class="home-section-title">谁在用</h2>
-<div class="row home-used-by-wrapper">
+<div class="home-used-by-wrapper">
   <a class="home-used-by-item" href="https://www.douyin.com/" target="_blank" rel="noopener">
       <img class="used-by-logo" src="/img/usedby/douyin.png" alt="douyin logo">
   </a>

content/zh/css/docs.css

@@ -96,7 +96,7 @@
 .home-used-by-wrapper {
   padding: 0 15vw !important;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

layouts/_default/list.rss.xml

@@ -2,15 +2,13 @@
   <channel>
     <title>{{ .Site.Title }} – {{ .Title }}</title>
     <link>{{ .Permalink }}</link>
-    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
     <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
-    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
-    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Copyright }}
     <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
     <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
     {{ with .OutputFormats.Get "RSS" }}
-	  {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+      {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
     {{ end }}
     {{ if not $.Section }}
       {{ $sections := .Site.Params.rss_sections | default (slice "blog") }}
@@ -22,12 +20,11 @@
         {{ .Scratch.Set "rss_pages" (first 50 $.Pages) }}
       {{ end }}
     {{ end }}
-    {{ range (.Scratch.Get "rss_pages")  }}
+    {{ range (.Scratch.Get "rss_pages") }}
     <item>
       <title>{{ .Section | title }}: {{ .Title }}</title>
       <link>{{ .Permalink }}</link>
       <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
       <guid>{{ .Permalink }}</guid>
       <description>
         {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}

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/baseof.html

@@ -18,10 +18,10 @@
             {{ partial "toc.html" . }}
             {{ partial "taxonomy_terms_clouds.html" . }}
           </aside>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5 pe-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-solid fa-rss ml-2 "></i>
+              RSS <i class="fa-solid fa-rss ms-2 "></i>
             </a>
             {{ end -}}
             {{ block "main" . }}{{ end }}

layouts/blog/baseof.print.html

@@ -14,7 +14,7 @@
           </div>
           <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
           </div>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5 pe-md-4" role="main">
             {{ block "main" . }}{{ end }}
           </main>
         </div>

layouts/blog/list.html

@@ -32,7 +32,7 @@ <h5 class="mt-0 mb-1"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</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-start 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>
@@ -43,7 +43,7 @@ <h5 class="mt-0 mb-1"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h5>
 		{{ end }}
 	</div>
 </div>
-<div class="row pl-2 pt-2">
+<div class="row ps-2 pt-2">
 	<div class="col">
 		{{ if .Pages }}
 			{{ template "_internal/pagination.html" . }}

layouts/community/baseof.html

@@ -18,7 +18,7 @@
             {{ partial "toc.html" . }}
             <!-- {{ partial "taxonomy_terms_clouds.html" . }} -->
           </aside>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ partial "version-banner.html" . }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}

layouts/community/baseof.print.html

@@ -14,7 +14,7 @@
           </div>
           <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
           </div>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ block "main" . }}{{ end }}
           </main>
         </div>

layouts/docs/baseof.html

@@ -18,7 +18,7 @@
             {{ partial "toc.html" . }}
             <!-- {{ partial "taxonomy_terms_clouds.html" . }} -->
           </aside>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ partial "version-banner.html" . }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}

layouts/docs/baseof.print.html

@@ -14,7 +14,7 @@
           </div>
           <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
           </div>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ block "main" . }}{{ end }}
           </main>
         </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

@@ -1,16 +1,16 @@
 {{ $lark := .Site.Params.lark}}
 {{ $links := .Site.Params.links }}
 <footer class="bg-dark py-5 row d-print-none">
-  <div class="container-fluid mx-sm-5">
-    <div class="row">
+  <div class="container-fluid">
+    <div class="row mx-sm-5">
       <div class="col-6 col-sm-4 text-xs-center order-sm-2">
         {{ with $links }}
         {{ with index . "user"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
+      <div class="col-6 col-sm-4 text-end text-xs-center order-sm-3">
         {{ with $links }}
         {{ with index . "developer"}}
         {{ template "footer-links-block"  . }}
@@ -19,7 +19,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}} {{ .}}</small>{{ end }}
-        {{ with .Site.Params.privacy_policy }}<small class="ml-1"><a class="cloudwego-link" href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
+        {{ with .Site.Params.privacy_policy }}<small class="ms-1"><a class="cloudwego-link" 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 class="cloudwego-link" href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
 	      {{ end }}
@@ -37,7 +37,7 @@
 {{ define "footer-links-block" }}
 <ul class="list-inline mb-0">
   {{ range . }}
-    <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
+    <li class="list-inline-item mx-2 h3" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
       <a class="text-white" target="_blank" rel="noopener" href="{{ .url }}" aria-label="{{ .name }}">
         {{ if  eq .type "custom" }}
         <img src="{{ .icon }}" alt="" style="width: 26px;line-height:32.5px;margin-bottom:6px;fill:white;">

layouts/partials/navbar-lang-selector.html

@@ -1,6 +1,6 @@
 {{/* Link directly to documentation etc., if possible. */}}
 {{ $langPage := cond (gt (len .Translations) 0) . .Site.Home }}
-<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 	{{ $langPage.Language.LanguageName }}
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

layouts/partials/navbar-version-selector.html

@@ -1,4 +1,4 @@
-<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 	{{ .Site.Params.version_menu }}
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">