feat: Modify footer to redirect to WordPress site for subscription

Signed-off-by: Souptik Datta <souptikdatta2001@gmail.com>

components/Footer.js

@@ -40,78 +40,18 @@ const Footer = (props) => {
 	}
 
 	return(
-		<Flex width="100%" flexDirection="column" justifyContent="center" alignItems="center" {...props}>
+		<Flex className="footer" width="100%" flexDirection="column" justifyContent="center" alignItems="center" {...props}>
 			<Box
 			width="15%"
 			border="0.5px solid rgba(255, 255, 255, 0.4)"
 			mb="40px"
 			></Box>
-			<Flex mb="20px" textAlign="center" width="100%" flexDirection={["column", null, null, null, "row"]} justifyContent="space-between" alignItems="center">
+			<Flex className="newsletter-subscribe" mb="20px" textAlign="center" width="100%" flexDirection={["column", null, null, null, "row"]} justifyContent="space-between" alignItems="center">
 				<Box textAlign="center" width={["100%", null, null, null, "100%"]} fontWeight="300" fontSize="16px" lineHeight="32px" color="white" letterSpacing="3px">
-					<em>Should we send you a notification when new blogs are published?</em>👇
-				</Box>
-			</Flex>
-			<Flex mb="20px" gap="40px" textAlign="center" width="50%" flexDirection={["column", null, null, null, "row"]} justifyContent="space-between" alignItems="center">
-				<Input
-				placeholder="Name"
-				size="lg"
-				type="text"
-				color="white"
-				ref={nameInput}
-				disabled={loading}
-				_hover={{
-					bg: "#0097233f"
-				}}
-				borderColor="#ffffff8c"
-				focusBorderColor="#ffffff8c"
-				/>
-				<Input
-				placeholder="Email"
-				size="lg"
-				type="email"
-				color="white"
-				ref={emailInput}
-				disabled={loading}
-				_hover={{
-					bg: "#0097233f"
-				}}
-				borderColor="#ffffff8c"
-				focusBorderColor="#ffffff8c"
-				/>
-			</Flex>
-			<Button
-			letterSpacing="5px"
-			mb="5px"
-			lineHeight='24px'
-			transition='all 0.2s cubic-bezier(.08,.52,.52,1)'
-			borderRadius='5px'
-			fontSize='16px'
-			padding="8px"
-			fontWeight='600'
-			bg= "#28a745"
-			border='1.5px solid #28a745'
-			color='white'
-			_hover={{
-			  bg: "#1f7032",
-			}}
-			_active={{
-			  bg: "#1f7032",
-			  transform: 'scale(0.98)',
-			}}
-			_focus={{
-			  boxShadow:
-			  '0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)',
-			}}
-			disabled={loading}
-			onClick={subscribe}
-			>
-				Subscribe
-			</Button>
-			<Flex mb="40px" textAlign="center" width="100%" flexDirection={["column", null, null, null, "row"]} justifyContent="space-between" alignItems="center">
-				<Box textAlign="center" width={["100%", null, null, null, "100%"]} fontWeight="600" fontSize="12px" lineHeight="32px" color="white" letterSpacing="3px">
-					{ subscribedStatus !== undefined && subscribedStatus.error === true && '❌' }
-					{ subscribedStatus !== undefined && subscribedStatus.error === false && '✅' }
-					{ subscribedStatus !== undefined && subscribedStatus.message !== undefined && subscribedStatus.message }
+					<em>Should we send you a notification when new blogs are published?</em>
+					<br/>
+					{/* @TODO: Make this link dynamic */}
+					<em>Then you can <Link href="https://blog.souptik.dev/#newsletter-subscribe">subscribe to newsletter here</Link>! It is just one click, and no spam! ❤️</em>
 				</Box>
 			</Flex>
 			<Flex textAlign="center" width="100%" flexDirection={["column", null, null, null, "row"]} justifyContent="space-between" alignItems="center">

components/Home/Blogcard.js

@@ -1,6 +1,7 @@
 import { Box, Heading, Link as ChakraLink, Text } from "@chakra-ui/layout";
 import Link from 'next/link';
 import StripTags from "../../src/escaping/StripTags";
+import { prepareExcerpt } from "../../src/helper-functions";
 
 const parseDate = (rawDate) => {
 
@@ -41,7 +42,7 @@ export default function Blogcard({ data, styles, ...rest }) {
 					</Box>
 					<Box className={styles.b_body}>
 						{/* There wil also be an option to insert content if excerpt is not present. */}
-						{StripTags(excerpt)}
+						{prepareExcerpt(excerpt)}
 					</Box>
 				</Box>
 			</ChakraLink>

src/helper-functions/index.js

@@ -4,6 +4,7 @@ import humanFormat from 'human-format';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
 import _ from "lodash";
+import StripTags from "../escaping/StripTags";
 
 TimeAgo.addLocale(en);
 
@@ -95,3 +96,14 @@ export const doesSlugMatchesCustomPage = (slug) => {
 
 	return pagesToExclude.includes(slug);
 }
+
+export const prepareExcerpt = (excerpt) => {
+	const regex = /<p>(.*?)<\/p>/s;
+	const match = excerpt.match(regex);
+
+	if (match) {
+	  excerpt = match[1];
+	}
+
+	return StripTags(excerpt);
+}

styles/globals.css

@@ -19,12 +19,19 @@ a {
 }
 
 .notice a,
+.footer a,
 .container a {
   color: #71e3ff;
   transition: color 1s, text-shadow 0.5s;
 }
 
+.newsletter-subscribe a,
+.notice a {
+  text-decoration: underline;
+}
+
 .notice a:hover,
+.footer a:hover,
 .container a:hover {
   color: #b6fdff;
 }