feat: add custom Image component

4 files changed, 30 insertions, 3 deletions

diff --git a/next.config.js b/next.config.js
index cc28907..e314688 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,6 +6,9 @@ const nextConfig = {
       allowFutureImage: true,
     },
   },
+  images: {
+    domains: ['localhost', 'eug-vs.xyz'],
+  },
   redirects: async () => {
     return [{
       source: '/',
diff --git a/src/Image.tsx b/src/Image.tsx
new file mode 100644
index 0000000..770c383
--- /dev/null
+++ b/src/Image.tsx
@@ -0,0 +1,21 @@
+import ImageBase from 'next/future/image';
+import { FC } from 'react';
+
+type Props = Record<'src' | 'alt', string>;
+
+const IMAGE_CDN = 'http://localhost:8000';
+
+const localizeSrc = (src: string) => {
+  if (process.env.NODE_ENV === 'production' || src.startsWith('http')) return src;
+  return IMAGE_CDN + src;
+}
+
+const Image: FC<Props> = ({ src, ...props }) => {
+  const source = localizeSrc(src);
+
+  return (
+    <ImageBase src={source} {...props} />
+  )
+}
+
+export default Image;
diff --git a/src/pages/[...path].tsx b/src/pages/[...path].tsx
index 75dd96d..ea67d17 100644
--- a/src/pages/[...path].tsx
+++ b/src/pages/[...path].tsx
@@ -3,6 +3,7 @@ import type { GetStaticPropsContext, NextPage } from 'next';
 import ReactMarkdown from 'react-markdown';
 import Head from 'next/head';
 import Emoji from '../Emoji';
+import Image from '../Image';
 import deepReadDir from '../deepReadDir';
 import emojiPlugin from '../emojiPlugin';
 import fs from 'fs';
@@ -53,18 +54,20 @@ const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
       </Head>
       <main>
         <ReactMarkdown
-          children={markdownSource}
           transformLinkUri={transformLinkURI}
           rehypePlugins={[emojiPlugin(emojiFileNames), remarkGemoji]}
           components={{
             emoji: Emoji,
+            img: Image,
             h1: 'h2',
             h2: 'h3',
             h3: 'h4',
             h4: 'h5',
             h5: 'h6',
           } as any}
-        />
+        >
+          {markdownSource}
+        </ReactMarkdown>
       </main>
     </>
   );
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a64a418..ba9372f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,7 +8,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <>
       <a href="/" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textDecoration: 'none', marginBottom: '12px' }}>
         <Image src={logo} width={128} height={128} />
-        <h1>Eugene's Space</h1>
+        <h1>{"Eugene's Space"}</h1>
       </a>
       <Component {...pageProps} />
     </>