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..310dbfb 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", @@ -968,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", @@ -1147,6 +1160,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", @@ -1668,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 2c8eab1..347e7c5 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,9 @@ "start": "next start" }, "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 319b4d1..6fd5811 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,31 +1,43 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' +/** + * 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'; -export default function Home() { - return ( -
- - Create Next App - - +/** + * External Dependencies. + */ +import axios from 'axios'; -
-

- Welcome to Next.js! -

-

Hello

-
+export default function Home({data}) { + const { header, footer } = data; + return ( +
+
+
+

+ Welcome to Next.js! +

+

Hello

+
+ +
+
+ ) +} - -
- ) +export async function getStaticProps() { + const { data } = await axios.get( HEADER_FOOTER_ENDPOINT ); + + return { + 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 + * 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..d6fdea9 --- /dev/null +++ b/src/components/layouts/header/index.js @@ -0,0 +1,99 @@ +import Head from 'next/head'; +import Link from 'next/link'; +import { isEmpty } from 'lodash'; + +const Header = ( { header } ) => { + + const { headerMenuItems, siteDescription, siteLogoUrl, siteTitle, favicon } = header || {}; + + return ( + <> + + { siteTitle || 'Nexts WooCommerce' } + + +
+ +
+ + ); +}; + +export default Header; 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`; 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; +}; 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; -}