From d6be3ad94184e9d500997a55570cac18defc1cd8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 5 Feb 2025 00:31:08 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Upgrade=20main=20+layou?=
 =?UTF-8?q?t,=20+page.ts=20&=20+layout=20from=20/directory=20to=20Svelte?=
 =?UTF-8?q?=205=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte                  | 40 ++++++++++++++--------
 src/routes/api/+page.svelte                |  7 ++--
 src/routes/api/+page.ts                    |  2 +-
 src/routes/directory/[slug]/+layout.svelte | 14 ++++++--
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8b38947..8a13799 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,23 +1,18 @@
 <script lang="ts">
   import type { LayoutServerData } from './$types';
-  export let data: LayoutServerData;
+  import type { Snippet } from 'svelte';
+  import { page } from '$app/state';
 
   // Global styles:
-  import '../app.css';
+  import '@/styles/globals.css';
   import { cn } from '@/utils/cn';
   import { ModeWatcher, mode } from 'mode-watcher';
+
   import { sidebarCategoryCountStyles } from '@/ui/styles';
   import { sidebarItemStyles } from '@/ui/styles';
 
   // Get 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;
-  });
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -29,10 +24,25 @@
   // Layout:
   import Navbar from '@/components/navbar.svelte';
   import { getCategories } from '@/data';
+
+  interface Props {
+    data: LayoutServerData;
+    children?: Snippet;
+  }
+
+  const categories = getCategories();
+
+  // Get category counts:
+  let categoryCounts: Record<string, number> = $state({});
+  categories.forEach((category) => {
+    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
+  });
+
+  let { children }: Props = $props();
 </script>
 
 <ModeWatcher />
-<Navbar currentPath={data.pathname} />
+<Navbar currentPath={page.url.pathname} />
 <main>
   <aside
     class={cn(
@@ -51,7 +61,7 @@
           href="/"
           class={cn(
             sidebarItemStyles,
-            data.pathname === '/'
+            page.url.pathname === '/'
               ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
               : ''
           )}
@@ -64,7 +74,7 @@
             data-sveltekit-preload-data
             class={cn(
               sidebarItemStyles,
-              data.pathname === `/directory/${category.toLowerCase()}`
+              page.url.pathname === `/directory/${category.toLowerCase()}`
                 ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
                 : ''
             )}
@@ -73,7 +83,7 @@
             <span
               class={cn(
                 sidebarCategoryCountStyles,
-                data.pathname === `/directory/${category.toLowerCase()}`
+                page.url.pathname === `/directory/${category.toLowerCase()}`
                   ? 'border-neutral-300 dark:border-neutral-700'
                   : '',
                 'hidden font-mono text-xs md:inline'
@@ -86,8 +96,8 @@
   </aside>
   <div class="ml-0 pb-6 md:ml-56">
     <Warning />
-    <Transition pathname={data.pathname}>
-      <slot />
+    <Transition pathname={page.url.pathname}>
+      {@render children?.()}
     </Transition>
     <Toaster
       position="bottom-right"
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 323430c..90823f6 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import { cn } from '@/utils/cn';
-  export let data;
+  /** @type {{data: any}} */
+  let { data } = $props();
 </script>
 
 <svelte:head>
@@ -23,7 +24,7 @@
       <span class="relative inline-block overflow-hidden rounded-full p-[1px] shadow-sm">
         <span
           class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
-        />
+        ></span>
         <div
           class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full border border-neutral-100 bg-neutral-100 px-3 py-1 font-mono text-xs font-medium backdrop-blur-3xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
         >
@@ -45,5 +46,5 @@
     'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
   )}
 >
-  <svelte:component this={data.content} />
+  <data.content />
 </article>
diff --git a/src/routes/api/+page.ts b/src/routes/api/+page.ts
index 88129b9..e1c5cf4 100644
--- a/src/routes/api/+page.ts
+++ b/src/routes/api/+page.ts
@@ -9,6 +9,6 @@ export async function load() {
       meta: post.metadata
     };
   } catch (e) {
-    throw error(404, `Could not find this page`);
+    throw error(404, `⚠️ +page.ts: Could not find this page -  ${e}`);
   }
 }
diff --git a/src/routes/directory/[slug]/+layout.svelte b/src/routes/directory/[slug]/+layout.svelte
index a34aa36..09f9039 100644
--- a/src/routes/directory/[slug]/+layout.svelte
+++ b/src/routes/directory/[slug]/+layout.svelte
@@ -1,16 +1,24 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Container from '@/components/container.svelte';
   import { ArrowLeft } from 'lucide-svelte';
+
+  interface LayoutProps {
+    children?: Snippet;
+  }
+
+  let { children }: LayoutProps = $props();
 </script>
 
 <Container>
   <a href="/">
     <div
-      class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white group md:mt-2"
+      class="group flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white md:mt-2"
     >
       <ArrowLeft size={20} class="group-hover:-translate-x-[2px] group-hover:duration-200" />
       <span>View all</span>
     </div>
   </a>
 </Container>
-<slot />
+{@render children?.()}