diff --git a/components/gists/GistsCode.tsx b/components/gists/GistsCode.tsx index fa5fd64..7d6359b 100644 --- a/components/gists/GistsCode.tsx +++ b/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 ( <> -
+

{gist.owner.login} / {file[f].filename}

diff --git a/components/mdx/Image.tsx b/components/mdx/Image.tsx index 85d75fa..e455fa2 100644 --- a/components/mdx/Image.tsx +++ b/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 - > {} +interface Props extends ImageProps {} -const Image = ({ src, alt }: Props) => { +const Image = ({ alt, ...rest }: Props) => { return ( <> - - + + {alt && {alt}} diff --git a/next.config.mjs b/next.config.mjs index afddc83..3b73ff3 100644 --- a/next.config.mjs +++ b/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'], diff --git a/pages/_app.tsx b/pages/_app.tsx index 688a6f7..2996e6b 100644 --- a/pages/_app.tsx +++ b/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) { diff --git a/pages/p/hello-world.mdx b/pages/p/hello-world.mdx index 19a3597..dceb9e1 100644 --- a/pages/p/hello-world.mdx +++ b/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', diff --git a/pages/p/how-to-load-a-background-with-threejs.mdx b/pages/p/how-to-load-a-background-with-threejs.mdx index 29a7cd6..2f6260a 100644 --- a/pages/p/how-to-load-a-background-with-threejs.mdx +++ b/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) +Skyboxes example We just need load six images in some order, and set them to the scene background. diff --git a/pages/p/my-develop-environmental.mdx b/pages/p/my-develop-environmental.mdx index 830efe3..bbee3a7 100644 --- a/pages/p/my-develop-environmental.mdx +++ b/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 }) => {children}; 最近迁移了自己的小服务器,也顺便把本机的环境重新设置了一下,其中环节还是有点复杂的小细节的。所以打算整理下思路,方便以后再设置同样环境。 -![](/images/p/my-develop-environmental/logo.svg) + ## 对于服务器 @@ -200,7 +203,7 @@ source $HOME/.cargo/env 对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。 -![windows-environmentail](/images/p/my-develop-environmental/windows-environmentail.png) +Windows environmentail 当然这几个主要的变量可以放在 `.zshrc` 中,以后更新还会用到的。 diff --git a/pages/p/setting-up-docsearch-for-nextjs.mdx b/pages/p/setting-up-docsearch-for-nextjs.mdx index a9e6f43..789e9ec 100644 --- a/pages/p/setting-up-docsearch-for-nextjs.mdx +++ b/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) +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) +Index format So we need post same format to Algolia.