halogenica / beautifulhugo

Theme for the Hugo static website generator
Other
1.13k stars 601 forks source link

Plan to upgrade bootstrap? #401

Closed whatacold closed 1 year ago

whatacold commented 3 years ago

The bootstrap used is v3.3, which is quite old, and it will be deprecated some time in the future, so any plan?

rterakedis commented 3 years ago

@whatacold - I've started digging into this but switching from the 3.3 to either 4.6 or 5.0.2 completely destroys the navbar. If you want to try testing as I did, here's how I've set things up:

1) I downloaded the 2 versions of bootstrap. In each version, i renamed bootstrap.min.js and bootstrap.min.css to 4.6.0.bootstrap.min.js and 4.6.0.bootstrap.min.css (and similar for 5.0.2). Copied these files to themes/beautifulhugo/static/js and themes/beautifulhugo/static/css respectively.

2) In config.toml added two new keys to the [Params] section and also set selfHosted = true:

  selfHosted = true
  enableNewBootstrap = false #Use the latest version of Bootstrap.min/js
  enableBootstrapv4 = false #Use the Bootstrap 4 version

3) modified themes/beautifulhugo/layouts/partials/head.html where it calls bootstrap.min.css under selfHosted to the following:

   {{ if .Site.Params.enableNewBootstrap }}
    <link rel="stylesheet" href="{{ "css/5.0.2.bootstrap.min.css" | absURL }}" />
   {{ else if .Site.Params.enableBootstrapv4 }}
    <link rel="stylesheet" href="{{ "css/4.6.0.bootstrap.min.css" | absURL }}" />
   {{ else }}
    <link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}" />
   {{ end }}

4) modified themes/beautifulhugo/layouts/partials/footer.html where it calls bootstrap.min.js under selfHosted to the following:

  {{ if .Site.Params.enableNewBootstrap }}
    <script src="{{ "js/5.0.2.bootstrap.min.js" | absURL }}"></script>
  {{ else if .Site.Params.enableBootstrapv4 }}
    <link rel="stylesheet" href="{{ "js/4.6.0.bootstrap.min.js" | absURL }}" />
  {{ else }}
    <script src="{{ "js/bootstrap.min.js" | absURL }}"></script>
  {{ end }}

Now I can test by changing the enableNewBootstrap (version 5), or enableBootstrapv4 to true. I haven't figured out if it's going to be easier to migrate from 3-->4-->5 or just go 3-->5.

Hopefully your testing goes better than mine so far....

whatacold commented 3 years ago

@rterakedis Thanks for you hark work!

Do you have a branch already, so that people wanting to test will set it up quickly?

danielwagn3r commented 1 year ago

Latest Bootstrap v3 release (https://github.com/twbs/bootstrap/releases/tag/v3.4.0) is dated 2018. I'm not an expert in frontend development, therefore I use a theme, but I have a feeling this component should be updated to a maintained release.

davidmn commented 1 year ago

I've been having a play around with 5.3 and it doesn't seem to destroy the navbar when I'm running it. I've made a #466. Feel free to shoot it down as I've probably missed some obvious use cases that my testing has missed.