Fix resposiveness issue, add disqus API, add loading spinner and add custom 404

Additional changes :
- Refactoring react-markdown renderer element to new folder
- Add some typescript interfaces
- Fix responsiveness issue at index page
- Add dark mode to blockquote
- Change prism theme to dracula

Author: retr00exe

README.md

@@ -38,19 +38,20 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 - [ ] Error when bad user open route that not listed by getStaticPath() method on /post/[slug].tsx
 - [ ] Navbar logo and darkmode toogle unresponsive on small devices. Can be solved by specifying the correct padding and margin or make flexbox container (I think)
 - [ ] Lighthouse performance bug caused by next/Image (Ref: [Lighthouse](https://github.com/GoogleChrome/lighthouse/issues/11631) & [Next.js](https://github.com/vercel/next.js/issues/20611))
+- [ ] Translating the page using Microsoft Edge causing card to overflow (`pages/index.tsx`)
 
 ## To Do List 👀
 
 - [x] Change data fetching method using GraphQL
 - [x] Add dark mode and animation
-- [ ] Add Disqus API for comment section
+- [x] Add Disqus API for comment section
 - [ ] Add readmore at the end of the post
 - [ ] Add portfolio page
-- [ ] Add custom loading spinner
-- [ ] Improve SEO
+- [x] Add custom loading spinner
+- [x] Improve SEO
 - [ ] Improve best practice
 - [ ] Reach perfect score on lighthouse
-- [ ] Add custom 404 error and 500 error
+- [x] Add custom 404 error and 500 error
 - [ ] Test some **possible** security vulnerabilities using ZAP & BurpSuite
-- [ ] Add typescript interfaces to prevent future bug
-- [ ] Add code tag renderer for `react-markdown`
+- [x] Add typescript interfaces to prevent future bug
+- [x] Add code tag renderer for `react-markdown`

components/About.jsx renamed to components/About.tsx

@@ -4,11 +4,11 @@ import Terminal from 'terminal-in-react';
 
 class AboutContent extends Component {
 	about = () =>
-		"Hi there! I'm Mekel Ilyasa. A computer nerd who love to learn all things from frontend into backend & security xD. I'm programmer, I have no life, I spend almost all my entire time in front of my computer LMAO. I do programming not because want expect to get paid or get adulation by the public, but because it is fun to program, yup I follow Linus Torvalds ideology LOL. There's no fancy animation or design in this blog, I make this blog simple and lightweight as possible to boost the performance :) ";
+		"Hi there! I'm Mekel Ilyasa. A computer nerd who loves to learn all things from frontend into backend xD. I'm a programmer, I have no life, I spend almost all my entire time in front of my computer LMAO. I do programming not because want expect to get paid or get adulation by the public, but because it is fun to program, yup I follow one of the quotes from Linus Torvalds 👀 There's no fancy animation or design in this blog, I make this blog simple and lightweight as possible to boost the performance 👻";
 	education = () =>
-		"I'm currently pursuing my bachelor degree at Computer Engineering Departement, Diponegoro University. I know, majoring 'IT' at college sucks af but I try my best to survive with old school tech stack at college LOL. I code using PHP and Java too at college even I hate it.";
+		"I'm currently pursuing my bachelor's degree at Computer Engineering Department, Diponegoro University. I know, majoring 'tech' at college sucks but I try my best to survive with old school tech stack at college LOL. I code using PHP and Java too at college even though I hate it 🐳";
 	skills = () =>
-		'My main skills are Python & Javascript, but sometimes I also tinkering with low level language like C, C++ & assembly too. My fav tech stack are MERN (MongoDB, Express, React, Node.js) stack. You can visit my github to see all my works and my favorite tech stack. Right now I still exploring an adventure to learn Go programming language to build robust backend services and learn SSR stuff using Next.js.';
+		'My main skills are Python & Javascript, but sometimes I also tinkering with low level languages like C, C++ & assembly too. My fav tech stack is MERN (MongoDB, Express, React, Node.js) stack. You can visit my GitHub to see all my works and my favorite tech stack. Right now I still exploring an adventure to learn Go programming language to build robust backend services and learn SSR stuff using Next.js 🐙';
 
 	render() {
 		return (
@@ -32,8 +32,6 @@ class AboutContent extends Component {
 							skills: this.skills,
 						}}
 						msg="Hi! Welcome to about page - Type 'help' to list all supported commands"
-						closedTitle=""
-						closedMessage="Click on the icon to reopen"
 					/>
 				</div>
 			</AboutWrapper>

components/Cards.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import styled from 'styled-components';
 import readingTime from 'reading-time';
-import { sliceText } from '../utils/card';
+import { sliceText } from '../utils/slice';
 import { formatDate } from '../utils/date';
 
 interface Props {
@@ -62,27 +62,25 @@ const Cards: React.FC<Props> = ({ post }) => {
 };
 
 const CardWrapper = styled.div`
+	margin: 0 auto;
+	max-width: 900px;
 	padding: 1rem 2rem;
+	.card-cover-image {
+		object-fit: cover;
+		width: 426px;
+		height: 240px;
+		@media (max-width: 768px) {
+			width: 350px;
+			height: 260px;
+		}
+	}
 	.card-container {
 		margin: 0 auto;
 		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		border-radius: 0.75rem;
 		overflow: hidden;
-		@media (min-width: 590px) {
-			height: auto;
-			display: flex;
-			flex-direction: row;
-		}
 		@media (min-width: 768px) {
-			width: 80%;
-			height: auto;
-			display: flex;
-			flex-direction: row;
-		}
-		@media (min-width: 1024px) {
-			width: 60%;
-			height: auto;
 			display: flex;
 			flex-direction: row;
 		}

components/elements/Anchor.tsx

@@ -0,0 +1,13 @@
+interface Props {
+	href: string;
+}
+
+const Anchor: React.FC<Props> = ({ href, children }) => {
+	return (
+		<a style={{ color: 'blue' }} href={href} target="_blank" rel="noopener">
+			{children}
+		</a>
+	);
+};
+
+export default Anchor;

components/elements/BlockQuote.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+interface Props {
+	children: string;
+}
+
+const BlockQuote: React.FC<Props> = ({ children }) => {
+	return <BlockQuoteContainer>{children}</BlockQuoteContainer>;
+};
+
+const BlockQuoteContainer = styled.blockquote`
+	color: var(--colorPrimary);
+	margin: 0;
+	padding-left: 1em;
+	border-left: 0.4em var(--border) solid;
+	background: var(--quoteBackground);
+`;
+
+export default BlockQuote;

components/CodeBlock.tsx renamed to components/elements/CodeBlock.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 interface Props {
 	language: any;
 	value: any;
 }
 
-const CodeBlock: React.FC<Props> = ({ language, value }) => {
+const CodeBlock: React.FC<Props> = ({ value }) => {
 	return (
-		<SyntaxHighlighter language={language} style={tomorrow}>
+		<SyntaxHighlighter language="python" style={dracula} wrapLines>
 			{value}
 		</SyntaxHighlighter>
 	);

components/elements/Image.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Image: React.FC = (props) => {
+	return <ImageWrapper {...props} id="post-image" />;
+};
+
+const ImageWrapper = styled.img`
+	margin: 1rem 0;
+	max-width: 100%;
+`;
+
+export default Image;

components/elements/Spinner.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import Loader from 'react-loader-spinner';
+import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
+
+const Spinner: React.FC = () => {
+	return (
+		<SpinnerContainer>
+			<Loader type="Bars" color="#e200e2" height={50} width={50} />
+		</SpinnerContainer>
+	);
+};
+
+const SpinnerContainer = styled.div`
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+`;
+
+export default Spinner;

lib/graphql/queries.ts

@@ -3,7 +3,7 @@ import { GraphQLClient, gql } from 'graphql-request';
 
 const client = new GraphQLClient(process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL);
 
-export const getAllPosts = () => {
+export const getAllPosts: () => Promise<any> = () => {
 	const query = gql`
 		{
 			posts(sort: "date:desc") {
@@ -21,7 +21,7 @@ export const getAllPosts = () => {
 	return client.request(query);
 };
 
-export const getPostById = (slug) => {
+export const getPostById: (slug: string) => Promise<any> = (slug) => {
 	const query = gql`
 		{
 			posts(where: { slug: "${slug}" }) {