wm-fontis-tibi-2023/frontend/src/App.svelte

<script lang="ts">
    import Footer from "./lib/components/Footer.svelte"
    import Header from "./lib/components/Menu/Header.svelte"
    import Menu from "./lib/components/Menu/Menu.svelte"
    import NotFound from "./lib/components/NotFound.svelte"
    import Rows from "./lib/components/Pagebuilder/Rows.svelte"
    import {
        location,
        navigation,
        pages,
        serviceNavigation,
        rerender,
        mediaLibrary,
        team,
        jobOffers,
        modules,
    } from "./lib/store"
    import { onMount, onDestroy } from "svelte"
    import { Route, Router } from "svelte-routing"
    import { loadPages } from "./lib/functions/getPages"
    import { loadNavigation } from "./lib/functions/loadNavigation"
    import ScrollTop from "./lib/components/widgets/scrollTop.svelte"
    import ScrollDown from "./lib/components/widgets/scrollDown.svelte"
    import { loadLibrary } from "./lib/functions/loadLibrary"
    import { loadModules } from "./lib/functions/loadModules"
    import "external-svg-loader"
    export let url = ""

    if (url) {
        let l = url.split("?")
        $location = {
            path: l[0],
            search: l.length > 1 ? l[1] : "",
            hash: "",
            categoryPath: l[0].replace(/\/[^_\/]+_[^\/]+$/, ""),
            push: false,
            pop: false,
        }
    }

    async function getPages() {
        let pagesArray = await loadPages()
        let pagesRes: Pages = {}
        let teamRes: Pages = {}
        let jobOffersRes: Pages = {}

        pagesArray.forEach((e) => {
            if (!e.active) return
            if (e.type == "page") {
                pagesRes[e.path] = e
            } else if (e.type == "teamMembers") {
                teamRes[e.path] = e
            } else if (e.type == "jobOffers") {
                jobOffersRes[e.path] = e
            } else {
                pagesRes[e.path] = e
            }
        })
        $pages = pagesRes
        $team = teamRes

        $jobOffers = jobOffersRes
    }

    async function getNavigation() {
        let nav: Navigation[] = await loadNavigation()
        $navigation = nav[0]
        $serviceNavigation = nav[1]
    }

    async function getLibrary() {
        let library: MediaLibrary[] = await loadLibrary()
        let lib = {}
        library.forEach((e) => {
            lib[e.id] = e
        })
        $mediaLibrary = lib
    }

    async function getModules() {
        let moduleArray: Module[] = await loadModules()
        let mod = {}
        moduleArray.forEach((e) => {
            mod[e.id] = e
        })
        $modules = mod
    }

    getNavigation()
    getPages()
    getLibrary()
    getModules()
    console.log("TESTR")
    let activeMenu = false
    $: {
        if (typeof window !== "undefined") {
            if (activeMenu) {
                document.body.classList.add("overflow")
            } else {
                document.body.classList.remove("overflow")
            }
        }
    }
</script>

<main class="">
    <Header bind:active="{activeMenu}" />
    <div class="content-container" id="siteContainer" data-url="{url}">
        <Router url="{url}">
            <Route path="/">
                <Rows path="/" homepage="{true}" />
            </Route>
            <Route path="/*path" let:params>
                {#key $rerender}
                    <Rows path="/{params?.path}" homepage="{false}" />
                {/key}
            </Route>
            <Route>
                <NotFound />
            </Route>
        </Router>
    </div>
    {#key $rerender}
        <Footer />
    {/key}
</main>

<ScrollTop />
<ScrollDown />

<Menu bind:active="{activeMenu}" />

<style lang="less" global>
    @import "./lib/assets/css/main.less";
    @import "./lib/assets/css/base.less";
    @import "swiper/swiper-bundle.min.css";
    @import "swiper/modules/effect-fade/effect-fade";
    @import "swiper/modules/navigation/navigation";
    @import "swiper/modules/pagination/pagination";

    .HP {
        h2 {
            font-size: 2.1rem !important;
            @media @tablet {
                font-size: 3.2rem !important;
            }
        }
    }
    .swiper-button-prev,
    .swiper-button-next {
        color: @font-color;
        height: 70px;
        width: 70px;
        bottom: 0px !important;
        top: initial !important;
        transform: scale(0.5);
        transform-origin: bottom !important;
    }

    .swiper-button-prev {
        right: 18%;
        left: initial !important;
    }

    .swiper-button-next {
        right: 3%;
        transform-origin: right;
    }

    @media @tablet {
        .swiper-button-prev,
        .swiper-button-next {
            bottom: initial !important;
            top: 100px !important;
            transform: scale(0.8);
            transform-origin: center !important;
        }
        .swiper-button-prev {
            left: 0% !important;
            right: initial !important;
            left: initial !important;
        }
        .swiper-button-next {
            right: 0% !important;
            transform-origin: right;
        }
    }

    @media @desktop {
        .swiper-button-prev,
        .swiper-button-next {
            top: 110px !important;
            transform: scale(1);
        }
    }
    h1,
    h2 {
        font-family: "Libre Caslon Text", serif;
    }

    .overflow {
        overflow: hidden !important;
    }
    main {
        min-height: 100vh;
        background-color: @bg-color;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;

        .content-container {
            flex: 1;
        }
    }

    html,
    body {
        font-family: "Libre Franklin", sans-serif;
        button {
            font-family: "Libre Franklin", sans-serif;
        }
        @media @mobile {
            font-size: @bodyfontsize;
            line-height: 1.4;
        }
        @media @tablet {
            font-size: @bodyfontsize_desktop;
            line-height: 1.6;
        }
    }
    @font-face {
        font-display: swap;
        font-family: "Libre Franklin";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/libre-franklin-v13-latin-regular.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Libre Caslon Text";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/LibreCaslonText-Regular.woff2") format("woff2");
    }
</style>