@leuffen/themejs1 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# themejs1
+ThemeJS Version 1
+
+
+## Templating using CSS Styles
+
+
+
+## Browser Compat
+
+| Browser | Version | Support |
+|---------|---------|---------|
+| Chrome  | 92      |         |
+| Firefox | 90      |         |
+| Safari  | >10     | Yes     |
+| Edge    | 92      |         |
+| IE      | 11      |         |

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import "@leuffen/jodastyle";
+import "./template/navbar/navbar";
+import "./template/hero/hero1";

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@leuffen/jodastyle");
+require("./template/navbar/navbar");
+require("./template/hero/hero1");

package/dist/index.module.js

@@ -0,0 +1,3 @@
+import "@leuffen/jodastyle";
+import "./template/navbar/navbar";
+import "./template/hero/hero1";

package/dist/template/hero/hero1.d.ts

@@ -0,0 +1,20 @@
+import { DefaultLayout } from "@leuffen/jodastyle";
+export declare class HeroLayout extends DefaultLayout {
+    /**
+     * Columns of the content overlay
+     */
+    content_cols: number;
+    content_space: string;
+    /**
+     * set Classes of the content div
+     */
+    content_classes: string;
+    /**
+     * Size of the image in Background
+     */
+    image_cols: number;
+    /**
+     *
+     */
+    image_content: string;
+}

package/dist/template/hero/hero1.js

@@ -0,0 +1,77 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroLayout = void 0;
+const embed_1 = require("@kasimirjs/embed");
+const jodastyle_1 = require("@leuffen/jodastyle");
+const QTemplate_1 = require("@leuffen/jodastyle/src/helper/QTemplate");
+// language=HTML
+const tpl = (0, embed_1.ka_html)(`
+<div class="autosection as__hero1 position-relative" style="isolation: isolate">
+    <div class="as__hero1_image-mobile :: d-block :[[layout.break1]]: d-none   col-[[12 - layout.content_cols]] " data-ref="image-mobile"></div>
+
+    <div class="[[layout.container]] ">
+        <div class="as__hero1_content-row row :: mobile :[[layout.break1]]: full_height align-items-center">
+            
+            <div class="as__hero1_content [[layout.content_classes]] [[layout.content_space]] :: col-12 :[[layout.break1]]:  col-[[layout.content_cols]] " data-ref="main"></div>
+        </div>
+    </div>
+    <div class="position-absolute top-0 bottom-0 w-100" style="z-index: -1">
+        <div class="container-fluid p-0 h-100 :: d-none :[[layout.break1]]: d-block">
+            <div class="row g-0 flex-lg-row-reverse h-100">
+                <div class="col-[[layout.image_cols]] position-relative as__hero1_image h-100" data-ref="image">
+                    <div class="position-absolute image-overlay [[ layout.content_cols-layout.image_cols < 0 ? 'overlay-fade' : '']]"></div>
+                </div>
+               
+            </div>
+            
+        </div>
+    </div>
+</div>
+`);
+class HeroLayout extends jodastyle_1.DefaultLayout {
+    constructor() {
+        super(...arguments);
+        /**
+         * Columns of the content overlay
+         */
+        this.content_cols = 6;
+        this.content_space = "my-5";
+        /**
+         * set Classes of the content div
+         */
+        this.content_classes = "";
+        /**
+         * Size of the image in Background
+         */
+        this.image_cols = 6;
+        /**
+         *
+         */
+        this.image_content = "contentSelector(img)";
+    }
+}
+exports.HeroLayout = HeroLayout;
+let Hero1 = class Hero1 {
+    render(element, layout) {
+        let main = new QTemplate_1.QTemplate(tpl);
+        main.parse({ layout });
+        Array.from(element.querySelectorAll(".background img, img.background")).forEach((el) => {
+            main.select("image").append(el.cloneNode(true));
+            main.select("image-mobile").append(el);
+        });
+        console.log("hero1");
+        main.select("main").append(element.querySelector("*"));
+        element.innerHTML = "";
+        element.append(main.content);
+        return main.content;
+    }
+};
+Hero1 = __decorate([
+    (0, jodastyle_1.jodaRenderer)("hero1", HeroLayout)
+], Hero1);

package/dist/template/navbar/navbar.d.ts

@@ -0,0 +1,16 @@
+import { DefaultLayout } from "@leuffen/jodastyle";
+export declare class NavbarLayout extends DefaultLayout {
+    /**
+     * a additional class name added to the main element
+     * to allow for custom styling. Defaults to "default" (see as-navbar.scss for details)
+     */
+    style_class: string;
+    /**
+     * default position: Fixed on top
+     */
+    position: string;
+    /**
+     * Show fixed navbar if scrolled down more than this distance
+     */
+    fixed_scroll_distance: number;
+}

package/dist/template/navbar/navbar.js

@@ -0,0 +1,122 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarLayout = void 0;
+const embed_1 = require("@kasimirjs/embed");
+const jodastyle_1 = require("@leuffen/jodastyle");
+const QTemplate_1 = require("@leuffen/jodastyle/src/helper/QTemplate");
+// language=HTML
+const tpl = (0, embed_1.ka_html)(`
+<nav class="as__navbar [[layout.position]]" style="z-index: 999">
+
+    <div id="as__minibar" class="as__minibar top" >
+        <div class="[[layout.container]]" data-ref="minibar"></div>
+    </div>
+    
+    <div class="as__mainbar navbar navbar-expand-lg w-100">
+        <div class="[[layout.container]]" data-ref="main">
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div data-ref="navbar" class="collapse navbar-collapse" id="navbarSupportedContent">
+
+                
+            </div>
+        </div>
+    </div>
+    
+</nav>
+`);
+class NavbarLayout extends jodastyle_1.DefaultLayout {
+    constructor() {
+        super(...arguments);
+        /**
+         * a additional class name added to the main element
+         * to allow for custom styling. Defaults to "default" (see as-navbar.scss for details)
+         */
+        this.style_class = "default";
+        /**
+         * default position: Fixed on top
+         */
+        this.position = "fixed";
+        /**
+         * Show fixed navbar if scrolled down more than this distance
+         */
+        this.fixed_scroll_distance = 10;
+    }
+}
+exports.NavbarLayout = NavbarLayout;
+let Navbar = class Navbar {
+    render(element, layout) {
+        console.log(layout);
+        let original = element.cloneNode(true);
+        let template = new QTemplate_1.QTemplate(tpl);
+        element.innerHTML = "";
+        element.appendChild(template.content);
+        template.parse({ layout });
+        let result = template.content;
+        let mainDiv = template.with("main");
+        let navbar = template.with("navbar");
+        let minibar = template.with("minibar");
+        let navbarBrand = original.querySelector(".navbar-brand");
+        if (navbarBrand === null) {
+            navbarBrand = (0, embed_1.ka_create_element)("a", { href: "/" }, "No class='navbar-brand' element");
+        }
+        mainDiv.selected.insertBefore(navbarBrand, mainDiv.selected.firstElementChild);
+        let mainUl = original.querySelector("ul.mainbar");
+        if (mainUl === null) {
+            mainUl = (0, embed_1.ka_create_element)("ul", {}, "Missing ul.mainbar element");
+        }
+        mainUl = mainUl.cloneNode(true);
+        navbar.append(mainUl);
+        let miniUl = original.querySelector("ul.minibar");
+        if (miniUl.firstElementChild === null) {
+            miniUl = null;
+        }
+        minibar.append(miniUl);
+        mainUl.classList.add(..."navbar-nav navbar-nav-scroll ms-auto my-2 my-lg-0".split(" "));
+        if (layout.fixed_scroll_distance !== null)
+            result.firstElementChild.classList.add("auto-fixed");
+        result.firstElementChild.classList.add(layout.style_class);
+        let scolled = false;
+        let fixed = false;
+        window.setInterval(() => {
+            if (window.scrollY > 0 && !scolled) {
+                result.classList.add("scrolled");
+                scolled = true;
+            }
+            else if (window.scrollY === 0 && scolled) {
+                result.classList.remove("scrolled");
+                scolled = false;
+            }
+            else {
+                // nothing
+            }
+            if (layout.fixed_scroll_distance === null)
+                return;
+            if (window.scrollY > layout.fixed_scroll_distance && !fixed) {
+                result.classList.add("fixed");
+                fixed = true;
+            }
+            else if (window.scrollY <= layout.fixed_scroll_distance && fixed) {
+                result.classList.remove("fixed");
+                fixed = false;
+            }
+        }, 300);
+        mainUl.querySelectorAll("li").forEach(e => e.classList.add("nav-item"));
+        mainUl.querySelectorAll("li a").forEach(e => e.classList.add("nav-link"));
+        mainUl.querySelectorAll("li.dropdown ul").forEach(e => e.classList.add("dropdown-menu"));
+        mainUl.querySelectorAll("li.dropdown ul li").forEach(e => e.classList.add("dropdown-item"));
+        element.replaceWith(template.content);
+        return template.content;
+    }
+};
+Navbar = __decorate([
+    (0, jodastyle_1.jodaRenderer)("navbar", NavbarLayout)
+], Navbar);

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@leuffen/themejs1",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.module.js",
+  "directories": {
+    "doc": "docs",
+    "lib": "lib"
+  },
+  "files": [
+    "/dist",
+    "/src",
+    "*.scss"
+  ],
+  "workspaces": [
+    "workspaces/*"
+  ],
+  "author": "",
+  "dependencies": {
+    "@leuffen/jodastyle": "^1.0.1"
+  },
+  "devDependencies": {
+    "dart-sass": "^1.25.0",
+    "sass": "^1.56.1",
+    "css-loader": "^6.7.1",
+    "esbuild-loader": "^2.20.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "raw-loader": "^4.0.2",
+    "sass-loader": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "scripts": {
+    "make.mjs": "tsc -d && mv dist/index.js dist/index.module.js",
+    "make.cjs": "tsc -m commonjs",
+    "build": "npm run make.mjs && npm run make.cjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/core/templates.ts

@@ -0,0 +1,3 @@
+
+
+

package/src/index.ts

@@ -0,0 +1,6 @@
+
+
+import "@leuffen/jodastyle";
+
+import "./template/navbar/navbar";
+import "./template/hero/hero1";

package/src/template/_variables.scss

@@ -0,0 +1,29 @@
+
+$primary: #007bff !default;
+$secondary: #6c757d !default;
+$light: #f8f9fa !default;
+
+
+$as-mainbar-color: white !default;
+$as-minibar-color: $primary !default;
+
+$content-height-adjustment: 0px !default;
+$min-page-height: 600px !default;
+
+.row {
+  & > div {
+    --joda-class: 'col';
+
+  }
+}
+
+
+:root {
+  --as-minibar-color: #007bff;
+  --as-mainbar-color: $as-mainbar-color;
+}
+
+
+joda-content {
+  --joda-init: true;
+}

package/src/template/hero/hero1.scss

@@ -0,0 +1,73 @@
+
+
+.hc-section .section-1 {
+    background-color: $primary;
+}
+.hc-section .odd {
+    background-color: $primary;
+}
+.hc-section .even {
+    background-color: $primary;
+}
+
+
+
+
+.as__hero1 {
+    .full_height {
+        min-height: max(calc(100vh - $content-height-adjustment), $min-page-height);
+    }
+
+
+
+
+    .v-hide {
+        visibility: hidden;
+    }
+    .as__hero1_content-row {
+        &.mobile {
+            min-height: 66vh;
+            align-content: center;
+        }
+    }
+
+    .as__hero1_image-mobile {
+        img {
+            max-height: 60vh;
+            height: 100%;
+            width: 100%;
+            min-height: 33vh;
+            min-width: inherit;
+            object-fit: cover;
+            object-position: center center;
+        }
+    }
+    .as__hero1_image {
+        overflow: hidden;
+        img {
+            // Object-fit requires a height to be set on the image
+            height: 100%;
+            width: 100%;
+            min-height: inherit;
+            min-width: inherit;
+            object-fit: cover;
+            object-position: center center;
+
+        }
+    }
+    .image-overlay {
+        background-color: var(--as-image-overlay-color);
+        top: 0;
+        z-index: 999;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        &.overlay-fade {
+            background-color: unset;
+            background-image: linear-gradient(to left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 1));
+        }
+
+    }
+
+
+}

package/src/template/hero/hero1.ts

@@ -0,0 +1,78 @@
+import {ka_html, KaTemplate} from "@kasimirjs/embed";
+import {DefaultLayout, jodaRenderer, JodaRendererInterface, JodaUseRenderer} from "@leuffen/jodastyle";
+import {QTemplate} from "@leuffen/jodastyle/src/helper/QTemplate";
+
+
+// language=HTML
+const tpl = ka_html(`
+<div class="autosection as__hero1 position-relative" style="isolation: isolate">
+    <div class="as__hero1_image-mobile :: d-block :[[layout.break1]]: d-none   col-[[12 - layout.content_cols]] " data-ref="image-mobile"></div>
+
+    <div class="[[layout.container]] ">
+        <div class="as__hero1_content-row row :: mobile :[[layout.break1]]: full_height align-items-center">
+            
+            <div class="as__hero1_content [[layout.content_classes]] [[layout.content_space]] :: col-12 :[[layout.break1]]:  col-[[layout.content_cols]] " data-ref="main"></div>
+        </div>
+    </div>
+    <div class="position-absolute top-0 bottom-0 w-100" style="z-index: -1">
+        <div class="container-fluid p-0 h-100 :: d-none :[[layout.break1]]: d-block">
+            <div class="row g-0 flex-lg-row-reverse h-100">
+                <div class="col-[[layout.image_cols]] position-relative as__hero1_image h-100" data-ref="image">
+                    <div class="position-absolute image-overlay [[ layout.content_cols-layout.image_cols < 0 ? 'overlay-fade' : '']]"></div>
+                </div>
+               
+            </div>
+            
+        </div>
+    </div>
+</div>
+`);
+
+
+export class HeroLayout extends DefaultLayout {
+
+    /**
+     * Columns of the content overlay
+     */
+    content_cols : number = 6
+
+    content_space : string = "my-5"
+
+    /**
+     * set Classes of the content div
+     */
+    content_classes : string = ""
+
+    /**
+     * Size of the image in Background
+     */
+    image_cols : number = 6
+
+    /**
+     *
+     */
+    image_content: string = "contentSelector(img)"
+}
+
+@jodaRenderer("hero1", HeroLayout)
+class Hero1 implements JodaRendererInterface {
+    render(element: HTMLElement, layout: HeroLayout): HTMLElement {
+        let main = new QTemplate(tpl);
+        main.parse({layout});
+
+        Array.from(element.querySelectorAll(".background img, img.background")).forEach((el: HTMLElement) => {
+            main.select("image").append(el.cloneNode(true));
+            main.select("image-mobile").append(el);
+        });
+
+        console.log("hero1");
+
+        main.select("main").append(element.querySelector("*"))
+        element.innerHTML = "";
+        element.append(main.content);
+        return main.content;
+    }
+
+}
+
+

package/src/template/navbar/navbar.scss

@@ -0,0 +1,133 @@
+
+
+
+.as__navbar {
+    height: auto;
+    top: 0;
+    width: 100%;
+
+    &.fixed {
+        position: fixed;
+        top: 0;
+        width: 100%;
+    }
+    &.absolute {
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    transition: opacity 1s ease-in-out;
+    position: fixed;
+    z-index: 999;
+    isolation: isolate;
+    opacity: 1;
+
+    &.auto-fixed {
+        &.scrolled {
+            &.fixed {
+                opacity: 1;
+                position: fixed;
+            }
+            opacity: 0;
+        }
+    }
+
+
+    .as__minibar {
+        overflow: hidden;
+        background-color: var(--as-minibar-color);
+        height: var(--as-minibar-height, 24px);
+        transition: height 0.3s ease-in-out;
+        z-index: 9999;
+        ul {
+            text-align: right;
+            text-decoration: none;
+            list-style-type: none;
+            li {
+                display: inline-block;
+                margin: 0 0.5rem;
+                a {
+                    text-decoration: none;
+                    color: var(--as-minibar-text-color);
+                    &:hover {
+
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+    }
+
+    .as__mainbar {
+        .nav-link {
+            padding-right: 0.8rem;
+            padding-left: 0.8rem;
+        }
+
+        .navbar-collapse.show {
+            background-color: var(--as-mainbar-bg, white);
+
+        }
+        .navbar-toggler {
+            background-color: rgba(255, 255,255, 0.5);
+        }
+    }
+}
+
+.as__navbar.scrolled {
+    .as__minibar {
+        height: 0;
+    }
+}
+
+/* Theme specific styles */
+.as__navbar.default {
+
+    .as__mainbar {
+        background-color: var(--as-mainbar-bg, white);
+        border-bottom: 1px solid $primary;
+        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+    }
+    .as__minibar {
+        font-size: 13px;
+        line-height: 24px;
+        background-color: var(--as-minibar-bg, $primary);
+        a {
+            color: white;
+        }
+    }
+}
+
+.as__navbar.transparent {
+    .as__minibar{
+        border: 0;
+        font-size: 13px;
+        line-height: 24px;
+    }
+    .as__mainbar {
+        background-color: transparent !important;
+        transition: all 0.3s ease-in-out;
+        border: 0;
+
+        a {
+            font-weight: bolder;
+            // text-frame outset in white to read text better on background
+            text-shadow: 1px 1px 1px $light, -1px -1px 1px $light, 1px -1px 1px $light, -1px 1px 1px $light;
+
+
+        }
+    }
+
+}
+.as__navbar.transparent.scrolled {
+    .as__mainbar {
+        background-color: var(--as-mainbar-bg, white) !important;
+        border-bottom: 1px solid $primary;
+        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+
+    }
+    .as__minibar {
+        height: 0;
+    }
+}

package/src/template/navbar/navbar.ts

@@ -0,0 +1,137 @@
+import {ka_create_element, ka_html, KaTemplate} from "@kasimirjs/embed";
+import {DefaultLayout, jodaRenderer, JodaRendererInterface} from "@leuffen/jodastyle";
+import {QTemplate} from "@leuffen/jodastyle/src/helper/QTemplate";
+
+
+
+// language=HTML
+const tpl = ka_html(`
+<nav class="as__navbar [[layout.position]]" style="z-index: 999">
+
+    <div id="as__minibar" class="as__minibar top" >
+        <div class="[[layout.container]]" data-ref="minibar"></div>
+    </div>
+    
+    <div class="as__mainbar navbar navbar-expand-lg w-100">
+        <div class="[[layout.container]]" data-ref="main">
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div data-ref="navbar" class="collapse navbar-collapse" id="navbarSupportedContent">
+
+                
+            </div>
+        </div>
+    </div>
+    
+</nav>
+`);
+
+
+export class NavbarLayout extends DefaultLayout {
+
+    /**
+     * a additional class name added to the main element
+     * to allow for custom styling. Defaults to "default" (see as-navbar.scss for details)
+     */
+    style_class = "default";
+
+    /**
+     * default position: Fixed on top
+     */
+    position = "fixed";
+
+    /**
+     * Show fixed navbar if scrolled down more than this distance
+     */
+    fixed_scroll_distance = 10;
+}
+
+
+@jodaRenderer("navbar", NavbarLayout)
+class Navbar implements JodaRendererInterface {
+
+    public render(element: HTMLElement, layout: NavbarLayout) {
+        console.log(layout);
+
+        let original = element.cloneNode(true) as HTMLElement;
+
+
+        let template = new QTemplate(tpl);
+        element.innerHTML = "";
+        element.appendChild(template.content);
+
+
+        template.parse({layout});
+
+        let result = template.content;
+        let mainDiv = template.with("main");
+        let navbar = template.with("navbar");
+        let minibar = template.with("minibar");
+
+
+
+        let navbarBrand = original.querySelector(".navbar-brand");
+        if (navbarBrand === null) {
+            navbarBrand = ka_create_element("a", {href: "/"}, "No class='navbar-brand' element")
+        }
+
+        mainDiv.selected.insertBefore(navbarBrand, mainDiv.selected.firstElementChild);
+
+        let mainUl = original.querySelector("ul.mainbar") as HTMLDivElement | null;
+        if (mainUl === null) {
+            mainUl = ka_create_element("ul", {}, "Missing ul.mainbar element") as HTMLDivElement
+        }
+        mainUl = mainUl.cloneNode(true) as HTMLDivElement;
+        navbar.append(mainUl);
+
+        let miniUl = original.querySelector("ul.minibar") as HTMLDivElement | null;
+        if (miniUl.firstElementChild === null) {
+            miniUl = null;
+        }
+        minibar.append(miniUl);
+
+        mainUl.classList.add(..."navbar-nav navbar-nav-scroll ms-auto my-2 my-lg-0".split(" "));
+
+
+        if (layout.fixed_scroll_distance !== null)
+            result.firstElementChild.classList.add("auto-fixed");
+
+        result.firstElementChild.classList.add(layout.style_class);
+        let scolled = false;
+        let fixed = false;
+
+        window.setInterval(() => {
+            if (window.scrollY > 0 && !scolled) {
+                result.classList.add("scrolled");
+                scolled = true;
+            } else if (window.scrollY === 0 && scolled) {
+                result.classList.remove("scrolled");
+                scolled = false;
+            } else {
+                // nothing
+            }
+            if (layout.fixed_scroll_distance === null)
+                return;
+            if (window.scrollY > layout.fixed_scroll_distance && !fixed) {
+                result.classList.add("fixed");
+                fixed = true;
+            } else if (window.scrollY <= layout.fixed_scroll_distance && fixed) {
+                result.classList.remove("fixed");
+                fixed = false;
+            }
+        }, 300)
+
+
+        mainUl.querySelectorAll("li").forEach(e => e.classList.add("nav-item"))
+        mainUl.querySelectorAll("li a").forEach(e => e.classList.add("nav-link"))
+        mainUl.querySelectorAll("li.dropdown ul").forEach(e => e.classList.add("dropdown-menu"))
+        mainUl.querySelectorAll("li.dropdown ul li").forEach(e => e.classList.add("dropdown-item"))
+
+
+        element.replaceWith(template.content);
+        return template.content;
+    }
+}
+

package/style.scss

@@ -0,0 +1,4 @@
+
+@import "src/template/_variables.scss";
+@import "src/template/navbar/navbar.scss";
+@import "src/template/hero/hero1.scss";

package/style_embed.scss

@@ -0,0 +1 @@
+

package/style_late.scss

@@ -0,0 +1,2 @@
+
+