<script lang="ts">
    import { Router, Route, links } from "svelte-routing"
    import { scrollToTop } from "svelte-scrollto"
    import { location } from "../store"
    import Content from "./routes/Content.svelte"

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

    // scroll to top on new site
    location.subscribe((l) => {
        if (l.push) scrollToTop()
    })

    if (typeof window !== "undefined") console.log("App initialized")
</script>

<style lang="less" global>
    @import "./../css/main.less";
    h1 {
        color: red;
    }
</style>

<h1>__PROJECT_TITLE__</h1>

<div use:links>
    <a href="/test1">1</a>
    <a href="/test2">2</a>
    <a href="/test3">3</a>
    <a href="/test4">4</a>
    <Router url="{url}">
        <Route path="/*path" let:params>
            <Content path="/{params.path}" />
        </Route>
    </Router>
</div>
