Update production

src/app/(main)/_components/parts/Opinions/PersonData.tsx

@@ -19,7 +19,6 @@ export default function PersonData({
         width={44}
         height={44}
         className="h-full max-h-[44px] w-full max-w-[44px] rounded-full"
-        unoptimized
       />
       <div className="flex flex-col">
         <span className="text-[18px] sm:text-xl font-bold text-primary-400">

src/app/(main)/berita/[slug]/_components/MdViewer.tsx

@@ -3,9 +3,11 @@ import rehypeHighlight from "rehype-highlight";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
-import { ClassAttributes, HTMLAttributes } from "react";
+import { ClassAttributes, HTMLAttributes, ImgHTMLAttributes } from "react";
 
 import "../github-dark.min.css";
+import Image from "@/app/_components/global/Image";
+import cn from "@/lib/clsx";
 
 interface MdViewerProps {
   markdown: string;
@@ -61,6 +63,33 @@ const CustomCode = ({
   />
 );
 
+const CustomImage = ({
+  node,
+  height,
+  width,
+  alt,
+  src,
+  ...props
+}: ClassAttributes<HTMLElement> &
+  ImgHTMLAttributes<HTMLImageElement> &
+  ExtraProps) => {
+  const parsedHeight =
+    typeof height === "number" ? height : height ? parseInt(height) : 600;
+  const parsedWidth =
+    typeof width === "number" ? width : width ? parseInt(width) : 600;
+
+  return (
+    <Image
+      alt={alt || "Illustrasi Artikel"}
+      className={cn(!height || !width ? "w-full" : "")}
+      src={src!}
+      height={parsedHeight}
+      width={parsedWidth}
+      {...props}
+    />
+  );
+};
+
 export function MdViewer({ markdown }: Readonly<MdViewerProps>) {
   return (
     <Markdown
@@ -69,6 +98,7 @@ export function MdViewer({ markdown }: Readonly<MdViewerProps>) {
         ol: CustomOl,
         pre: CustomPre,
         code: CustomCode,
+        img: CustomImage,
       }}
       className="prose"
       rehypePlugins={[rehypeRaw, rehypeHighlight]}

src/app/(main)/berita/[slug]/_components/RelatedNewsFigure.tsx

@@ -14,7 +14,6 @@ export default function RelatedNewsFigure({
         <Image
           src={post.thumbnail}
           alt="wao"
-          unoptimized
           height={200}
           width={372}
           className="h-full w-full object-cover rounded-[20px]"
@@ -45,7 +44,6 @@ export default function RelatedNewsFigure({
             <Image
               src={post.user.user_pic}
               alt={post.user.name + "'s Pfp"}
-              unoptimized
               height={28}
               width={28}
               className="h-7 w-7 object-cover rounded-full"

src/app/(main)/berita/[slug]/page.tsx

@@ -99,7 +99,6 @@ export default async function Post({
                   <Image
                     src={post?.user.user_pic}
                     alt={post?.user.name + "'s Pfp"}
-                    unoptimized
                     height={28}
                     width={28}
                     className="h-7 w-7 object-cover rounded-full"
@@ -121,7 +120,6 @@ export default async function Post({
                 width={768}
                 height={450}
                 className="w-full h-full rounded-[20px]"
-                unoptimized
               />
             </div>
             <div className="w-full">

src/app/(main)/berita/_components/parts/WideNewsFigure.tsx

@@ -16,7 +16,6 @@ export function WideNewsFigure({
           width={140}
           height={140}
           className="h-[140px] w-[140px] rounded-2xl object-cover"
-          unoptimized
         />
       </div>
       <div className="w-full flex flex-col gap-0 md:gap-[52px] text-wrap">
@@ -37,7 +36,6 @@ export function WideNewsFigure({
             <Image
               src={post.user.user_pic}
               alt={post.user.name + "'s Pfp"}
-              unoptimized
               height={28}
               width={28}
               className="h-7 w-7 object-cover rounded-full"

src/app/(main)/organisasi/[period]/[slug]/_components/parts/Gallery.tsx

@@ -31,7 +31,6 @@ export default function OrgGallery({
               alt="Image"
               width={587}
               height={407}
-              unoptimized
               className="w-full h-full"
             />
           </div>

src/app/(main)/organisasi/[period]/_components/OrganizationSection.tsx

@@ -39,7 +39,6 @@ export default function OrganizationSection({
                   src={organisasi.logo}
                   width={62}
                   height={62}
-                  unoptimized
                   className="w-[62px] h-[62px] object-cover"
                 />
                 <div className="flex flex-col gap-[6px] w-[80%]">

src/app/_components/global/NewsFigure.tsx

@@ -25,7 +25,6 @@ export function NewsFigure({ post }: Readonly<{ post: PostWithTagsAndUser }>) {
         <Image
           src={post.thumbnail}
           alt={post.slug}
-          unoptimized
           height={200}
           width={372}
           className="h-full w-full object-cover rounded-[20px]"
@@ -56,7 +55,6 @@ export function NewsFigure({ post }: Readonly<{ post: PostWithTagsAndUser }>) {
             <Image
               src={post.user.user_pic}
               alt={post.user.name + "'s Pfp"}
-              unoptimized
               height={28}
               width={28}
               className="h-7 w-7 object-cover rounded-full"