refactor: optimize code quality with built in helper function

retr00exe · Aug 24, 2021 · 9e5624a · 9e5624a
1 parent f9cd77c
commit 9e5624a
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 193 deletions.
diff --git a/components/_layout/MainLayout.tsx b/components/_layout/MainLayout.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head';
 import useClearance from '@core/hooks/useClearance';
 import Navbar from '@components/navbar';
 import Footer from '@components/footer';
+import styled from 'styled-components';
 
 interface Props {
 	children: React.ReactNode;
@@ -23,7 +24,7 @@ const DynamicLayout = ({
 	return (
 		<>
 			<Head>
-				{title && <title>{title} — Mekel Ilyasa Personal Blog</title>}
+				{title && <title>{title} — Mekel Ilyasa</title>}
 				<meta property="og:type" content="article" />
 				<meta
 					property="og:title"
@@ -37,6 +38,14 @@ const DynamicLayout = ({
 							: 'https://res.cloudinary.com/retr00exe/image/upload/v1611939899/medium_astroboy_52092ece77.webp'
 					}
 				/>
+				<meta
+					property="og:url"
+					content={
+						post
+							? `${process.env.HOSTNAME}/post/${post.slug}`
+							: `${process.env.HOSTNAME}`
+					}
+				/>
 				<meta name="twitter:type" content="article" />
 				<meta
 					name="twitter:title"
@@ -50,30 +59,39 @@ const DynamicLayout = ({
 							: 'https://res.cloudinary.com/retr00exe/image/upload/v1611939899/medium_astroboy_52092ece77.webp'
 					}
 				/>
-				<meta
-					property="og:url"
-					content={`${process.env.HOSTNAME}/post/${
-						post ? post.slug : `${process.env.HOSTNAME}`
-					}`}
-				/>
 				<meta
 					name="twitter:url"
-					content={`${process.env.HOSTNAME}/post/${
-						post ? post.slug : `${process.env.HOSTNAME}`
-					}`}
+					content={
+						post
+							? `${process.env.HOSTNAME}/post/${post.slug}`
+							: `${process.env.HOSTNAME}`
+					}
 				/>
 			</Head>
 			<header ref={HeaderRef}>
 				{navbar ? <Navbar active title={post.title} /> : <Navbar />}
 			</header>
-			<main style={{ minHeight: `calc(100vh - ${clearance}px)` }}>
+			<Main clearance={clearance} post={post}>
 				{children}
-			</main>
+			</Main>
 			<footer ref={FooterRef}>
 				<Footer />
 			</footer>
 		</>
 	);
 };
 
+interface MainProps {
+	clearance: number;
+	post: any;
+}
+
+const Main = styled.main<MainProps>`
+	min-height: calc(100vh - ${({ clearance }) => clearance}px);
+	background-color: ${({ post }) =>
+		post ? 'var(--backgroundPost);' : 'var(--background)'};
+	transition-duration: 0.6s;
+	transition-timing-function: ease;
+`;
+
 export default DynamicLayout;
diff --git a/components/about/About.jsx b/components/about/About.jsx
@@ -42,11 +42,10 @@ class AboutContent extends Component {
 }
 
 const AboutWrapper = styled.div`
-	background-color: var(--background);
+	height: 100vh;
 	transition-duration: 0.6s;
 	transition-timing-function: ease;
 	.container {
-		height: 100vh;
 		padding: 4rem 0 6rem 0;
 		margin: 4rem 0 2rem 0;
 		display: flex;

diff --git a/components/contact/Contact.tsx b/components/contact/Contact.tsx
@@ -11,64 +11,61 @@ import { fadeInUp, stagger } from '@core/utils/animate';
 
 const Contact: React.FC = () => {
 	return (
-		<motion.div
+		<ContactWrapper
+			as={motion.div}
 			exit={{ opacity: 0 }}
 			variants={stagger}
 			initial="initial"
 			animate="animate"
 		>
-			<ContactWrapper>
-				<div className="header">
-					<motion.h1 variants={fadeInUp}>Contact Me</motion.h1>
-					<motion.p variants={fadeInUp}>
-						Hi there, you can reach me by follow my social media or email me at
-						[email protected]. I am quite active at Facebook and Instagram,
-						feel free to leave me a message :)
-					</motion.p>
-				</div>
-				<motion.div variants={fadeInUp} className="icons">
-					<a
-						href="https://github.com/retr00exe"
-						aria-label="Github"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<FaGithub className="icon github" />
-					</a>
-					<a
-						href="https://www.linkedin.com/in/mekelilyasa/"
-						aria-label="Linkedin"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<FaLinkedin className="icon linkedin" />
-					</a>
-					<a
-						href="https://www.instagram.com/mekelilyasa/"
-						aria-label="Instagram"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<FaInstagram className="icon instagram" />
-					</a>
-					<a
-						href="https://www.facebook.com/mekel.ilyasa/"
-						aria-label="Facebook"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<FaFacebookSquare className="icon facebook" />
-					</a>
-				</motion.div>
-			</ContactWrapper>
-		</motion.div>
+			<div className="header">
+				<motion.h1 variants={fadeInUp}>Contact Me</motion.h1>
+				<motion.p variants={fadeInUp}>
+					Hi there, you can reach me by follow my social media or email me at
+					[email protected]. I am quite active at Facebook and Instagram,
+					feel free to leave me a message :)
+				</motion.p>
+			</div>
+			<motion.div variants={fadeInUp} className="icons">
+				<a
+					href="https://github.com/retr00exe"
+					aria-label="Github"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<FaGithub className="icon github" />
+				</a>
+				<a
+					href="https://www.linkedin.com/in/mekelilyasa/"
+					aria-label="Linkedin"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<FaLinkedin className="icon linkedin" />
+				</a>
+				<a
+					href="https://www.instagram.com/mekelilyasa/"
+					aria-label="Instagram"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<FaInstagram className="icon instagram" />
+				</a>
+				<a
+					href="https://www.facebook.com/mekel.ilyasa/"
+					aria-label="Facebook"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<FaFacebookSquare className="icon facebook" />
+				</a>
+			</motion.div>
+		</ContactWrapper>
 	);
 };
 
-const ContactWrapper = styled.div`
-	height: 100vh;
+const ContactWrapper = styled(motion.div)`
 	padding: 4rem 2rem;
-	background-color: var(--background);
 	display: flex;
 	flex-direction: column;
 	align-items: center;

diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -5,29 +5,29 @@ import { fadeInUp } from '@core/utils/animate';
 
 const Footer: React.FC = () => {
 	return (
-		<FooterWrapper>
-			<motion.p
-				exit={{ opacity: 0 }}
-				initial="initial"
-				animate="animate"
-				variants={fadeInUp}
-			>
-				Made with ❤️ using{' '}
-				<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">
-					Next.js
-				</a>{' '}
-				&{' '}
-				<a href="https://strapi.io/" target="_blank" rel="noopener noreferrer">
-					Strapi
-				</a>
-			</motion.p>
+		<FooterWrapper
+			as={motion.p}
+			exit={{ opacity: 0 }}
+			initial="initial"
+			animate="animate"
+			variants={fadeInUp}
+		>
+			Made with ❤️ using{' '}
+			<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">
+				Next.js
+			</a>{' '}
+			&{' '}
+			<a href="https://strapi.io/" target="_blank" rel="noopener noreferrer">
+				Strapi
+			</a>
 		</FooterWrapper>
 	);
 };
 
-const FooterWrapper = styled.footer`
+const FooterWrapper = styled(motion.p)`
 	width: 100%;
-	max-height: 1.75rem;
+	max-height: 2.5rem;
+	padding: 0.75rem 0;
 	margin: 0 auto;
 	font-size: 0.75rem;
 	text-align: center;