From 13111a3106b8c2195ddf1dac024bd755a7f5c85a Mon Sep 17 00:00:00 2001 From: "MD. Ariful Alam" Date: Wed, 25 Aug 2021 22:53:07 +0600 Subject: [PATCH] Add dynamic meta tags --- package-lock.json | 65 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + public/index.html | 46 ++++----------------------- src/App.js | 7 ++-- src/components/Blog.js | 18 +++++++---- src/components/MetaTags.js | 62 ++++++++++++++++++++++++++++++++++++ src/components/Project.js | 18 +++++++---- src/helpers/utils.js | 15 +++++++++ src/index.js | 5 ++- src/index.scss | 1 + 10 files changed, 178 insertions(+), 60 deletions(-) create mode 100644 src/components/MetaTags.js diff --git a/package-lock.json b/package-lock.json index 0d1f348..cf2dc4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-helmet-async": "^1.1.0", "react-icons": "^4.2.0", "react-redux": "^7.2.4", "react-scripts": "4.0.3", @@ -10091,6 +10092,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -16232,6 +16241,27 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "node_modules/react-helmet-async": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.1.0.tgz", + "integrity": "sha512-550xWSW61j7Qzk26GBOdh096wKG6n1jY3ew7bH5NU0GvIZ5LyeuBLxHFBddMP7ZpsSltnUGzzh2p6Rj+aQAi4g==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.2.0", + "shallowequal": "^1.1.0" + }, + "peerDependencies": { + "react": "^16.6.0 || ^17.0.0", + "react-dom": "^16.6.0 || ^17.0.0" + } + }, "node_modules/react-icons": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", @@ -17760,6 +17790,11 @@ "sha.js": "bin.js" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -29487,6 +29522,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -34355,6 +34398,23 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "react-helmet-async": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.1.0.tgz", + "integrity": "sha512-550xWSW61j7Qzk26GBOdh096wKG6n1jY3ew7bH5NU0GvIZ5LyeuBLxHFBddMP7ZpsSltnUGzzh2p6Rj+aQAi4g==", + "requires": { + "@babel/runtime": "^7.12.5", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.2.0", + "shallowequal": "^1.1.0" + } + }, "react-icons": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", @@ -35566,6 +35626,11 @@ "safe-buffer": "^5.0.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 8a9df8a..af0bdf8 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-helmet-async": "^1.1.0", "react-icons": "^4.2.0", "react-redux": "^7.2.4", "react-scripts": "4.0.3", diff --git a/public/index.html b/public/index.html index d5963be..8ee696b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,52 +1,18 @@ - - - - - + - - - - - React App - - +
- - - + \ No newline at end of file diff --git a/src/App.js b/src/App.js index 9d45cda..be3e40c 100644 --- a/src/App.js +++ b/src/App.js @@ -15,11 +15,7 @@ import Education from "./components/Education"; import Project from "./components/Project"; import { setRepo } from "./store/slices/repoSlice"; import Blog from "./components/Blog"; -import { ga } from "./helpers/utils"; - -if (config.googleAnalytics.id) { - ga.initialize(config.googleAnalytics.id); -} +import MetaTags from "./components/MetaTags"; function App() { const dispatch = useDispatch(); @@ -116,6 +112,7 @@ function App() { return ( +
{ diff --git a/src/components/Blog.js b/src/components/Blog.js index 9b9e8c0..6b20f79 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -86,13 +86,17 @@ const Blog = () => { className="card shadow-lg compact bg-base-100 cursor-pointer" key={index} onClick={() => { - if (config.googleAnalytics.id) { - ga.event({ - action: "Click Blog Post", - params: { - post: article.title - } - }); + try { + if (config.googleAnalytics.id) { + ga.event({ + action: "Click Blog Post", + params: { + post: article.title + } + }); + } + } catch (error) { + console.error(error); } window.open(article.link, '_blank') diff --git a/src/components/MetaTags.js b/src/components/MetaTags.js new file mode 100644 index 0000000..eeb942e --- /dev/null +++ b/src/components/MetaTags.js @@ -0,0 +1,62 @@ +import React, { Fragment } from 'react'; +import { Helmet } from "react-helmet-async"; +import { useSelector } from 'react-redux'; +import config from '../config'; +import { isThemeDarkish } from '../helpers/utils'; + +const MetaTags = () => { + const profile = useSelector(state => state.profile); + const theme = useSelector(state => state.theme); + + return ( + + { + profile && ( + + { + config.googleAnalytics.id && ( + + ) + } + { + config.googleAnalytics.id && ( + + ) + } + Portfolio of {profile.name} + + + + + + + + + + + + + + + + + + + + ) + } + + ) +} + +export default MetaTags; \ No newline at end of file diff --git a/src/components/Project.js b/src/components/Project.js index 8e74e2e..3ada0a3 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -56,13 +56,17 @@ const Project = () => { className="card shadow-lg compact bg-base-100 cursor-pointer" key={index} onClick={() => { - if (config.googleAnalytics.id) { - ga.event({ - action: "Click project", - params: { - project: item.name - } - }); + try { + if (config.googleAnalytics.id) { + ga.event({ + action: "Click project", + params: { + project: item.name + } + }); + } + } catch (error) { + console.error(error); } window.open(item.html_url, '_blank') diff --git a/src/helpers/utils.js b/src/helpers/utils.js index f7dc068..b8ef90f 100644 --- a/src/helpers/utils.js +++ b/src/helpers/utils.js @@ -52,4 +52,19 @@ export const ga = { console.error(error); } } +} + +export const isThemeDarkish = (theme) => { + if ( + theme === 'dark' || + theme === 'halloween' || + theme === 'forest' || + theme === 'black' || + theme === 'luxury' || + theme === 'dracula' + ) { + return true; + } else { + return false; + } } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 36ff28a..d1735e1 100644 --- a/src/index.js +++ b/src/index.js @@ -5,11 +5,14 @@ import App from './App'; import { Provider } from 'react-redux'; import reportWebVitals from './reportWebVitals'; import { store } from './store/store'; +import { HelmetProvider } from 'react-helmet-async'; ReactDOM.render( - + + + , document.getElementById('root') diff --git a/src/index.scss b/src/index.scss index d6456d5..ebf51ff 100644 --- a/src/index.scss +++ b/src/index.scss @@ -26,6 +26,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + --z-primary: red; } code {