From 78eb030a29cc3f32032dbb840282df3c821f0115 Mon Sep 17 00:00:00 2001 From: Imran Date: Wed, 25 Aug 2021 16:19:21 +0530 Subject: [PATCH 1/5] Add Header --- .env | 1 + .gitignore | 3 + package-lock.json | 13 +++++ package.json | 1 + pages/index.js | 60 ++++++++++--------- src/components/layouts/footer/index.js | 15 +++++ src/components/layouts/header/index.js | 81 ++++++++++++++++++++++++++ 7 files changed, 146 insertions(+), 28 deletions(-) create mode 100644 .env create mode 100644 src/components/layouts/footer/index.js create mode 100644 src/components/layouts/header/index.js diff --git a/.env b/.env new file mode 100644 index 0000000..90007dc --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NEXT_PUBLIC_WORDPRESS_SITE_URL=https://mydemo.codeytek.com diff --git a/.gitignore b/.gitignore index f7702b8..463eb05 100644 --- a/.gitignore +++ b/.gitignore @@ -30,6 +30,9 @@ yarn-error.log* .env.test.local .env.production.local + +.env + # vercel .vercel diff --git a/package-lock.json b/package-lock.json index f08547a..b0090c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -357,6 +357,14 @@ "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz", "integrity": "sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==" }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1147,6 +1155,11 @@ "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==", "dev": true }, + "follow-redirects": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.2.tgz", + "integrity": "sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA==" + }, "foreach": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz", diff --git a/package.json b/package.json index 2c8eab1..c248fc1 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "start": "next start" }, "dependencies": { + "axios": "^0.21.1", "next": "11.1.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/pages/index.js b/pages/index.js index 319b4d1..0a65c67 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,31 +1,35 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' +import Header from '../src/components/layouts/header'; +import Footer from '../src/components/layouts/footer'; +import axios from 'axios'; -export default function Home() { - return ( -
- - Create Next App - - - -
-

- Welcome to Next.js! -

-

Hello

-
+export default function Home(props) { + console.log( 'props', props ); + return ( +
+
+
+

+ Welcome to Next.js! +

+

Hello

+
+
+
+ ); +} - -
- ) +export async function getStaticProps() { + const { data } = await axios.get( `${ 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`); + + return { + props: { + data: data || {}, + }, + /** + * Revalidate means that if a new request comes to server, then every 1 sec it will check + * if the data is changed, if it is changed then it will update the + * static file inside .next folder with the new data, so that any 'SUBSEQUENT' requests should have updated data. + */ + revalidate: 1, + }; } diff --git a/src/components/layouts/footer/index.js b/src/components/layouts/footer/index.js new file mode 100644 index 0000000..9afc695 --- /dev/null +++ b/src/components/layouts/footer/index.js @@ -0,0 +1,15 @@ +const Footer = () => { + return ( + + ) +} + +export default Footer; diff --git a/src/components/layouts/header/index.js b/src/components/layouts/header/index.js new file mode 100644 index 0000000..0986861 --- /dev/null +++ b/src/components/layouts/header/index.js @@ -0,0 +1,81 @@ +import Head from 'next/head' + +const Header = () => { + return ( + <> + + Create Next App + + +
+ +
+ + ); +}; + +export default Header; From d08bf55f50639c8c54c71c8f3e4cadfb4e48b45b Mon Sep 17 00:00:00 2001 From: Imran Date: Wed, 25 Aug 2021 16:44:16 +0530 Subject: [PATCH 2/5] update --- .env | 1 - pages/index.js | 15 +-- src/components/{layouts => }/footer/index.js | 0 src/components/{layouts => }/header/index.js | 22 ++-- styles/Home.module.css | 122 ------------------- styles/globals.css | 16 --- 6 files changed, 19 insertions(+), 157 deletions(-) delete mode 100644 .env rename src/components/{layouts => }/footer/index.js (100%) rename src/components/{layouts => }/header/index.js (86%) delete mode 100644 styles/Home.module.css delete mode 100644 styles/globals.css diff --git a/.env b/.env deleted file mode 100644 index 90007dc..0000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -NEXT_PUBLIC_WORDPRESS_SITE_URL=https://mydemo.codeytek.com diff --git a/pages/index.js b/pages/index.js index 0a65c67..b94be9b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,21 +1,22 @@ -import Header from '../src/components/layouts/header'; -import Footer from '../src/components/layouts/footer'; +import Header from '../src/components/header'; +import Footer from '../src/components/footer'; import axios from 'axios'; export default function Home(props) { - console.log( 'props', props ); + console.warn( 'props', props ); return ( -
+
-
-

+
+

Welcome to Next.js!

Hello

+

- ); + ) } export async function getStaticProps() { diff --git a/src/components/layouts/footer/index.js b/src/components/footer/index.js similarity index 100% rename from src/components/layouts/footer/index.js rename to src/components/footer/index.js diff --git a/src/components/layouts/header/index.js b/src/components/header/index.js similarity index 86% rename from src/components/layouts/header/index.js rename to src/components/header/index.js index 0986861..5971f36 100644 --- a/src/components/layouts/header/index.js +++ b/src/components/header/index.js @@ -16,8 +16,7 @@ const Header = () => { - WooNext + WooNext
-
+
Categories { - ); -}; + ) +} export default Header; diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 42e7e60..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,122 +0,0 @@ -.container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; -} - -.footer img { - margin-left: 0.5rem; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; -} - -.card { - margin: 1rem; - flex-basis: 45%; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h3 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index e5e2dcc..0000000 --- a/styles/globals.css +++ /dev/null @@ -1,16 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -} - -a { - color: inherit; - text-decoration: none; -} - -* { - box-sizing: border-box; -} From c61c35f93d42ef90d7f6ef981667c7565ac88a91 Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 29 Aug 2021 11:34:13 +0530 Subject: [PATCH 3/5] Add header date --- package-lock.json | 8 ++- package.json | 2 + pages/index.js | 17 +++--- src/components/{ => layouts}/footer/index.js | 0 src/components/{ => layouts}/header/index.js | 64 +++++++++++++------- src/utils/miscellaneous.js | 12 ++++ 6 files changed, 69 insertions(+), 34 deletions(-) rename src/components/{ => layouts}/footer/index.js (100%) rename src/components/{ => layouts}/header/index.js (60%) create mode 100644 src/utils/miscellaneous.js diff --git a/package-lock.json b/package-lock.json index b0090c9..310dbfb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -976,6 +976,11 @@ "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz", "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ==" }, + "dompurify": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.1.tgz", + "integrity": "sha512-xGWt+NHAQS+4tpgbOAI08yxW0Pr256Gu/FNE2frZVTbgrBUn8M7tz7/ktS/LZ2MHeGqz6topj0/xY+y8R5FBFw==" + }, "electron-to-chromium": { "version": "1.3.814", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.814.tgz", @@ -1681,8 +1686,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.sortby": { "version": "4.7.0", diff --git a/package.json b/package.json index c248fc1..347e7c5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ }, "dependencies": { "axios": "^0.21.1", + "dompurify": "^2.3.1", + "lodash": "^4.17.21", "next": "11.1.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/pages/index.js b/pages/index.js index b94be9b..97c53ad 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,12 @@ -import Header from '../src/components/header'; -import Footer from '../src/components/footer'; +import Header from '../src/components/layouts/header'; +import Footer from '../src/components/layouts/footer'; import axios from 'axios'; -export default function Home(props) { - console.warn( 'props', props ); +export default function Home({data}) { + const { header, footer } = data; return (
-
+

Welcome to Next.js! @@ -14,7 +14,7 @@ export default function Home(props) {

Hello

-
+
) } @@ -23,9 +23,8 @@ export async function getStaticProps() { const { data } = await axios.get( `${ 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`); return { - props: { - data: data || {}, - }, + props: data || {}, + /** * Revalidate means that if a new request comes to server, then every 1 sec it will check * if the data is changed, if it is changed then it will update the diff --git a/src/components/footer/index.js b/src/components/layouts/footer/index.js similarity index 100% rename from src/components/footer/index.js rename to src/components/layouts/footer/index.js diff --git a/src/components/header/index.js b/src/components/layouts/header/index.js similarity index 60% rename from src/components/header/index.js rename to src/components/layouts/header/index.js index 5971f36..21ad48a 100644 --- a/src/components/header/index.js +++ b/src/components/layouts/header/index.js @@ -1,22 +1,43 @@ -import Head from 'next/head' +import Head from 'next/head'; +import Link from 'next/link'; +import { isEmpty } from 'lodash'; -const Header = () => { +const Header = ( { header } ) => { + + const { headerMenuItems, siteDescription, siteLogoUrl, siteTitle, favicon } = header || {}; + return ( <> - Create Next App - + { siteTitle || 'Nexts WooCommerce' } +
- ) -} + ); +}; export default Header; diff --git a/src/utils/miscellaneous.js b/src/utils/miscellaneous.js new file mode 100644 index 0000000..9a1ed7e --- /dev/null +++ b/src/utils/miscellaneous.js @@ -0,0 +1,12 @@ +import DOMPurify from 'dompurify'; + +/** + * Sanitize markup or text when used inside dangerouslysetInnerHTML + * + * @param {string} content Plain or html string. + * + * @return {string} Sanitized string + */ +export const sanitize = ( content ) => { + return process.browser ? DOMPurify.sanitize( content ) : content; +}; From 64e7c63f21e53301fa5e417aa1fc4aeead732c8a Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 29 Aug 2021 11:40:30 +0530 Subject: [PATCH 4/5] Update files --- pages/index.js | 10 +++++++++- src/utils/constants/endpoints.js | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/utils/constants/endpoints.js diff --git a/pages/index.js b/pages/index.js index 97c53ad..6fd5811 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,5 +1,13 @@ +/** + * Internal Dependencies. + */ import Header from '../src/components/layouts/header'; import Footer from '../src/components/layouts/footer'; +import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints'; + +/** + * External Dependencies. + */ import axios from 'axios'; export default function Home({data}) { @@ -20,7 +28,7 @@ export default function Home({data}) { } export async function getStaticProps() { - const { data } = await axios.get( `${ 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`); + const { data } = await axios.get( HEADER_FOOTER_ENDPOINT ); return { props: data || {}, diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js new file mode 100644 index 0000000..6079203 --- /dev/null +++ b/src/utils/constants/endpoints.js @@ -0,0 +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`; From b00b606f93130270d39738b7c1b8713bb9e8f880 Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 29 Aug 2021 11:42:07 +0530 Subject: [PATCH 5/5] Update constants --- src/components/layouts/header/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/layouts/header/index.js b/src/components/layouts/header/index.js index 21ad48a..d6fdea9 100644 --- a/src/components/layouts/header/index.js +++ b/src/components/layouts/header/index.js @@ -64,7 +64,7 @@ const Header = ( { header } ) => { className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"> - Profile @@ -73,7 +73,7 @@ const Header = ( { header } ) => { className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"> - Wishlist @@ -82,7 +82,7 @@ const Header = ( { header } ) => { href="/cart/"> - Bag