Migrate to Bootstrap 5

hugo-toha · Apr 1, 2024 · fa1c65f · fa1c65f
1 parent a69388d
commit fa1c65f
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 54 deletions.
diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss
@@ -2,6 +2,10 @@ a {
   color: get-light-color('accent-color');
   @include transition();
 
+  &:link {
+    text-decoration: none;
+  }
+
   &:hover,
   &:focus {
     text-decoration: get-light-color('hover-over-accent-color') underline;

diff --git a/layouts/_default/search.html b/layouts/_default/search.html
@@ -58,8 +58,8 @@ <h5 class="card-title">${title}</h5>
                   {{ end }}
                 </div>
                 <div class="card-footer">
-                  <span class="float-left">${date}</span>
-                  <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
+                  <span class="float-start">${date}</span>
+                  <a href="${link}" class="float-end btn btn-outline-info btn-sm">Read</a>
                 </div>
               </div>
           </div>

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -37,7 +37,7 @@
       <!--Content Start-->
       <div class="page-content">
         {{ if site.Params.features.blog.showAuthor | default true }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
@@ -51,7 +51,7 @@ <h1>{{ .Page.Title }}</h1>
         </div>
 
         {{ if not (site.Params.features.blog.showAuthor | default true) }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
         </div>
         {{ end }}
@@ -64,7 +64,7 @@ <h1>{{ .Page.Title }}</h1>
         </div>
 
         <!-- Share or Contribute -->
-        <div class="row pl-3 pr-3">
+        <div class="row ps-3 pe-3">
         <!--Social Media Share Buttons-->
           <div class="col-md-6 share-buttons">
           {{ if site.Params.features.blog.shareButtons }}
@@ -175,7 +175,7 @@ <h1>{{ .Page.Title }}</h1>
   <section class="toc-section" id="toc-section">
     {{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }}
     <div class="toc-holder">
-      <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
+      <h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5>
       <hr>
       <div class="toc">
         {{ .TableOfContents }}

diff --git a/layouts/partials/cards/accomplishments.html b/layouts/partials/cards/accomplishments.html
@@ -4,15 +4,15 @@
       <h5 class="card-title mb-0">{{ .name }}</h5>
       <div class="sub-title">
         <span><a href="{{ .organization.url }}" title="{{ .organization.name }}" target="_blank" rel="noopener">{{ .organization.name }}</a></span>
-        <span class="ml-2">{{ .timeline }}</span>
+        <span class="ms-2">{{ .timeline }}</span>
       </div>
     </div>
     <div class="card-body">
       <p>{{ .courseOverview | markdownify }}</p>
     </div>
     <div class="card-footer">
       {{ if .certificateURL }}
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
       {{ end }}
     </div>
   </div>

diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
@@ -15,12 +15,12 @@ <h5 class="card-title">{{ .Title }}</h5>
       {{ end }}
     </div>
     <div class="card-footer">
-      <span class="float-left">
+      <span class="float-start">
           {{ .Date | time.Format ":date_full" }}
           {{ if site.Params.features.readingTime }} | {{.ReadingTime}} {{ i18n "minute" .ReadingTime }} {{ end }}</span>
       <a
       href="{{ .RelPermalink | relLangURL }}"
-      class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
+      class="float-end btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/cards/publication.html b/layouts/partials/cards/publication.html
@@ -12,11 +12,11 @@
       <h5 class="card-title mb-0">{{ .title }}</h5>
       <div class="sub-title">
         <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
-        <span class="ml-2">{{ .publishedIn.date }}</span>
+        <span class="ms-2">{{ .publishedIn.date }}</span>
       </div>
       <div class="authors">
         {{ range $index,$author:= .authors }}
-          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+          <span class="me-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
         {{ end }}
       </div>
     </div>
@@ -26,13 +26,13 @@ <h5 class="card-title mb-0">{{ .title }}</h5>
     <div class="card-footer">
       <div class="tags">
         {{ range $index,$tag:= .tags }}
-            <span class="btn badge btn-info ml-1 p-2">
+            <span class="btn badge btn-info ms-1 p-2">
               {{ $tag }}
             </span>
         {{ end }}
       </div>
       <div class="details-btn">
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
       </div>
     </div>
   </div>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -66,7 +66,7 @@
 
   <footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
     <div class="container pt-5">
-      <div class="row text-left">
+      <div class="row text-start">
         {{ if $navigationEnabled }}
         <div class="col-md-4 col-sm-12">
           <h5>{{ i18n "navigation" }}</h5>
@@ -193,15 +193,15 @@ <h5>{{ i18n "contact_me" }}</h5>
     {{ if $credentialsEnabled }}
     <hr />
     <div class="container">
-      <div class="row text-left">
+      <div class="row text-start">
         <div class="col-md-4">
           <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
             <img src="{{ $themeLogo }}" alt="Toha Theme Logo">
             Toha
           </a>
         </div>
         <div class="col-md-4 text-center">{{ $copyrightNotice | markdownify }}</div>
-        <div class="col-md-4 text-right">
+        <div class="col-md-4 text-end">
           <a id="hugo" href="https://gohugo.io/" target="_blank" rel="noopener">{{ i18n "hugoAttributionText" }}
           <img
             src="{{ $hugoLogo }}"

diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
@@ -77,7 +77,7 @@
     </button>
 
     <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
-      <ul class="nav navbar-nav ml-auto">
+      <ul class="nav navbar-nav ms-auto">
         <li class="nav-item">
           <a class="nav-link" href="{{ if .IsHome }}#home{{else}}{{ site.BaseURL | relLangURL }}#home{{end}}">{{ i18n "home" }}</a>
         </li>

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
@@ -25,7 +25,7 @@ <h5 class="p-1">
       <p class="p-1 text-justify">
         {{ .summary | markdownify }}
       </p>
-      <div class="text-container ml-auto">
+      <div class="text-container ms-auto">
         <ul class="social-link d-flex">
           {{ range .socialLinks }}
           <li>
@@ -52,7 +52,7 @@ <h5 class="p-1">
       {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
-    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
+    <div class="col-sm-6 pt-5 ps-md-4 ps-sm-3 pt-sm-0">
       <div class="row">
         {{ range .badges }}
           {{ partial "misc/badge.html" . }}

diff --git a/layouts/partials/sections/achievements/entry.html b/layouts/partials/sections/achievements/entry.html
@@ -17,11 +17,11 @@
   <i class="fa-solid fa-xmark hidden"></i>
   <i class="fa-solid fa-magnifying-glass-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
-  <div class="caption hidden col-lg-6 text-left" id="caption">
+  <div class="caption hidden col-lg-6 text-start" id="caption">
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
     {{ if .url }}
-      <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      <a class="btn btn-info ms-1 ps-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
     {{ end }}
   </div>
   <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>

diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html
@@ -101,9 +101,9 @@ <h6 class="text-heading">{{ i18n "taken_courses" }}:</h6>
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn" aria-label="{{ i18n "show_less"}}">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>

diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html
@@ -101,9 +101,9 @@ <h6 class="text-heading">{{ i18n "taken_courses"}}:</h6>
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses ) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>

diff --git a/layouts/partials/sections/experiences/vertical-line.html b/layouts/partials/sections/experiences/vertical-line.html
@@ -1,3 +1,3 @@
 <div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
+  <div class="circle fw-bold">{{ add . 1 }}</div>
 </div>
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
@@ -11,7 +11,7 @@ <h1 class="text-center">
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">

diff --git a/layouts/partials/sections/publications.html b/layouts/partials/sections/publications.html
@@ -11,7 +11,7 @@ <h1 class="text-center">
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">

diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html
@@ -29,7 +29,7 @@ <h1 class="text-center" style="display: none">
   display: flex;
   align-items: center;
   justify-content: center;">
-    <a href="/posts/" title="Show More" class="float-right btn btn-outline-info btn-sm" >
+    <a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" >
     {{ i18n "show_more"}}</a>
   </div>
   {{ end }}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",