Merge pull request #3 from CodeDead/feature/seo

CodeDead · web-flow · commit 953ac92f3330 · 2021-02-02T15:43:56.000+01:00
feature/seo
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -46,6 +46,19 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: 'gatsby-plugin-google-gtag',
+      options: {
+        trackingIds: [
+          'G-5BW4G4STJ8',
+        ],
+        pluginConfig: {
+          head: true,
+          respectDNT: true,
+        },
+      },
+    },
+    'gatsby-plugin-react-helmet',
     'gatsby-transformer-remark',
     'gatsby-theme-material-ui',
     'gatsby-transformer-sharp',
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@material-ui/icons": "^4.11.2",
     "gatsby": "^2.31.1",
     "gatsby-image": "^2.10.0",
+    "gatsby-plugin-google-gtag": "^2.7.0",
     "gatsby-plugin-sharp": "^2.13.4",
     "gatsby-plugin-sitemap": "^2.11.0",
     "gatsby-remark-images": "^3.10.0",
@@ -26,7 +27,8 @@
     "gatsby-transformer-remark": "^2.15.0",
     "gatsby-transformer-sharp": "^2.11.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.1",
diff --git a/src/components/PageHeader/index.jsx b/src/components/PageHeader/index.jsx
@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import BackButton from '../BackButton';
+import SEO from '../SEO';
 
 const useStyles = makeStyles((theme) => ({
   heroContent: {
@@ -16,6 +17,7 @@ const PageHeader = ({ title, subTitle, backButton }) => {
 
   return (
     <div className={classes.heroContent}>
+      <SEO title={title} description={subTitle} />
       <Container maxWidth="sm">
         <Typography variant="h4" align="center" color="textPrimary" gutterBottom>
           {backButton
diff --git a/src/components/SEO/index.jsx b/src/components/SEO/index.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+function SEO({
+  description, lang, meta, title,
+}) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+          }
+        }
+      }
+    `,
+  );
+
+  const metaDescription = description || site.siteMetadata.description;
+  const defaultTitle = site.siteMetadata.title;
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
+      meta={[
+        {
+          name: 'description',
+          content: metaDescription,
+        },
+        {
+          property: 'og:title',
+          content: title,
+        },
+        {
+          property: 'og:description',
+          content: metaDescription,
+        },
+        {
+          property: 'og:type',
+          content: 'website',
+        },
+        {
+          name: 'twitter:card',
+          content: 'summary',
+        },
+        {
+          name: 'twitter:creator',
+          content: site.siteMetadata.author || '',
+        },
+        {
+          name: 'twitter:title',
+          content: title,
+        },
+        {
+          name: 'twitter:description',
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  );
+}
+
+SEO.defaultProps = {
+  lang: 'en',
+  meta: [],
+  description: '',
+};
+
+export default SEO;
diff --git a/src/pages/404/index.jsx b/src/pages/404/index.jsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from 'react';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Card from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
@@ -32,7 +31,7 @@ const NotFoundPage = () => {
             </Typography>
           </CardContent>
           <CardActions>
-            <Button color="primary" variant="outlined" href="/">
+            <Button color="primary" variant="contained" href="/">
               Home
             </Button>
           </CardActions>
diff --git a/src/pages/software/advanced-passgen/requirements/index.jsx b/src/pages/software/advanced-passgen/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="Advanced PassGen" subTitle="System requirements" backButton />
+      <PageHeader title="Advanced PassGen - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/advanced-portchecker/requirements/index.jsx b/src/pages/software/advanced-portchecker/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="Advanced PortChecker" subTitle="System requirements" backButton />
+      <PageHeader title="Advanced PortChecker - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/aniview/requirements/index.jsx b/src/pages/software/aniview/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="AniView" subTitle="System requirements" backButton />
+      <PageHeader title="AniView - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/deadhash/requirements/index.jsx b/src/pages/software/deadhash/requirements/index.jsx
@@ -26,7 +26,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="DeadHash" subTitle="System requirements" backButton />
+      <PageHeader title="DeadHash - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/deadlock/requirements/index.jsx b/src/pages/software/deadlock/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="DeadLock" subTitle="System requirements" backButton />
+      <PageHeader title="DeadLock - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/deadpix/requirements/index.jsx b/src/pages/software/deadpix/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="DeadPix" subTitle="System requirements" backButton />
+      <PageHeader title="DeadPix - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/memplus/requirements/index.jsx b/src/pages/software/memplus/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="MemPlus" subTitle="System requirements" backButton />
+      <PageHeader title="MemPlus - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/software/pk-finder/requirements/index.jsx b/src/pages/software/pk-finder/requirements/index.jsx
@@ -27,7 +27,7 @@ const Requirements = () => {
 
   return (
     <Layout>
-      <PageHeader title="PK Finder" subTitle="System requirements" backButton />
+      <PageHeader title="PK Finder - Requirements" subTitle="System requirements" backButton />
       <Container maxWidth="md" style={{ marginTop: 10 }}>
         <Grid container spacing={2} style={{ marginTop: 10 }}>
           <Grid item xs={12} md={12} lg={12}>
diff --git a/yarn.lock b/yarn.lock
@@ -4938,6 +4938,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.2.0
     gatsby: ^2.31.1
     gatsby-image: ^2.10.0
+    gatsby-plugin-google-gtag: ^2.7.0
     gatsby-plugin-sharp: ^2.13.4
     gatsby-plugin-sitemap: ^2.11.0
     gatsby-remark-images: ^3.10.0
@@ -4947,6 +4948,7 @@ __metadata:
     gatsby-transformer-sharp: ^2.11.0
     react: ^17.0.1
     react-dom: ^17.0.1
+    react-helmet: ^6.1.0
   languageName: unknown
   linkType: soft
 
@@ -8287,6 +8289,18 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
+"gatsby-plugin-google-gtag@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "gatsby-plugin-google-gtag@npm:2.7.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    minimatch: ^3.0.4
+  peerDependencies:
+    gatsby: ^2.0.0
+  checksum: 28e5ce35eacdfc5d31b42749b987e931ce7a22a58b065fd3d617fbc929ca9552a9dc4fa162f0198f29266c73a4a85694471a34d2376464675990bd3f2602ddbc
+  languageName: node
+  linkType: hard
+
 "gatsby-plugin-material-ui@npm:^2.1.9":
   version: 2.1.10
   resolution: "gatsby-plugin-material-ui@npm:2.1.10"
