Update images

components/gists/GistsCode.tsx

@@ -6,6 +6,8 @@ import rehypePrism from '@mapbox/rehype-prism';
 import remarkGfm from 'remark-gfm';
 import { createElement, Fragment, useEffect, useState } from 'react';
 import rehypeReact from 'rehype-react';
+import useInView from 'lib/hooks/useInView';
+import classNames from 'classnames';
 
 interface Props {
   gist: Gist;
@@ -17,16 +19,18 @@ const GistsCode = ({ gist, f }: Props) => {
   const url = file[f].raw_url;
   const format = file[f].language;
 
+  const { ref, inView } = useInView();
+
   const [rawCode, setRawCode] = useState('');
   useEffect(() => {
-    getRawCode();
+    inView && getRawCode();
 
     async function getRawCode() {
       const res = await fetch(url);
       const raw = await res.text();
       setRawCode(`\`\`\`${format ?? ''}\n${raw}`);
     }
-  }, [format, url]);
+  }, [format, url, inView]);
 
   const code = unified()
     .use(remarkParse)
@@ -41,7 +45,13 @@ const GistsCode = ({ gist, f }: Props) => {
 
   return (
     <>
-      <div className="pb-4 text-sm">
+      <div
+        className={classNames('pb-4 text-sm')}
+        style={{
+          minHeight: !inView ? '320px' : 'auto',
+        }}
+        ref={ref}
+      >
         <h1 className="md:text-lg">
           {gist.owner.login} / {file[f].filename}
         </h1>

components/mdx/Image.tsx

@@ -1,23 +1,12 @@
-import NextImage from 'next/image';
-import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
-import styles from './Image.module.css';
+import NextImage, { ImageProps } from 'next/image';
 
-interface Props
-  extends DetailedHTMLProps<
-    ImgHTMLAttributes<HTMLImageElement>,
-    HTMLImageElement
-  > {}
+interface Props extends ImageProps {}
 
-const Image = ({ src, alt }: Props) => {
+const Image = ({ alt, ...rest }: Props) => {
   return (
     <>
-      <span className={styles.imageContainer}>
-        <NextImage
-          src={src ?? ''}
-          alt={alt}
-          layout="fill"
-          className={styles.image}
-        />
+      <span className="block text-center">
+        <NextImage alt={alt} {...rest} />
         {alt && <span className="block text-center text-gray-400">{alt}</span>}
       </span>
     </>