Skip to content

Commit 21c6a40

Browse files
imranhsayedimranhsayed
committed
Update styles
1 parent 7965c98 commit 21c6a40

File tree

8 files changed

+173
-28
lines changed

8 files changed

+173
-28
lines changed

‎pages/404.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* External Link.
3+
*/
4+
import Link from 'next/link';
5+
import axios from 'axios';
6+
7+
/**
8+
* Internal Link.
9+
*/
10+
import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
11+
import Layout from '../src/components/layout';
12+
13+
function Error404( { headerFooter } ) {
14+
return (
15+
<Layout headerFooter={ headerFooter || {} } seo={ null }>
16+
<div className="h-almost-screen">
17+
<section className="text-gray-600 body-font">
18+
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
19+
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
20+
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
21+
Sorry No result found
22+
</h1>
23+
<div className="flex justify-center">
24+
<Link href="/">
25+
<a className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
26+
Back to Home
27+
</a>
28+
</Link>
29+
</div>
30+
</div>
31+
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
32+
<img
33+
className="object-cover object-center rounded"
34+
alt="not found"
35+
src="https://dummyimage.com/620x400"
36+
/>
37+
</div>
38+
</div>
39+
</section>
40+
</div>
41+
</Layout>
42+
);
43+
}
44+
45+
export default Error404;
46+
47+
export async function getStaticProps() {
48+
49+
const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
50+
51+
return {
52+
props: {
53+
headerFooter: headerFooterData?.data ?? {},
54+
},
55+
};
56+
}

‎pages/blog/[slug].js

+23-9
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,36 @@ import { FALLBACK, handleRedirectsAndReturnData } from '../../src/utils/slug';
1313
import { sanitize } from '../../src/utils/miscellaneous';
1414
import { HEADER_FOOTER_ENDPOINT } from '../../src/utils/constants/endpoints';
1515
import { getPost, getPosts } from '../../src/utils/blog';
16+
import Image from '../../src/components/image';
17+
import PostMeta from '../../src/components/post-meta';
1618

1719
const Post = ( { headerFooter, postData } ) => {
1820
const router = useRouter();
1921

20-
console.log( 'postData', postData );
21-
22-
// If the page is not yet generated, this will be displayed
23-
// initially until getStaticProps() finishes running
22+
/**
23+
* If the page is not yet generated, this will be displayed
24+
* initially until getStaticProps() finishes running
25+
*/
2426
if ( router.isFallback ) {
2527
return <div>Loading...</div>;
2628
}
2729

2830
return (
2931
<Layout headerFooter={ headerFooter || {} } seo={ null }>
30-
{/*<div dangerouslySetInnerHTML={ { __html: sanitize( data?.post?.content ?? {} ) } }/>*/}
32+
<div className="mb-8 w-4/5 m-auto">
33+
<figure className="overflow-hidden mb-4">
34+
<Image
35+
sourceUrl={ postData?.attachment_image?.img_src?.[ 0 ] ?? '' }
36+
title={ postData?.title ?? '' }
37+
width={ postData?.attachment_image?.img_src?.[ 1 ] ?? '600' }
38+
height={ postData?.attachment_image?.img_src?.[ 2 ] ?? '400' }
39+
layout="fill"
40+
containerClassNames="w-full h-600px"
41+
/>
42+
</figure>
43+
<PostMeta post={ postData }/>
44+
<div dangerouslySetInnerHTML={ { __html: sanitize( postData?.content ?? '' ) } }/>
45+
</div>
3146
</Layout>
3247
);
3348
};
@@ -37,11 +52,12 @@ export default Post;
3752
export async function getStaticProps( { params } ) {
3853
const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
3954
const { data: postData } = await getPost( params?.slug ?? '' );
55+
// params?.slug ?? ''
4056

4157
const defaultProps = {
4258
props: {
4359
headerFooter: headerFooterData?.data ?? {},
44-
postData: postData || {}
60+
postData: postData?.post_data ?? {}
4561
},
4662
/**
4763
* Revalidate means that if a new request comes to server, then every 1 sec it will check
@@ -50,10 +66,8 @@ export async function getStaticProps( { params } ) {
5066
*/
5167
revalidate: 1,
5268
};
53-
54-
return defaultProps;
5569

56-
// return handleRedirectsAndReturnData( defaultProps, postData, 'post' );
70+
return handleRedirectsAndReturnData( defaultProps, postData, 'post_data' );
5771
}
5872

5973
/**

‎pages/blog/index.js

+6
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ import Pagination from '../../src/components/pagination';
1212
import { HEADER_FOOTER_ENDPOINT } from '../../src/utils/constants/endpoints';
1313
import { getPosts } from '../../src/utils/blog';
1414

15+
/**
16+
* Blog Component.
17+
*
18+
* @param {Object} headerFooter Header Footer Data.
19+
* @param {Object} postsData Post Data.
20+
*/
1521
const Blog = ( { headerFooter, postsData } ) => {
1622
console.log( 'postsData', postsData );
1723
return (

‎src/components/post-meta/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const PostMeta = ({ post }) => {
2+
return (
3+
<div className="font-bold mb-2">
4+
<time className="text-brand-wild-blue" dateTime={ post?.date ?? '' }>{ post?.date ?? '' }</time>
5+
<span className="ml-2"><span className="italic mr-2">by</span>{ post?.meta?.author_name ?? '' }</span>
6+
</div>
7+
);
8+
}
9+
10+
export default PostMeta;

‎src/components/posts/post.js

+33-15
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,45 @@
1+
/**
2+
* External Dependencies.
3+
*/
14
import Link from 'next/link';
5+
6+
/**
7+
* Internal Dependencies.
8+
*/
29
import Image from '../image';
310
import { sanitize } from '../../utils/miscellaneous';
11+
import PostMeta from '../post-meta';
412

5-
const Post = ( {post} ) => {
6-
13+
/**
14+
* Post Component.
15+
*
16+
* @param {Object} post Post.
17+
*/
18+
const Post = ( { post } ) => {
719
return (
820
<div className="mb-8">
9-
<figure className="overflow-hidden mb-4">
10-
<Image
11-
sourceUrl={ post?.attachment_image?.img_src ?? '' }
12-
title={ post?.title ?? '' }
13-
width="400"
14-
height="225"
15-
layout="fill"
16-
containerClassNames="w-96 sm:-w-600px md:w-400px h-56 sm:h-338px md:h-225px"
17-
/>
18-
</figure>
19-
<Link href={`/blog/${post?.slug}/`}>
21+
<Link href={ `/blog/${ post?.slug }/` }>
22+
<a>
23+
<figure className="overflow-hidden mb-4">
24+
<Image
25+
sourceUrl={ post?.attachment_image?.img_src?.[ 0 ] ?? '' }
26+
title={ post?.title ?? '' }
27+
width="400"
28+
height="225"
29+
layout="fill"
30+
containerClassNames="w-96 sm:-w-600px md:w-400px h-56 sm:h-338px md:h-225px"
31+
/>
32+
</figure>
33+
</a>
34+
</Link>
35+
<PostMeta post={ post }/>
36+
<Link href={ `/blog/${ post?.slug }/` }>
2037
<a>
21-
<h2 className="font-bold mb-3 text-lg hover:text-blue-500" dangerouslySetInnerHTML={{__html: sanitize( post?.title ?? '' )}}/>
38+
<h2 className="font-bold mb-3 text-lg text-brand-gun-powder font-bold uppercase hover:text-blue-500"
39+
dangerouslySetInnerHTML={ { __html: sanitize( post?.title ?? '' ) } }/>
2240
</a>
2341
</Link>
24-
<div dangerouslySetInnerHTML={{__html: sanitize( post?.excerpt ?? '' )}}/>
42+
<div dangerouslySetInnerHTML={ { __html: sanitize( post?.excerpt ?? '' ) } }/>
2543
</div>
2644
);
2745
};

‎src/utils/blog.js

+23-4
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,19 @@ export const getPosts = async ( pageNo = 1 ) => {
1919
if ( 200 === res.data.status ) {
2020
return res;
2121
} else {
22-
return {};
22+
return {
23+
posts_data: {},
24+
error: 'Post not found',
25+
};
2326
}
2427
} )
25-
.catch( err => console.log( err.response.data.message ) );
28+
.catch( err => {
29+
console.log( err.response.data.message )
30+
return {
31+
posts_data: {},
32+
error: err.response.data.message
33+
};
34+
} );
2635
};
2736

2837
/**
@@ -34,10 +43,20 @@ export const getPost = async ( postSlug = '' ) => {
3443
return await axios.get( `${ GET_POST_ENDPOINT }?post_slug=${ postSlug }` )
3544
.then( res => {
3645
if ( 200 === res.data.status ) {
46+
console.log( 'res', res );
3747
return res;
3848
} else {
39-
return {};
49+
return {
50+
post_data: {},
51+
error: 'Post not found',
52+
};
4053
}
4154
} )
42-
.catch( err => console.log( err.response.data.message ) );
55+
.catch( err => {
56+
console.log( err.response.data.message )
57+
return {
58+
post_data: {},
59+
error: err.response.data.message
60+
};
61+
} );
4362
};

‎src/utils/slug.js

+17
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import { isEmpty } from 'lodash';
22

33
export const FALLBACK = 'blocking';
44

5+
/**
6+
* Check if it's a custom page uri.
7+
*
8+
*
9+
* @param uri
10+
* @return {boolean}
11+
*/
512
export const isCustomPageUri = ( uri ) => {
613
const pagesToExclude = [
714
'/',
@@ -11,8 +18,17 @@ export const isCustomPageUri = ( uri ) => {
1118
return pagesToExclude.includes( uri );
1219
};
1320

21+
/**
22+
* Handle Redirect Data.
23+
*
24+
* @param defaultProps
25+
* @param data
26+
* @param field
27+
* @return {{notFound: boolean}|*|{redirect: {destination: string, statusCode: number}}}
28+
*/
1429
export const handleRedirectsAndReturnData = ( defaultProps, data, field ) => {
1530

31+
// If no data is available then redirect to 503.
1632
if ( isEmpty( data ) ) {
1733
return {
1834
redirect: {
@@ -22,6 +38,7 @@ export const handleRedirectsAndReturnData = ( defaultProps, data, field ) => {
2238
};
2339
}
2440

41+
// If data for a given field is not available, redirect to 404.
2542
if ( field && isEmpty( data?.[ field ] ) ) {
2643
return {
2744
// returns the default 404 page with a status code of 404

‎tailwind.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ module.exports = {
1111
'bright-grey': '#b1b1b1',
1212
'gunsmoke-grey': '#8d8d8d',
1313
'royal-blue': '#3b82f6',
14+
'wild-blue': '#858Fbb',
15+
'gun-powder': '#434656',
1416
}
1517
},
1618
fontFamily: {
@@ -52,6 +54,9 @@ module.exports = {
5254
minHeight: {
5355
'50vh': '50vh'
5456
},
57+
height: {
58+
'600px': '600px',
59+
},
5560
lineHeight: {
5661
'0': '0',
5762
'1.6': '1.6',

0 commit comments

Comments
 (0)