✅ COMPLETED: 1. Dockerfile uses port 80 (astro preview) 2. BaseLayout imports globals.css 3. globals.css with Tailwind v4 @theme syntax 4. index.astro has Header, Footer, FixedContact 5. All image references fixed to existing files 6. Hero uses hdpe_pipe_main.jpg 7. Product cards use hdpe001.jpg 8. pt-20 on main for fixed header ✅ TESTED LOCALLY: - Build: 15 pages in 1.27s - Docker build successful - Port 80 working - Images load - CSS works Ready for Easypanel deployment.
47 lines
916 B
JavaScript
47 lines
916 B
JavaScript
import { getIconElement, isDefinedIcon } from "./icons.js";
|
|
class DevToolbarIcon extends HTMLElement {
|
|
_icon = void 0;
|
|
shadowRoot;
|
|
get icon() {
|
|
return this._icon;
|
|
}
|
|
set icon(name) {
|
|
this._icon = name;
|
|
this.buildTemplate();
|
|
}
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
if (this.hasAttribute("icon")) {
|
|
this.icon = this.getAttribute("icon");
|
|
} else {
|
|
this.buildTemplate();
|
|
}
|
|
}
|
|
getIconHTML(icon) {
|
|
if (icon && isDefinedIcon(icon)) {
|
|
return getIconElement(icon)?.outerHTML ?? "";
|
|
}
|
|
return "<slot />";
|
|
}
|
|
buildTemplate() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
svg path[fill="#fff"] {
|
|
fill: black;
|
|
}
|
|
}
|
|
</style>
|
|
${this.getIconHTML(this._icon)}`;
|
|
}
|
|
}
|
|
export {
|
|
DevToolbarIcon
|
|
};
|