noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 04:17:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic meta tags

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-25 22:53:07 +06:00
parent 8eb2b4b09f
commit 13111a3106
10 changed files with 178 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.js
View File

@@ -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 (
<Fragment>
<MetaTags/>
<div className="fade-in h-screen">
{

18
src/components/Blog.js
View File

@@ -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')

62
src/components/MetaTags.js Normal file
View File

@@ -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 (
<Fragment>
{
profile && (
<Helmet>
{
config.googleAnalytics.id && (
<script async src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalytics.id}`}></script>
)
}
{
config.googleAnalytics.id && (
<script>
{
`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${config.googleAnalytics.id}');
`
}
</script>
)
}
<title>Portfolio of {profile.name}</title>
<meta name="theme-color" content={isThemeDarkish(theme) ? '#000000' : '#ffffff'}/>
<meta name="description" content={profile.bio} />
<meta itemprop="name" content={`Portfolio of ${profile.name}`} />
<meta itemprop="description" content={profile.bio} />
<meta itemprop="image" content={profile.avatar} />
<meta property="og:url" content={typeof config.social.website !== 'undefined' ? config.social.website : ''} />
<meta property="og:type" content="website" />
<meta property="og:title" content={`Portfolio of ${profile.name}`} />
<meta property="og:description" content={profile.bio} />
<meta property="og:image" content={profile.avatar} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Portfolio of ${profile.name}`} />
<meta name="twitter:description" content={profile.bio} />
<meta name="twitter:image" content={profile.avatar} />
</Helmet>
)
}
</Fragment>
)
}
export default MetaTags;

18
src/components/Project.js
View File

@@ -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')

15
src/helpers/utils.js
View File

@@ -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;
}
}

5
src/index.js
View File

@@ -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(
<React.StrictMode>
<Provider store={store}>
<App/>
<HelmetProvider>
<App/>
</HelmetProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')

1
src/index.scss
View File

@@ -26,6 +26,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--z-primary: red;
}
code {