fix: implement coderabbit suggestions

They actually good wtf

3 files changed, 50 insertions, 60 deletions

diff --git a/apps/web/package.json b/apps/web/package.json
index 46797068..965338b0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -55,6 +55,7 @@
     "recharts": "^2.14.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-parse": "^9.0.1",
+    "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "sonner": "^1.7.1",
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 584d8e24..0de1e0a8 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -1,11 +1,7 @@
 import { Header } from "@/components/header";
 import Prose from "@/components/ui/prose";
 import { Separator } from "@/components/ui/separator";
-import {
-  getPosts,
-  getSinglePost,
-  processHtmlContent,
-} from "@/lib/blog-query";
+import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog-query";
 import { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
@@ -118,17 +114,21 @@ async function Page({ params }: PageProps) {
               {data.post.title}
             </h1>
             <div className="flex items-center justify-center gap-2">
-              <Image
-                src={data.post.authors[0].image}
-                alt={data.post.authors[0].name}
-                width={36}
-                height={36}
-                loading="eager"
-                className="aspect-square shrink-0 size-8 rounded-full"
-              />
-              <p className="text-muted-foreground">
-                {data.post.authors[0].name}
-              </p>
+              {data.post.authors[0] && (
+                <>
+                  <Image
+                    src={data.post.authors[0].image}
+                    alt={data.post.authors[0].name}
+                    width={36}
+                    height={36}
+                    loading="eager"
+                    className="aspect-square shrink-0 size-8 rounded-full"
+                  />
+                  <p className="text-muted-foreground">
+                    {data.post.authors[0].name}
+                  </p>
+                </>
+              )}
             </div>
           </div>
           <Separator />
diff --git a/apps/web/src/lib/blog-query.ts b/apps/web/src/lib/blog-query.ts
index 71ee7341..55fe25ab 100644
--- a/apps/web/src/lib/blog-query.ts
+++ b/apps/web/src/lib/blog-query.ts
@@ -4,62 +4,51 @@ import rehypeParse from "rehype-parse";
 import rehypeStringify from "rehype-stringify";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeSanitize from "rehype-sanitize";
 
 const url = process.env.MARBLE_API_URL;
 const key = process.env.MARBLE_WORKSPACE_KEY;
 
-export async function getPosts() {
-  try {
-    const raw = await fetch(`${url}/${key}/posts`);
-    const data: MarblePostList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
+async function fetchFromMarble<T>(endpoint: string): Promise<T> {
+    if (!url || !key) {
+      throw new Error('Missing required environment variables');
+    }
+    
+    try {
+      const response = await fetch(`${url}/${key}/${endpoint}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ${endpoint}: ${response.status} ${response.statusText}`);
+      }
+      return await response.json() as T;
+    } catch (error) {
+      console.error(`Error fetching ${endpoint}:`, error);
+      throw error;
+    }
   }
-}
-
-export async function getTags() {
-  try {
-    const raw = await fetch(`${url}/${key}/tags`);
-    const data: MarbleTagList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
+  
+  export async function getPosts() {
+    return fetchFromMarble<MarblePostList>('posts');
   }
-}
-
-export async function getSinglePost(slug: string) {
-  try {
-    const raw = await fetch(`${url}/${key}/posts/${slug}`);
-    const data: MarblePost = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
+  
+  export async function getTags() {
+    return fetchFromMarble<MarbleTagList>('tags');
   }
-}
-
-export async function getCategories() {
-  try {
-    const raw = await fetch(`${url}/${key}/categories`);
-    const data: MarbleCategoryList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
+  
+  export async function getSinglePost(slug: string) {
+    return fetchFromMarble<MarblePost>(`posts/${slug}`);
   }
-}
-
-export async function getAuthors() {
-  try {
-    const raw = await fetch(`${url}/${key}/authors`);
-    const data: MarbleAuthorList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
+  
+  export async function getCategories() {
+    return fetchFromMarble<MarbleCategoryList>('categories');
+  }
+  
+  export async function getAuthors() {
+    return fetchFromMarble<MarbleAuthorList>('authors');
   }
-}
 
 export async function processHtmlContent(html: string): Promise<string> {
 	const processor = unified()
+        .use(rehypeSanitize)
 		.use(rehypeParse, { fragment: true })
 		.use(rehypeSlug)
 		.use(rehypeAutolinkHeadings, { behavior: "append" })