Add SEO

Author: imranhsayed

pages/blog/[slug].js

@@ -10,14 +10,16 @@ import axios from 'axios';
  */
 import Layout from '../../src/components/layout';
 import { FALLBACK, handleRedirectsAndReturnData } from '../../src/utils/slug';
-import { sanitize } from '../../src/utils/miscellaneous';
+import { getFormattedDate, sanitize } from '../../src/utils/miscellaneous';
 import { HEADER_FOOTER_ENDPOINT } from '../../src/utils/constants/endpoints';
 import { getPost, getPosts } from '../../src/utils/blog';
 import Image from '../../src/components/image';
 import PostMeta from '../../src/components/post-meta';
 
 const Post = ( { headerFooter, postData } ) => {
 	const router = useRouter();
+	
+	console.log( 'postData', postData );
 
 	/**
 	 * If the page is not yet generated, this will be displayed
@@ -28,20 +30,21 @@ const Post = ( { headerFooter, postData } ) => {
 	}
 
 	return (
-		<Layout headerFooter={ headerFooter || {} } seo={ null }>
+		<Layout headerFooter={ headerFooter || {} } seo={ postData?.yoast_head_json ?? {} }>
 			<div className="mb-8 w-4/5 m-auto">
 				<figure className="overflow-hidden mb-4">
 					<Image
-						sourceUrl={ postData?.attachment_image?.img_src?.[ 0 ] ?? '' }
-						title={ postData?.title ?? '' }
-						width={ postData?.attachment_image?.img_src?.[ 1 ] ?? '600' }
-						height={ postData?.attachment_image?.img_src?.[ 2 ] ?? '400' }
+						sourceUrl={ postData?._embedded[ 'wp:featuredmedia' ]?.[ 0 ]?.source_url ?? '' }
+						title={ postData?.title?.rendered ?? '' }
+						width="600"
+						height="400"
 						layout="fill"
 						containerClassNames="w-full h-600px"
 					/>
 				</figure>
-				<PostMeta post={ postData }/>
-				<div dangerouslySetInnerHTML={ { __html: sanitize( postData?.content ?? '' ) } }/>
+				<PostMeta date={ getFormattedDate( postData?.date ?? '' ) } authorName={ postData?._embedded?.author?.[0]?.name ?? '' }/>
+				<h1 dangerouslySetInnerHTML={ { __html: sanitize( postData?.title?.rendered ?? '' ) } }/>
+				<div dangerouslySetInnerHTML={ { __html: sanitize( postData?.content?.rendered ?? '' ) } }/>
 			</div>
 		</Layout>
 	);
@@ -51,13 +54,13 @@ export default Post;
 
 export async function getStaticProps( { params } ) {
 	const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
-	const { data: postData } = await getPost( params?.slug ?? '' );
-	// params?.slug ?? ''
+	// const { data: postData } = await getPost( params?.slug ?? '' );
+	const postData = await getPost( params?.slug ?? '' );
 
 	const defaultProps = {
 		props: {
 			headerFooter: headerFooterData?.data ?? {},
-			postData: postData?.post_data ?? {}
+			postData: postData?.[0] ?? {}
 		},
 		/**
 		 * Revalidate means that if a new request comes to server, then every 1 sec it will check
@@ -67,7 +70,7 @@ export async function getStaticProps( { params } ) {
 		revalidate: 1,
 	};
 
-	return handleRedirectsAndReturnData( defaultProps, postData, 'post_data' );
+	return handleRedirectsAndReturnData( defaultProps, postData );
 }
 
 /**

src/components/post-meta/index.js

@@ -1,8 +1,8 @@
-const PostMeta = ({ post }) => {
+const PostMeta = ({ date, authorName }) => {
 	return (
 		<div className="font-bold mb-2">
-			<time className="text-brand-wild-blue" dateTime={ post?.date ?? '' }>{ post?.date ?? '' }</time>
-			<span className="ml-2"><span className="italic mr-2">by</span>{ post?.meta?.author_name ?? '' }</span>
+			<time className="text-brand-wild-blue" dateTime={ date || '' }>{ date || '' }</time>
+			<span className="ml-2"><span className="italic mr-2">by</span>{ authorName || '' }</span>
 		</div>
 	);
 }

src/components/posts/post.js

@@ -32,7 +32,7 @@ const Post = ( { post } ) => {
 				</figure>
 				</a>
 			</Link>
-			<PostMeta post={ post }/>
+			<PostMeta date={ post?.date ?? '' } authorName={ post?.meta?.author_name ?? '' }/>
 			<Link href={ `/blog/${ post?.slug }/` }>
 				<a>
 					<h2 className="font-bold mb-3 text-lg text-brand-gun-powder font-bold uppercase hover:text-blue-500"

src/components/seo/index.js

@@ -1,5 +1,6 @@
 import { NextSeo } from 'next-seo';
 import PropTypes from 'prop-types';
+import { isArray } from 'lodash';
 
 /**
  * Custom SEO component
@@ -52,7 +53,7 @@ const Seo = ( { seo, uri } ) => {
 				description: og_description,
 				images: [
 					{
-						url: og_image.length ? ( og_image[0]?.url ?? '' ) : '',
+						url: isArray( og_image ) ? ( og_image[0]?.url ?? '' ) : '',
 						width: 1280,
 						height: 720,
 					},

src/utils/blog.js

@@ -40,22 +40,16 @@ export const getPosts = async ( pageNo = 1 ) => {
  * @return {Promise<void>}
  */
 export const getPost = async ( postSlug = '' ) => {
-	return await axios.get( `${ GET_POST_ENDPOINT }?post_slug=${ postSlug }` )
+	return await axios.get( `${ GET_POST_ENDPOINT }?slug=${ postSlug }&_embed` )
 		.then( res => {
-			if ( 200 === res.data.status ) {
-				return res;
+			if ( 200 === res.status ) {
+				return res.data;
 			} else {
-				return {
-					post_data: {},
-					error: 'Post not found',
-				};
+				return [];
 			}
 		} )
 		.catch( err => {
 			console.log( err.response.data.message )
-			return {
-				post_data: {},
-				error: err.response.data.message
-			};
+			return [];
 		} );
 };

src/utils/constants/endpoints.js

@@ -1,6 +1,6 @@
 export const HEADER_FOOTER_ENDPOINT = `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`;
 export const GET_POSTS_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/posts`;
-export const GET_POST_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/post`;
+export const GET_POST_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/wp/v2/posts`;
 
 /**
  * Cart

src/utils/miscellaneous.js

@@ -26,6 +26,18 @@ export const replaceBackendWithFrontendUrl = ( data ) => {
 	// First replace all the backend-url with front-end url
 	let formattedData = data.replaceAll( process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL, process.env.NEXT_PUBLIC_SITE_URL );
 
-	// Replace only the upload urls for images back to back to back-end url, since images are hosted in the backend.
+	// Replace only the upload urls for images to back-end url, since images are hosted in the backend.
 	return formattedData.replaceAll( `${ process.env.NEXT_PUBLIC_SITE_URL }/wp-content/uploads`, `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-content/uploads` );
 }
+
+/**
+ * Get Formatted Date.
+ * @param {String} theDate The date to be formatted.
+ * @param {String} locales locales.
+ *
+ * @return {string} Formatted Date.
+ */
+export const getFormattedDate = ( theDate = '', locales = 'en-us' ) => {
+	const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
+	return new Date( theDate ).toLocaleDateString( locales, options );
+};

src/utils/slug.js

@@ -26,7 +26,7 @@ export const isCustomPageUri = ( uri ) => {
  * @param field
  * @return {{notFound: boolean}|*|{redirect: {destination: string, statusCode: number}}}
  */
-export const handleRedirectsAndReturnData = ( defaultProps, data, field ) => {
+export const handleRedirectsAndReturnData = ( defaultProps, data, field = '' ) => {
 
 	// If no data is available then redirect to 503.
 	if ( isEmpty( data ) ) {