feat: add custom Image component

2 files changed, 6 insertions, 3 deletions

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