feat: feed feature, typescript, remove google, fix errs & warns

src/templates/post/index.tsx

@@ -1,12 +1,14 @@
-import React from 'react'
+import * as React from 'react'
 import { Link } from 'gatsby'
 import kebabCase from 'lodash/kebabCase'
 
-import { GatsbyImage } from 'gatsby-plugin-image'
+import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 
 import styled from 'styled-components'
 
-export const StyledLink = styled((props) => <Link {...props} />)`
+import type { PostNode } from '../../types'
+
+export const StyledLink = styled(Link)`
   text-decoration: none;
   color: black;
   &:hover {
@@ -16,7 +18,8 @@ export const StyledLink = styled((props) => <Link {...props} />)`
 `
 
 const StyledTitle = styled.h5`
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   margin-bottom: 0;
 `
@@ -45,7 +48,8 @@ const StyledContent = styled.div`
   padding: 15px 0;
   color: #666666;
 
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   a {
     color: black;
@@ -116,7 +120,12 @@ const StyledContent = styled.div`
   }
 `
 
-const Post = ({ post, location }) => {
+interface PostProps {
+  post: PostNode
+  location?: Location
+}
+
+const Post: React.FC<PostProps> = ({ post }) => {
   const tagsJSX = (post.frontmatter?.tags || []).map((tag, index) => (
     <span key={index}>
       {index > 0 && ', '}
@@ -134,14 +143,18 @@ const Post = ({ post, location }) => {
   ) : (
     <span>{post.frontmatter.author}</span>
   )
+  const previewImgData = post.frontmatter.previewImg?.childImageSharp
+    ?.gatsbyImageData as IGatsbyImageData | undefined
   return (
     <div>
-      <GatsbyImage
-        image={post.frontmatter.previewImg.childImageSharp.gatsbyImageData}
-        style={{ width: '100%', marginBottom: '1rem' }}
-        imgStyle={{ objectFit: 'contain' }}
-        alt={post.frontmatter.title}
-      />
+      {previewImgData && (
+        <GatsbyImage
+          image={previewImgData}
+          style={{ width: '100%', marginBottom: '1rem' }}
+          imgStyle={{ objectFit: 'contain' }}
+          alt={post.frontmatter.title}
+        />
+      )}
 
       <StyledTitle>{post.frontmatter.title}</StyledTitle>
       <StyledDate>