Add more Prerendering

src/components/repo/repo.ts

@@ -33,5 +33,15 @@ export const fetchWithToken = (token: string, url: string, params: RequestInit =
             return value;
         });
 
-export const tokenStore = writable((localStorage.getItem("sw-session") ?? ""));
+export function getLocalStorage() {
-tokenStore.subscribe((value) => localStorage.setItem("sw-session", value));
+    if (typeof localStorage === "undefined") {
+        return {
+            getItem: () => "",
+            setItem: () => {},
+        };
+    }
+    return localStorage;
+}
+
+export const tokenStore = writable((getLocalStorage().getItem("sw-session") ?? ""));
+tokenStore.subscribe((value) => getLocalStorage().setItem("sw-session", value));

src/components/stores/stores.ts

@@ -70,5 +70,8 @@ export const branches = cached<string[]>([], async () => {
 
 export const server = derived(dataRepo, $dataRepo => $dataRepo.getServer());
 
-export const isWide = writable(window.innerWidth >= 640);
+export const isWide = writable(typeof window !== "undefined" && window.innerWidth >= 640);
+
+if (typeof window !== "undefined") {
     window.addEventListener("resize", () => isWide.set(window.innerWidth >= 640));
+}

src/layouts/NavbarLayout.astro

@@ -29,7 +29,7 @@ const {title, description} = Astro.props;
                 <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
                     <div class="footer-card">
                         <h1>Serverstatus</h1>
-                        <ServerStatus transition:persist client:only="svelte"/>
+                        <ServerStatus transition:persist client:visible />
                     </div>
                     <div class="footer-card">
                         <h1>Links</h1>

src/pages/index.astro

@@ -52,7 +52,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
             <text-carousel class="h-20 w-full relative select-none">
                 <h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
                 <h2>{t("home.subtitle.2")}
-                    <PlayerCount client:only="svelte"/>
+                    <PlayerCount client:idle />
                 </h2>
                 <h2>{t("home.subtitle.3")}</h2>
             </text-carousel>

src/pages/rangliste/[...gamemode].astro

@@ -26,5 +26,5 @@ const {mode} = Astro.props;
 
 <PageLayout title={t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}>
     <h1 class="text-2xl mb-2">{t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}</h1>
-    <EloTable gamemode={mode.id} client:only="svelte"/>
+    <EloTable gamemode={mode.id} client:load/>
 </PageLayout>