feat: Add site notice to front-end

Signed-off-by: Souptik Datta <souptikdatta2001@gmail.com>
Souptik2001 · Nov 30, 2024 · 9c6517f · 9c6517f
1 parent cc0b4e0
commit 9c6517f
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 12 deletions.
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,7 +1,11 @@
-import { Box } from "@chakra-ui/react";
+import { Box, Icon } from "@chakra-ui/react";
 import Footer from './Footer';
 import NavBar from "./Navbar";
 import Seo from "./Seo/Seo";
+import Notice from "./Notice";
+import Sticky from "./Sticky";
+import Link from 'next/link';
+import { GrAnnounce, GrWordpress } from "react-icons/gr";
 
 const Layout = ({
 	children,
@@ -10,6 +14,7 @@ const Layout = ({
 	customPageTitle,
 	customPageDescription,
     customSeoMeta,
+	displayWPNotice = 'no',
     customPublishedTime,
 }) => {
 
@@ -23,7 +28,20 @@ const Layout = ({
 				customPageDescription={customPageDescription}
 				customSeoMeta={customSeoMeta}
             />
-			<NavBar position="sticky" top="0" px={["15px", null, null, "92px"]} py={10} marginBottom={["46px", null, "70px"]} borderBottom="1px solid rgba(255, 255, 255, 0.2)" background="rgba(0, 0, 0, 0.6)" backdropFilter="blur(6px)" />
+			<Sticky
+				zIndex="20"
+			>
+				{
+					displayWPNotice === 'yes' && data?.link && data?.link !== ''
+					&&
+					<Notice>
+						<p>
+							<Icon as={GrAnnounce} color="white" /> <Icon as={GrWordpress} color="white" /> Check out the <Link href={data.link} legacyBehavior>WordPress site</Link> for the same content in a new experience!
+						</p>
+				</Notice>
+				}
+				<NavBar />
+			</Sticky>
 				{ children }
 			<Footer px={["15px", null, null, "128px"]} py={["32px", null, null, "64px"]}  />
 		</Box>

diff --git a/components/Navbar.js b/components/Navbar.js
@@ -9,7 +9,7 @@ const NavBar = (props) => {
   const toggle = () => setIsOpen(!isOpen);
 
   return (
-    <NavBarContainer background="black" textAlign="center" zIndex="20" {...props}>
+    <NavBarContainer textAlign="center" zIndex="20" {...props}>
       <LogoAndToggleIconContainer zIndex="10">
         <Link style={{textDecoration: "none"}} href="/"><Box fontSize="30px" cursor="pointer">✍</Box></Link>
         <MenuToggle width={["25%", null, "auto"]} toggle={toggle} isOpen={isOpen} />
@@ -109,6 +109,14 @@ const NavBarContainer = ({ children, ...props }) => {
       justifyContent="space-between"
       flexDirection="row"
       wrap="wrap"
+      position="sticky"
+      top="0"
+      px={["15px", null, null, "92px"]}
+      py={5}
+      marginBottom={["46px", null, "70px"]}
+      borderBottom="1px solid rgba(255, 255, 255, 0.2)"
+      background="rgba(0, 0, 0, 0.6)"
+      backdropFilter="blur(6px)"
       {...props}
     >
       {children}

diff --git a/components/Notice.js b/components/Notice.js
@@ -0,0 +1,29 @@
+import { Flex } from "@chakra-ui/react";
+
+const Notice = ({ children, ...props }) => {
+  return (
+    <Flex
+		className="notice"
+		justifyContent="center"
+		alignItems="center"
+		letterSpacing="4px"
+		wordSpacing="12px"
+		fontSize="13px"
+		color={"white"}
+		position="sticky"
+		top="0"
+		px={["15px", null, null, "92px"]}
+		py={2}
+		borderBottom="1px solid rgba(255, 255, 255, 0.2)"
+		background="rgba(0, 0, 0, 0.6)"
+		backdropFilter="blur(6px)"
+		textAlign="center"
+		zIndex={20}
+		{...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default Notice;
diff --git a/components/Sticky.js b/components/Sticky.js
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+
+const Sticky = ({ children, ...props }) => {
+  return (
+    <Box
+		position="sticky"
+		top="0"
+		width={"100%"}
+		{...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Sticky;
diff --git a/pages/[slug].js b/pages/[slug].js
@@ -9,12 +9,13 @@ import StripTags from '../src/escaping/StripTags';
 import { doesSlugMatchesCustomPage } from '../src/helper-functions';
 import styles from '../styles/Blog.module.css';
 
-export default function Blog({frontend, slug}) {
+export default function Blog({frontend, displayWPNotice, slug}) {
 
 	return(
 		<Layout
-		data={frontend?.data}
+		data={frontend?.data?.page}
 		yoastSeoData={frontend?.data?.page?.seo}
+		displayWPNotice={displayWPNotice}
 		>
 			<Head>
 		  		<title>{`${frontend?.data?.page?.title} | Souptik's Blog`}</title>
@@ -50,6 +51,7 @@ export async function getStaticProps({params}){
 						blocksJSON
 						date
 						title
+						link
 						author {
 							node {
 							name
@@ -118,7 +120,8 @@ export async function getStaticProps({params}){
 		return {
 			props: {
 				slug,
-				frontend: frontendData
+				frontend: frontendData,
+				displayWPNotice: process.env.DISPLAY_WP_SITE_NOTICE,
 			}
 		}
 	} catch(error) {

diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -18,7 +18,7 @@ const parseDate = (rawDate) => {
 
 }
 
-export default function Blog({frontend, slug}) {
+export default function Blog({frontend, displayWPNotice, slug}) {
 
 	const authorNameHoverCSS = {
 		textDecoration: "none",
@@ -41,8 +41,9 @@ export default function Blog({frontend, slug}) {
 
 	return(
 		<Layout
-		data={frontend?.data}
+		data={frontend?.data?.post}
 		yoastSeoData={frontend?.data?.post?.seo}
+		displayWPNotice={displayWPNotice}
 		>
 			<Head>
 		  		<title>{`${frontend?.data?.post?.title} | Souptik's Blog`}</title>
@@ -81,6 +82,7 @@ export async function getStaticProps({params}){
 						blocksJSON
 						date
 						title
+						link
 						author {
 							node {
 								name
@@ -152,7 +154,8 @@ export async function getStaticProps({params}){
 		return {
 			props: {
 				slug,
-				frontend: frontendData
+				frontend: frontendData,
+				displayWPNotice: process.env.DISPLAY_WP_SITE_NOTICE,
 			}
 		}
 	} catch(error) {

diff --git a/pages/index.js b/pages/index.js
@@ -9,7 +9,7 @@ import Layout from '../components/Layout';
 import client from '../src/apollo/Client';
 import styles from '../styles/Home.module.css';
 
-export default function Home({posts, seoData}) {
+export default function Home({posts, displayWPNotice, seoData}) {
   const loadMore = () => {
     updateBlogs(searchTerm, nextCursor);
   }
@@ -55,6 +55,10 @@ export default function Home({posts, seoData}) {
       siteName: "Souptik's Blog",
       imageURL: seoData?.openGraph?.frontPage?.image?.link
     }}
+    data={{
+      link: process.env.NEXT_PUBLIC_BACKEND_URL,
+    }}
+    displayWPNotice={displayWPNotice}
     >
       <Head>
         <title>{"Souptik's Blog"}</title>
@@ -199,6 +203,7 @@ export async function getStaticProps() {
       props: {
         posts,
         seoData: seoData?.data?.seo,
+        displayWPNotice: process.env.DISPLAY_WP_SITE_NOTICE,
       }
     };
   } catch(error) {

diff --git a/pages/user/[slug].js b/pages/user/[slug].js
@@ -10,7 +10,7 @@ import StripTags from '../../src/escaping/StripTags';
 import styles from '../../styles/Blog.module.css';
 import userStyles from '../../styles/User.module.css';
 
-export default function Blog({user, slug}) {
+export default function User({user, displayWPNotice, slug}) {
 
 	const loadMore = async () => {
 
@@ -58,15 +58,24 @@ export default function Blog({user, slug}) {
 
 	registered = ( registered.length > 0 ) ? registered[0] : '';
 
+	// We need to modify the object, therefore create a new one, otherwise the original object is not editable.
+	user = {...user};
+
+	if ( user.url && user.uri ) {
+		user.link = user?.url + user?.uri;
+	}
+
 	return(
 		<Layout
+		data={user}
 		customPageTitle={`${authorName} | Souptik's Blog`}
 		customPageDescription={`Know about our user - "${authorName}"`}
 		customSeoMeta={{
 			title: `${authorName} | Souptik's Blog`,
 			description: `Know about our user "${authorName}"`,
 			siteName: "Souptik's Blog"
 		}}
+		displayWPNotice={displayWPNotice}
 		>
 			<Head>
 		  		<title>{`${authorName} | Souptik's Blog`}</title>
@@ -157,6 +166,8 @@ export async function getStaticProps({params}){
 						name
 						nicename
 						nickname
+						url
+						uri
 						avatar {
 							url
 						}
@@ -197,7 +208,8 @@ export async function getStaticProps({params}){
 		return {
 			props: {
 				slug,
-				user: user?.data?.user
+				user: user?.data?.user,
+				displayWPNotice: process.env.DISPLAY_WP_SITE_NOTICE,
 			}
 		}
 	} catch(error) {

diff --git a/styles/globals.css b/styles/globals.css
@@ -18,11 +18,13 @@ a {
   text-decoration: none;
 }
 
+.notice a,
 .container a {
   color: #71e3ff;
   transition: color 1s, text-shadow 0.5s;
 }
 
+.notice a:hover,
 .container a:hover {
   color: #b6fdff;
 }