Add SEO and rename cancer to lymphoma.

Author: rmariuzzo

gatsby-config.js

@@ -2,7 +2,10 @@
 module.exports = {
   siteMetadata: {
     siteUrl: `https://www.mariuzzo.com`,
-    title: `Mariuzzo`
+    title: `Mariuzzo`,
+    description: `Experience on programming and lymphoma.`,
+    keywords: [`Code`, `Lymphoma`, `Blog`, `Rubens`, `Mariuzzo`],
+    author: `Rubens Mariuzzo`
   },
   plugins: [
     { resolve: `gatsby-plugin-typescript` },

package-lock.json

@@ -34,10 +34,12 @@
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "styled-breakpoints": "^10.0.1"
   },
   "devDependencies": {
     "@types/inquirer": "^7.3.3",
+    "@types/react-helmet": "^6.1.2",
     "@types/styled-components": "^5.1.12",
     "babel-plugin-styled-components": "^1.13.2",
     "gatsby-cli": "^3.12.0",

package.json

@@ -22,7 +22,7 @@ async function newPost() {
     type: 'list',
     name: 'postType',
     choices: [
-      { name: 'Cancer', value: 'cancer' },
+      { name: 'Lymphoma', value: 'lymphoma' },
       { name: 'Code', value: 'code' }
     ]
   })

scripts/new-post.ts

@@ -19,7 +19,7 @@ export const Header = () => {
             <S.NavMenuLink to="/code">Code</S.NavMenuLink>
           </S.NavMenuItem>
           <S.NavMenuItem>
-            <S.NavMenuLink to="/cancer">Cancer</S.NavMenuLink>
+            <S.NavMenuLink to="/lymphoma">Lymphoma</S.NavMenuLink>
           </S.NavMenuItem>
           <S.NavMenuItem>
             <S.NavMenuLink to="/about">About</S.NavMenuLink>

src/components/Header.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react'
+import { Helmet } from 'react-helmet'
+import { useStaticQuery, graphql } from 'gatsby'
+
+type SEOProps = {
+  title: string
+  description?: string
+  lang?: string
+  meta?: Array<{
+    name?: string
+    content?: string
+    property?: string
+  }>
+  image?: {
+    src: string
+    height: number
+    width: number
+  }
+  pathname?: string
+}
+
+export const SEO: React.FC<SEOProps> = ({
+  description,
+  lang,
+  meta,
+  image,
+  title,
+  pathname
+}) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            keywords
+            siteUrl
+          }
+        }
+      }
+    `
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+  const metaImage =
+    image && image.src ? `${site.siteMetadata.siteUrl}${image.src}` : null
+  const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang
+      }}
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      link={
+        canonical
+          ? [
+              {
+                rel: 'canonical',
+                href: canonical
+              }
+            ]
+          : []
+      }
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription
+        },
+        {
+          name: 'keywords',
+          content: site.siteMetadata.keywords.join(',')
+        },
+        {
+          property: `og:title`,
+          content: title
+        },
+        {
+          property: `og:description`,
+          content: metaDescription
+        },
+        {
+          property: `og:type`,
+          content: `website`
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author
+        },
+        {
+          name: `twitter:title`,
+          content: title
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription
+        }
+      ]
+        .concat(
+          image
+            ? [
+                {
+                  property: 'og:image',
+                  content: metaImage
+                },
+                {
+                  property: 'og:image:width',
+                  content: image.width
+                },
+                {
+                  property: 'og:image:height',
+                  content: image.height
+                },
+                {
+                  name: 'twitter:card',
+                  content: 'summary_large_image'
+                }
+              ]
+            : [
+                {
+                  name: 'twitter:card',
+                  content: 'summary'
+                }
+              ]
+        )
+        .concat(meta as any)}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+  image: {
+    src: '/images/icon.png',
+    height: 1040,
+    width: 1040
+  }
+}

src/components/SEO.tsx

@@ -3,6 +3,7 @@ import { formatRFC7231 } from 'date-fns'
 
 import * as S from './PostLayout.styles'
 import { MainLayout } from './MainLayout'
+import { SEO } from '../components/SEO'
 
 type PostLayoutProps = {
   title: string
@@ -24,6 +25,7 @@ export const PostLayout: React.FC<PostLayoutProps> = ({
 }) => {
   return (
     <MainLayout {...more}>
+      <SEO title={title} />
       <S.Container>
         <S.PostCategory>{category}</S.PostCategory>
         <S.PostTitle>{title}</S.PostTitle>

src/html.tsx

@@ -1,9 +1,9 @@
 ---
 date: 2015-09-01T04:00:00.000
 title: A small ball
-slug: /cancer/2015-09-01
+slug: /lymphoma/2015-09-01
 ---
 
-![A small ball](/images/cancer/o5yk4f03BA1vsn3evo1.jpg)
+![A small ball](/images/lymphoma/o5yk4f03BA1vsn3evo1.jpg)
 
 Someday, at night, I felt a **“small ball”** in the right side of my neck. While examining it, I was thinking on what could it be. Mosquitos? Unknown insects? Since it was something I could only perceive by touch, not visible, I decided to let it go and check daily from that day.

src/layouts/PostLayout.tsx

@@ -1,10 +1,10 @@
 ---
 date: 2016-03-03T05:00:00.000
 title: Otorhinolaryngologist appointment
-slug: /cancer/2016-03-03
+slug: /lymphoma/2016-03-03
 ---
 
-![Painting](/images/cancer/o5ymwnF9au1vsn3evo1.jpg)
+![Painting](/images/lymphoma/o5ymwnF9au1vsn3evo1.jpg)
 
 Today, I went to the doctor (an otorhinolaryngologist) and I brought to her the results of my lymph node biopsy. The results says it could be a **lymphoma**.