Lint and TRPC

src/app/(root)/photos/page.tsx

@@ -1,33 +1,31 @@
 import Image from "next/image";
 import FilteredLightbox from "@/components/lightbox";
-import { type GetPhotos } from "@/app/api/photos/route";
-
-async function getImageData(): Promise<GetPhotos> {
-  const res = await fetch(`http://localhost:3000/api/photos`, { next: { revalidate: false, tags: ['photos'] } });
-  return res.json() as Promise<GetPhotos>;
-}
+import { trpc } from "@/trpc/server";
+import { TRPCProvider } from "@/trpc/client";
 
 export default async function Photos(): Promise<React.JSX.Element> {
-  const {data: imageData} = await getImageData();
-  
+  const { data: images } = await trpc.photos.list();
+
   return (
     <div className="mx-auto">
-      <FilteredLightbox imageData={imageData.images}>
-        {imageData.images.map((image) => (
-          <Image
-            key={image.src}
-            alt={image.src}
-            src={image.src}
-            className="object-contain h-60 w-80"
-            sizes="100vw"
-            loading="lazy"
-            width={image.width}
-            height={image.height}
-            blurDataURL={image.blur}
-            placeholder="blur"
-          />
-        ))}
-      </FilteredLightbox>
+      <TRPCProvider>
+        <FilteredLightbox imageData={images}>
+          {images.map((image) => (
+            <Image
+              key={image.src}
+              alt={image.src}
+              src={image.src}
+              className="object-contain h-60 w-80"
+              sizes="100vw"
+              loading="lazy"
+              width={image.width}
+              height={image.height}
+              blurDataURL={image.blur}
+              placeholder="blur"
+            />
+          ))}
+        </FilteredLightbox>
+      </TRPCProvider>
     </div>
   );
 }

src/app/(root)/posts/[...slug]/page.tsx

@@ -1,24 +1,32 @@
 import { glob } from "glob";
-import dynamic from "next/dynamic";
+import dynamic, { LoaderComponent } from "next/dynamic";
+import React from "react";
 
 export const dynamicParams = false;
 
-export async function generateStaticParams(): Promise<{slug: string[]}[]> {
-  const posts = await glob(`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`, {
-    nodir: true,
-  });
+export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
+  const posts = await glob(
+    `${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
+    {
+      nodir: true,
+    }
+  );
 
   const slugs = posts.map((post) => ({
-    slug: [post.split('/').at(-1)!.slice(0, -4)]
+    slug: [post.split("/").at(-1)!.slice(0, -4)],
   }));
 
   return slugs;
 }
 
-export default async function Post({params}: {params: Promise<{ slug: string[] }>}): Promise<React.JSX.Element> {
-  const mdxFile = await import(`../../../../markdown/posts/[...slug]/${(await params).slug.join('/')}.mdx`);
+export default async function Post({
+  params,
+}: {
+  params: Promise<{ slug: string[] }>;
+}): Promise<React.JSX.Element> {
+  const mdxFile = await import(
+    `../../../../markdown/posts/[...slug]/${(await params).slug.join("/")}.mdx`
+  ) as LoaderComponent<unknown>;
   const Post = dynamic(() => mdxFile);
-  return (
-    <Post/>
-  );
+  return <Post />;
 }

src/app/(root)/posts/page.tsx

@@ -4,27 +4,32 @@ import { unstable_cache } from "next/cache";
 import Link from "next/link";
 
 type postDetails = {
-  link: string,
+  link: string;
   metadata: {
-    title: string,
-    date: string,
-    coverImage: string,
-    blurb: string,
-    shortBlurb: string,
-    tags: string[]
-  }
-}
+    title: string;
+    date: string;
+    coverImage: string;
+    blurb: string;
+    shortBlurb: string;
+    tags: string[];
+  };
+};
 
 async function loadPostDetails(): Promise<postDetails[]> {
-  const posts = await glob(`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`, {
-    nodir: true,
-  });
+  const posts = await glob(
+    `${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
+    {
+      nodir: true,
+    }
+  );
 
   const loadPostData = posts.map(async (post) => {
-    const slug = [post.split('/').at(-1)!.slice(0, -4)];
-    const mdxFile = await import(`../../../../src/markdown/posts/[...slug]/${slug.join('/')}.mdx`);
+    const slug = [post.split("/").at(-1)!.slice(0, -4)];
+    const mdxFile = await import(
+      `../../../../src/markdown/posts/[...slug]/${slug.join("/")}.mdx`
+    ) as postDetails;
     return {
-      link: getCurrentUrl() + '/posts/' + slug.join('/'),
+      link: getCurrentUrl() + "/posts/" + slug.join("/"),
       metadata: mdxFile.metadata,
     };
   });
@@ -33,13 +38,9 @@ async function loadPostDetails(): Promise<postDetails[]> {
   return postData;
 }
 
-const getPosts = unstable_cache(
-  loadPostDetails,
-  ['posts'],
-  {
-    revalidate: false
-  }
-);
+const getPosts = unstable_cache(loadPostDetails, ["posts"], {
+  revalidate: false,
+});
 
 export default async function Posts(): Promise<React.JSX.Element> {
   const postDetails = await getPosts();
@@ -56,14 +57,14 @@ export default async function Posts(): Promise<React.JSX.Element> {
                 {post.metadata.tags.map((tag) => {
                   return (
                     <div key={`${post.link}_${tag}`}>
-                      <span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">{tag}</span>
+                      <span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">
+                        {tag}
+                      </span>
                     </div>
                   );
                 })}
               </div>
-              <p>
-                {post.metadata.blurb}
-              </p>
+              <p>{post.metadata.blurb}</p>
             </div>
           </div>
         );