SEO and Social sharing cards tutorial - Unused variable and wrong propTypes

[soobing]

Summary

I am trying to apply seo and social sharing cards tutorial to my project.

While developing this tutorial to my project, I found unused variable even declared and wrong propTypes.

Some recommended topics to cover:

• const { previous, next } = this.props.pageContext should be erased.

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext
    const image = post.frontmatter.image
      ? post.frontmatter.image.childImageSharp.resize
      : null

    return (
      <Layout location={this.props.location} title={siteTitle}>
        <SEO
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
          image={image}
          pathname={this.props.location.pathname}
        />
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        description
        image: featured {
          childImageSharp {
            resize(width: 1200) {
              src
              height
              width
            }
          }
        }
      }
    }
  }
`

• Typeof image width, height should be number

    src: PropTypes.string.isRequired,
    height: PropTypes.string.isRequired,
    width: PropTypes.string.isRequired,
  })

Motivation

• Unused variable makes lint warning. and absolutely clear not to declare.
• wrong propTypes makes error like below

Steps to resolve this issue

Draft the doc

• [ ✔️] Write the doc, following the format listed in these resources:
  • Overview on contributing to documentation
  • Docs Templates
  • Example of a similar article
• [ ✔️] Add the article to the docs sidebar under the [parent doc] section.

Open a pull request

• [ ✔️] Open a pull request with your work including the words "closes #[this issue's number]" in the pull request description : PR#22426