Update image component

components/mdx/Image.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import NextImage, { ImageProps } from 'next/future/image';
 
 interface Props extends ImageProps {}
@@ -5,10 +6,18 @@ interface Props extends ImageProps {}
 const Image = ({ alt, ...rest }: Props) => {
   return (
     <>
-      <span className="block text-center">
-        <NextImage alt={alt} {...rest} />
-        {alt && <span className="block text-center text-gray-400">{alt}</span>}
+      <NextImage className="mx-auto" alt={alt} {...rest} />
+      {alt && (
+        <span
+          className={classNames(
+            'block mx-auto',
+            'text-center text-gray-400',
+            'mt-2'
+          )}
+        >
+          {alt}
         </span>
+      )}
     </>
   );
 };

components/mdx/components.ts

@@ -1,11 +1,15 @@
 import RUASandpack from 'components/RUA/RUASandpack';
 import Anchor from 'components/mdx/Anchor';
 import Image from 'components/mdx/Image';
+import Tab from 'components/RUA/tab';
+import TabItem from 'components/RUA/tab/TabItem';
 
 const components = {
   RUASandpack,
   a: Anchor,
   Image,
+  Tab,
+  TabItem,
 };
 
 export default components;

data/mdxData.ts

@@ -6,6 +6,8 @@ import {
 } from 'data/sandpack/how-to-load-a-background-with-threejs';
 
 import skybox_example from 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png';
+import crawler from 'public/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png';
+import indexFormat from 'public/images/p/setting-up-docsearch-for-nextjs/index-format.png';
 
 const data = {
   sandpack: {
@@ -18,6 +20,10 @@ const data = {
     'load-background': {
       skybox_example,
     },
+    'setting-up-docsearch': {
+      crawler,
+      indexFormat,
+    },
   },
 };
 

data/posts/setting-up-docsearch-for-nextjs.mdx

@@ -4,24 +4,6 @@ date: '2022-04-18'
 tags: ['Next.js', 'JavaScript']
 ---
 
-import Layout from 'layouts/MDXLayout';
-import dynamic from 'next/dynamic';
-import Image from 'components/mdx/Image';
-import image1 from 'assets/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png';
-import image2 from 'assets/images/p/setting-up-docsearch-for-nextjs/index-format.png';
-
-export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
-export const Tab = dynamic(() => import('components/RUA/tab'));
-export const TabItem = dynamic(() => import('components/RUA/tab/TabItem'));
-
-export const meta = {
-  title: 'Setting up DocSearch for next.js',
-  date: '2022-04-18',
-  tags: ['Next.js', 'JavaScript'],
-};
-
-export default ({ children }) => <Layout {...meta}>{children}</Layout>;
-
 I use next.js and mdx plugin to build my blog site. It's a next.js SSG project.
 
 Also it's a JAMStack site. So i need a extenal search engine.
@@ -44,7 +26,10 @@ They introduct the [Algolia Crawler web interface](https://crawler.algolia.com/a
 
 But i can't login with my Algolia account.
 
-<Image src={image1} alt="Can't login to Algolia Crawler" />
+<Image
+  src={images['setting-up-docsearch'].crawler}
+  alt="Can't login to Algolia Crawler"
+/>
 
 So i need find another way to generate my post index.
 
@@ -54,7 +39,7 @@ The DocSearch frontend UI read result as specific format. We just need to provid
 
 Then DocSearch fronted UI can works.
 
-<Image src={image2} alt="Index format" />
+<Image src={images['setting-up-docsearch'].indexFormat} alt="Index format" />
 
 So we need post same format to Algolia.