Migrate to Bootstrap 5 (#918)

* Migrate to Bootstrap 5 * Fix dropdown * Fix horizontal line color * Fix vertical line * Migrate bootstrap on example site * Fix style issue + scroll spy Signed-off-by: hossainemruz <[email protected]> --------- Signed-off-by: hossainemruz <[email protected]> Co-authored-by: Emruz Hossain <[email protected]>
hugo-toha · Apr 20, 2024 · 03148c9 · 03148c9
1 parent f8c6d8c
commit 03148c9
Show file tree

Hide file tree

Showing 30 changed files with 105 additions and 82 deletions.
diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
@@ -49,6 +49,15 @@
  color: get-light-color('muted-text-color');
 }
 
+.navbar-toggler {
+ border: none;
+ &:focus {
+ border: none;
+ outline: none !important;
+ box-shadow: none;
+ }
+}
+
 .tags {
  text-align: left;
  padding-top: 0.5em;

diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
@@ -50,6 +50,7 @@
 
  .post-card-link {
  text-decoration: none !important;
+ color: get-light-color('text-color');
  }
 
  .card {

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/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
@@ -184,6 +184,7 @@ body.kind-page {
 
  #scroll-to-top {
  position: fixed;
+ border: none;
  bottom: 0rem;
  right: 1rem;
  color: get-light-color('accent-color');

diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss
@@ -27,6 +27,7 @@
 
  .navbar-brand {
  color: get-light-color('heading-color');
+ text-decoration: none !important;
  font-weight: 600;
  img {
  width: 42px;

diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss
@@ -32,14 +32,14 @@
 
  &::after {
  content: '';
- position: absolute;
+ position: relative;
  border-left: 3px solid get-light-color('accent-color');
  z-index: 1;
  height: 100%;
- left: 50%;
+ left: -23px;
  }
  &:nth-child(even)::after {
- left: calc(50% - 3px) !important;
+ left: -26px;
  }
  }
  .horizontal-line {
@@ -52,6 +52,7 @@
  margin: 0;
  top: 17px;
  position: relative;
+ opacity: 1;
  }
  .timeline-side-div {
  display: flex;

diff --git a/exampleSite/package-lock.json b/exampleSite/package-lock.json
diff --git a/exampleSite/package.json b/exampleSite/package.json
@@ -35,7 +35,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",

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -24,7 +24,7 @@
  </script>
  </head>
 
- <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
+ <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="80">
  <div class="container-fluid bg-secondary wrapper">
  <!----- ADD NAVBAR --------------->
  {{ block "navbar" . }} {{ end }}

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 }}
@@ -165,7 +165,7 @@ <h1>{{ .Page.Title }}</h1>
  </div>
  </div>
  <!--scroll back to top-->
- <a id="scroll-to-top" class="btn" data-toggle="tooltip" data-placement="left" title="Scroll to top">
+ <a id="scroll-to-top" class="btn" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Scroll to top">
  <i class="fas fa-chevron-circle-up"></i>
  </a>
 </section>
@@ -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/index.html b/layouts/index.html
@@ -29,7 +29,7 @@
  document.documentElement.setAttribute('data-theme', theme);
  </script>
  </head>
- <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
+ <body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100">
 
  <!--- NAVBAR ------------------------->
  {{- partial "navigators/navbar.html" . -}}

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="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/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/lang-selector.html b/layouts/partials/navigators/lang-selector.html
@@ -3,7 +3,7 @@
  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
 {{ end }}
 <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  {{ if ne site.Params.features.flags.enable false }}
  {{ $countryCode := partial "helpers/country-code.html" . }}
  <span class="flag-icon flag-icon-{{$countryCode}}"></span>

diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
@@ -74,15 +74,15 @@
  class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
  id="navbar-toggler"
  type="button"
- data-toggle="collapse"
- data-target="#top-nav-items"
+ data-bs-toggle="collapse"
+ data-bs-target="#top-nav-items"
  aria-label="menu"
  >
  <i data-feather="menu"></i>
  </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>
@@ -100,7 +100,7 @@
  {{- end }}
  {{ if gt $sectionCount $maxVisibleSections }}
  <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  {{ $sectionCount := 1 }}
  {{ range sort $sections "section.weight" }}

diff --git a/layouts/partials/navigators/theme-selector.html b/layouts/partials/navigators/theme-selector.html
@@ -1,6 +1,6 @@
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
- data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
 </a>
 <div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">

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>