formatting and more perf

7 files changed, 87 insertions, 88 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9b488bd..19a7b85 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,17 +8,6 @@
   let { children } = $props();
 
   onMount(() => {
-    const loadFonts = () => {
-      if (document.querySelector('link[data-app-fonts="true"]')) return;
-
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href =
-        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
-      link.setAttribute("data-app-fonts", "true");
-      document.head.appendChild(link);
-    };
-
     const loadAnalytics = () => {
       if (document.querySelector('script[data-goatcounter-script="true"]'))
         return;
@@ -32,23 +21,34 @@
       document.head.appendChild(script);
     };
 
-    const runDeferredLoads = () => {
-      loadFonts();
-      loadAnalytics();
+    const runDeferredAnalytics = () => {
+      const idleWindow = window as Window & {
+        requestIdleCallback?: (
+          callback: IdleRequestCallback,
+          options?: IdleRequestOptions,
+        ) => number;
+      };
+
+      if (typeof idleWindow.requestIdleCallback === "function") {
+        idleWindow.requestIdleCallback(loadAnalytics, { timeout: 3000 });
+        return;
+      }
+      window.setTimeout(loadAnalytics, 1500);
     };
 
     if (document.readyState === "complete") {
-      window.setTimeout(runDeferredLoads, 0);
+      runDeferredAnalytics();
       return;
     }
 
-    window.addEventListener("load", runDeferredLoads, { once: true });
-    return () => window.removeEventListener("load", runDeferredLoads);
+    window.addEventListener("load", runDeferredAnalytics, { once: true });
+    return () => window.removeEventListener("load", runDeferredAnalytics);
   });
 </script>
 
 <svelte:head>
   <link rel="icon" href={favicon} />
+  <meta name="color-scheme" content="light dark" />
 </svelte:head>
 
 <Header title="Berke Güzel" description="Super. Bad. Code." />
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 8f4a3a7..c1a5530 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,8 +1,8 @@
-import { getPosts } from '$lib/utils/posts.server';
-import type { PageServerLoad } from './$types';
+import { getPosts } from "$lib/utils/posts.server";
+import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async () => {
-	return {
-		posts: getPosts()
-	};
+  return {
+    posts: getPosts(),
+  };
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b2c92b4..9924a19 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
-	import PostCard from "$lib/components/PostCard.svelte";
+  import type { PageData } from "./$types";
+  import PostCard from "$lib/components/PostCard.svelte";
 
-	let { data }: { data: PageData } = $props();
+  let { data }: { data: PageData } = $props();
 </script>
 
 <svelte:head>
-	<title>wenekar sucks at programming</title>
-	<meta
-		name="description"
-		content="A personal blog built with SvelteKit and MDsveX"
-	/>
+  <title>wenekar sucks at programming</title>
+  <meta
+    name="description"
+    content="A personal blog built with SvelteKit and MDsveX"
+  />
 </svelte:head>
 
 <section>
-	{#if data.posts.length === 0}
-		<p>No posts.</p>
-	{:else}
-		{#each data.posts as post}
-			<PostCard {post} />
-		{/each}
-	{/if}
+  {#if data.posts.length === 0}
+    <p>No posts.</p>
+  {:else}
+    {#each data.posts as post}
+      <PostCard {post} />
+    {/each}
+  {/if}
 </section>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 176ae64..189f71e 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1 +1 @@
-export const prerender = true
+export const prerender = true;
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 3f47736..bd5b29d 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,35 +1,35 @@
 <h1>About</h1>
 
 <p>
-    My name is Berke Güzel and I am a huge fan of
-    <a href="https://supergoodcode.com">Super. Good. Code.</a>
+  My name is Berke Güzel and I am a huge fan of
+  <a href="https://supergoodcode.com">Super. Good. Code.</a>
 </p>
 
 <p>
-    I do not do code good. I am aiming to use this page as a means of publicly
-    sharing my thoughts, and
-    <i>maybe</i> projects. And who knows, maybe one day, this will grow into something
-    bigger than I could ever imagine.
+  I do not do code good. I am aiming to use this page as a means of publicly
+  sharing my thoughts, and
+  <i>maybe</i> projects. And who knows, maybe one day, this will grow into something
+  bigger than I could ever imagine.
 </p>
 
 <p>
-    Currently I'm employed as a software "developer", working on projects that
-    use Django/rest_framework stack.
+  Currently I'm employed as a software "developer", working on projects that use
+  Django/rest_framework stack.
 </p>
 
 <h2>More about me</h2>
 
 <p>
-    At present I work for a media company, they write news, also publish videos
-    on YouTube. This blog shall not contain anything about the place I work at,
-    or the future companies that I may get hired at.
+  At present I work for a media company, they write news, also publish videos on
+  YouTube. This blog shall not contain anything about the place I work at, or
+  the future companies that I may get hired at.
 </p>
 
 <p>
-    I try avoiding social media platforms (like Facebook, Instagram etc.) like a
-    plague. If anyone seems to act like me on those platforms, be certain that
-    it is not me, and maybe report them to the platform but I doubt they would
-    do anything anyway.
+  I try avoiding social media platforms (like Facebook, Instagram etc.) like a
+  plague. If anyone seems to act like me on those platforms, be certain that it
+  is not me, and maybe report them to the platform but I doubt they would do
+  anything anyway.
 </p>
 
 <h2>Even more!</h2>
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index 2a57168..dae5dff 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -1,34 +1,33 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
-	import Giscus from "$lib/components/Giscus.svelte";
+  import type { PageData } from "./$types";
+  import Giscus from "$lib/components/Giscus.svelte";
 
-	let { data }: { data: PageData } = $props();
+  let { data }: { data: PageData } = $props();
 
-	function formatDate(dateStr: string): string {
-		return new Date(dateStr).toLocaleDateString("en-US", {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-		});
-	}
+  function formatDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  }
 </script>
 
 <svelte:head>
-	<title>{data.metadata.title} | My Blog</title>
-	<meta name="description" content={data.metadata.description} />
+  <title>{data.metadata.title} | My Blog</title>
+  <meta name="description" content={data.metadata.description} />
 </svelte:head>
 
 <article>
-	<header>
-		<h1>{data.metadata.title}</h1>
-		<p>
-			<time datetime={data.metadata.date}
-				>{formatDate(data.metadata.date)}</time
-			>
-		</p>
-	</header>
+  <header>
+    <h1>{data.metadata.title}</h1>
+    <p>
+      <time datetime={data.metadata.date}>{formatDate(data.metadata.date)}</time
+      >
+    </p>
+  </header>
 
-	<data.content />
+  <data.content />
 </article>
 
 <Giscus />
diff --git a/src/routes/posts/[slug]/+page.ts b/src/routes/posts/[slug]/+page.ts
index 8d173ed..6535209 100644
--- a/src/routes/posts/[slug]/+page.ts
+++ b/src/routes/posts/[slug]/+page.ts
@@ -1,25 +1,25 @@
-import { getPost, getPostSlugs } from '$lib/utils/posts';
-import { error } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
+import { getPost, getPostSlugs } from "$lib/utils/posts";
+import { error } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
 
 export const prerender = true;
 
 // Generate all post routes at build time
 export function entries() {
-    return getPostSlugs().map((slug) => ({ slug }));
+  return getPostSlugs().map((slug) => ({ slug }));
 }
 
 export const load: PageLoad = async ({ params }) => {
-    const slug = params.slug;
-    const post = await getPost(slug);
+  const slug = params.slug;
+  const post = await getPost(slug);
 
-    if (!post) {
-        error(404, `Post not found: ${slug}`);
-    }
+  if (!post) {
+    error(404, `Post not found: ${slug}`);
+  }
 
-    return {
-        content: post.default,
-        metadata: post.metadata,
-        slug
-    };
+  return {
+    content: post.default,
+    metadata: post.metadata,
+    slug,
+  };
 };