chore(homepage): use next/image for images and specify width/height

5 files changed, 35 insertions, 21 deletions

diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
index 34b1a92..cf2b77f 100644
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
+++ b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
@@ -1,10 +1,21 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  width: max-content;
+  width: 100%;
   max-width: 100%;
   margin: var(--spacing-sm) auto;
   position: relative;
+  text-align: center;
+}
+
+.caption {
+  margin: 0;
+  padding: fun.convert-px(4) var(--spacing-2xs);
+  background: var(--color-bg-secondary);
+  border: fun.convert-px(1) solid var(--color-border);
+  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
+    var(--color-shadow-light);
+  font-weight: 500;
 }
 
 .link {
@@ -37,13 +48,3 @@
     }
   }
 }
-
-.caption {
-  margin: 0;
-  padding: fun.convert-px(4) var(--spacing-2xs);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
-    var(--color-shadow-light);
-  font-weight: 500;
-}
diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
index 062c04b..6c39e7f 100644
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
+++ b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
@@ -1,12 +1,8 @@
-import Image, { ImageProps } from 'next/image';
+import { ResponsiveImageProps } from '@ts/types/app';
+import Image from 'next/image';
 import Link from 'next/link';
 import styles from './ResponsiveImage.module.scss';
 
-type ResponsiveImageProps = ImageProps & {
-  caption?: string;
-  linkTarget?: string;
-};
-
 const ResponsiveImage = (props: ResponsiveImageProps) => {
   const { caption, linkTarget, ...attributes } = props;
 
@@ -15,7 +11,11 @@ const ResponsiveImage = (props: ResponsiveImageProps) => {
       {linkTarget ? (
         <Link href={linkTarget}>
           <a className={styles.link}>
-            <Image alt={attributes.alt} layout="intrinsic" {...attributes} />
+            <Image
+              alt={attributes.alt}
+              layout={attributes.layout || 'intrinsic'}
+              {...attributes}
+            />
             {caption && (
               <figcaption className={styles.caption}>{caption}</figcaption>
             )}
@@ -23,7 +23,11 @@ const ResponsiveImage = (props: ResponsiveImageProps) => {
         </Link>
       ) : (
         <>
-          <Image alt={attributes.alt} layout="intrinsic" {...attributes} />
+          <Image
+            alt={attributes.alt}
+            layout={attributes.layout || 'intrinsic'}
+            {...attributes}
+          />
           {caption && (
             <figcaption className={styles.caption}>{caption}</figcaption>
           )}
diff --git a/src/content b/src/content
-Subproject 66c88e819f0935d55ab86a757bec2a92e623297
+Subproject 676d8756ef8a476316d45e0ebdde5b0f03874ac
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0045996..513df69 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,14 +2,16 @@ import FeedIcon from '@assets/images/icon-feed.svg';
 import { ButtonLink } from '@components/Buttons';
 import { ContactIcon } from '@components/Icons';
 import Layout from '@components/Layouts/Layout';
+import { ResponsiveImage } from '@components/MDX';
 import { RecentPosts } from '@components/Widgets';
 import HomePageContent from '@content/pages/homepage.mdx';
 import { getPublishedPosts } from '@services/graphql/queries';
 import styles from '@styles/pages/Home.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
+import { NextPageWithLayout, ResponsiveImageProps } from '@ts/types/app';
 import { PostsList } from '@ts/types/blog';
 import { settings } from '@utils/config';
 import { loadTranslation } from '@utils/helpers/i18n';
+import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import Script from 'next/script';
@@ -141,9 +143,10 @@ const Home: NextPageWithLayout<HomePageProps> = ({
     return <RecentPosts posts={recentPosts} />;
   };
 
-  const components = {
+  const components: NestedMDXComponents = {
     CodingLinks: CodingLinks,
     ColdarkRepos: ColdarkRepos,
+    Image: (props: ResponsiveImageProps) => ResponsiveImage({ ...props }),
     LibreLinks: LibreLinks,
     MoreLinks: MoreLinks,
     RecentPosts: getRecentPosts,
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index aeab2bc..0960cbd 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -1,5 +1,6 @@
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
+import { ImageProps } from 'next/image';
 import { ReactElement, ReactNode } from 'react';
 import { PostBy, TotalArticles } from './articles';
 import { AllPostsSlug, RawPostsList } from './blog';
@@ -138,6 +139,11 @@ export type ProjectProps = {
   project: Project;
 };
 
+export type ResponsiveImageProps = ImageProps & {
+  caption?: string;
+  linkTarget?: string;
+};
+
 export type Slug = {
   slug: string;
 };