init

src/components/App.svelte

@@ -1,5 +1,17 @@
 <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>
+
 <style lang="less">
     h1 {
         color: red;
@@ -7,8 +19,10 @@
 </style>
 
 <script lang="typescript">
+    import { Router, Route, links } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
     import { location } from "../store"
+    import Content from "./Content.svelte"
 
     export let url = ""
     if (url) {

src/components/Content.svelte

@@ -0,0 +1,5 @@
+<h2>{path}</h2>
+
+<script lang="typescript">
+    export let path: string
+</script>

src/components/ContentBlocks.svelte

@@ -0,0 +1,105 @@
+{#if blocks?.length}
+    <section class="section_padding">
+        <div class="container">
+            {#each blocks as box, idx}
+                <!-- Teaserbox -->
+                <div class="row center_row">
+                    {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
+                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
+                            <img
+                                loading="lazy"
+                                src="{imageBase + box.images[0].file.src}"
+                                alt="{box.images[0].label || ''}"
+                            />
+                        </div>
+                    {/if}
+                    {#if box.text || box.title || (box.button_text && box.button_url)}
+                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
+                            {#if box.subtitle}
+                                <div class="subline">{box.subtitle}</div>
+                            {/if}
+                            {#if box.title}
+                                {#if accordeon == true}
+                                    <h2
+                                        class="h2_nooffset acc_trigger"
+                                        class:active="{activeAccordeons[idx]}"
+                                        on:click="{() => {
+                                            activeAccordeons[idx] = !activeAccordeons[idx]
+                                        }}"
+                                    >
+                                        {box.title}
+                                        <span class="icon">\/</span>
+                                    </h2>
+                                {:else}
+                                    <h2 class="h2_nooffset">{box.title}</h2>
+                                {/if}
+                            {/if}
+                            <div
+                                class="boxText"
+                                class:hideText="{accordeon && box.title && !activeAccordeons[idx]}"
+                            >
+                                {@html box.text}
+                                {#if box.button_text && box.button_url}
+                                    <a
+                                        href="{box.button_url}"
+                                        class="btn btn_blue"
+                                    >{box.button_text}</a>
+                                {/if}
+                            </div>
+                        </div>
+                    {/if}
+                    {#if box.images?.length && (box.layout == 2 || box.layout == 4)}
+                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
+                            <img
+                                loading="lazy"
+                                src="{imageBase + box.images[0].file.src}"
+                                alt="{box.images[0].label || ''}"
+                            />
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </section>
+{/if}
+
+<style lang="less">
+    .acc_trigger {
+        display: flex;
+        display: -webkit-flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        border-bottom: solid 1px #ccc;
+        padding-bottom: 10px;
+        .icon {
+            display: flex;
+            display: -webkit-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 30px;
+            transform: rotate(0deg);
+            transition: all 0.3s;
+        }
+        &.active {
+            .icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .hideText {
+        display: none;
+    }
+</style>
+
+<script lang="typescript">
+    export let blocks: ContentBlock[]
+    export let imageBase: string
+
+    export let accordeon = false
+
+    let activeAccordeons: {
+        [key: number]: boolean
+    } = {}
+</script>