zwischenstand

frontend/src/App.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
-    import { location } from "./lib/store"
+    import { onDestroy } from "svelte"
+    import { getEventCallbacks, registerEventCallback, unregisterEventCallback } from "./lib/functions/eventBus"
+    import { loadModulesAndSetStore } from "./lib/functions/fetch/loadModules"
+    import { location, pages, rerender } from "./lib/store"
+    import { Route, Router, links } from "../../vendor/svelte-routing"
+    import Footer from "./lib/components/Footer.svelte"
+    import Header from "./lib/components/Header.svelte"
+    import Page from "./routes/Page.svelte"
+    import ScrollTop from "./lib/components/ScrollTop.svelte"
+    import ScrollBottom from "./lib/components/ScrollBottom.svelte"
+    import { loadContentAndSetStores } from "./lib/functions/fetch/loadContentAndSetStores"
+    import { loadNavigationAndSetStores } from "./lib/functions/fetch/loadNavigationAndSetStores"
+    import { loadLibraryAndSetStore } from "./lib/functions/fetch/loadLibraryAndSetStores"
 
     export let url = ""
 
@@ -15,8 +27,102 @@
             pop: false,
         }
     }
+    function registerEvent() {
+        let callbacks = getEventCallbacks("navigate")
+        if (callbacks && callbacks["rerender"]) return
+        registerEventCallback("navigate", "rerender", () => {
+            $rerender = !$rerender
+            return true
+        })
+    }
+    registerEvent()
+    onDestroy(() => {
+        let callbacks = getEventCallbacks("navigate")
+        if (callbacks["rerender"]) unregisterEventCallback("navigate", "rerender")
+    })
+    loadModulesAndSetStore()
 
-    if (typeof window !== "undefined") console.log("App initialized")
+    loadNavigationAndSetStores()
+    loadLibraryAndSetStore()
+    loadContentAndSetStores()
 </script>
 
-<h1>Hello World</h1>
+<main use:links>
+    <Header></Header>
+    <Router {url}>
+        <Route path="/" component="{Page}" />
+        <Route path="/*path" let:params>
+            {#key $rerender}
+                <Page path="/{params?.path}" isHomepage="{false}"></Page>
+            {/key}
+        </Route>
+    </Router>
+    <Footer></Footer>
+</main>
+
+<ScrollTop />
+<ScrollBottom />
+
+<style lang="less" global>
+    @import "./lib/assets/css/variables.less";
+    @import "./lib/assets/css/main.less";
+    @import "swiper/swiper-bundle.min.css";
+    @import "swiper/modules/effect-fade/effect-fade";
+    @import "swiper/modules/navigation/navigation";
+    @import "swiper/modules/pagination/pagination";
+    .swiper-button-prev,
+    .swiper-button-next {
+        transform-origin: left;
+        color: #333;
+        transform: scale(0.3);
+        background-color: rgba(255, 255, 255, 0.6);
+        top: 50%;
+        padding: 10px;
+        height: 70px;
+        width: 70px;
+        border-radius: 50px;
+    }
+    .swiper-button-prev {
+        left: 6%;
+    }
+    .swiper-button-next {
+        right: 6%;
+        transform-origin: right;
+    }
+    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;
+        }
+    }
+    main {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        align-items: center;
+    }
+    @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>