The production environment is a SpringShare LibGuide 'widget/embed code'. However it is structured so that it can be viewed in a local environment. This means the boilerplate HTML (html tags, main, header) isn't needed in the production environment.
Take these steps to copy the code to SpringShare:
- Open the Hompage in SpringShare LibGuides staff view, and click the edit button under the search bar in the Main Content Section
- Delete all existing code in 'Embed Code'
- Copy the contents of the
<body>tag into 'Embed Code' from primoSearch.html (not the body tag itself) - In the root of this repository, optimize the CSS with
npx postcss style.css -o dist/style.min.css - Create style tags in 'Embed Code'
- Copy the contents of dist/style.min.css into the style tags
To view the search bar running locally, just open primoSearch.html in a browser or use an IDE extension. Keep in mind that browsers may cache the styles so you will have to account for that when viewing modifications.
It's configured to use the pre-optimized style.css so that you can view changes more easily. This is done in the head tag in primoSearch.html.
Please note that some styles (particularly font) will be inherited in production! That's why I've left font changes out. Despite this, the search bar is remarkably similar visually when comparing local production view.