From d8a63848149c402a165a0b57db285e9509a9015a Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 5 Sep 2021 00:05:23 +0100
Subject: [PATCH] Update meta image location and styles

---
 pages/blog/[slug].tsx      | 26 +++++++-------------------
 pages/portfolio/[slug].tsx | 26 +++++++-------------------
 2 files changed, 14 insertions(+), 38 deletions(-)

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index af843e4..daae4cb 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -14,6 +14,7 @@ import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
 import readingTime from 'reading-time';
+import Image from 'next/image';
 
 interface Props {
 	source: MdxRemote.Source;
@@ -42,20 +43,7 @@ const Wrapper = styled.div`
 		}
 
 		.image {
-			height: 0;
-			width: 100%;
-			overflow: hidden;
-			padding-top: calc(591.44 / 1127.34 * 100%);
-			position: relative;
-			margin-bottom: 1rem;
-
-			img {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-			}
+			margin: 1rem 0rem;
 		}
 
 		h1,
@@ -162,11 +150,6 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 			</Head>
 			<Wrapper>
 				<div className='meta'>
-					{frontMatter.image ? (
-						<div className='image'>
-							<img src={frontMatter.image} alt='portfolio project image' />
-						</div>
-					) : null}
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
@@ -183,6 +166,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 							))}
 						</div>
 					) : null}
+					{frontMatter.image ? (
+						<div className='image'>
+							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
+						</div>
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index 8a27e47..31486d3 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -13,6 +13,7 @@ import AllComponents from '../../components/All';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
+import Image from 'next/image';
 
 interface Props {
 	source: MdxRemote.Source;
@@ -40,20 +41,7 @@ const Wrapper = styled.div`
 		}
 
 		.image {
-			height: 0;
-			width: 100%;
-			overflow: hidden;
-			padding-top: calc(591.44 / 1127.34 * 100%);
-			position: relative;
-			margin-bottom: 1rem;
-
-			img {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-			}
+			margin: 1rem 0rem;
 		}
 
 		h1,
@@ -144,11 +132,6 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 			</Head>
 			<Wrapper>
 				<div className='meta' ref={metaRef}>
-					{frontMatter.image ? (
-						<div className='image'>
-							<img src={frontMatter.image} alt='portfolio project image' />
-						</div>
-					) : null}
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
@@ -162,6 +145,11 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 							))}
 						</div>
 					) : null}
+					{frontMatter.image ? (
+						<div className='image'>
+							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
+						</div>
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>