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.
-
+
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};
最近迁移了自己的小服务器,也顺便把本机的环境重新设置了一下,其中环节还是有点复杂的小细节的。所以打算整理下思路,方便以后再设置同样环境。
-
+
## 对于服务器
@@ -200,7 +203,7 @@ source $HOME/.cargo/env
对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
-
+
当然这几个主要的变量可以放在 `.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.
-
+
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.
-
+
So we need post same format to Algolia.