Merge pull request #175 from kremalicious/feature/photos-layout

new photos layout

.eslintrc

@@ -19,6 +19,7 @@
         "plugin:prettier/recommended",
         "plugin:react/recommended"
       ],
+      "plugins": ["@typescript-eslint", "react"],
       "rules": {
         "object-curly-spacing": ["error", "always"],
         "react/prop-types": "off",

jest.config.js

@@ -1,13 +1,17 @@
 module.exports = {
   transform: {
-    '^.+\\.tsx?$': '<rootDir>/jest/jest-preprocess.js'
+    '^.+\\.(tsx?|jsx?)$': 'ts-jest',
+    '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
   },
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
+
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
     '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/jest/__mocks__/file-mock.js',
+      '<rootDir>/jest/__mocks__/file-mock.ts',
-    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.js'
+    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.ts'
   },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'],
   transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
   globals: {
@@ -15,6 +19,6 @@ module.exports = {
   },
   testURL: 'http://localhost',
   setupFiles: ['<rootDir>/jest/loadershim.js'],
-  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.ts'],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/@types/**/*']
 }

jest/__mocks__/file-mock.js

@@ -1 +0,0 @@
-module.exports = 'test-file-stub'

jest/__mocks__/file-mock.ts

@@ -0,0 +1 @@
+export default 'test-file-stub'

jest/__mocks__/gatsby.ts

@@ -1,13 +1,13 @@
-const React = require('react')
+import React from 'react'
 const gatsby = jest.requireActual('gatsby')
 
-module.exports = {
+export default {
   ...gatsby,
   graphql: jest.fn(),
   Link: jest.fn().mockImplementation(
     // these props are invalid for an `a` tag
     ({
-      /* eslint-disable no-unused-vars */
+      /* eslint-disable @typescript-eslint/no-unused-vars */
       activeClassName,
       activeStyle,
       getProps,
@@ -15,7 +15,7 @@ module.exports = {
       ref,
       replace,
       to,
-      /* eslint-enable no-unused-vars */
+      /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     }) =>
       React.createElement('a', {

jest/__mocks__/svgr-mock.js

@@ -1 +0,0 @@
-module.exports = { ReactComponent: 'svg' }

jest/__mocks__/svgr-mock.ts

@@ -0,0 +1,3 @@
+const content = 'svg'
+export const ReactComponent = content
+export default content

jest/setup-test-env.js

@@ -1 +0,0 @@
-require('@testing-library/jest-dom/extend-expect')

jest/setup-test-env.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -18,6 +18,7 @@
     "lint:css": "stylelint 'src/**/*.{css,scss}'",
     "lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,public,.cache,.git,coverage}/**/*'",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json,css,scss}'",
+    "tsc": "tsc --noEmit",
     "deploy": "./scripts/deploy.sh",
     "new": "babel-node ./scripts/new.js"
   },
@@ -90,6 +91,7 @@
     "@testing-library/react": "^9.2.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.18",
+    "@types/lunr": "^2.3.2",
     "@types/node": "^12.7.8",
     "@types/react": "^16.9.4",
     "@types/react-dom": "^16.9.1",
@@ -124,6 +126,7 @@
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-prettier": "^1.1.1",
+    "ts-jest": "^24.1.0",
     "typescript": "^3.6.3",
     "why-did-you-update": "^1.0.6"
   },

src/@types/global.d.ts

@@ -1,23 +1,18 @@
-interface CSSModule {
-  [className: string]: string
-}
-
-// type shims for CSS modules
-declare module '*.module.scss' {
-  const cssModule: CSSModule
-  export = cssModule
-}
-
 declare module '*.module.css' {
-  const cssModule: CSSModule
+  const classes: { [key: string]: string }
-  export = cssModule
+  export default classes
 }
 
-/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+declare module '*.module.scss' {
-interface SvgrComponent
+  const classes: { [key: string]: string }
-  extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+  export default classes
+}
 
 declare module '*.svg' {
-  const value: SvgrComponent
+  import * as React from 'react'
-  export default value
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >
+  const src: string
+  export default src
 }

src/@types/node_modules.d.ts

@@ -0,0 +1,5 @@
+declare module 'pigeon-maps'
+declare module 'pigeon-marker'
+declare module 'react-blockies'
+declare module 'react-time'
+declare module 'remark-react'

src/@types/pigeon-maps.d.ts

@@ -1 +0,0 @@
-declare module 'pigeon-maps'

src/@types/pigeon-marker.d.ts

@@ -1 +0,0 @@
-declare module 'pigeon-marker'

src/@types/react-blockies.d.ts

@@ -1 +0,0 @@
-declare module 'react-blockies'

src/@types/react-time.d.ts

@@ -1 +0,0 @@
-declare module 'react-time'

src/@types/remark-react.d.ts

@@ -1 +0,0 @@
-declare module 'remark-react'

src/components/Post/PostImage.module.scss

@@ -23,12 +23,7 @@
 }
 
 .postImage {
-  @include breakoutviewport();
-
-  max-width: none;
   display: block;
-  margin-top: $spacer * 1.5;
-  margin-bottom: $spacer * 1.5;
 
   a & {
     position: relative;

src/components/Search/SearchResults.tsx

@@ -5,6 +5,7 @@ import Container from '../atoms/Container'
 import PostTeaser from '../Post/PostTeaser'
 import SearchResultsEmpty from './SearchResultsEmpty'
 import styles from './SearchResults.module.scss'
+import { GatsbyImageProps } from 'gatsby-image'
 
 const query = graphql`
   query {
@@ -29,6 +30,22 @@ const query = graphql`
   }
 `
 
+interface Page {
+  slug: string
+}
+
+interface PostNode {
+  node: {
+    id: string
+    fields: { slug: string }
+    frontmatter: {
+      title: string
+      type: string
+      image: { childImageSharp: GatsbyImageProps }
+    }
+  }
+}
+
 export default function SearchResults({
   searchQuery,
   results,
@@ -48,13 +65,13 @@ export default function SearchResults({
       <Container>
         {results.length > 0 ? (
           <ul>
-            {results.map(page =>
+            {results.map((page: Page) =>
               posts
-                .filter(post => post.node.fields.slug === page.slug)
+                .filter((post: PostNode) => post.node.fields.slug === page.slug)
-                .map(({ node }: { node: any }) => (
+                .map((post: PostNode) => (
                   <PostTeaser
                     key={page.slug}
-                    post={node}
+                    post={post.node}
                     toggleSearch={toggleSearch}
                   />
                 ))

src/components/Search/index.test.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-
-import Search from '.'
-import { useStaticQuery } from 'gatsby'
-
-describe('Search', () => {
-  beforeEach(() => {
-    useStaticQuery.mockImplementation(() => {
-      return {
-        allMarkdownRemark: {
-          edges: [
-            {
-              node: {
-                id: 'ddd',
-                frontmatter: {
-                  title: 'Hello',
-                  image: {
-                    childImageSharp: 'hello'
-                  }
-                },
-                fields: {
-                  slug: '/hello/'
-                }
-              }
-            }
-          ]
-        }
-      }
-    })
-
-    const portalRoot = document.createElement('div')
-    portalRoot.setAttribute('id', 'document')
-    document.body.appendChild(portalRoot)
-  })
-
-  it('can be opened', () => {
-    const { getByTitle, getByPlaceholderText } = render(<Search lng="en" />)
-    fireEvent.click(getByTitle('Search'))
-    fireEvent.change(getByPlaceholderText('Search everything'), {
-      target: { value: 'hello' }
-    })
-    fireEvent.click(getByTitle('Close search'))
-  })
-})

src/components/Search/index.tsx

@@ -1,12 +1,26 @@
 import React, { useState } from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { CSSTransition } from 'react-transition-group'
+import lunr from 'lunr'
 import SearchInput from './SearchInput'
 import SearchButton from './SearchButton'
 import SearchResults from './SearchResults'
 
 import styles from './index.module.scss'
 
+declare global {
+  interface Window {
+    __LUNR__: {
+      readonly [language: string]: {
+        readonly index: lunr.Index
+        readonly store: {
+          readonly [key: string]: any
+        }
+      }
+    }
+  }
+}
+
 function getSearchResults(query: string, lng: string) {
   if (!query || !window.__LUNR__) return []
   const lunrIndex = window.__LUNR__[lng]

src/components/Web3Donation/Alerts.tsx

@@ -21,7 +21,7 @@ export default function Alerts({
   message
 }: {
   transactionHash: string | null
-  message: { text: MessageChannel; status: string } | null
+  message: { text?: MessageChannel; status?: string } | null
 }) {
   const constructMessage = () => {
     let messageOutput
@@ -53,7 +53,7 @@ export default function Alerts({
   return (
     <div
       className={classes()}
-      dangerouslySetInnerHTML={{ __html: constructMessage() }}
+      dangerouslySetInnerHTML={{ __html: `${constructMessage()}` }}
     />
   )
 }

src/components/Web3Donation/Conversion.tsx

@@ -3,7 +3,7 @@ import { getFiat } from './utils'
 import styles from './Conversion.module.scss'
 
 export default class Conversion extends PureComponent<
-  { amount: string },
+  { amount: number },
   { euro: string; dollar: string }
 > {
   state = {

src/components/Web3Donation/InputGroup.tsx

@@ -10,7 +10,7 @@ export default function InputGroup({
   sendTransaction,
   selectedAccount
 }: {
-  amount: string
+  amount: number
   onAmountChange(target: any): void
   sendTransaction(): void
   selectedAccount?: string | null

src/components/Web3Donation/index.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import Web3 from 'web3'
 import InputGroup from './InputGroup'
 import Alerts, { alertMessages } from './Alerts'
 import styles from './index.module.scss'
@@ -9,26 +9,40 @@ const ONE_SECOND = 1000
 const ONE_MINUTE = ONE_SECOND * 60
 const correctNetwork = 1
 
-export default class Web3Donation extends PureComponent {
+interface Web3DonationState {
+  netId: number
+  networkName: string
+  accounts: string[]
+  selectedAccount: string
+  amount: number
+  transactionHash: string
+  receipt: string
+  message: {
+    status?: string
+    text?: string
+  }
+  inTransaction: boolean
+}
+
+export default class Web3Donation extends PureComponent<
+  { address: string },
+  Web3DonationState
+> {
   state = {
-    netId: null,
+    netId: 0,
-    networkName: null,
+    networkName: '',
-    accounts: [],
+    accounts: [''],
-    selectedAccount: null,
+    selectedAccount: '',
-    amount: '0.01',
+    amount: 0.01,
-    transactionHash: null,
+    transactionHash: '',
-    receipt: null,
+    receipt: '',
-    message: null,
+    message: {},
     inTransaction: false
   }
 
-  static propTypes = {
+  web3: Web3 = null
-    address: PropTypes.string
+  interval: any = null
-  }
+  networkInterval: any = null
-
-  web3 = null
-  interval = null
-  networkInterval = null
 
   componentDidMount() {
     this.initWeb3()
@@ -47,10 +61,15 @@ export default class Web3Donation extends PureComponent {
       this.web3
         ? this.initAllTheTings()
         : this.setState({
-            message: { status: 'error', text: alertMessages().noWeb3 }
+            message: {
+              status: 'error',
+              text: alertMessages().noWeb3
+            }
           })
     } catch (error) {
-      this.setState({ message: { status: 'error', text: error } })
+      this.setState({
+        message: { status: 'error', text: error }
+      })
     }
   }
 
@@ -106,7 +125,10 @@ export default class Web3Donation extends PureComponent {
       })
     } else {
       this.setState({
-        message: { status: 'error', text: alertMessages().noAccount }
+        message: {
+          status: 'error',
+          text: alertMessages().noAccount
+        }
       })
     }
   }
@@ -132,16 +154,21 @@ export default class Web3Donation extends PureComponent {
         })
       })
       .on('error', error =>
-        this.setState({ message: { status: 'error', text: error } })
+        this.setState({
+          message: { status: 'error', text: error.message }
+        })
       )
       .then(() => {
         this.setState({
-          message: { status: 'success', text: alertMessages().success }
+          message: {
+            status: 'success',
+            text: alertMessages().success
+          }
         })
       })
   }
 
-  onAmountChange = ({ target }) => {
+  onAmountChange = ({ target }: { target: any }) => {
     this.setState({ amount: target.value })
   }
 

src/components/Web3Donation/utils.ts

@@ -1,8 +1,18 @@
 import Web3 from 'web3'
 
+declare global {
+  interface Window {
+    ethereum: any
+    web3: Web3
+  }
+
+  interface Console {
+    [key: string]: any
+  }
+}
+
 export class Logger {
   static dispatch(verb: any, ...args: any) {
-    // eslint-disable-next-line no-console
     console[verb](...args)
   }
 

src/components/atoms/Exif.test.tsx

@@ -10,6 +10,7 @@ const exif = {
   fstop: '7.2',
   shutterspeed: '200',
   focalLength: '200',
+  lensModel: 'Hello',
   exposure: '200',
   gps: { latitude: '52.4792516', longitude: '13.431609' }
 }

src/components/atoms/SEO.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const query = graphql`
@@ -15,69 +15,55 @@ const query = graphql`
   }
 `
 
-const createSchemaOrg = (
+// const createSchemaOrg = (
-  blogURL: string,
+//   blogURL: string,
-  title: string,
+//   title: string,
-  postSEO: boolean,
+//   postSEO: boolean,
-  postURL: string,
+//   postURL: string,
-  image: string,
+//   image: string,
-  description: string
+//   description: string,
-) => {
+//   author?: string
-  const schemaOrgJSONLD = [
+// ) => {
-    {
+//   const schemaOrgJSONLD: any = [
-      '@context': 'http://schema.org',
+//     {
-      '@type': 'WebSite',
+//       '@context': 'http://schema.org',
-      url: blogURL,
+//       '@type': 'WebSite',
-      name: title
+//       url: blogURL,
-    }
+//       name: title
-  ]
+//     }
+//   ]
 
-  if (postSEO) {
+//   if (postSEO) {
-    schemaOrgJSONLD.push(
+//     schemaOrgJSONLD.push({
-      {
+//       '@context': 'http://schema.org',
-        '@context': 'http://schema.org',
+//       '@type': 'BlogPosting',
-        '@type': 'BreadcrumbList',
+//       author,
-        itemListElement: [
+//       publisher: author,
-          {
+//       url: postURL,
-            '@type': 'ListItem',
+//       name: title,
-            position: 1,
+//       headline: title,
-            item: {
+//       image: {
-              '@id': postURL,
+//         '@type': 'ImageObject',
-              name: title,
+//         url: image
-              image
+//       },
-            }
+//       description
-          }
+//     })
-        ]
+//   }
-      },
+//   return schemaOrgJSONLD
-      {
+// }
-        '@context': 'http://schema.org',
-        '@type': 'BlogPosting',
-        url: blogURL,
-        name: title,
-        headline: title,
-        image: {
-          '@type': 'ImageObject',
-          url: image
-        },
-        description
-      }
-    )
-  }
-  return schemaOrgJSONLD
-}
 
 const MetaTags = ({
   description,
   image,
   url,
-  schema,
+  // schema,
   postSEO,
   title
 }: {
   description: string
   image: string
   url: string
-  schema: string
+  // schema: string
   postSEO: boolean
   title: string
 }) => {
@@ -96,7 +82,7 @@ const MetaTags = ({
       <link rel="canonical" href={url} />
 
       {/* Schema.org tags */}
-      <script type="application/ld+json">{schema}</script>
+      {/* <script type="application/ld+json">{schema}</script> */}
 
       {/* OpenGraph tags */}
       <meta property="og:url" content={url} />
@@ -161,23 +147,22 @@ export default function SEO({
   const blogURL = siteUrl
   const url = postSEO ? postURL : blogURL
 
-  let schema = createSchemaOrg(
+  // const schema = createSchemaOrg(
-    blogURL,
+  //   blogURL,
-    title,
+  //   title,
-    postSEO,
+  //   postSEO,
-    postURL,
+  //   postURL,
-    image,
+  //   image,
-    description
+  //   description,
-  )
+  //   author
-
+  // )
-  schema = JSON.stringify(schema)
 
   return (
     <MetaTags
       description={description}
       image={image}
       url={url}
-      schema={schema}
+      // schema={(schema as unknown) as string}
       postSEO={postSEO}
       title={title}
     />

src/components/atoms/Transitions.ts

@@ -7,24 +7,25 @@ export const fadeIn = {
   }
 }
 
-export const moveInTop = {
+const transition = { type: 'spring' }
-  enter: {
+
+const enter = {
   y: 0,
-    transition: { type: 'spring' }
+  ...transition
-  },
+}
+
+export const moveInTop = {
+  ...enter,
   exit: {
     y: '-2rem',
-    transition: { type: 'spring' }
+    ...transition
   }
 }
 
 export const moveInBottom = {
-  enter: {
+  ...enter,
-    y: 0,
-    transition: { type: 'spring' }
-  },
   exit: {
     y: '2rem',
-    transition: { type: 'spring' }
+    ...transition
   }
 }

src/components/atoms/Typekit.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const TypekitScript = (typekitID: string) => (

src/components/molecules/Menu.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { Link } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
 import styles from './Menu.module.scss'

src/components/molecules/Vcard.tsx

@@ -30,13 +30,7 @@ export default function Vcard() {
 
   return (
     <div className={styles.vcard}>
-      <Img
+      <Img className={styles.avatar} fixed={avatar} alt="avatar" />
-        className={styles.avatar}
-        fixed={avatar}
-        alt="avatar"
-        width="80"
-        height="80"
-      />
       <p className={styles.description}>
         Blog of designer &amp; developer{' '}
         <a className="fn" rel="author" href={uri}>

src/pages/goodies.tsx

@@ -3,7 +3,6 @@ import { graphql, Link } from 'gatsby'
 import PostImage from '../components/Post/PostImage'
 import Page from '../templates/Page'
 import styles from './goodies.module.scss'
-import { FluidObject } from 'gatsby-image'
 
 const page = {
   frontmatter: {
@@ -13,22 +12,21 @@ const page = {
   }
 }
 
-interface GoodieNode {
+interface Post {
   id: string
   fields: { slug: string }
   frontmatter: {
     title: string
-    image: { childImageSharp: { fluid: FluidObject } }
+    image: { childImageSharp: any }
   }
 }
 
-const GoodiesThumbs = ({ edges }: { edges: [{ node: GoodieNode }] }) =>
+const GoodiesThumb = ({ post }: { post: Post }) => {
-  edges.map(({ node }: { node: GoodieNode }) => {
+  const { title, image } = post.frontmatter
-    const { title, image } = node.frontmatter
+  const { slug } = post.fields
-    const { slug } = node.fields
 
   return (
-      <article className={styles.goodie} key={node.id}>
+    <article className={styles.goodie}>
       {image && (
         <Link to={slug}>
           <h1 className={styles.title}>{title}</h1>
@@ -37,18 +35,20 @@ const GoodiesThumbs = ({ edges }: { edges: [{ node: GoodieNode }] }) =>
       )}
     </article>
   )
-  })
+}
 
 export default function Goodies({
   data,
   location
 }: {
-  data: { goodies: { edges: [{ node: GoodieNode }] } }
+  data: { goodies: { edges: [{ node: Post }] } }
   location: Location
 }) {
   return (
     <Page title={page.frontmatter.title} post={page} location={location}>
-      <GoodiesThumbs edges={data.goodies.edges} />
+      {data.goodies.edges.map(({ node }) => (
+        <GoodiesThumb key={node.id} post={node} />
+      ))}
     </Page>
   )
 }

src/pages/photos.module.scss

@@ -2,25 +2,33 @@
 @import 'mixins';
 
 .photos {
-  @include breakoutviewport;
+  @include breakoutviewport--full;
 
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr;
-  justify-content: space-between;
+  gap: $spacer;
   padding-left: $spacer;
   padding-right: $spacer;
 
-  @media (min-width: $screen-md) {
+  @media (min-width: $screen-sm) {
-    padding-left: 0;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    padding-right: 0;
   }
 }
 
 .photo {
-  flex: 0 0 48%;
-  margin-bottom: 4%;
-
   a {
     display: block;
   }
+
+  figure {
+    > div {
+      margin: 0;
+    }
+  }
+
+  figcaption {
+    font-size: $font-size-base;
+    padding-left: $spacer / 2;
+    padding-right: $spacer / 2;
+  }
 }

src/pages/photos.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import { graphql, Link } from 'gatsby'
-import Image from '../components/atoms/Image'
 import Page from '../templates/Page'
-
+import PostImage from '../components/Post/PostImage'
 import styles from './photos.module.scss'
-import { FluidObject } from 'gatsby-image'
 
 const page = {
   frontmatter: {
@@ -13,39 +11,47 @@ const page = {
   }
 }
 
-interface PhotoNode {
+interface Photo {
-  node: {
   id: string
   fields: { slug: string }
   frontmatter: {
     title: string
     type: string
-      image: { childImageSharp: { fluid: FluidObject } }
+    image: { childImageSharp: any }
-    }
   }
 }
 
-const PhotoThumbs = ({ edges }: { edges: PhotoNode[] }) =>
+const PhotoThumb = ({ photo }: { photo: Photo }) => {
-  edges.map(({ node }) => {
+  const { title, image } = photo.frontmatter
-    const { title, image } = node.frontmatter
+  const { slug } = photo.fields
-    const { slug } = node.fields
+  const { fluid } = image.childImageSharp
 
   return (
-      <article className={styles.photo} key={node.id}>
+    <article className={styles.photo}>
       {image && (
         <Link to={slug}>
-            <Image fluid={image.childImageSharp.fluid} alt={title} />
+          <PostImage title={title} fluid={fluid} alt={title} />
         </Link>
       )}
     </article>
   )
-  })
+}
+
+interface PhotosData {
+  photos: {
+    edges: [
+      {
+        node: Photo
+      }
+    ]
+  }
+}
 
 export default function Photos({
   data,
   location
 }: {
-  data: { photos: { edges: PhotoNode[] } }
+  data: PhotosData
   location: Location
 }) {
   return (
@@ -55,7 +61,9 @@ export default function Photos({
       location={location}
       section={styles.photos}
     >
-      <PhotoThumbs edges={data.photos.edges} />
+      {data.photos.edges.map(({ node }) => (
+        <PhotoThumb key={node.id} photo={node} />
+      ))}
     </Page>
   )
 }

src/templates/Page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import SEO from '../components/atoms/SEO'
 import Layout from '../components/Layout'
 import styles from './Page.module.scss'

src/templates/Post.module.scss

@@ -6,7 +6,21 @@
   padding-top: $spacer;
   padding-bottom: $spacer * 3;
 
+  > a {
+    display: block;
+  }
+
   &:only-child {
     padding-bottom: $spacer;
   }
 }
+
+.postImageWrap {
+  @include breakoutviewport();
+
+  figure {
+    max-width: none;
+    margin-top: $spacer * 1.5;
+    margin-bottom: 0;
+  }
+}

src/templates/Post.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import PostImage from '../components/Post/PostImage'
@@ -39,7 +39,9 @@ export default function Post({
           {type === 'post' && <PostLead post={post} />}
           {type === 'photo' && <PostContent post={post} />}
           {image && (
+            <div className={styles.postImageWrap}>
               <PostImage fluid={image.childImageSharp.fluid} alt={title} />
+            </div>
           )}
           {image && image.fields && <Exif exif={image.fields.exif} />}
 

src/templates/Posts.tsx

@@ -11,6 +11,7 @@ import SEO from '../components/atoms/SEO'
 import Pagination from '../components/molecules/Pagination'
 import Featured from '../components/molecules/Featured'
 import styles from './Posts.module.scss'
+import stylesPost from './Post.module.scss'
 
 export default function Posts({
   data,
@@ -36,11 +37,13 @@ export default function Posts({
 
         {image && (
           <Link to={slug} title={title}>
+            <div className={stylesPost.postImageWrap}>
               <PostImage
                 title={type === 'photo' ? title : null}
                 fluid={image.childImageSharp.fluid}
                 alt={title}
               />
+            </div>
           </Link>
         )}
 

tsconfig.json

@@ -1,18 +1,16 @@
 {
   "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
     "module": "commonjs",
     "target": "esnext",
-    "jsx": "preserve",
+    "jsx": "react",
-    "lib": ["dom", "es2015", "es2017"],
+    "lib": ["dom", "esnext"],
-    "strict": true,
+    "allowSyntheticDefaultImports": true,
-    "noEmit": true,
-    "isolatedModules": true,
     "esModuleInterop": true,
-    "skipLibCheck": true,
+    "allowJs": true
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "preserveConstEnums": true
   },
   "exclude": ["node_modules", "public", ".cache", "*.js"],
-  "include": ["./src/**/*"]
+  "include": ["./src/**/*", "./jest/**/*"]
 }