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

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import { Link, graphql } from 'gatsby'
-import React from 'react'
+import * as React from 'react'
+import { Link, graphql, PageProps } from 'gatsby'
 import Gallery from '@browniebroke/gatsby-image-gallery'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
 
@@ -34,31 +34,31 @@ import dcDesign from '../images/data-controller-design.png'
 
 interface ImageSharpEdge {
   node: {
+    name: string
     childImageSharp: {
       thumb: IGatsbyImageData
       full: IGatsbyImageData
-      meta: {
-        originalName: string
-      }
     }
   }
 }
 
-interface PageProps {
-  data: {
-    images: {
-      edges: ImageSharpEdge[]
-    }
+interface IndexPageData {
+  images: {
+    edges: ImageSharpEdge[]
   }
 }
 
-const Home: React.FC<PageProps> = ({ data, location }) => {
+const CustomWrapper: React.FC<{
+  children?: React.ReactNode
+  onClick?: () => void
+}> = ({ children, onClick }) => (
+  <ThumbnailWrapper onClick={onClick}>{children}</ThumbnailWrapper>
+)
+
+const Home: React.FC<PageProps<IndexPageData>> = ({ data, location }) => {
   const images = data.images.edges.map(({ node }) => ({
     ...node.childImageSharp,
-    // Use original name as caption.
-    // The `originalName` is queried in a nested field,
-    // but the `Gallery` component expects `caption` at the top level.
-    caption: node.childImageSharp.meta.originalName
+    caption: node.name
   }))
 
   return (
@@ -231,13 +231,7 @@ const Home: React.FC<PageProps> = ({ data, location }) => {
       </Section>
       <Section color="black" bgColor="white">
         <SectionHeading>See How it Looks</SectionHeading>
-        <Gallery
-          images={images}
-          gutter={0}
-          customWrapper={({ children, onClick }) => (
-            <ThumbnailWrapper onClick={onClick}>{children}</ThumbnailWrapper>
-          )}
-        />
+        <Gallery images={images} gutter="0" customWrapper={CustomWrapper} />
       </Section>
       <ScheduleDemo />
     </Layout>
@@ -254,6 +248,7 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
+          name
           childImageSharp {
             thumb: gatsbyImageData(
               width: 300
@@ -261,9 +256,6 @@ export const pageQuery = graphql`
               placeholder: BLURRED
             )
             full: gatsbyImageData(layout: FULL_WIDTH)
-            meta: fixed {
-              originalName
-            }
           }
         }
       }