From 82de4ac15e6a942c3b004efad24a3dc8a4ab7edf Mon Sep 17 00:00:00 2001
From: eug-vs <eugene@eug-vs.xyz>
Date: Fri, 30 Sep 2022 20:47:08 +0300
Subject: feat: add custom Image component

---
 next.config.js          |  3 +++
 src/Image.tsx           | 21 +++++++++++++++++++++
 src/pages/[...path].tsx |  7 +++++--
 src/pages/_app.tsx      |  2 +-
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/Image.tsx

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} />
     </>
-- 
cgit v1.2.3