Migrate from JQuery to Vanilla JS

[gcushen]

Goals

• Migrate from JQuery to Vanilla (plain) ES6+ JS for performance improvements and to reduce dependencies
• Migrate each JQuery library to equivalent plain Vanilla JS
• Refactor all JS to use more modern best practices and attempt to remove any unnecessary code (KISS)
  • There is an opportunity to significantly minimise and optimise the use of JS and to only load JS that is specific to the features on a page (i.e. modularise JS further)

Todo

• [ ] Migrate remaining traces of JQuery in modules/wowchemy/assets/js/ to plain vanilla JS
• [ ] Refactor the JS scripts in modules/wowchemy/assets/js/ for modern best practices and to greatly simplify and optimize code base
• [ ] Investigate equivalent Vanilla JS libraries to replace the JQuery ones (see https://github.com/wowchemy/wowchemy-hugo-modules/discussions/1860 ):
  • [ ] Upgrade Fancybox v3 (requires jQuery) to Fancybox v4 (no jQuery dependency): https://fancyapps.com/docs/ui/installation
  • [ ] Are there any other integrations that need migrating to vanilla JS equivalents?

[rodrigoalcarazdelaosa]

Worth considering (@bep himself recommends it as a nice combo with Hugo): https://discourse.gohugo.io/t/alpinejs-with-hugo/22921

[bep]

@rodrigoalcarazdelaosa yea, AplineJS is very much recommended. You may get some inspiration here:

https://github.com/gohugoio/gohugoioTheme2

(yet another project that I have not found time to complete)

[rodrigoalcarazdelaosa]

Interesting read: https://astro.build/blog/2023-web-framework-performance-report/

[gcushen]

Closing due to no activity from the community and due to the issue being resolved with the new Tailwind UI (blox-tailwind module), removing the need for the JQuery-based Bootstrap UI.

There are related issues open (such as #3008) to port the JQuery-based Bootstrap templates to the Tailwind UI.