From 8b5b68f23259c042d4093b5be62bb53a4b9c1527 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 13 Mar 2025 14:28:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20layout=20to?=
 =?UTF-8?q?=20remove=20server-side=20loading=20+=20use=20app/stores=20to?=
 =?UTF-8?q?=20get=20current=20pathname?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.server.ts |  7 ------
 src/routes/+layout.svelte    | 41 +++++++++++++++++++-----------------
 2 files changed, 22 insertions(+), 26 deletions(-)
 delete mode 100644 src/routes/+layout.server.ts

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
deleted file mode 100644
index fc1cf6d..0000000
--- a/src/routes/+layout.server.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { LayoutServerLoad } from './$types';
-import { fetchGitHubStars } from '@/utils/getStarsRepository';
-
-export const load: LayoutServerLoad = async ({ url: { pathname } }) => {
-  const stars = await fetchGitHubStars();
-  return { pathname, stars };
-};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8b38947..d1ea79a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
-  import type { LayoutServerData } from './$types';
-  export let data: LayoutServerData;
+  import { page } from '$app/stores';
 
   // Global styles:
-  import '../app.css';
+  import '@/styles/app.css';
   import { cn } from '@/utils/cn';
   import { ModeWatcher, mode } from 'mode-watcher';
-  import { sidebarCategoryCountStyles } from '@/ui/styles';
-  import { sidebarItemStyles } from '@/ui/styles';
 
-  // Get categories:
+  // Categories:
+  import type { tCategory } from '@/types/categories';
   import { svgs } from '@/data/svgs';
-  const categories = getCategories();
-
-  // Get category counts:
-  let categoryCounts: Record<string, number> = {};
-  categories.forEach((category) => {
-    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
-  });
+  import { getCategories } from '@/data';
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -28,11 +20,22 @@
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
-  import { getCategories } from '@/data';
+  import { sidebarCategoryCountStyles } from '@/ui/styles';
+  import { sidebarItemStyles } from '@/ui/styles';
+
+  // Get category counts:
+  const categories: tCategory[] = getCategories();
+  let categoryCounts: Record<string, number> = {};
+  categories.forEach((category) => {
+    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
+  });
+
+  // Get main pathname:
+  $: pathname = $page.url.pathname;
 </script>
 
 <ModeWatcher />
-<Navbar currentPath={data.pathname} />
+<Navbar currentPath={pathname} />
 <main>
   <aside
     class={cn(
@@ -51,7 +54,7 @@
           href="/"
           class={cn(
             sidebarItemStyles,
-            data.pathname === '/'
+            pathname === '/'
               ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
               : ''
           )}
@@ -64,7 +67,7 @@
             data-sveltekit-preload-data
             class={cn(
               sidebarItemStyles,
-              data.pathname === `/directory/${category.toLowerCase()}`
+              pathname === `/directory/${category.toLowerCase()}`
                 ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
                 : ''
             )}
@@ -73,7 +76,7 @@
             <span
               class={cn(
                 sidebarCategoryCountStyles,
-                data.pathname === `/directory/${category.toLowerCase()}`
+                pathname === `/directory/${category.toLowerCase()}`
                   ? 'border-neutral-300 dark:border-neutral-700'
                   : '',
                 'hidden font-mono text-xs md:inline'
@@ -86,7 +89,7 @@
   </aside>
   <div class="ml-0 pb-6 md:ml-56">
     <Warning />
-    <Transition pathname={data.pathname}>
+    <Transition {pathname}>
       <slot />
     </Transition>
     <Toaster