Add gtag and fix icons height
This commit is contained in:
Kamran Ahmed
@ -26,7 +26,8 @@ export const ShareWrap = styled.div`
|
||||
color: #101010;
|
||||
|
||||
svg {
|
||||
height: 18px;
|
||||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
color: #757575;
|
||||
margin-left: 7px;
|
||||
transition: all 0.2s ease;
|
||||
@ -108,9 +109,8 @@ export const AuthorBio = styled.p`
|
||||
|
||||
export const AuthorImg = styled.img`
|
||||
border-radius: 100%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 100%;
|
||||
height: 100px !important;
|
||||
width: 100px !important;
|
||||
margin-right: 22px;
|
||||
`;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import NextHead from 'next/head';
|
||||
import siteConfig from 'data/site';
|
||||
import { GA_TRACKING_ID } from 'lib/gtag';
|
||||
|
||||
const prepareTitle = (givenTitle) => {
|
||||
givenTitle = givenTitle || siteConfig.title;
|
||||
@ -52,6 +53,17 @@ const Helmet = (props) => (
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/manifest/icon16.png" />
|
||||
<link rel="shortcut icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
|
||||
<link rel="icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
|
||||
|
||||
{ /* Global Site Tag (gtag.js) - Google Analytics */ }
|
||||
<script async src={ `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}` } />
|
||||
<script dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${GA_TRACKING_ID}');
|
||||
`,
|
||||
}} />
|
||||
</NextHead>
|
||||
);
|
||||
|
||||
|
||||
@ -12,20 +12,14 @@ const ShareGuide = ({
|
||||
}) => (
|
||||
<ShareWrap>
|
||||
<ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
|
||||
<ShareIcon>
|
||||
<a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
|
||||
<ShareIcon href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
|
||||
<FontAwesomeIcon icon={ faTwitterSquare } />
|
||||
</a>
|
||||
</ShareIcon>
|
||||
<ShareIcon>
|
||||
<a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
|
||||
<FontAwesomeIcon icon={ faFacebookSquare } />
|
||||
</a>
|
||||
<ShareIcon href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
|
||||
<FontAwesomeIcon icon={ faFacebookSquare } />
|
||||
</ShareIcon>
|
||||
<ShareIcon>
|
||||
<a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
|
||||
<FontAwesomeIcon icon={ faRedditSquare } />
|
||||
</a>
|
||||
<ShareIcon href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
|
||||
<FontAwesomeIcon icon={ faRedditSquare } />
|
||||
</ShareIcon>
|
||||
</ShareIconsList>
|
||||
</ShareWrap>
|
||||
|
||||
@ -15,18 +15,23 @@ export const ShareWrap = styled.div`
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
padding: 0 0;
|
||||
top: 2px;
|
||||
top: 6px;
|
||||
left: -50px;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
export const ShareIcon = styled.span`
|
||||
export const ShareIcon = styled.a`
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
svg {
|
||||
height: 22px;
|
||||
height: 22px !important;
|
||||
width: 22px !important;
|
||||
color: #757575;
|
||||
transition: all 0.2s;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"title": "Design Patterns for Humans",
|
||||
"description": "A language agnostic, ultra-simplified explanation to design patterns",
|
||||
"url": "/guides/design-patterns-for-humans",
|
||||
"fileName": "design-patterns-for-humans",
|
||||
"featured": true,
|
||||
"author": "kamranahmedse",
|
||||
"createdAt": "2019-01-23T17:00:00.860Z",
|
||||
@ -12,6 +13,7 @@
|
||||
"title": "Learn Regex",
|
||||
"description": "An easy to understand guide on regular expressions with real world examples",
|
||||
"url": "/guides/learn-regex",
|
||||
"fileName": "learn-regex",
|
||||
"featured": true,
|
||||
"author": "ziishaned",
|
||||
"createdAt": "2019-01-23T17:00:00.860Z",
|
||||
@ -21,6 +23,7 @@
|
||||
"title": "Bash Guide",
|
||||
"description": "Easy to understand guide for bash with real world usage examples.",
|
||||
"url": "/guides/bash-guide",
|
||||
"fileName": "bash-guide",
|
||||
"featured": true,
|
||||
"author": "idnan",
|
||||
"createdAt": "2019-01-23T17:00:00.860Z",
|
||||
@ -30,6 +33,7 @@
|
||||
"title": "DNS in One Picture",
|
||||
"description": "Quick illustrative guide on how a website is found on the internet.",
|
||||
"url": "/guides/dns-in-one-picture",
|
||||
"fileName": "dns-in-one-picture",
|
||||
"featured": true,
|
||||
"author": "kamranahmedse",
|
||||
"createdAt": "2019-11-01T12:00:00.860Z",
|
||||
@ -39,6 +43,7 @@
|
||||
"title": "Using React Hooks",
|
||||
"description": "Start using React hooks in your react applications today with this guide.",
|
||||
"url": "/guides/using-react-hooks",
|
||||
"fileName": "using-react-hooks",
|
||||
"featured": true,
|
||||
"author": "kamranahmedse",
|
||||
"createdAt": "2019-01-23T17:00:00.860Z",
|
||||
@ -48,6 +53,7 @@
|
||||
"title": "HTTP Caching",
|
||||
"description": "Everything you need to know about web caching",
|
||||
"url": "/guides/http-caching",
|
||||
"fileName": "http-caching",
|
||||
"featured": true,
|
||||
"author": "kamranahmedse",
|
||||
"updatedAt": "2019-10-09T12:00:00.860Z",
|
||||
|
||||
@ -1,11 +1,21 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'components/helmet';
|
||||
import './global.scss';
|
||||
import { firePageView } from '../../lib/gtag';
|
||||
|
||||
const DefaultLayout = (props) => (
|
||||
<div>
|
||||
<Helmet />
|
||||
{ props.children }
|
||||
</div>
|
||||
);
|
||||
class DefaultLayout extends React.Component {
|
||||
componentDidMount() {
|
||||
firePageView(window.location.pathname);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Helmet />
|
||||
{ this.props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DefaultLayout;
|
||||
|
||||
17
lib/gtag.js
Normal file
17
lib/gtag.js
Normal file
@ -0,0 +1,17 @@
|
||||
export const GA_TRACKING_ID = 'UA-139582634-1';
|
||||
|
||||
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
|
||||
export const firePageView = url => {
|
||||
window.gtag('config', GA_TRACKING_ID, {
|
||||
page_path: url,
|
||||
})
|
||||
};
|
||||
|
||||
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
|
||||
export const event = ({ action, category, label, value }) => {
|
||||
window.gtag('event', action, {
|
||||
event_category: category,
|
||||
event_label: label,
|
||||
value: value,
|
||||
})
|
||||
};
|
||||
@ -2,23 +2,16 @@ import guides from "data/guides";
|
||||
import authors from "data/authors";
|
||||
import siteConfig from "data/site";
|
||||
|
||||
|
||||
export const getRequestedGuide = req => {
|
||||
const guide = guides.find(guide => guide.url === req.url);
|
||||
if (!guide) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// We will use this URL format to find the relevant markdown
|
||||
// file inside the `/data` directory. For example `/guides/learn-regex`
|
||||
// has to have `/guides/learn-regex.md` file inside the `data` directory
|
||||
const path = guide.url.replace(/^\//, '');
|
||||
|
||||
try {
|
||||
return {
|
||||
...guide,
|
||||
author: authors.find(author => author.username === guide.author) || {},
|
||||
component: require(`../data/${path}.md`).default,
|
||||
};
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
|
||||
@ -36,7 +36,7 @@ const options = {
|
||||
|
||||
config.resolve.modules.push(path.resolve('./'));
|
||||
|
||||
// Allow loading images
|
||||
// Allow loading images and fonts
|
||||
config.module.rules.push({
|
||||
test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
|
||||
use: {
|
||||
|
||||
@ -5,20 +5,22 @@ import GuideHeader from 'components/guide-header';
|
||||
import GuideBody from 'components/guide-body';
|
||||
import ShareGuide from 'components/share-guide';
|
||||
import GuideFooter from 'components/guide-footer';
|
||||
import { getRequestedGuide } from "lib/guide";
|
||||
import Helmet from '../../components/helmet';
|
||||
import { getRequestedGuide } from 'lib/guide';
|
||||
import Helmet from 'components/helmet';
|
||||
|
||||
const Guide = ({ guide }) => {
|
||||
if (!guide) {
|
||||
return <Error statusCode={ 404 } />
|
||||
}
|
||||
|
||||
const GuideContent = require(`../../data/guides/${guide.fileName}.md`).default;
|
||||
|
||||
return (
|
||||
<GuideLayout>
|
||||
<Helmet title={ guide.title } description={ guide.description } />
|
||||
<GuideHeader guide={ guide } />
|
||||
<GuideBody>
|
||||
<guide.component />
|
||||
<GuideContent />
|
||||
<ShareGuide guide={ guide } />
|
||||
</GuideBody>
|
||||
<GuideFooter guide={ guide } />
|
||||
@ -26,9 +28,9 @@ const Guide = ({ guide }) => {
|
||||
);
|
||||
};
|
||||
|
||||
Guide.getInitialProps = serverOnlyProps(({ req }) => {
|
||||
Guide.getInitialProps = serverOnlyProps(async ({ req }) => {
|
||||
return {
|
||||
guide: getRequestedGuide(req),
|
||||
guide: await getRequestedGuide(req),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user