Skip to content

Commit e1c0cb9

Browse files
imranhsayedimranhsayed
authored
Merge pull request #22 from imranhsayed/feature/single-post-page
Single post page and grid on blogs page
2 parents c60dc16 + 11fb0d3 commit e1c0cb9

File tree

20 files changed

+445
-84
lines changed

20 files changed

+445
-84
lines changed

‎frontend/.env-example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_WORDPRESS_SITE_URL=http://localhost:8020

‎frontend/package-lock.json‎

Lines changed: 21 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,41 @@
44
"description": "[![Project Status: Active.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) ![Stars](https://img.shields.io/github/stars/imranhsayed/nextjs-wordpress-theme?label=%E2%AD%90%20Stars) ![Forks](https://img.shields.io/github/forks/imranhsayed/nextjs-wordpress-theme?color=%23ff69b4) ![Contributors](https://img.shields.io/github/contributors/imranhsayed/nextjs-wordpress-theme?color=blue) ![Follow](https://img.shields.io/github/followers/imranhsayed?label=Please%20follow%20%20to%20support%20my%20work%20%F0%9F%99%8F&style=social)",
55
"main": "index.js",
66
"scripts": {
7-
"dev": "NODE_OPTIONS='--inspect' next",
8-
"build": "next build",
9-
"start": "next start",
10-
"cypress:open": "cypress open"
7+
"dev": "NODE_OPTIONS='--inspect' next",
8+
"build": "next build",
9+
"start": "next start",
10+
"cypress:open": "cypress open"
1111
},
1212
"repository": {
13-
"type": "git",
14-
"url": "git+https://github.com/imranhsayed/nextjs-wordpress-theme.git"
13+
"type": "git",
14+
"url": "git+https://github.com/imranhsayed/nextjs-wordpress-theme.git"
1515
},
1616
"keywords": [],
1717
"author": "",
1818
"license": "ISC",
1919
"bugs": {
20-
"url": "https://github.com/imranhsayed/nextjs-wordpress-theme/issues"
20+
"url": "https://github.com/imranhsayed/nextjs-wordpress-theme/issues"
2121
},
2222
"homepage": "https://github.com/imranhsayed/nextjs-wordpress-theme#readme",
2323
"dependencies": {
24-
"@apollo/client": "^3.1.4",
25-
"dompurify": "^2.0.15",
26-
"graphql": "^15.3.0",
27-
"next": "^9.5.3",
28-
"nprogress": "^0.2.0",
29-
"prop-types": "^15.7.2",
30-
"react": "^16.13.1",
31-
"react-dom": "^16.13.1",
32-
"sass": "^1.26.11"
24+
"@apollo/client": "^3.1.4",
25+
"dompurify": "^2.0.15",
26+
"graphql": "^15.3.0",
27+
"lodash": "^4.17.20",
28+
"next": "^9.5.3",
29+
"nprogress": "^0.2.0",
30+
"prop-types": "^15.7.2",
31+
"react": "^16.13.1",
32+
"react-dom": "^16.13.1",
33+
"react-lazy-load-image-component": "^1.5.0",
34+
"sass": "^1.26.11"
3335
},
3436
"devDependencies": {
35-
"cypress": "^5.1.0",
36-
"postcss-flexbugs-fixes": "^4.2.1",
37-
"postcss-import": "^12.0.1",
38-
"postcss-preset-env": "^6.7.0",
39-
"precss": "^4.0.0",
40-
"tailwindcss": "^1.8.10"
37+
"cypress": "^5.1.0",
38+
"postcss-flexbugs-fixes": "^4.2.1",
39+
"postcss-import": "^12.0.1",
40+
"postcss-preset-env": "^6.7.0",
41+
"precss": "^4.0.0",
42+
"tailwindcss": "^1.8.10"
4143
}
42-
}
44+
}

‎frontend/pages/404.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const NotFound = () => (
2+
<h1>404</h1>
3+
)
4+
5+
export default NotFound

‎frontend/pages/blog/[slug].js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import client from "../../src/apollo/client";
2+
import { GET_POST } from "../../src/queries/get-post";
3+
import Layout from "../../src/components/layout";
4+
import { GET_POST_SLUGS } from "../../src/queries/get-posts";
5+
import { sanitize } from "../../src/utils/functions";
6+
import Image from "../../src/components/image";
7+
8+
const SingleBlog = ({menus, post, path}) => {
9+
return (
10+
<Layout menus={menus}>
11+
<div className="flex my-8">
12+
<div className="w-3/4">
13+
<h1 className="mb-4" dangerouslySetInnerHTML={{__html: sanitize(post.title)}}/>
14+
<figure className="overflow-hidden">
15+
<Image { ...post?.large?.node } placeholder={ post?.thumbnail?.node } />
16+
</figure>
17+
<div dangerouslySetInnerHTML={{__html: sanitize(post.content)}}/>
18+
</div>
19+
<div className="w-1/4"/>
20+
</div>
21+
</Layout>
22+
)
23+
}
24+
25+
export default SingleBlog
26+
27+
export async function getStaticProps({ params }) {
28+
const { data } = await client.query({
29+
query: GET_POST,
30+
variables: {
31+
slug: params?.slug ?? ''
32+
}
33+
});
34+
35+
return {
36+
props: {
37+
menus: data?.headerMenus?.edges ?? [],
38+
post: data?.post ?? {},
39+
path: params?.slug
40+
},
41+
};
42+
}
43+
44+
export async function getStaticPaths() {
45+
const { data } = await client.query({
46+
query: GET_POST_SLUGS,
47+
});
48+
49+
const pathsData = [];
50+
51+
data.posts.edges.map( post => {
52+
pathsData.push(
53+
{ params: { slug: post.node.slug } }
54+
)
55+
} )
56+
57+
return {
58+
paths: pathsData,
59+
fallback: false
60+
};
61+
}

‎frontend/pages/blog/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import Layout from "../../src/components/layout";
33
import { GET_POSTS } from "../../src/queries/get-posts";
44
import { PER_PAGE_FIRST, totalPagesCount } from "../../src/utils/pagination";
55
import Pagination from "../../src/components/blog/pagination";
6+
import Posts from "../../src/components/blog/posts";
67

78
const Blog = ({ menus, posts }) => {
89
const pagesCount = totalPagesCount(posts?.pageInfo?.offsetPagination?.total ?? 0);
910

1011
return (
1112
<Layout menus={menus}>
12-
{(posts?.edges ?? []).map((post) => {
13-
return <p key={post?.node?.id ?? ""}>{post?.node?.title ?? ""}</p>;
14-
})}
13+
<Posts posts={posts}/>
1514
<Pagination pagesCount={pagesCount} postName="blog" />
1615
</Layout>
1716
);

‎frontend/pages/blog/page/[page_no].js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { GET_POSTS, GET_TOTAL_POSTS_COUNT } from "../../../src/queries/get-posts
44
import client from "../../../src/apollo/client";
55
import Layout from "../../../src/components/layout";
66
import Pagination from "../../../src/components/blog/pagination";
7+
import Posts from "../../../src/components/blog/posts";
78

89
const Page = ({ menus, posts }) => {
910
const router = useRouter();
@@ -22,9 +23,7 @@ const Page = ({ menus, posts }) => {
2223

2324
return (
2425
<Layout menus={menus}>
25-
{(posts?.edges ?? []).map((post) => {
26-
return <p key={post?.node?.id ?? ""}>{post?.node?.title ?? ""}</p>;
27-
})}
26+
<Posts posts={posts}/>
2827
<Pagination pagesCount={pagesCount} postName="blog" />
2928
</Layout>
3029
);

‎frontend/src/components/blog/post/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { sanitize } from "../../../utils/functions";
2+
import Link from "next/link";
3+
import Image from "../../image";
4+
5+
const Post = ({post}) => {
6+
return (
7+
<div>
8+
<figure className="overflow-hidden">
9+
<Image { ...post?.mediumLarge?.node } placeholder={ post?.thumbnail?.node } />
10+
</figure>
11+
<Link href="/blog/[slug]" as={`/blog/${post?.slug}`}>
12+
<a>
13+
<h2 dangerouslySetInnerHTML={{__html: sanitize( post?.title )}}/>
14+
</a>
15+
</Link>
16+
<div dangerouslySetInnerHTML={{__html: sanitize( post?.excerpt )}}/>
17+
</div>
18+
);
19+
}
20+
21+
export default Post

‎frontend/src/components/blog/posts/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {isEmpty} from 'lodash';
2+
import Post from "../post";
3+
4+
const Posts = ({posts}) => {
5+
6+
if ( isEmpty(posts) ) {
7+
return null;
8+
}
9+
10+
return (
11+
<div className="flex flex-wrap -mb-4">
12+
{
13+
( posts?.edges ?? []).map((post) => {
14+
return (
15+
<div className="w-1/3 mb-4 px-2">
16+
<Post key={post?.node?.id ?? ""} post={post.node}/>
17+
</div>
18+
);
19+
})
20+
}
21+
</div>
22+
)
23+
}
24+
25+
export default Posts
26+
27+

‎frontend/src/components/header/navbar.js‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,59 @@ import React from "react";
44
const Navbar = ({ menus }) => {
55
return (
66
<nav className="flex items-center justify-between flex-wrap bg-teal-500 p-6">
7-
<div className="flex items-center flex-shrink-0 text-white mr-6">
8-
<svg
9-
className="fill-current h-8 w-8 mr-2"
10-
width="54"
11-
height="54"
12-
viewBox="0 0 54 54"
13-
xmlns="http://www.w3.org/2000/svg"
14-
>
15-
<path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
16-
</svg>
17-
<Link href="/">
18-
<a>
7+
<div className="container mx-auto flex">
8+
<div className="flex items-center flex-shrink-0 text-white mr-6">
9+
<svg
10+
className="fill-current h-8 w-8 mr-2"
11+
width="54"
12+
height="54"
13+
viewBox="0 0 54 54"
14+
xmlns="http://www.w3.org/2000/svg"
15+
>
16+
<path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
17+
</svg>
18+
<Link href="/">
19+
<a>
1920
<span className="font-semibold text-xl tracking-tight">
2021
Next.js WordPress Theme
2122
</span>
22-
</a>
23-
</Link>
24-
</div>
25-
<div className="block lg:hidden">
26-
<button className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
27-
<svg
28-
className="fill-current h-3 w-3"
29-
viewBox="0 0 20 20"
30-
xmlns="http://www.w3.org/2000/svg"
31-
>
32-
<title>Menu</title>
33-
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
34-
</svg>
35-
</button>
36-
</div>
37-
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
38-
<div className="text-sm lg:flex-grow">
39-
{(menus || []).map((menu, index) => {
40-
const path = menu?.node?.path ?? "";
41-
const href = "[...slug]";
42-
return (
43-
<Link key={menu?.node?.id ?? ""} href={href} as={path}>
44-
<a className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
45-
{menu?.node?.label ?? ""}
46-
</a>
47-
</Link>
48-
);
49-
})}
50-
</div>
23+
</a>
24+
</Link>
25+
</div>
26+
<div className="block lg:hidden">
27+
<button className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
28+
<svg
29+
className="fill-current h-3 w-3"
30+
viewBox="0 0 20 20"
31+
xmlns="http://www.w3.org/2000/svg"
32+
>
33+
<title>Menu</title>
34+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
35+
</svg>
36+
</button>
37+
</div>
38+
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
39+
<div className="text-sm lg:flex-grow">
40+
{(menus || []).map((menu, index) => {
41+
const path = menu?.node?.path ?? "";
42+
const href = "[...slug]";
43+
return (
44+
<Link key={menu?.node?.id ?? ""} href={href} as={path}>
45+
<a className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
46+
{menu?.node?.label ?? ""}
47+
</a>
48+
</Link>
49+
);
50+
})}
51+
</div>
5152

52-
<div>
53-
<Link href="/blog" as={"/blog"}>
54-
<a className="inline-block text-sm px-4 py-2 mr-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
55-
Blog
56-
</a>
57-
</Link>
58-
{/* <Link href="[...slug]" as={"/slug"}>
53+
<div>
54+
<Link href="/blog" as={"/blog"}>
55+
<a className="inline-block text-sm px-4 py-2 mr-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
56+
Blog
57+
</a>
58+
</Link>
59+
{/* <Link href="[...slug]" as={"/slug"}>
5960
<a className="inline-block text-sm px-4 py-2 mr-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
6061
Slug
6162
</a>
@@ -65,8 +66,9 @@ const Navbar = ({ menus }) => {
6566
Page
6667
</a>
6768
</Link> */}
68-
</div>
69-
</div>
69+
</div>
70+
</div>
71+
</div>
7072
</nav>
7173
);
7274
};

0 commit comments

Comments
 (0)