Upgrade to Bootstrap 5 #2942

Agos95 · 2023-05-04T19:19:18Z

Purpose

This PR implements milestone 1 of #1338, by upgrading to Bootstrap ~~v5.2.3~~ v5.3 (~~alpha3 for now~~).

Changes:

checks described in the migration guide
fix form layout
fix scrollspy, since now it does not work if overflow-x is set to hidden in the body (this was quite hard to fix, since it is not documented anywhere)
fix some minor aspects that I noticed by looking at the Academic template

I did not look over the javascript yet, with the exception of the changes described in the migration guide, but this is the next step I am going to look into. In particular, I can try to remove all the jquery dependencies, since they are not required by Bootstrap 5.

Disclaimer

I am aware that Wowchemy is going towards Tailwind (see #2792) insetad of Bootstrap. However, as mentioned in Discord, this upgrade can also be beneficial for some users (in particular while modules are being ported to Tailwind).

In addition, Bootstrap v5.3 (which is still in alpha), introduces the support for the dark mode. This may be interesting to investigate in the future.

netlify · 2023-05-04T19:19:25Z

✅ Deploy Preview for hugo-portfolio-theme canceled.

Name	Link
🔨 Latest commit	`4682f28`
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-portfolio-theme/deploys/64ce5a70baba00000885c94b

netlify · 2023-05-04T19:19:26Z

✅ Deploy Preview for academic-demo canceled.

Name	Link
🔨 Latest commit	`4682f28`
🔍 Latest deploy log	https://app.netlify.com/sites/academic-demo/deploys/64ce5a70f7b77100087375eb

netlify · 2023-05-04T19:19:26Z

✅ Deploy Preview for markdown-slides canceled.

Name	Link
🔨 Latest commit	`4682f28`
🔍 Latest deploy log	https://app.netlify.com/sites/markdown-slides/deploys/64ce5a70baba00000885c949

gcushen · 2023-05-07T19:43:45Z

A few comments:

You can see that the PR is failing - please resolve the Yarn error in the CI process so that it passes.
If code is disused, it should be removed rather than commenting it out
If we are going to upgrade Bootstrap, let's upgrade it directly to the latest version (v5.3) so that we can significantly simplify the code base by using Bootstrap's new official light/dark/theming feature, allowing us to remove a large amount of code which was added for our own implementation of light/dark mode in Bootstrap.
Consider asking the community in Discord to help review and test the PR on the various templates, especially the Academic, Minimal, Portfolio, Docs, and Research Group templates

Agos95 · 2023-05-08T07:37:23Z

Thank you for the comments:

The CI uses yarn 1.22, while I am using the latest yarn 3.5. I don't know if the failing is related to this. Can I try to update the workflow to use the latest version of yarn?
You are correct, I was just testing before deleting the code. Related to that, can you explain a bit more what the fixscrollspy function was needed for, so I can actually understand if I can remove it? What is the meaning of the comment // Make Scrollspy responsive. ?
I also agree with that. I didn't use it just because it is still in alpha, but I am going to switch to v5.3
After I make some fixes, can you create a branch for this bootstrap 5 upgrade (separate from the main), so people can clone and test it more easily?
Another last question. I also started to remove the jQuery in Wowchemy js files. Do you think I can make the changes directly on this PR, or is it better to create a new branch and a separate PR?

gcushen · 2023-05-10T21:26:27Z

Thank you for the comments:

The CI uses yarn 1.22, while I am using the latest yarn 3.5. I don't know if the failing is related to this. Can I try to update the workflow to use the latest version of yarn?

You are correct, I was just testing before deleting the code. Related to that, can you explain a bit more what the fixscrollspy function was needed for, so I can actually understand if I can remove it? What is the meaning of the comment // Make Scrollspy responsive. ?

I also agree with that. I didn't use it just because it is still in alpha, but I am going to switch to v5.3

After I make some fixes, can you create a branch for this bootstrap 5 upgrade (separate from the main), so people can clone and test it more easily?

Another last question. I also started to remove the jQuery in Wowchemy js files. Do you think I can make the changes directly on this PR, or is it better to create a new branch and a separate PR?

You should be able to edit the action files in the .github folder like any other file?
At the time, Bootstrap's scroll spy did not update when resizing the browser window. So a highlighted menu item would not update based on the window resizing. That JS function fixed the lack of responsiveness in Bootstrap's scrollspy JS. I don't know if they fixed the issue yet, but you can try removing this old fix and try testing resizing the Academic or Docs template, for example, and check that the ScrollSpy automatically updates as necessary when the window resizes.
Great to hear :)
You can share the link to the branch in your repo (which Github displays at the top of the PR)
There are already 136 files changed in this PR that the community will need to review. I would not suggest to add any other changes that are not directly related until this PR has been merged. Any new JS required for the new Bootstrap version to work properly should just be added as vanilla JS without converting it into jQuery though.

Agos95 · 2023-05-16T10:56:05Z

Notes about some layout changes

I am going to list here some changes I notice with respect to Wowchemy with Bootstrap 4.

Content

now the default container max width is set to the xxl breakpoint (1320px). Previously, the default was xl, which was overwritten from 1140px to 1290px. So now the content is a bit wider. If we want to restore the previous style, we need to override the variables in wowchemy/assets/scss/bootstrap_variables.scss

Post

in Post lists (eg. this one), title are underlined when hovered. This does not happen with the new Bootstrap 5 (even if I did not find anything different in Wowchemy CSS)

Components

Buttons

in the Online Course template, the text in the buttons is black, while it should be white. This does not happen for instance in the Academic template (light or dark theme). This could be caused by the new buttons CSS variables

gcushen · 2023-05-16T16:50:14Z

@Agos95 I don't know if you noticed - Github shows that the PR is still failing CI:

Start building sites … 
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
ERROR 2023/05/16 10:55:54 js.Build failed: Could not resolve "./_vendor/medium-zoom.esm"
ERROR 2023/05/16 10:55:54 js.Build failed: Could not resolve "./wowchemy-utils"
ERROR 2023/05/16 10:55:54 js.Build failed: Could not resolve "./wowchemy-navigation"
ERROR 2023/05/16 10:55:54 js.Build failed: Could not resolve "./wowchemy-github"
ERROR 2023/05/16 10:55:54 js.Build failed: Could not resolve "./wowchemy-theming"
Error: Error building site: JSBUILD: failed to transform "js/wowchemy.js" (text/javascript): "/home/runner/work/wowchemy-hugo-themes/wowchemy-hugo-themes/modules/wowchemy/assets/js/wowchemy.js:[8](https://github.com/wowchemy/wowchemy-hugo-themes/actions/runs/4991012080/jobs/8936945761?pr=2942#step:4:9):24": Could not resolve "bootstrap"
ERROR 2023/05/16 [10](https://github.com/wowchemy/wowchemy-hugo-themes/actions/runs/4991012080/jobs/8936945761?pr=2942#step:4:11):55:54 JSBUILD: failed to transform "en/js/wowchemy-bundle.js" (text/javascript): Could not resolve "bootstrap"

If you're unsure how to fix it, you can find more support on the Hugo forums...

Agos95 · 2023-05-16T16:56:12Z

Yes, I noticed. I did not have too much time to work on this last week, and I focused on looking at the templates to find if something broke after the upgrade.

I hope to resolve it soon. However, it is a bit strange since, locally, I can do everything without any problem.

gcushen · 2023-05-16T17:52:41Z

Related to this, it looks like you are trying to load the Bootstrap JS twice - once in https://github.com/wowchemy/wowchemy-hugo-themes/blob/2d67669ce7694d4b2f632994660ca7aeff27f0db/modules/wowchemy/layouts/partials/site_js.html#L5 and then again in wowchemy.js via ESM with import { Tooltip } from 'bootstrap';. We should only import it once and hence, should probably remove the ESM import you added, which is also the import which appears to cause Hugo to fail building the site as Hugo doesn't find any file with that name, bootstrap.js.

Agos95 · 2023-05-16T21:37:26Z

Ok, I found and fix the problem (it was quite easy actually).

I need to import Bootstrap js in wowchemy.js, otherwise the linter (yarn run lint:js) in the same github action throws an error. However, I was mispelling the import, since it is import { Tooltip } from './_vendor/bootstrap.bundle.min.js';.

This import was not required with Bootstrap 4, since in wowchemy.js tooltips were initialized with jQuery; but now, in order to avoid the unecessary use of jQuery, this is the official way.

Agos95 · 2023-05-17T09:12:32Z

OK, I had a look ton all the templates, and I think almost everything works as before (here the list of layout changings: #2942 (comment))

gcushen · 2023-06-18T22:10:59Z

@Agos95 How are we progressing fixing the remaining issues such as those mentioned in #2942 (comment) and removing the second loading of Boostrap JS so that it is only loaded once?

modules/wowchemy/assets/js/wowchemy.js

Agos95 · 2023-06-23T15:36:19Z

Regarding to #2942 (comment) :

I set back the default container width as it is now in wowchemy
in order to have the underline on hover, the only solution I found is to edit the CSS. I actually do not know why it changed
text color for buttons depends on the Bootstrap color variables. Since the theme is light, it gets dark text. I think this should be investigated with the adoption of bootstrap variables for colors

As for the Bootstrap JS, I need to import the Tooltip component in wowchemy.js, otherwise the linter in the CI github action fails.

I also found a (new?) bug with the carousel slider (eg. in research group template). I don't know if this is new beacouse I merged the recent commits in the main branch, or if I did not find it earlier (but I am preatty sure this was not happening before). Now the slider keeps on rapidly changing the slide for some reason. I need to try to revert to older commits.

Next week I will be away from home for work, so I am not going to have time to look into that immediately.

Agos95 · 2023-07-05T08:59:36Z

Ok, I fixed the issue with the slider (it was a change in bootstrap not documented in the migration guide). I had another look at the templates, and there should not be major/breaking changes in the layouts compared to the current version with bootstrap 4.6.

gcushen · 2023-08-02T21:38:26Z

@Agos95 it appears you may have possibly made changes to the files in the Bootstrap folder? The goal is just to import Bootstrap and customise everything in the Bootstrap variables. So if you have edited any files within the Bootstrap folder, please update the PR so that no changes are made to the Bootstrap folder, as that should only be maintained by the Bootstrap team and not us.

Also, before this PR can be merged, we need to still resolve the other issues like importing Bootstrap once rather than importing it twice as you have done in the current PR. The Bootstrap and Hugo forum communities can help with only importing Bootstrap once.

Ideally, we should really remove the majority of the Wowchemy SCSS when we migrate to Bootstrap 5 as the current Wowchemy CSS largely consists of modifications made as workarounds to Bootstrap 4 to add the functionality which we now have in Bootstrap 5 - and to convert to using the native Bootstrap 5 CSS variables like --primary-color.... But if no one is motivated to review the Wowchemy SCSS at this stage, perhaps we could focus on this PR first and then follow up this PR with another PR to significantly review and reduce all the custom Bootstrap 4 related CSS.

Agos95 · 2023-08-03T08:43:36Z

@gcushen The changes in the Bootstrap folder are due to the fact that I upgraded to Bootstrap 5.3.0, while when I first submitted this PR Bootstrap was at v5.3.0-alpha2.

I removed the Bootsrtap js import from https://github.com/wowchemy/wowchemy-hugo-themes/blob/9fdadd48b880d274612ddf4723d7d79c92078f7d/modules/wowchemy/layouts/partials/site_js.html#L5
and I left the one in wowchemy.js https://github.com/wowchemy/wowchemy-hugo-themes/blob/9fdadd48b880d274612ddf4723d7d79c92078f7d/modules/wowchemy/assets/js/wowchemy.js#L8

I did so by following the example site in the official Hugo bootstrap module. Actually, should we use this Module to package Bootstrap, insead of the current method? The repo is in the official Hugo github, and it is mantained by bep himself.

As far as the SCSS, I just fix what it was reported in the Bootstrap migration guide. I think this may be to much to review in a single PR: in my opinion it is better to tackle that (and the removal of jQuery and the other unneeded js) in other PRs.

Tomorrow I am leaving for holidays, so in case other fizes are necessary, I will not be able to work on this for the next couple of weeks.

github-actions · 2023-09-05T02:01:51Z

This PR is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help.

If you feel that the PR is still relevant in the latest release, consider making the PR easier to review and finding developers to help review the PR.

Please be mindful that although we encourage PRs, we cannot expand the scope of the project in every possible direction. There will be requests that don't make the roadmap.

This PR will automatically close soon if no further activity occurs. Thank you for your contributions.

Agos95 and others added 9 commits April 28, 2023 10:19

update bootstrap _vendor

c978655

cpmment out fix scrollspy

91d866a

update media-breakpoint-down

28e65be

some more migrations from 4 to 5

6a48cc8

finish migration guide v4 to v5

55cd980

fix errors from migration

a6de0dc

fix scrollspy not working

d92d79d

fix padding utilities for bott v5

b691a93

Merge branch 'wowchemy:main' into bootstrap5

cdf2944

Agos95 added 8 commits May 11, 2023 09:46

update to bootstrap v5.3-alpha3

2e7f708

fix import

d23dce2

using local wowchemy modules to try starters

c0f18da

remove fixscrollspy

e4f4af9

update github action

d503ba1

update workflow

8b6bad5

fix tooltip bs input

8bda3c1

fix left -> start as in migration guide

60f2344

fix actions issues

98b957e

update css after bs5 change in media object

f300d25

Agos95 added 2 commits May 17, 2023 10:27

fix typo

cf6ac1c

fix publications filter form

93c460e

Merge branch 'main' into bootstrap5

947621e

gcushen requested changes Jun 19, 2023

View reviewed changes

modules/wowchemy/assets/js/wowchemy.js Outdated Show resolved Hide resolved

Agos95 and others added 5 commits June 23, 2023 09:14

Merge branch 'main' into bootstrap5

6675817

remove comment

e016a57

update to bootstrap 5.3

fec04f1

remove local inport from go.mod

2e5e6f5

fix view-starter-dev script

aa0bd9f

Agos95 added 4 commits July 4, 2023 17:12

fix carousel buttons

57054da

fix carousel autoplay

bfeb4e2

rename to fix cover image

82ee49c

align v1 slider to block slider

2f94e97

remove duplicated bs js import

9fdadd4

fix: revert removal of Bootstrap JS

4682f28

github-actions bot added the stale label Sep 5, 2023

github-actions bot closed this Sep 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Bootstrap 5 #2942

Upgrade to Bootstrap 5 #2942

Agos95 commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

gcushen commented May 7, 2023

Agos95 commented May 8, 2023

gcushen commented May 10, 2023 •

edited

Loading

Agos95 commented May 16, 2023 •

edited

Loading

gcushen commented May 16, 2023 •

edited

Loading

Agos95 commented May 16, 2023

gcushen commented May 16, 2023 •

edited

Loading

Agos95 commented May 16, 2023 •

edited

Loading

Agos95 commented May 17, 2023

gcushen commented Jun 18, 2023

Agos95 commented Jun 23, 2023 •

edited

Loading

Agos95 commented Jul 5, 2023

gcushen commented Aug 2, 2023 •

edited

Loading

Agos95 commented Aug 3, 2023

github-actions bot commented Sep 5, 2023

Upgrade to Bootstrap 5 #2942

Upgrade to Bootstrap 5 #2942

Conversation

Agos95 commented May 4, 2023 • edited Loading

Purpose

Disclaimer

netlify bot commented May 4, 2023 • edited Loading

✅ Deploy Preview for hugo-portfolio-theme canceled.

netlify bot commented May 4, 2023 • edited Loading

✅ Deploy Preview for academic-demo canceled.

netlify bot commented May 4, 2023 • edited Loading

✅ Deploy Preview for markdown-slides canceled.

gcushen commented May 7, 2023

Agos95 commented May 8, 2023

gcushen commented May 10, 2023 • edited Loading

Agos95 commented May 16, 2023 • edited Loading

Notes about some layout changes

Content

Post

Components

Buttons

gcushen commented May 16, 2023 • edited Loading

Agos95 commented May 16, 2023

gcushen commented May 16, 2023 • edited Loading

Agos95 commented May 16, 2023 • edited Loading

Agos95 commented May 17, 2023

gcushen commented Jun 18, 2023

Agos95 commented Jun 23, 2023 • edited Loading

Agos95 commented Jul 5, 2023

gcushen commented Aug 2, 2023 • edited Loading

Agos95 commented Aug 3, 2023

github-actions bot commented Sep 5, 2023

Agos95 commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

netlify bot commented May 4, 2023 •

edited

Loading

gcushen commented May 10, 2023 •

edited

Loading

Agos95 commented May 16, 2023 •

edited

Loading

gcushen commented May 16, 2023 •

edited

Loading

gcushen commented May 16, 2023 •

edited

Loading

Agos95 commented May 16, 2023 •

edited

Loading

Agos95 commented Jun 23, 2023 •

edited

Loading

gcushen commented Aug 2, 2023 •

edited

Loading