diff --git a/app/writings/[slug]/page.tsx b/app/writings/[slug]/page.tsx index 6acdca6..0db777c 100644 --- a/app/writings/[slug]/page.tsx +++ b/app/writings/[slug]/page.tsx @@ -9,6 +9,7 @@ import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' import remarkMath from 'remark-math' import rehypeMathjax from 'rehype-mathjax' +import rehypeRaw from 'rehype-raw' import { CodeBlock } from '@/components/ui/code-block' import { CopyMarkdownButton } from '@/components/common/copy-markdown-button' import { BlogPostTitle } from '@/components/layout/blog-post-title' @@ -17,6 +18,10 @@ interface PageProps { slug: string } +function isGif(src?: string) { + return src?.split('?')[0]?.toLowerCase().endsWith('.gif') ?? false +} + export async function generateStaticParams() { return getBlogSlugs().map((slug) => ({ slug })) } @@ -64,7 +69,7 @@ export default async function BlogPostPage({ params }: { params: Promise ( @@ -241,18 +246,41 @@ export default async function BlogPostPage({ params }: { params: Promise ( - { + const src = String(props.src || '') + const alt = props.alt || "Blog image" + + if (isGif(src)) { + return ( + // eslint-disable-next-line @next/next/no-img-element + {alt} + ) + } + + return ( + {alt} + ) + }, + video: ({ className, node, ...props }: any) => ( +