Skip to content

Commit 96884ef

Browse files
imranhsayedimranhsayed
authored
Merge pull request #1 from imranhsayed/feature/add-header
Add Header
2 parents 089d674 + b00b606 commit 96884ef

File tree

10 files changed

+191
-167
lines changed

10 files changed

+191
-167
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ yarn-error.log*
3030
.env.test.local
3131
.env.production.local
3232

33+
34+
.env
35+
3336
# vercel
3437
.vercel
3538

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11+
"axios": "^0.21.1",
12+
"dompurify": "^2.3.1",
13+
"lodash": "^4.17.21",
1114
"next": "11.1.0",
1215
"react": "17.0.2",
1316
"react-dom": "17.0.2",

‎pages/index.js

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
1-
import Head from 'next/head'
2-
import styles from '../styles/Home.module.css'
1+
/**
2+
* Internal Dependencies.
3+
*/
4+
import Header from '../src/components/layouts/header';
5+
import Footer from '../src/components/layouts/footer';
6+
import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
37

4-
export default function Home() {
5-
return (
6-
<div className={styles.container}>
7-
<Head>
8-
<title>Create Next App</title>
9-
<link rel="icon" href="/favicon.ico" />
10-
</Head>
8+
/**
9+
* External Dependencies.
10+
*/
11+
import axios from 'axios';
1112

12-
<main className={styles.main}>
13-
<h1 className={styles.title}>
14-
Welcome to <a href="https://nextjs.org">Next.js!</a>
15-
</h1>
16-
<p className="text-green-500">Hello</p>
17-
</main>
13+
export default function Home({data}) {
14+
const { header, footer } = data;
15+
return (
16+
<div >
17+
<Header header={header}/>
18+
<main >
19+
<h1 >
20+
Welcome to <a href="https://nextjs.org">Next.js!</a>
21+
</h1>
22+
<p className="text-green-500">Hello</p>
23+
</main>
24+
25+
<Footer footer={footer}/>
26+
</div>
27+
)
28+
}
1829

19-
<footer className={styles.footer}>
20-
<a
21-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
>
25-
Powered by{' '}
26-
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
27-
</a>
28-
</footer>
29-
</div>
30-
)
30+
export async function getStaticProps() {
31+
const { data } = await axios.get( HEADER_FOOTER_ENDPOINT );
32+
33+
return {
34+
props: data || {},
35+
36+
/**
37+
* Revalidate means that if a new request comes to server, then every 1 sec it will check
38+
* if the data is changed, if it is changed then it will update the
39+
* static file inside .next folder with the new data, so that any 'SUBSEQUENT' requests should have updated data.
40+
*/
41+
revalidate: 1,
42+
};
3143
}

‎src/components/layouts/footer/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const Footer = () => {
2+
return (
3+
<footer >
4+
<a
5+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
6+
target="_blank"
7+
rel="noopener noreferrer"
8+
>
9+
Powered by{' '}
10+
</a>
11+
</footer>
12+
)
13+
}
14+
15+
export default Footer;

‎src/components/layouts/header/index.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import Head from 'next/head';
2+
import Link from 'next/link';
3+
import { isEmpty } from 'lodash';
4+
5+
const Header = ( { header } ) => {
6+
7+
const { headerMenuItems, siteDescription, siteLogoUrl, siteTitle, favicon } = header || {};
8+
9+
return (
10+
<>
11+
<Head>
12+
<title>{ siteTitle || 'Nexts WooCommerce' }</title>
13+
<link rel="icon" href={ favicon || '/favicon.ico' }/>
14+
</Head>
15+
<div className="header">
16+
<nav className="bg-white p-4">
17+
<div className="flex items-center justify-between flex-wrap container mx-auto">
18+
<div className="flex items-center flex-shrink-0 text-black mr-20">
19+
<Link href="/">
20+
<a>
21+
{
22+
siteLogoUrl ? (
23+
<img className="mr-2" src={ siteLogoUrl } alt={ `${ siteTitle } logo` } width="86"
24+
height="86"/>
25+
) : (
26+
<svg className="fill-current h-8 w-8 mr-2" width="54" height="54"
27+
viewBox="0 0 54 54"
28+
xmlns="http://www.w3.org/2000/svg">
29+
<path
30+
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"></path>
31+
</svg> )
32+
}
33+
</a>
34+
</Link>
35+
<span>
36+
<Link href="/">
37+
<a className="font-semibold text-xl tracking-tight">{ siteTitle || 'WooNext' }</a>
38+
</Link>
39+
{ siteDescription ? <p>{ siteDescription }</p> : null }
40+
</span>
41+
</div>
42+
<div className="block lg:hidden">
43+
<button
44+
className="flex items-center px-3 py-2 border rounded text-black border-black hover:text-black hover:border-black">
45+
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20"
46+
xmlns="http://www.w3.org/2000/svg">
47+
<title>Menu</title>
48+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
49+
</svg>
50+
</button>
51+
</div>
52+
<div
53+
className="h-0 w-full overflow-hidden lg:h-full flex-grow lg:flex lg:items-center lg:w-auto">
54+
<div className="text-sm font-medium uppercase lg:flex-grow">
55+
{ ! isEmpty( headerMenuItems ) && headerMenuItems.length ? headerMenuItems.map( menuItem => (
56+
<Link key={menuItem?.ID} href={ menuItem?.url || '/' }>
57+
<a className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
58+
dangerouslySetInnerHTML={{__html: menuItem.title}}/>
59+
</Link>
60+
) ) : null }
61+
</div>
62+
<div className="text-sm font-medium">
63+
<a href="#responsive-header"
64+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
65+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
66+
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
67+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
68+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
69+
</svg>
70+
Profile
71+
</a>
72+
<a href="#responsive-header"
73+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
74+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
75+
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
76+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
77+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
78+
</svg>
79+
Wishlist
80+
</a>
81+
<a className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
82+
href="/cart/">
83+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
84+
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
85+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
86+
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
87+
</svg>
88+
Bag
89+
</a>
90+
</div>
91+
</div>
92+
</div>
93+
</nav>
94+
</div>
95+
</>
96+
);
97+
};
98+
99+
export default Header;

‎src/utils/constants/endpoints.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
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`;

‎src/utils/miscellaneous.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import DOMPurify from 'dompurify';
2+
3+
/**
4+
* Sanitize markup or text when used inside dangerouslysetInnerHTML
5+
*
6+
* @param {string} content Plain or html string.
7+
*
8+
* @return {string} Sanitized string
9+
*/
10+
export const sanitize = ( content ) => {
11+
return process.browser ? DOMPurify.sanitize( content ) : content;
12+
};

‎styles/Home.module.css

Lines changed: 0 additions & 122 deletions
This file was deleted.

0 commit comments

Comments
 (0)