feat: add new fullscreen image preview on blog post pages

Author: rafa-thayto

next.config.js

@@ -19,6 +19,16 @@ const { withPlaiceholder } = require('@plaiceholder/next')
 const nextConfig = {
   swcMinify: true,
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'dev-to-uploads.s3.amazonaws.com',
+        port: '',
+        pathname: '/uploads/**',
+      },
+    ],
+  },
 
   async redirects() {
     return [

src/components/MDXImage.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react'
+import { XMarkIcon, EyeIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
+import { posthog } from 'posthog-js'
+
+interface MDXImageProps {
+  src: string
+  alt: string
+  width?: number
+  height?: number
+  className?: string
+  title?: string
+}
+
+export const MDXImage = ({
+  src,
+  alt,
+  width,
+  height,
+  className = '',
+  title,
+}: MDXImageProps) => {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  const isExternalImage =
+    src.startsWith('http://') || src.startsWith('https://')
+  const isLocalImage = src.startsWith('/static/images/')
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsFullscreen(false)
+      }
+    }
+
+    if (isFullscreen) {
+      document.addEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'unset'
+    }
+  }, [isFullscreen])
+
+  const openFullscreen = () => {
+    setIsFullscreen(true)
+    posthog.capture('mdx-image-fullscreen-open', {
+      src,
+      alt,
+      isExternal: isExternalImage,
+      isLocal: isLocalImage,
+    })
+  }
+
+  const closeFullscreen = () => {
+    setIsFullscreen(false)
+    posthog.capture('mdx-image-fullscreen-close', {
+      src,
+      alt,
+      isExternal: isExternalImage,
+      isLocal: isLocalImage,
+    })
+  }
+
+  return (
+    <>
+      <div
+        className={`relative cursor-pointer group transition-transform duration-300 hover:scale-[1.02] rounded-lg overflow-hidden ${className}`}
+        onClick={openFullscreen}
+      >
+        {isExternalImage ? (
+          <img
+            src={src}
+            alt={alt}
+            width={width || 800}
+            height={height || 600}
+            className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
+            loading="lazy"
+          />
+        ) : (
+          <Image
+            src={src}
+            alt={alt}
+            width={width || 800}
+            height={height || 600}
+            className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
+          />
+        )}
+
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center">
+          <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-full p-3">
+            <EyeIcon className="h-6 w-6 text-gray-900 dark:text-white" />
+          </div>
+        </div>
+      </div>
+
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-50 bg-black/95 backdrop-blur-sm flex items-center justify-center p-4"
+          onClick={closeFullscreen}
+        >
+          <div className="relative max-w-7xl max-h-full w-full h-full flex items-center justify-center">
+            <button
+              onClick={closeFullscreen}
+              className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors duration-200 backdrop-blur-sm"
+              aria-label="Fechar imagem em tela cheia"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+
+            <div
+              className="relative w-full h-full max-w-none max-h-none"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {isExternalImage ? (
+                <img
+                  src={src}
+                  alt={alt}
+                  className="w-full h-full object-contain"
+                />
+              ) : (
+                <Image
+                  src={src}
+                  alt={alt}
+                  fill
+                  className="object-contain"
+                  sizes="100vw"
+                  quality={100}
+                  priority
+                />
+              )}
+            </div>
+
+            <div className="absolute bottom-4 left-4 right-4 text-center">
+              <div className="inline-block bg-black/50 backdrop-blur-sm rounded-lg px-4 py-2 text-white">
+                <p className="text-sm font-medium">{title || alt}</p>
+                <p className="text-xs text-gray-300 mt-1">
+                  Pressione ESC ou clique fora da imagem para fechar
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

src/components/index.ts

@@ -7,3 +7,4 @@ export * from './Header'
 export * from './Icons'
 export * from './IconsGroup'
 export * from './Layout'
+export * from './MDXImage'

src/pages/blog/[slug].tsx

@@ -1,5 +1,5 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
-import { Layout, CodeBlock, Pre } from '@/components'
+import { Layout, CodeBlock, Pre, MDXImage } from '@/components'
 import { POSTS_PATH } from '@/constants'
 import fs from 'fs'
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
@@ -16,6 +16,8 @@ import { SITE_URL } from '@/utils/constants'
 const components = {
   pre: (props: any) => <Pre {...props} />,
   code: (props: any) => <CodeBlock {...props} />,
+  img: (props: any) => <MDXImage {...props} />,
+  Image: (props: any) => <MDXImage {...props} />,
 }
 
 const PostPage = ({