Undefined Masonry Library JavaScript Crash on FAQ Pages

[aniket866]

Closes #558

Description

The theme initialization script script.js tries to instantiate a Masonry instance on the .masonry-wrapper element, but the Masonry library is not loaded or imported anywhere on the site.

• File Link: themes/microcks/assets/js/script.js
• Code Snippet:

  window.onload = function () {
  	let masonryWrapper = document.querySelector('.masonry-wrapper');
  	if (masonryWrapper) {
  		let masonry = new Masonry(masonryWrapper, {
  			columnWidth: 1
  		});
  	}
  };

Why It Breaks

When a user visits the FAQ page (which includes the .masonry-wrapper class), the onload function matches the element and calls new Masonry(...). Since the Masonry dependency is not loaded in the HTML or project modules, this throws a fatal ReferenceError: Masonry is not defined and crashes the JavaScript runtime context on the page.

How to Reproduce

1. Open the FAQ page on the website.
2. Open the developer console.
3. Observe the JavaScript error: ReferenceError: Masonry is not defined.

Reproduction Flow

graph TD
    A[Start: Load FAQ Page] --> B[HTML renders element with .masonry-wrapper]
    B --> C[window.onload event fires]
    C --> D[Script queries wrapper element]
    D --> E{Wrapper found?}
    E -- Yes --> F[Execute: new Masonry()]
    F --> G{Is Masonry loaded in namespace?}
    G -- No --> H[Crash: ReferenceError: Masonry is not defined]
    H --> I[Subsequent page JS execution fails]

Loading

---