fix: 🩹 Fixed API integration with blog posts

src/lib/components/molecules/BlogPost.svelte

@@ -2,8 +2,8 @@
   import Tag from "$components/atoms/Tag.svelte";
   import { searchTerm } from "$lib/utils/stores";
 
-  import { fade } from "svelte/transition";
   import { quintOut } from "svelte/easing";
+  import { fade } from "svelte/transition";
 
   export let title: string;
   export let tags: string[];

src/lib/components/organisms/ActionButtons.svelte

@@ -16,8 +16,7 @@
 
   $: track = createQuery({
     queryFn: () => trpc($page).lastfm.currentTrack.query(),
-    queryKey: ["currentTrack"],
-    refetchInterval: 300000 // 5 Minutes
+    queryKey: ["currentTrack"]
   });
 </script>
 

src/lib/components/organisms/Navbar.svelte

@@ -5,13 +5,15 @@
   import ConfettiToggle from "$components/molecules/ConfettiToggle.svelte";
 
   import Navlinks from "$json/Navlinks.json";
+  import { trpc } from "$lib/trpc/client";
 
   import { fade } from "svelte/transition";
   import { quintOut } from "svelte/easing";
   import { page } from "$app/stores";
 
-  import Icon from "@iconify/svelte";
+  import { createQuery } from "@tanstack/svelte-query";
   import OutClick from "svelte-outclick";
+  import Icon from "@iconify/svelte";
 
   // @ts-expect-error Resolve declaration issue
   import { Confetti } from "svelte-confetti";
@@ -22,6 +24,14 @@
 
   const toggleMobileMenu = () => (mobileMenu = !mobileMenu);
   const hideMobileMenu = () => (mobileMenu = false);
+
+  $: postQuery = createQuery({
+    queryFn: () => trpc($page).posts.fetchPosts.query(),
+    queryKey: ["posts"]
+  });
+
+  $: posts = $postQuery.data ?? [];
+  $: currentPost = posts.find((obj) => obj.slug === $page.url.pathname.substring(1));
 </script>
 
 <Animate>
@@ -50,7 +60,8 @@
           {#each Navlinks as Navlink}
             {@const highlightRoute = clsx({
               "!bg-neutral font-bold text-primary active:text-primary dark:text-secondary hover:before:bg-primary/20 hover:before:dark:bg-secondary/20":
-                $page.url.pathname.includes(Navlink.route)
+                $page.url.pathname.includes(Navlink.route) ||
+                (currentPost && Navlink.name === "Blog")
             })}
 
             <li class="group mx-2">

src/lib/trpc/client.ts

@@ -1,9 +1,9 @@
-import type { Router } from "$lib/trpc/router";
 import { createTRPCClient, type TRPCClientInit } from "trpc-sveltekit";
+import type { Router } from "$lib/trpc/router";
 
 let browserClient: ReturnType<typeof createTRPCClient<Router>>;
 
-export function trpc(init?: TRPCClientInit) {
+export const trpc = (init?: TRPCClientInit) => {
   const isBrowser = typeof window !== "undefined";
   if (isBrowser && browserClient) {
     return browserClient;
@@ -15,4 +15,4 @@ export function trpc(init?: TRPCClientInit) {
   }
 
   return client;
-}
+};

src/lib/trpc/context.ts

@@ -1,9 +1,9 @@
-import type { RequestEvent } from "@sveltejs/kit";
 import type { inferAsyncReturnType } from "@trpc/server";
+import type { RequestEvent } from "@sveltejs/kit";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export async function createContext(event: RequestEvent) {
+export const createContext = async (event: RequestEvent) => {
   return {};
-}
+};
 
 export type Context = inferAsyncReturnType<typeof createContext>;

src/lib/trpc/routers/lastfm.ts

@@ -1,4 +1,4 @@
-import { recentTracks } from "$lib/utils/zod/lastfm";
+import { recentTracks } from "$utils/zod/lastfm";
 import { env } from "$env/dynamic/private";
 import { t } from "../trpc";
 import { z } from "zod";

src/lib/trpc/routers/posts.ts

@@ -3,7 +3,7 @@ import { t } from "../trpc";
 import { z } from "zod";
 
 export const fetchPosts = async (slug: string | null) => {
-  const response = await fetch("http://localhost:5173/api/posts")
+  const response = await fetch(`${import.meta.env.VITE_BASE_URL}/api/posts`)
     .then((r) => r.json())
     .then(posts.parse);
 

src/lib/utils/index.ts

@@ -1,8 +1,6 @@
 import toast from "svelte-french-toast";
 import { z } from "zod";
 
-import type { Post } from "./types";
-
 export const contactSchema = z.object({
   name: z
     .string({ required_error: "Name is required" })

src/routes/[slug]/+page.ts

@@ -1,25 +1,28 @@
+import { error, type LoadEvent } from "@sveltejs/kit";
 import { trpc } from "$lib/trpc/client";
-import { error } from "@sveltejs/kit";
 
-import type { PageLoad } from "./$types";
 import type { Post } from "$lib/utils/types.js";
+import type { PageLoad } from "./$types";
 
-export const load: PageLoad = async (event) => {
-  try {
-    const params = event.params;
-    const parent = event.parent;
+export const load: PageLoad = async (event: LoadEvent) => {
+  const slug = event.params.slug ?? "";
+  const parent = event.parent;
 
-    const { queryClient } = await parent();
-    const postQuery = await queryClient.fetchQuery({
-      queryFn: () => trpc(event).posts.fetchPosts.query({ slug: params.slug.toLowerCase() }),
-      queryKey: ["post"]
-    });
+  const { queryClient } = await parent();
+  const postQuery = await queryClient.fetchQuery({
+    queryFn: () =>
+      trpc(event).posts.fetchPosts.query({
+        slug: slug
+      }),
+    queryKey: ["post"]
+  });
 
-    const post: Post = postQuery[0];
-    return {
-      post
-    };
-  } catch (e) {
+  const post: Post = postQuery[0];
+  if (!post) {
     throw error(404);
   }
+
+  return {
+    post
+  };
 };

src/routes/api/posts/+server.ts

@@ -1,7 +1,7 @@
 import readingTime from "reading-time";
 import striptags from "striptags";
 
-import { json } from "@sveltejs/kit";
+import { json, type RequestHandler } from "@sveltejs/kit";
 import type { Post, PostModules } from "$lib/utils/types";
 
 const getPosts = () => {
@@ -31,7 +31,7 @@ const getPosts = () => {
   return posts;
 };
 
-export const GET = async () => {
+export const GET: RequestHandler = async () => {
   const posts = getPosts();
   return json(posts);
 };

src/routes/blog/+page.svelte

@@ -24,7 +24,7 @@
     queryKey: ["posts"]
   });
 
-  $: posts = $postQuery.data || [];
+  $: posts = $postQuery.data ?? [];
   let pageSize = 4;
 
   const handleClick = async (post: Post, event: MouseEvent) => {

src/routes/contact/form/+page.server.ts

@@ -4,15 +4,17 @@ import { setFlash } from "sveltekit-flash-message/server";
 import { fail } from "@sveltejs/kit";
 
 import { sendEmail, contactSchema } from "$lib/utils";
+
 import type { Actions } from "@sveltejs/kit";
+import type { PageServerLoad, RequestEvent } from "./$types";
 
 const limiter = new RateLimiter({
   rates: {
     IP: [3, "d"] // IP limiter
   }
 });
 
-export const load = async (event) => {
+export const load: PageServerLoad = async (event: RequestEvent) => {
   const form = await superValidate(event, contactSchema);
   return { form };
 };