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>
     </>

next.config.mjs

@@ -22,7 +22,7 @@ const composedConfig = composePlugins([
   {
     reactStrictMode: true,
     experimental: {
-      runtime: 'nodejs',
+      // runtime: 'nodejs',
       outputStandalone: true,
     },
     pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],

pages/_app.tsx

@@ -7,11 +7,9 @@ import 'styles/prism-one-dark.css';
 import 'styles/rua.css';
 import { MDXProvider } from '@mdx-js/react';
 import Anchor from 'components/mdx/Anchor';
-import Image from 'components/mdx/Image';
 
 const components = {
   a: Anchor,
-  img: Image,
 };
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {

pages/p/hello-world.mdx

@@ -4,12 +4,10 @@ date: '2022-04-06'
 tags: ['Hello world']
 ---
 
-import Layout from 'layouts/MDXLayout.tsx';
+import Layout from 'layouts/MDXLayout';
 import dynamic from 'next/dynamic';
 
-export const RUASandpack = dynamic(() =>
-  import('components/RUA/RUASandpack.tsx')
-);
+export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
 
 export const meta = {
   title: 'Hello world',

pages/p/how-to-load-a-background-with-threejs.mdx

@@ -4,12 +4,12 @@ date: '2022-04-13'
 tags: ['three.js', 'JavaScript']
 ---
 
-import Layout from 'layouts/MDXLayout.tsx';
+import Layout from 'layouts/MDXLayout';
 import dynamic from 'next/dynamic';
+import Image from 'components/mdx/Image';
+import image1 from 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png';
 
-export const RUASandpack = dynamic(() =>
-  import('components/RUA/RUASandpack.tsx')
-);
+export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
 
 export const meta = {
   title: 'How to load a background with three.js',
@@ -142,7 +142,7 @@ We need set texture to cube box each side. so we need six pictures.
 
 The skybos is six images that can be connected each other.
 
-![skyboxes_example.png](/images/p/how-to-load-a-background-with-threejs/Skybox_example.png)
+<Image src={image1} alt="Skyboxes example" />
 
 We just need load six images in some order, and set them to the scene background.
 

pages/p/my-develop-environmental.mdx

@@ -4,7 +4,10 @@ date: '2022-04-14'
 tags: [Linux, Server]
 ---
 
-import Layout from 'layouts/MDXLayout.tsx';
+import Layout from 'layouts/MDXLayout';
+import Image from 'components/mdx/Image';
+import image1 from 'public/images/p/my-develop-environmental/logo.svg';
+import image2 from 'public/images/p/my-develop-environmental/windows-environmentail.png';
 
 export const meta = {
   title: '我的开发环境',
@@ -16,7 +19,7 @@ export default ({ children }) => <Layout {...meta}>{children}</Layout>;
 
 最近迁移了自己的小服务器，也顺便把本机的环境重新设置了一下，其中环节还是有点复杂的小细节的。所以打算整理下思路，方便以后再设置同样环境。
 
-![](/images/p/my-develop-environmental/logo.svg)
+<Image src={image1} priority />
 
 ## 对于服务器
 
@@ -200,7 +203,7 @@ source $HOME/.cargo/env
 
 对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
 
-![windows-environmentail](/images/p/my-develop-environmental/windows-environmentail.png)
+<Image src={image2} alt="Windows environmentail" />
 
 当然这几个主要的变量可以放在 `.zshrc` 中，以后更新还会用到的。
 

pages/p/setting-up-docsearch-for-nextjs.mdx

@@ -4,12 +4,13 @@ date: '2022-04-18'
 tags: ['Next.js', 'JavaScript']
 ---
 
-import Layout from 'layouts/MDXLayout.tsx';
+import Layout from 'layouts/MDXLayout';
 import dynamic from 'next/dynamic';
+import Image from 'components/mdx/Image';
+import image1 from 'public/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png';
+import image2 from 'public/images/p/setting-up-docsearch-for-nextjs/index-format.png';
 
-export const RUASandpack = dynamic(() =>
-  import('components/RUA/RUASandpack.tsx')
-);
+export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
 
 export const meta = {
   title: 'Setting up DocSearch for next.js',
@@ -41,7 +42,7 @@ They introduct the [Algolia Crawler web interface](https://crawler.algolia.com/a
 
 But i can login with my Algolia account.
 
-![Can't login to Algolia Crawler](/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png)
+<Image src={image1} alt="Can't login to Algolia Crawler" />
 
 So i need find another way to generate my post index.
 
@@ -51,7 +52,7 @@ The DocSearch frontend UI read result as specific format. We just need to provid
 
 Then DocSearch fronted UI can works.
 
-![Index format](/images/p/setting-up-docsearch-for-nextjs/index-format.png)
+<Image src={image2} alt="Index format" />
 
 So we need post same format to Algolia.