From 19d027a7da15ba5230d63b57c97d8d35180bfc14 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 30 Mar 2025 13:48:08 +0700 Subject: [PATCH 1/2] refactor: image handling in components --- .../_components/parts/Opinions/PersonData.tsx | 1 - .../berita/[slug]/_components/MdViewer.tsx | 34 ++++++++++++++++++- .../[slug]/_components/RelatedNewsFigure.tsx | 2 -- src/app/(main)/berita/[slug]/page.tsx | 2 -- .../_components/parts/WideNewsFigure.tsx | 2 -- .../[slug]/_components/parts/Gallery.tsx | 1 - .../_components/OrganizationSection.tsx | 1 - src/app/_components/global/NewsFigure.tsx | 2 -- 8 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/app/(main)/_components/parts/Opinions/PersonData.tsx b/src/app/(main)/_components/parts/Opinions/PersonData.tsx index 1fcfe320..ccf54a8c 100644 --- a/src/app/(main)/_components/parts/Opinions/PersonData.tsx +++ b/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 />
diff --git a/src/app/(main)/berita/[slug]/_components/MdViewer.tsx b/src/app/(main)/berita/[slug]/_components/MdViewer.tsx index eb601c26..0cdfe34f 100644 --- a/src/app/(main)/berita/[slug]/_components/MdViewer.tsx +++ b/src/app/(main)/berita/[slug]/_components/MdViewer.tsx @@ -3,9 +3,10 @@ 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"; interface MdViewerProps { markdown: string; @@ -61,6 +62,36 @@ const CustomCode = ({ /> ); +const CustomImage = ({ + node, + ...props +}: ClassAttributes & + ImgHTMLAttributes & + ExtraProps) => { + const height = + typeof props.height === "number" + ? props.height + : props.height !== undefined + ? parseInt(props.height) + : undefined; + const width = + typeof props.width === "number" + ? props.width + : props.width !== undefined + ? parseInt(props.width) + : undefined; + return ( + Illustrasi Artikel + ); +}; + export function MdViewer({ markdown }: Readonly) { return ( ) { ol: CustomOl, pre: CustomPre, code: CustomCode, + img: CustomImage, }} className="prose" rehypePlugins={[rehypeRaw, rehypeHighlight]} diff --git a/src/app/(main)/berita/[slug]/_components/RelatedNewsFigure.tsx b/src/app/(main)/berita/[slug]/_components/RelatedNewsFigure.tsx index fc6194d6..da00301c 100644 --- a/src/app/(main)/berita/[slug]/_components/RelatedNewsFigure.tsx +++ b/src/app/(main)/berita/[slug]/_components/RelatedNewsFigure.tsx @@ -14,7 +14,6 @@ export default function RelatedNewsFigure({ wao
diff --git a/src/app/(main)/berita/_components/parts/WideNewsFigure.tsx b/src/app/(main)/berita/_components/parts/WideNewsFigure.tsx index ff9aaa30..08900e61 100644 --- a/src/app/(main)/berita/_components/parts/WideNewsFigure.tsx +++ b/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 />
@@ -37,7 +36,6 @@ export function WideNewsFigure({ {post.user.name
diff --git a/src/app/(main)/organisasi/[period]/_components/OrganizationSection.tsx b/src/app/(main)/organisasi/[period]/_components/OrganizationSection.tsx index 87747b29..1d79cab4 100644 --- a/src/app/(main)/organisasi/[period]/_components/OrganizationSection.tsx +++ b/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" />
diff --git a/src/app/_components/global/NewsFigure.tsx b/src/app/_components/global/NewsFigure.tsx index 17586d0a..533dda94 100644 --- a/src/app/_components/global/NewsFigure.tsx +++ b/src/app/_components/global/NewsFigure.tsx @@ -25,7 +25,6 @@ export function NewsFigure({ post }: Readonly<{ post: PostWithTagsAndUser }>) { {post.slug}) { {post.user.name Date: Sun, 30 Mar 2025 13:55:26 +0700 Subject: [PATCH 2/2] refactor: CustomImage component --- .../berita/[slug]/_components/MdViewer.tsx | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/app/(main)/berita/[slug]/_components/MdViewer.tsx b/src/app/(main)/berita/[slug]/_components/MdViewer.tsx index 0cdfe34f..6940e457 100644 --- a/src/app/(main)/berita/[slug]/_components/MdViewer.tsx +++ b/src/app/(main)/berita/[slug]/_components/MdViewer.tsx @@ -7,6 +7,7 @@ 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; @@ -64,30 +65,27 @@ const CustomCode = ({ const CustomImage = ({ node, + height, + width, + alt, + src, ...props -}: ClassAttributes & +}: ClassAttributes & ImgHTMLAttributes & ExtraProps) => { - const height = - typeof props.height === "number" - ? props.height - : props.height !== undefined - ? parseInt(props.height) - : undefined; - const width = - typeof props.width === "number" - ? props.width - : props.width !== undefined - ? parseInt(props.width) - : undefined; + const parsedHeight = + typeof height === "number" ? height : height ? parseInt(height) : 600; + const parsedWidth = + typeof width === "number" ? width : width ? parseInt(width) : 600; + return ( Illustrasi Artikel ); };