fix: implement coderabbit suggestions

They actually good wtf

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",

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 {
+import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog-query";
-  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
+              {data.post.authors[0] && (
-                src={data.post.authors[0].image}
+                <>
-                alt={data.post.authors[0].name}
+                  <Image
-                width={36}
+                    src={data.post.authors[0].image}
-                height={36}
+                    alt={data.post.authors[0].name}
-                loading="eager"
+                    width={36}
-                className="aspect-square shrink-0 size-8 rounded-full"
+                    height={36}
-              />
+                    loading="eager"
-              <p className="text-muted-foreground">
+                    className="aspect-square shrink-0 size-8 rounded-full"
-                {data.post.authors[0].name}
+                  />
-              </p>
+                  <p className="text-muted-foreground">
+                    {data.post.authors[0].name}
+                  </p>
+                </>
+              )}
             </div>
           </div>
           <Separator />

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() {
+async function fetchFromMarble<T>(endpoint: string): Promise<T> {
-  try {
+    if (!url || !key) {
-    const raw = await fetch(`${url}/${key}/posts`);
+      throw new Error('Missing required environment variables');
-    const data: MarblePostList = await raw.json();
+    }
-    return data;
+    
-  } catch (error) {
+    try {
-    console.log(error);
+      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 getPosts() {
-export async function getTags() {
+    return fetchFromMarble<MarblePostList>('posts');
-  try {
-    const raw = await fetch(`${url}/${key}/tags`);
-    const data: MarbleTagList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
   }
-}
+  
-
+  export async function getTags() {
-export async function getSinglePost(slug: string) {
+    return fetchFromMarble<MarbleTagList>('tags');
-  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 getSinglePost(slug: string) {
-export async function getCategories() {
+    return fetchFromMarble<MarblePost>(`posts/${slug}`);
-  try {
-    const raw = await fetch(`${url}/${key}/categories`);
-    const data: MarbleCategoryList = await raw.json();
-    return data;
-  } catch (error) {
-    console.log(error);
   }
-}
+  
-
+  export async function getCategories() {
-export async function getAuthors() {
+    return fetchFromMarble<MarbleCategoryList>('categories');
-  try {
+  }
-    const raw = await fetch(`${url}/${key}/authors`);
+  
-    const data: MarbleAuthorList = await raw.json();
+  export async function getAuthors() {
-    return data;
+    return fetchFromMarble<MarbleAuthorList>('authors');
-  } catch (error) {
-    console.log(error);
   }
-}
 
 export async function processHtmlContent(html: string): Promise<string> {
 	const processor = unified()
+        .use(rehypeSanitize)
 		.use(rehypeParse, { fragment: true })
 		.use(rehypeSlug)
 		.use(rehypeAutolinkHeadings, { behavior: "append" })

bun.lock

@@ -57,6 +57,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",
@@ -688,6 +689,8 @@
 
     "hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
 
+    "hast-util-sanitize": ["hast-util-sanitize@5.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "unist-util-position": "^5.0.0" } }, "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg=="],
+
     "hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
 
     "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
@@ -980,6 +983,8 @@
 
     "rehype-parse": ["rehype-parse@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-from-html": "^2.0.0", "unified": "^11.0.0" } }, "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag=="],
 
+    "rehype-sanitize": ["rehype-sanitize@6.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-sanitize": "^5.0.0" } }, "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg=="],
+
     "rehype-slug": ["rehype-slug@6.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "github-slugger": "^2.0.0", "hast-util-heading-rank": "^3.0.0", "hast-util-to-string": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A=="],
 
     "rehype-stringify": ["rehype-stringify@10.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-to-html": "^9.0.0", "unified": "^11.0.0" } }, "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA=="],