This repository was archived by the owner on Mar 17, 2026. It is now read-only.
Repository navigation
Refactor header layout and optimize loading performance - #5
Merged
srgzlb merged 16 commits intoOct 23, 2025
Merged
Conversation
…ogo image verticaly on desktop, load js files as non-critical, add responsive styles, config eslinter
🔍 Code Quality Report
🎉 All checks passed! Ready for review. |
added 2 commits
October 17, 2025 15:38
…onality - Added header.js to manage header height and CSS variable updates. - Integrated header component into theme.liquid for module loading. - Updated styles to support new header interactions. - Implemented cleanup system for efficient resource management
dabrorius
self-requested a review
October 20, 2025 08:03
added 3 commits
October 20, 2025 11:34
…nt when needed - Implement search.js for handling search functionality with modal overlay and URL management. - Modify theme.liquid to conditionally load search.js based on header section configuration. - Update header.liquid to remove the show_search setting and directly use search settings. - Adjust settings_data.json to remove the show_search option from the search settings.
dabrorius
reviewed
Oct 20, 2025
|
|
||
| {% comment %} Non-critical JavaScript - load after page fully loads {% endcomment %} | ||
| <script type="module"> | ||
| window.addEventListener('load', () => { |
Contributor
Author
There was a problem hiding this comment.
The <script type="module"></script> tag in HTML is used to include a JS module. This signifies to the browser that the enclosed or referenced JS code should be treated as an ECMAScript module.
Key characteristics and implications of using type="module":
- ES6 module syntax. It enables the use of import and export statements within the JS code, allowing for modular development, organizing the code into separate files, and sharing between them.
- Default deferral. Execution of scripts with
type="module"is delayed until the HTML document has been parsed and the DOM is ready. This is similar to adding thedeferattribute to a classic script. - Single execution. If the same module (with the same
src) is loaded multiple times, it will only be executed once. - CORS requirements. When loading external module scripts using the
srcattribute, cross-origin requests are subject to CORS policies. - Top-level
await. It allows for the use ofawaitat the top level of the module without needing to wrap it in anasyncfunction. - Browser support. Browsers that do not support
type="module"will ignore the script, providing a way to deliver fallback content using<script nomodule>for older browsers. - Scope. Variables and functions declared within a module script are typically scoped to that module and are not globally accessible unless explicitly exported.
And for the best performance, instead of including a classic script with the defer attribute, it's better to use
<script type="module" src="{{ 'main.js' | asset_url }}"></script>, which provides automatic defer behavior, faster script availability, and code imports/exports between files.
🔍 Code Quality Report
🎉 All checks passed! Ready for review. |
…f dynamic imports
JKinnez
approved these changes
Oct 23, 2025
…go-transparent-header Refactor the logo rendering
…e' of github.com:booqable/small-theme into feature/sc-1857-header-section
…small-theme into feature/sc-1857-header-section-search
…oqable/small-theme into feature/sc-1857-header-section-search
…arch Add search component
Add header dynamic functionality
🔍 Code Quality Report
🎉 All checks passed! Ready for review. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR refines the header layout and improves code quality, improving maintainability and responsiveness across devices.
Changes:
Result:
Improved header layout consistency, faster initial page load, and a cleaner, more maintainable codebase.