Files
tibi-docs/frontend/src/App.svelte
2024-03-11 17:26:10 +00:00

128 lines
3.9 KiB
Svelte

<script lang="ts">
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 = ""
if (url) {
// ssr
let l = url.split("?")
$location = {
path: l[0],
search: l.length > 1 ? l[1] : "",
hash: "",
categoryPath: l[0].replace(/\/[^_\/]+_[^\/]+$/, ""),
push: false,
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()
loadNavigationAndSetStores()
loadLibraryAndSetStore()
loadContentAndSetStores()
</script>
<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>