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

src/pages/404.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-// import { Link } from 'gatsby'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -7,7 +6,13 @@ import Seo from '../components/seo'
 import { Section } from '../components/shared'
 import { SideBar } from '../templates/sidebar'
 
-const NotFound = ({ data, location, pageContext }) => (
+import type { PageProps } from 'gatsby'
+import type { PageContext } from '../types'
+
+const NotFound: React.FC<PageProps<unknown, PageContext>> = ({
+  location,
+  pageContext
+}) => (
   <Layout location={location} heroSection={false}>
     <Seo title="Page Not Found" />
     <Section color="black" bgColor="white" bottomArrow={false}>

src/pages/about.tsx

@@ -1,5 +1,5 @@
-import { PageProps, Link, graphql } from 'gatsby'
-import React from 'react'
+import { PageProps, Link } from 'gatsby'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -10,17 +10,7 @@ import {
   SectionDesc
 } from '../components/shared/styledComponents'
 
-type DataProps = {
-  site: {
-    meta: {
-      title: string
-      description: string
-      social: { linkedin: string }
-    }
-  }
-}
-
-const About: React.FC<PageProps<DataProps>> = ({ data, location }) => {
+const About: React.FC<PageProps<unknown>> = ({ location }) => {
   return (
     <Layout
       location={location}

src/pages/contact.tsx

@@ -1,5 +1,5 @@
-import { PageProps, Link, graphql } from 'gatsby'
-import React, { useState } from 'react'
+import { PageProps } from 'gatsby'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -22,25 +22,15 @@ import contactBg from '../images/contact_bg.jpg'
 import '../styledComponents/contact.css'
 import { NostrController } from '../controllers'
 
-type DataProps = {
-  site: {
-    meta: {
-      title: string
-      description: string
-      social: { linkedin: string }
-    }
-  }
-}
-
-const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
+const Contact: React.FC<PageProps<unknown>> = ({ location }) => {
   const nostrController = NostrController.getInstance()
 
-  const [name, setName] = useState<string>()
-  const [email, setEmail] = useState<string>()
-  const [emailError, setEmailError] = useState<boolean>(false)
-  const [subject, setSubject] = useState<string>()
-  const [message, setMessage] = useState<string>()
-  const [notification, setNotification] = useState<string>()
+  const [name, setName] = React.useState<string>()
+  const [email, setEmail] = React.useState<string>()
+  const [emailError, setEmailError] = React.useState<boolean>(false)
+  const [subject, setSubject] = React.useState<string>()
+  const [message, setMessage] = React.useState<string>()
+  const [notification, setNotification] = React.useState<string>()
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -98,7 +88,7 @@ Email: ${email}
 Subject: ${subject}
 Message: ${message}`
                     )
-                    .catch((err) => {
+                    .catch((err: unknown) => {
                       setNotification(
                         `Something went wrong. Please check the console for more information. Please try one more time.`
                       )
@@ -176,7 +166,7 @@ Message: ${message}`
                   className="form-control contactFormStyles"
                   id="mesage"
                   name="message"
-                  rows="5"
+                  rows={5}
                   rules="required|max:200"
                   onChange={(evt) => {
                     setMessage(evt.target.value)

src/pages/faq.tsx

@@ -1,5 +1,5 @@
-import { PageProps, Link, graphql } from 'gatsby'
-import React from 'react'
+import { PageProps, Link } from 'gatsby'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -13,17 +13,7 @@ import {
 
 import { FAQ } from '../styledComponents/faq'
 
-type DataProps = {
-  site: {
-    meta: {
-      title: string
-      description: string
-      social: { linkedin: string }
-    }
-  }
-}
-
-const Faq: React.FC<PageProps<DataProps>> = ({ data, location }) => {
+const Faq: React.FC<PageProps<unknown>> = ({ location }) => {
   return (
     <Layout
       location={location}

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
-            }
           }
         }
       }

src/pages/{MarkdownRemark.frontmatter__slug}.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { graphql } from 'gatsby'
+import * as React from 'react'
+import { graphql, PageProps } from 'gatsby'
 import styled from 'styled-components'
 
 import Layout from '../components/layout'
@@ -7,6 +7,8 @@ import Seo from '../components/seo'
 
 import { Section } from '../components/shared'
 
+import type { PostNode, PageContext } from '../types'
+
 const StyledMarkdown = styled.div`
   color: rgb(102, 102, 102);
   h2,
@@ -18,13 +20,20 @@ const StyledMarkdown = styled.div`
   h2 {
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica,
-      Arial, sans-serif;
+    font-family:
+      'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
   }
 `
 
-export default function Template({ data, location }) {
-  const { frontmatter, html } = data?.markdownRemark
+interface MarkdownPageData {
+  markdownRemark: PostNode
+}
+
+const MarkdownPageTemplate: React.FC<
+  PageProps<MarkdownPageData, PageContext>
+> = ({ data, location }) => {
+  const { frontmatter, html } = data.markdownRemark
   return (
     <Layout
       location={location}
@@ -39,6 +48,8 @@ export default function Template({ data, location }) {
   )
 }
 
+export default MarkdownPageTemplate
+
 export const pageQuery = graphql`
   query ($id: String!) {
     markdownRemark(id: { eq: $id }) {