feat: update bootstrap to 5.0.0-beta2

gethyas · Mar 4, 2021 · 22afec7 · 22afec7
1 parent 6e5867d
commit 22afec7
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 65 deletions.
diff --git a/assets/js/bootstrap.js b/assets/js/bootstrap.js
@@ -0,0 +1,2 @@
+import 'bootstrap/dist/js/bootstrap.bundle.min.js'
+// import 'bootstrap/dist/js/bootstrap.min.js'
diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss
@@ -51,6 +51,16 @@ h6,
   font-size: calc(1.875rem + 1.5vw);
 }
 
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+a.btn:hover,
+a.btn:focus {
+  text-decoration: none;
+}
+
 .section {
   padding-top: 5rem;
   padding-bottom: 5rem;
@@ -168,6 +178,11 @@ body {
   }
 }
 
+.navbar a:hover,
+.navbar a:focus {
+  text-decoration: none;
+}
+
 #TableOfContents ul {
   padding-left: 0;
   list-style: none;

diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
@@ -15,7 +15,7 @@ $black:    #000;
 $yellow:   #ffe000;
 $black:    #1d2d35;
 $beige:    #fbf7f0;
-$red:      #e55235;
+// $red:      #e55235;
 $purple:   #5d2f86;
 $brown:    #aa9c84;
 
@@ -32,7 +32,7 @@ $navbar-light-toggler-icon-bg: none;
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-responsive-font-sizes: true;
+// $enable-responsive-font-sizes: true;
 
 // Body
 //
@@ -41,6 +41,13 @@ $enable-responsive-font-sizes: true;
 $body-bg:                   $white;
 $body-color:                $black;
 
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              $primary;
+$link-decoration:                         none;
+
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
@@ -49,7 +56,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1240px
+  xl: 1240px,
+  xxl: 1320px
 );
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -102,7 +110,7 @@ $spacer: 1rem;
 // Navbar
 
 $navbar-padding-y:                  $spacer / 2;
-$navbar-padding-x:                  0;
+$navbar-padding-x:                  null;
 
 $navbar-nav-link-padding-x:         0.5rem;
 
@@ -118,13 +126,13 @@ $card-border-color:                 $gray-200;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-y:                   1rem;
-$alert-padding-x:                   1.5rem;
+$alert-padding-y:                   $spacer;
+$alert-padding-x:                   $spacer * 1.5;
 $alert-margin-bottom:               0;
 $alert-border-radius:               0;
 $alert-link-font-weight:            $headings-font-weight;
 $alert-border-width:                0;
 
-$alert-bg-level:                    0;
-$alert-border-level:                0;
-$alert-color-level:                 0;
+$alert-bg-scale:                    0;
+$alert-border-scale:                0;
+$alert-color-scale:                 0;
diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss
@@ -29,7 +29,7 @@ pre code {
   padding: 0;
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   pre {
     margin: 2rem -1.5rem;
   }

diff --git a/assets/scss/components/_comments.scss b/assets/scss/components/_comments.scss
@@ -7,7 +7,7 @@
 }
 
 .comment-form p {
-  @extend .form-group;
+  @extend .form-group !optional;
 }
 
 .comment-form input[type="text"],

diff --git a/assets/scss/components/_forms.scss b/assets/scss/components/_forms.scss
@@ -1,6 +1,6 @@
 /** Search form */
 .search-form {
-  @extend .form-inline;
+  @extend .form-inline !optional;
 }
 
 .search-form label {

diff --git a/config/_default/menus.toml b/config/_default/menus.toml
@@ -20,11 +20,11 @@
   url = "/blog/"
   weight = 20
 
-# [[social]]
-#   name = "Twitter"
-#   pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
-#   url = "https://twitter.com/gethyas"
-#   weight = 10
+[[social]]
+  name = "Twitter"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
+  url = "https://twitter.com/getdoks"
+  weight = 10
 
 [[social]]
   name = "GitHub"

diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -52,3 +52,4 @@ editPage = false
   instantPage = true
   flexSearch = true
   darkMode = true
+  bootStrapJs = false
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -6,7 +6,7 @@
           <li class="list-inline-item">{{ .Site.Params.footer | safeHTML }}</li>
         </ul>
       </div>
-      <div class="col-lg-8 order-first order-lg-last text-lg-right">
+      <div class="col-lg-8 order-first order-lg-last text-lg-end">
         <ul class="list-inline">
           {{ range .Site.Menus.footer -}}
             <li class="list-inline-item"><a href="{{ .URL | absURL }}">{{ .Name }}</a></li>

diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html
@@ -1,6 +1,9 @@
 {{ $indexTemplate := resources.Get "js/index.js" -}}
 {{ $index := $indexTemplate | resources.ExecuteAsTemplate "index.js" . -}}
 
+{{ $bs := resources.Get "js/bootstrap.js" -}}
+{{ $bs := $bs | js.Build -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -37,13 +40,20 @@
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}
+  {{ if .Site.Params.options.bootStrapJs -}}
+    <script src="{{ $bs.Permalink }}" defer></script>
+  {{ end -}}
   <script src="{{ $js.Permalink }}" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" defer></script>
   {{ end -}}
 {{ else -}}
   {{ $js := $js | minify | fingerprint "sha512" -}}
   {{ $index := $index | minify | fingerprint "sha512" -}}
+  {{ $bs := $bs | minify | fingerprint "sha512" -}}
+  {{ if .Site.Params.options.bootStrapJs -}}
+  <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
   <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -3,7 +3,7 @@
   <div class="container">
     <input class="menu-btn order-0" type="checkbox" id="menu-btn">
     <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
-    <a class="navbar-brand order-1 order-md-0 mr-auto" href="{{ .Site.BaseURL | absURL }}">{{ .Site.Params.Title }}</a>
+    <a class="navbar-brand order-1 order-md-0 me-auto" href="{{ .Site.BaseURL | absURL }}">{{ .Site.Params.Title }}</a>
     {{ if .Site.Params.options.darkMode -}}
     <button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
       <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
@@ -13,12 +13,12 @@
     <ul class="navbar-nav social-nav order-3 order-md-5">
       {{ range .Site.Menus.social -}}
         <li class="nav-item">
-          <a class="nav-link" href="{{ .URL | absURL }}">{{ .Pre | safeHTML }}<span class="ml-2 sr-only">{{ .Name | safeHTML }}</span></a>
+          <a class="nav-link" href="{{ .URL | absURL }}">{{ .Pre | safeHTML }}<span class="ms-2 visually-hidden">{{ .Name | safeHTML }}</span></a>
         </li>
       {{ end -}}
     </ul>
     <div class="collapse navbar-collapse order-4 order-md-1">
-      <ul class="navbar-nav main-nav mr-auto order-5 order-md-2">
+      <ul class="navbar-nav main-nav me-auto order-5 order-md-2">
         {{- $current := . -}}
         {{ range .Site.Menus.main -}}
           {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}

diff --git a/layouts/partials/main/docs-navigation.html b/layouts/partials/main/docs-navigation.html
@@ -12,7 +12,7 @@
 		</a>
 	{{ end -}}
 	{{ with $pages.Prev . -}}
-		<a class="ml-auto" href="{{ .Permalink }}">
+		<a class="ms-auto" href="{{ .Permalink }}">
 			<div class="card my-1">
 				<div class="card-body py-2">
 					{{ .Title }} &rarr;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.13",
     "@fullhuman/postcss-purgecss": "^4.0",
     "autoprefixer": "^10.2",
-    "bootstrap": "^4.6",
+    "bootstrap": "^5.0.0-beta2",
     "clipboard": "^2.0",
     "eslint": "^7.21",
     "flexsearch": "^0.6",