Revert "[FEAT] Authenticate User"

README.md

@@ -3,7 +3,7 @@
 ![Singhlify Blog](https://repository-images.githubusercontent.com/471452104/c8647c66-471b-4631-9b8a-c9b77de7e176)
 
 
-A blog publication app built with NextJs and sourced from GitHub. Now no need to use a CMS, writers can maintain their content in a GitHub repository as Markdown files & the app will show all the blogs in a clean & modern UI with the lightning speed of NextJs.
+A blog publication app built with NextJs and sourced from GitHub. Now no need to use a CMS, writers can maintain their code in a GitHub repository as Markdown files & the app will show all the blogs in a clean & modern UI with the lightning speed of NextJs.
 
 ## 🚀 Demo
 

components/Header/Header.js

@@ -1,49 +1,17 @@
 import Link from "next/link";
-import Image from "next/image";
-import { signIn, signOut, useSession } from "next-auth/react";
-import Button from "@mui/material/Button";
 import { Wrapper, Nav } from "./Header.styles";
-import logo from "../../public/images/Singhlify.svg"
+import logo from "../../assets/images/Singhlify.svg";
+import Image from "next/image";
 
 const Header = () => {
-	const { data: session } = useSession();
-	// const { data: session, status } = useSession();
-	// const loading = status === "loading";
-
 	return (
 		<Wrapper>
 			<Nav>
 				<Link href="/" passHref>
 					<a>
-						<Image
-							src={logo}
-							alt="Brand Logo"
-							width={128}
-							height={51}
-						/>
+						<Image src={logo} alt="Logo" width={128} height={51} />
 					</a>
 				</Link>
-
-				{session ? (
-					<Button
-						onClick={signOut}
-						title={session.user.email}
-						className="nav__cta"
-						variant="contained"
-						disableElevation
-					>
-						Sign Out
-					</Button>
-				) : (
-					<Button
-						onClick={signIn}
-						className="nav__cta"
-						variant="contained"
-						disableElevation
-					>
-						Sign In
-					</Button>
-				)}
 			</Nav>
 		</Wrapper>
 	);

components/MicroComponents/Image.js → components/Image/index.js

@@ -1,7 +1,7 @@
 import { default as NextImage } from "next/image";
 import styled from "styled-components";
 
-const StyledImage = styled.div`
+const CoverImage = styled.div`
 	max-width: 114rem;
 	width: 100%;
 
@@ -19,8 +19,8 @@ const StyledImage = styled.div`
 
 export default function Image(props) {
 	return (
-		<StyledImage>
-			<NextImage {...props} layout="fill" placeholder="blur" blurDataURL />
-		</StyledImage>
+		<CoverImage>
+			<NextImage {...props} layout="fill" />
+		</CoverImage>
 	);
 }

components/Post/Post.js

@@ -1,57 +1,18 @@
-import { CardHeader, Avatar, IconButton } from "@mui/material";
+import { CardHeader, Avatar } from "@mui/material";
 import ReactMarkdown from "react-markdown";
-import Image from "../MicroComponents/Image";
-import { CodeBlock } from "../MicroComponents/CodeBlock";
+import Image from "../Image";
+import { CodeBlock } from "../CodeBlock";
 import { Article } from "./Post.styles";
-import MetaTags from "../MicroComponents/MetaTags";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ThumbUpOutlinedIcon from "@mui/icons-material/ThumbUpOutlined";
-import { useEffect, useState } from "react";
-import axios from "axios";
-import { useSession } from "next-auth/react";
-
-const authorImg =
-	"https://blog.singhlify.com/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1646679970148%2Frha_b8qEf.png%3Fw%3D72%26h%3D72%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=256&q=75";
+import MetaTags from "../MetaTags";
 
 const Post = ({
 	props: {
 		frontmatter: { cover_img, title, description, tags, created_on },
 		content,
 	},
 }) => {
-	const [liked, setLiked] = useState(false);
-	const { data: session } = useSession();
-
-	const updateUserReaction = async (userEmail, userReaction) => {
-		try {
-			await axios.post("/api/likesArticle", {
-				email: userEmail,
-				likesArticle: userReaction,
-			});
-		} catch (error) {
-			// console.log("error>>>", error);
-		}
-	};
-
-	const getUserDetails = async (userEmail) => {
-		try {
-			const {data: userDetails} = await axios.get(`/api/userDetails?email=${userEmail}`);
-			setLiked(userDetails.likesArticle);
-		} catch (error) {
-			// console.log("error>>>", error);
-		}
-	};
-
-	const handleLikedArticle = () => {
-		setLiked(!liked);
-		updateUserReaction(session.user.email, !liked);
-	};
-
-	useEffect(async () => {
-		if (session && session.user.email) {
-			await getUserDetails(session.user.email);
-		}
-	}, [session]);
+	const authorImg =
+		"https://blog.singhlify.com/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1646679970148%2Frha_b8qEf.png%3Fw%3D72%26h%3D72%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=256&q=75";
 
 	return (
 		<>
@@ -67,7 +28,12 @@ const Post = ({
 					<CardHeader
 						className="author"
 						avatar={
-							<Avatar className="avatar" alt="Gurjot Singh" src={authorImg} />
+							<Avatar
+								className="avatar"
+								// sx={{ bgcolor: deepOrange[500] }}
+								alt="Gurjot Singh"
+								src={authorImg}
+							/>
 						}
 						title="Gurjot Singh"
 						subheader={created_on}
@@ -76,20 +42,8 @@ const Post = ({
 					<Image className="cover_img" src={cover_img} alt={title} />
 				</div>
 
-				<div className="content__wrapper">
-					<div className="content">
-						<ReactMarkdown components={CodeBlock}>{content}</ReactMarkdown>
-					</div>
-
-					{session && session.user.email ? (
-						<div className="content__reaction">
-							<h2>Liked the article?</h2>
-
-							<IconButton onClick={handleLikedArticle} aria-label="like">
-								{liked ? <ThumbUpIcon /> : <ThumbUpOutlinedIcon />}
-							</IconButton>
-						</div>
-					) : null}
+				<div className="content">
+					<ReactMarkdown components={CodeBlock}>{content}</ReactMarkdown>
 				</div>
 			</Article>
 		</>

components/Post/Post.styles.js

@@ -46,7 +46,7 @@ export const Article = styled.article`
 
 		code {
 			padding: 0.4rem 0.6rem;
-			background-color: ${(props) => props.theme.colors.bg.inline_code};
+			background-color: #e5e5e5;
 			border-radius: 0.4rem;
 		}
 	}
@@ -56,7 +56,7 @@ export const Article = styled.article`
 	}
 
 	blockquote {
-		border-left: 0.4rem solid ${(props) => props.theme.colors.bg.inline_code};
+		border-left: 0.4rem solid #e5e7eb;
 		padding-left: 2rem;
 		font-style: italic;
 	}
@@ -92,58 +92,9 @@ export const Article = styled.article`
 		}
 	}
 
-	.content__wrapper {
-		/* display: grid;
-		grid-template-rows: auto;
-		column-gap: 4rem;
-		row-gap: 4rem;
-		width: fit-content;
-		margin: 3rem auto; */
-
-		margin: 3rem auto;
-		width: 100%;
-
-		.content__reaction {
-			display: flex;
-			flex-direction: column;
-			row-gap: 1rem;
-			justify-content: center;
-			align-items: center;
-
-			position: sticky;
-			top: 4rem;
-
-			max-width: 24rem;
-			height: fit-content;
-
-			border: 0.2rem solid ${(props) => props.theme.colors.border};
-			border-radius: 2rem;
-			padding: 2rem;
-			margin: 4rem auto;
-
-			h2 {
-				font-size: 2rem;
-			}
-
-			p {
-				font-size: 1.6rem;
-			}
-
-			button {
-				width: fit-content;
-				padding: 1.6rem;
-			}
-
-			svg {
-				width: 3rem;
-				height: 3rem;
-			}
-		}
-	}
-
 	.content {
 		max-width: 74.6rem;
-		margin: auto;
+		margin: 3rem auto;
 
 		* {
 			margin-bottom: 2rem;
@@ -157,16 +108,4 @@ export const Article = styled.article`
 			font-size: 2rem;
 		}
 	}
-
-	@media ${(props) => props.theme.breakpoints.lg} {
-		.content__wrapper {
-			display: flex;
-			column-gap: 4rem;
-			width: fit-content;
-
-			.content__reaction {
-				margin: 0 auto;
-			}
-		}
-	}
 `;

components/PostCard/PostCard.styles.js

@@ -5,11 +5,9 @@ export const Card = styled(muiCard)`
 	font-family: ${(props) => props.theme.fonts.main};
 	padding: 1rem;
 	border-radius: 1.6rem;
-	transition: all 0.2s ease-in-out;
 
 	&:hover {
-		box-shadow: 0px 6px 20px -8px rgba(0, 0, 0, 0.4);
-		transform: translateY(-1rem);
+		box-shadow: 0px 6px 20px -8px rgba(0, 0, 0, 0.40);
 	}
 
 	.card__media {