refactor: make folder structure cleaner

retr00exe · Aug 23, 2021 · 3129f24 · 3129f24
1 parent c8847d6
commit 3129f24
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 100 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
 NEXT_PUBLIC_HOSTNAME=enter_hostname_here
-NEXT_PUBLIC_STRAPI_GRAPHQL_URL=enter_url_here
+NEXT_PUBLIC_STRAPI_GRAPHQL_URL=enter_url_here
+NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=enter_verification_token_here
diff --git a/components/_layout/MainLayout.tsx b/components/_layout/MainLayout.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Head from 'next/head';
 import useClearance from '@core/hooks/useClearance';
-import Navbar from '@components/Navbar';
-import Footer from '@components/Footer';
+import Navbar from '@components/navbar';
+import Footer from '@components/footer';
 
 interface Props {
 	children: React.ReactNode;

diff --git a/components/_shared/AuthorCard.tsx b/components/_shared/AuthorCard.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { formatDate } from '@core/utils/date';
+
+interface Props {
+	name: string;
+	image: string;
+	date: Date;
+	readtime: string;
+}
+
+const AuthorCard: React.FC<Props> = ({
+	name,
+	image,
+	date,
+	readtime,
+}: Props): JSX.Element => {
+	return (
+		<AuthorCardWrapper>
+			<div className="content-header">
+				<Image
+					src={image}
+					alt={name}
+					width={50}
+					height={50}
+					className="profile-image"
+				/>
+				<div className="content-profile">
+					<p id="author">{name}</p>
+					<p id="date">{formatDate(date)}</p>
+				</div>
+			</div>
+			<div className="readtime">
+				<p>{readtime}</p>
+			</div>
+		</AuthorCardWrapper>
+	);
+};
+
+const AuthorCardWrapper = styled.div`
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	.content-header {
+		display: flex;
+		align-items: center;
+		.content-profile {
+			margin-left: 1rem;
+			#author {
+				color: var(--colorPrimary);
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 600;
+				margin: 0;
+			}
+			#date {
+				color: var(--colorTertiary);
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				margin: 0;
+			}
+		}
+	}
+	.readtime {
+		color: var(--colorQuarternary);
+		text-transform: capitalize;
+	}
+`;
+
+export default AuthorCard;
diff --git a/components/Footer.tsx → components/footer/index.tsx b/components/Footer.tsx → components/footer/index.tsx
@@ -26,10 +26,8 @@ const Footer: React.FC = () => {
 };
 
 const FooterWrapper = styled.footer`
-	position: fixed;
-	left: 0;
-	bottom: 0;
 	width: 100%;
+	max-height: 1.75rem;
 	margin: 0 auto;
 	font-size: 0.75rem;
 	text-align: center;

diff --git a/components/index/Card.tsx b/components/index/Card.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import styled from 'styled-components';
 import readingTime from 'reading-time';
+import AuthorCard from '@components/_shared/AuthorCard';
 import { sliceText } from '@core/utils/slice';
-import { formatDate } from '@core/utils/date';
 
 interface Props {
 	post: {
@@ -39,22 +39,12 @@ const Cards: React.FC<Props> = ({ post }: Props) => {
 						<p>{sliceText(post.content, 120)}</p>
 					</div>
 					<div className="footer">
-						<div className="content-footer">
-							<Image
-								src="https://avatars.githubusercontent.com/u/55347344?s=460&u=f5b39bf3ba4461a448a4ea15d6bd28fc6b7b4337&v=4"
-								alt="GitHub Profiles"
-								width={50}
-								height={50}
-								className="profile-image"
-							/>
-							<div className="content-profile">
-								<p id="author">Mekel Ilyasa</p>
-								<p id="date">{formatDate(post.date)}</p>
-							</div>
-						</div>
-						<div className="readtime">
-							<p>{stats.text}</p>
-						</div>
+						<AuthorCard
+							name="Mekel Ilyasa"
+							image="https://avatars.githubusercontent.com/u/55347344?s=460&u=f5b39bf3ba4461a448a4ea15d6bd28fc6b7b4337&v=4"
+							date={post.date}
+							readtime={stats.text}
+						/>
 					</div>
 				</div>
 			</div>

diff --git a/components/Navbar.tsx → components/navbar/index.tsx b/components/Navbar.tsx → components/navbar/index.tsx
diff --git a/components/post/ContentHeader.tsx b/components/post/ContentHeader.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ContentHeader = () => {
+	return <div></div>;
+};
+
+export default ContentHeader;
diff --git a/components/elements/Anchor.tsx → components/post/elements/Anchor.tsx b/components/elements/Anchor.tsx → components/post/elements/Anchor.tsx
diff --git a/components/elements/BlockQuote.tsx → components/post/elements/BlockQuote.tsx b/components/elements/BlockQuote.tsx → components/post/elements/BlockQuote.tsx
diff --git a/components/elements/CodeBlock.tsx → components/post/elements/CodeBlock.tsx b/components/elements/CodeBlock.tsx → components/post/elements/CodeBlock.tsx
diff --git a/components/elements/Image.tsx → components/post/elements/Image.tsx b/components/elements/Image.tsx → components/post/elements/Image.tsx
diff --git a/components/elements/Spinner.tsx → components/post/elements/Spinner.tsx b/components/elements/Spinner.tsx → components/post/elements/Spinner.tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -94,19 +94,24 @@ export default function App({ Component, pageProps }: Props) {
 	return (
 		<>
 			<Head>
+				<link rel="icon" href="/favicon.ico" />
+				<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+				<meta charSet="utf-8" />
+				<meta name="locale" content="id" />
 				<meta
 					name="google-site-verification"
-					content="FxUzKQItSGogZl9uidDBbvYi58mSK49aDSMobEhj52U"
+					content={process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION}
 				/>
-				<meta name="locale" content="id" />
-				<link rel="icon" href="/favicon.ico" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<meta name="robots" content="index, follow" />
 				<meta name="author" content="Mekel Ilyasa" />
 				<meta
 					name="description"
 					content="Mekel Ilyasa personal blog berisi tentang opini dan cerita mengenai pengalam pribadi penulis serta pandangan mengenai perkembangan dunia teknologi dan sains"
 				/>
+				<meta property="og:site_name" content="Mekel Ilyasa Personal Blog" />
+				<meta name="twitter:site_name" content="Mekel Ilyasa Personal Blog" />
+				<meta name="twitter:site" content="@mekelilyasa3" />
+				<meta name="twitter:creator" content="@mekelilyasa3" />
 			</Head>
 			<GlobalStyle />
 			<ThemeProvider>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,33 +7,32 @@ import { getAllPosts } from '@core/graphql/queries';
 import { fadeInUp, stagger } from '@core/utils/animate';
 
 interface Props {
-	posts;
+	posts: any;
 }
 
 const Home: React.FC<Props> = ({ posts }: Props): JSX.Element => {
 	return (
 		<MainLayout title="Home">
-			<motion.div
+			<Cards
+				as={motion.div}
 				exit={{ opacity: 0 }}
 				variants={stagger}
 				initial="initial"
 				animate="animate"
 			>
-				<Cards>
-					{posts.map((post) => (
-						<motion.div key={post.id} variants={fadeInUp}>
-							<Card post={post} key={post.id} />
-						</motion.div>
-					))}
-				</Cards>
-			</motion.div>
+				{posts.map((post) => (
+					<motion.div key={post.id} variants={fadeInUp}>
+						<Card post={post} key={post.id} />
+					</motion.div>
+				))}
+			</Cards>
 		</MainLayout>
 	);
 };
 
 export default Home;
 
-const Cards = styled.div`
+const Cards = styled(motion.div)`
 	background-color: var(--background);
 	padding: 6rem 0 4rem 0;
 	transition-duration: 0.6s;

diff --git a/pages/post/[slug].tsx b/pages/post/[slug].tsx
@@ -7,16 +7,16 @@ import { motion } from 'framer-motion';
 import { DiscussionEmbed } from 'disqus-react';
 import ReactMarkdown from 'react-markdown';
 import readingTime from 'reading-time';
-import Navbar from '@components/Navbar';
-import Footer from '@components/Footer';
-import Spinner from '@components/elements/Spinner';
-import ImageRenderer from '@components/elements/Image';
-import Anchor from '@components/elements/Anchor';
-import CodeBlock from '@components/elements/CodeBlock';
-import BlockQuote from '@components/elements/BlockQuote';
+import Navbar from '@components/navbar';
+import Footer from '@components/footer';
+import Spinner from '@components/post/elements/Spinner';
+import ImageRenderer from '@components/post/elements/Image';
+import Anchor from '@components/post/elements/Anchor';
+import CodeBlock from '@components/post/elements/CodeBlock';
+import BlockQuote from '@components/post/elements/BlockQuote';
+import AuthorCard from '@components/_shared/AuthorCard';
 import { getPostById, getAllPosts } from '@core/graphql/queries';
 import { fadeInUp, stagger } from '@core/utils/animate';
-import { formatDate } from '@core/utils/date';
 
 interface Post {
 	post: {
@@ -55,28 +55,22 @@ export default function Post({ post }: Post): JSX.Element {
 		<>
 			<Head>
 				<title>{post.title} | Mekel Ilyasa Personal Blog</title>
-				<link rel="icon" href="/favicon.ico" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 				<meta property="og:type" content="article" />
 				<meta property="og:title" content={post.title} />
 				<meta property="og:image" content={post.cover.url} />
 				<meta
 					property="og:url"
-					content={`https://mekelilyasa.now.sh/post/${post.slug}`}
+					content={`${process.env.HOSTNAME}/post/${post.slug}`}
 				/>
-				<meta property="og:site_name" content="Mekel Ilyasa Personal Blog" />
 
 				<meta name="twitter:type" content="article" />
 				<meta name="twitter:title" content={post.title} />
 				<meta name="twitter:image" content={post.cover.url} />
 				<meta
 					name="twitter:url"
-					content={`https://mekelilyasa.now.sh/post/${post.slug}`}
+					content={`${process.env.HOSTNAME}/post/${post.slug}`}
 				/>
-				<meta name="twitter:site_name" content="Mekel Ilyasa Personal Blog" />
-				<meta name="twitter:site" content="@mekelilyasa3" />
-				<meta name="twitter:creator" content="@mekelilyasa3" />
 			</Head>
 			{navbar ? <Navbar /> : <Navbar active title={post.title} />}
 			<motion.div exit={{ opacity: 0 }} initial="initial" animate="animate">
@@ -85,22 +79,12 @@ export default function Post({ post }: Post): JSX.Element {
 						<div className="header-container">
 							<motion.h1 variants={fadeInUp}>{post.title}</motion.h1>
 							<motion.div variants={fadeInUp} className="header">
-								<div className="content-header">
-									<Image
-										src="https://avatars.githubusercontent.com/u/55347344?s=460&u=f5b39bf3ba4461a448a4ea15d6bd28fc6b7b4337&v=4"
-										alt="GitHub Profile"
-										width={50}
-										height={50}
-										className="profile-image"
-									/>
-									<div className="content-profile">
-										<p id="author">Mekel Ilyasa</p>
-										<p id="date">{formatDate(post.date)}</p>
-									</div>
-								</div>
-								<div className="readtime">
-									<p>{stats.text}</p>
-								</div>
+								<AuthorCard
+									name="Mekel Ilyasa"
+									image="https://avatars.githubusercontent.com/u/55347344?s=460&u=f5b39bf3ba4461a448a4ea15d6bd28fc6b7b4337&v=4"
+									date={post.date}
+									readtime={stats.text}
+								/>
 							</motion.div>
 						</div>
 						<motion.div variants={fadeInUp}>
@@ -129,7 +113,7 @@ export default function Post({ post }: Post): JSX.Element {
 						<DiscussionEmbed
 							shortname="mekelilyasa"
 							config={{
-								url: `https://mekelilyasa.now.sh/post/${post.slug}`,
+								url: `${process.env.HOSTNAME}/post/${post.slug}`,
 								identifier: post.slug,
 								title: post.title,
 							}}
@@ -160,35 +144,6 @@ const PostWrapper = styled.div`
 			h1 {
 				color: var(--colorPrimary);
 			}
-			.header {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				.content-header {
-					display: flex;
-					align-items: center;
-					.content-profile {
-						margin-left: 1rem;
-						#author {
-							color: var(--colorPrimary);
-							font-size: 0.875rem;
-							line-height: 1.25rem;
-							font-weight: 600;
-							margin: 0;
-						}
-						#date {
-							color: var(--colorTertiary);
-							font-size: 0.875rem;
-							line-height: 1.25rem;
-							margin: 0;
-						}
-					}
-				}
-				.readtime {
-					color: var(--colorQuarternary);
-					text-transform: capitalize;
-				}
-			}
 		}
 		.content {
 			color: var(--colorPrimary);