SSR

frontend/.htaccess

@@ -1,6 +1,7 @@
 AddType application/javascript .mjs
 
 #DirectoryIndex spa.html
+# notwendig, da sonst über normale url spa.html aufgerufen wird, muss nur datei name sei, der nicht existiert
 DirectoryIndex noindex
 
 <ifModule mod_rewrite.c>
@@ -11,6 +12,8 @@ DirectoryIndex noindex
 
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
+    # leitet initale request an backend und nicht an spa.html weiter
     RewriteRule ^/?(.*)$ http://tibi-server:8080/api/v1/_/allkids_erfurt/ssr?token=owshwerNwoa&url=/$1 [P,QSA,L]
+    # standardmäßig wegen deeplink aus google notwendig, da sonst 404
     #RewriteRule (.*) /spa.html [QSA,L]
 </ifModule>

frontend/src/App.svelte

@@ -64,34 +64,50 @@
     })
 
     let cookiesAllowed = false
-    window.addEventListener("ccAccept", (e) => {
-        // @ts-ignore test
-        if (e.detail[1] == cookieName) cookiesAllowed = true
-    })
-    //isCookieSet isnt really precise
-    function checkCookie(cookieName: string) {
-        // Get all cookies
-        var allCookies = decodeURIComponent(document.cookie)
-        // Split into individual cookies
-        var cookies = allCookies.split(";")
-        var ccTagCookies: string[] = []
-        cookies.forEach((e) => {
-            e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+    if (typeof window !== "undefined") {
+        window.addEventListener("ccAccept", (e) => {
+            // @ts-ignore test
+            if (e.detail[1] == cookieName) cookiesAllowed = true
         })
-        for (var i = 0; i < ccTagCookies.length; i++) {
-            var c = ccTagCookies[i]
-            // Trim whitespace
-            while (c.charAt(0) == " ") c = c.substring(1)
-            // If the cookie's name matches the given name
-            if (c == cookieName) return true
+        //isCookieSet isnt really precise
+        function checkCookie(cookieName: string) {
+            // Get all cookies
+            var allCookies = decodeURIComponent(document.cookie)
+            // Split into individual cookies
+            var cookies = allCookies.split(";")
+            var ccTagCookies: string[] = []
+            cookies.forEach((e) => {
+                e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+            })
+            for (var i = 0; i < ccTagCookies.length; i++) {
+                var c = ccTagCookies[i]
+                // Trim whitespace
+                while (c.charAt(0) == " ") c = c.substring(1)
+                // If the cookie's name matches the given name
+                if (c == cookieName) return true
+            }
+            return false
         }
-        return false
+        cookiesAllowed = checkCookie("googleAnalytics")
     }
-    cookiesAllowed = checkCookie("googleAnalytics")
 </script>
 
 <svelte:head>
     {#if cookiesAllowed}
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->

frontend/src/lib/components/cookieSet.svelte

@@ -9,11 +9,12 @@
         mitte: "center",
         unten: "flex-end",
     }
-
-    window.addEventListener("ccAccept", (e) => {
-        // @ts-ignore
-        if (e.detail[1] == cookieName) contentShown = true
-    })
+    if (typeof window !== "undefined") {
+        window.addEventListener("ccAccept", (e) => {
+            // @ts-ignore
+            if (e.detail[1] == cookieName) contentShown = true
+        })
+    }
     //isCookieSet isnt really precise
     function checkCookie(cookieName: string) {
         // Get all cookies

frontend/src/lib/components/header/Header.svelte

@@ -29,15 +29,16 @@
         // Initial check
         checkHomePage()
         checkScroll()
+        if (typeof window !== "undefined") {
+            // Listen for changes
+            window.addEventListener("scroll", checkScroll)
+            window.addEventListener("popstate", checkHomePage)
 
-        // Listen for changes
-        window.addEventListener("scroll", checkScroll)
-        window.addEventListener("popstate", checkHomePage)
-
-        return () => {
-            // Cleanup event listeners
-            window.removeEventListener("scroll", checkScroll)
-            window.removeEventListener("popstate", checkHomePage)
+            return () => {
+                // Cleanup event listeners
+                window.removeEventListener("scroll", checkScroll)
+                window.removeEventListener("popstate", checkHomePage)
+            }
         }
     })
     let show = false

frontend/src/lib/components/header/desktop.svelte

@@ -8,7 +8,6 @@
     function changeStateOfSite(menuOn: boolean) {
         let siteContainer = document.body
         show = menuOn
-        console.log("TEST")
         if (menuOn) siteContainer.style.overflow = "hidden"
         else siteContainer.style.overflow = "initial"
     }
@@ -59,8 +58,9 @@
             textElement.style.letterSpacing = `${letterSpacing}px`
         }*/
     }
-
-    window.addEventListener("resize", stretchText)
+    if (typeof window !== "undefined") {
+        window.addEventListener("resize", stretchText)
+    }
     onMount(stretchText)
 </script>
 
@@ -186,7 +186,7 @@
                             <div class="submenu-img">
                                 <img
                                     src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
-                                        window.innerWidth > 500 ? 'xl' : 'm'
+                                        window?.innerWidth > 500 ? 'xl' : 'm'
                                     }`}"
                                     alt="img"
                                 />

frontend/src/lib/components/header/mobile.svelte

@@ -30,13 +30,15 @@
     function imageSlide(images: HTMLImageElement[]) {
         let currentImage = 0
         images[0].classList.add("show-img")
-        let interval = setInterval(() => {
-            images[currentImage].classList.remove("show-img")
-            currentImage += 1
-            if (images.length == currentImage) currentImage = 0
-            images[currentImage].classList.add("show-img")
-        }, 4000)
-        return () => clearInterval(interval)
+        if (typeof window !== "undefined") {
+            let interval = setInterval(() => {
+                images[currentImage].classList.remove("show-img")
+                currentImage += 1
+                if (images.length == currentImage) currentImage = 0
+                images[currentImage].classList.add("show-img")
+            }, 4000)
+            return () => clearInterval(interval)
+        }
     }
 
     function pushImages(node: HTMLImageElement) {
@@ -44,11 +46,14 @@
     }
 
     $: {
-        const images = Array.from(document.getElementsByClassName("img-menu")) as HTMLImageElement[]
-        if (images.length !== 0) {
-            imageSlide(images)
+        if (typeof window !== "undefined") {
+            const images = Array.from(document.getElementsByClassName("img-menu")) as HTMLImageElement[]
+            if (images.length !== 0) {
+                imageSlide(images)
+            }
         }
     }
+
     function stretchText() {
         let container = document.getElementById("logo-container")
         let textElement = document.getElementById("upper")
@@ -83,9 +88,10 @@
             textElement.style.letterSpacing = `${newLetterSpacing}px`
         }
     }
-
-    window.addEventListener("resize", stretchText)
-    onMount(stretchText)
+    if (typeof window !== "undefined") {
+        window.addEventListener("resize", stretchText)
+        onMount(stretchText)
+    }
 </script>
 
 <ul>
@@ -111,7 +117,7 @@
         <button
             class="button-three"
             on:click="{(e) => {
-                let element = document.getElementById('menu')
+                let element = document?.getElementById('menu')
                 if (element) changeStateOfSite(element.classList.contains('show-menu'))
             }}"
             aria-controls="primary-navigation"
@@ -210,7 +216,7 @@
                                     <img
                                         use:pushImages
                                         src="{`${apiBaseURL}navigation/${$navigation.id}/${imgSrc}?filter=${
-                                            window.innerWidth > 500 ? 'xl' : 'm'
+                                            window?.innerWidth > 500 ? 'xl' : 'm'
                                         }`}"
                                         alt="img"
                                         class="img img-menu"

frontend/src/lib/components/pagebuilder/Homepage.svelte

@@ -31,13 +31,16 @@
                 firstSlideH1.classList.add("active")
             }
         }
-        const el = document.getElementById("HP")
-        let heightOfEl = el?.clientHeight
-        const hp = document.getElementById("Homepage")
-        const homepage_placeholder = document.getElementById("homepage-placeholder")
-        if (hp && window.innerHeight < 600) {
-            hp.style.minHeight = (heightOfEl || window.innerHeight) + 200 + "px"
-            homepage_placeholder.style.minHeight = (heightOfEl || window.innerHeight) + 350 + "px"
+        if (typeof window !== "undefined") {
+            const el = document.getElementById("HP")
+            let heightOfEl = el?.clientHeight
+            const hp = document.getElementById("Homepage")
+            const homepage_placeholder = document.getElementById("homepage-placeholder")
+
+            if (hp && window.innerHeight < 600) {
+                hp.style.minHeight = (heightOfEl || window.innerHeight) + 200 + "px"
+                homepage_placeholder.style.minHeight = (heightOfEl || window.innerHeight) + 350 + "px"
+            }
         }
     })
 

frontend/src/lib/components/pagebuilder/banner.svelte

@@ -13,11 +13,13 @@
     }
 
     onMount(() => {
-        interval = setInterval(() => {
-            currentIndex = (currentIndex + 1) % $banner.length
-        }, 7000)
+        if (typeof window !== "undefined") {
+            interval = setInterval(() => {
+                currentIndex = (currentIndex + 1) % $banner.length
+            }, 7000)
 
-        return () => clearInterval(interval)
+            return () => clearInterval(interval)
+        }
     })
 </script>
 

frontend/src/lib/components/pagebuilder/form/Formular.svelte

@@ -71,20 +71,22 @@
             sendForm(formObj)
         }
     }
-    let innerWidth = window.innerWidth
 
-    onMount(() => {
-        const handleResize = () => {
-            innerWidth = window.innerWidth
-        }
+    let innerWidth = window?.innerWidth || 0
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            const handleResize = () => {
+                innerWidth = window.innerWidth
+            }
 
-        window.addEventListener("resize", handleResize)
+            window.addEventListener("resize", handleResize)
 
-        // Cleanup function
-        return () => {
-            window.removeEventListener("resize", handleResize)
-        }
-    })
+            // Cleanup function
+            return () => {
+                window.removeEventListener("resize", handleResize)
+            }
+        })
+    }
 </script>
 
 {#if formSend}

frontend/src/lib/components/pagebuilder/form/select.svelte

@@ -47,13 +47,15 @@
     }
 
     onMount(() => {
-        const inputEl = document.querySelector(".svelte-select input")
-        if (inputEl) {
-            inputEl.addEventListener("input", handleInputChange)
-        }
-        return () => {
+        if (typeof window !== "undefined") {
+            const inputEl = document.querySelector(".svelte-select input")
             if (inputEl) {
-                inputEl.removeEventListener("input", handleInputChange)
+                inputEl.addEventListener("input", handleInputChange)
+            }
+            return () => {
+                if (inputEl) {
+                    inputEl.removeEventListener("input", handleInputChange)
+                }
             }
         }
     })

frontend/src/lib/components/pagebuilder/image.svelte

@@ -50,7 +50,7 @@
                     <div class="image-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
-                                window.innerWidth > 500 ? 'xl' : 'm'
+                                window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="Bild"
                         />
@@ -62,7 +62,7 @@
 {:else if image}
     <div class="image-container single flex">
         <img
-            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window.innerWidth > 500 ? 'xl' : 'm'}`}"
+            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window?.innerWidth > 500 ? 'xl' : 'm'}`}"
             alt="Bild"
         />
     </div>

frontend/src/lib/components/pagebuilder/infoBoard.svelte

@@ -22,7 +22,7 @@
         <div class="img-container">
             <img
                 src="{`${apiBaseURL}content/${siteId}/${col.image?.src}?filter=${
-                    window.innerWidth > 500 ? 'xl' : 'm'
+                    window?.innerWidth > 500 ? 'xl' : 'm'
                 }`}"
                 alt="img"
             />

frontend/src/lib/components/pagebuilder/mainPicture.svelte

@@ -9,7 +9,7 @@
     <div class="imgContainer">
         <img
             src="{`${apiBaseURL}content/${siteId}/${col.mainPicture?.src}?filter=${
-                window.innerWidth > 500 ? 'xl' : 'm'
+                window?.innerWidth > 500 ? 'xl' : 'm'
             }`}"
             alt="img"
         />

frontend/src/lib/components/pagebuilder/productPreview.svelte

@@ -48,7 +48,7 @@
                     <div class="img-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${product.image?.src}?filter=${
-                                window.innerWidth > 500 ? 'xl' : 'm'
+                                window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="img"
                         />

frontend/src/lib/components/pagebuilder/scrollDown.svelte

@@ -13,22 +13,25 @@
         // Jump down by 100vh
         window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
     }
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        })
 
-    onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
-    })
-
-    onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
-    })
+        onDestroy(() => {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        })
+    }
     let force = true
-    setInterval(() => {
-        if (location.pathname != "/") {
-            force = false
-        } else force = true
-    }, 1000)
+    if (typeof window !== "undefined") {
+        setInterval(() => {
+            if (location.pathname != "/") {
+                force = false
+            } else force = true
+        }, 1000)
+    }
     $: {
         /* if ($rerender) {
             if (location.pathname != "/") {

frontend/src/lib/components/pagebuilder/scrollTop.svelte

@@ -12,16 +12,17 @@
         // Scroll smoothly to the top
         window.scrollTo({ top: 0, behavior: "smooth" })
     }
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        })
 
-    onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
-    })
-
-    onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
-    })
+        onDestroy(() => {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        })
+    }
 </script>
 
 {#if showButton}

frontend/src/lib/components/pagebuilder/teaser.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <main class="teaser">
-    {#if index % 2 == 0 || window.innerWidth < 1023}
+    {#if index % 2 == 0 || window?.innerWidth < 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
     <div class="content">
@@ -14,7 +14,7 @@
         <p>{site?.teaserDescription}</p>
         <button on:click="{() => navigate(site.path)}">MEHR</button>
     </div>
-    {#if index % 2 == 1 && window.innerWidth > 1023}
+    {#if index % 2 == 1 && window?.innerWidth > 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
 </main>

frontend/src/routes/NotFound.svelte

@@ -1,5 +1,10 @@
 <script>
     import { navigate } from "svelte-routing"
+        // set 404 for ssr
+    if (typeof window === "undefined") {
+        // @ts-ignore
+        if (context) context.is404 = true
+    }
 </script>
 
 <svelte:head>