cleanup location

gatsby-node.js

@@ -81,7 +81,7 @@ exports.onPostBuild = async ({ graphql }) => {
   // JSON Feed query
   const result = await graphql(`
     {
-      allMarkdownRemark {
+      allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
         edges {
           node {
             html

gatsby/createPages.js

@@ -1,7 +1,9 @@
 const path = require('path')
-const archiveTemplate = path.resolve('src/components/templates/Posts.tsx')
 const { itemsPerPage } = require('../config')
 
+const postTemplate = path.resolve('src/components/templates/Post/index.tsx')
+const archiveTemplate = path.resolve('src/components/templates/Archive.tsx')
+
 const redirects = [
   { f: '/feed', t: '/feed.xml' },
   { f: '/feed/', t: '/feed.xml' },
@@ -24,8 +26,6 @@ function getPaginationData(i, numPages, slug) {
 }
 
 exports.generatePostPages = (createPage, posts) => {
-  const postTemplate = path.resolve('src/components/templates/Post/index.tsx')
-
   // Create Post pages
   posts.forEach((post) => {
     createPage({

gatsby/feeds.js

@@ -35,7 +35,7 @@ async function jsonItems(posts) {
   })
 }
 
-const createJsonFeed = (posts) => ({
+const createJsonFeed = async (posts) => ({
   version: 'https://jsonfeed.org/version/1',
   title: siteTitle,
   description: siteDescription,
@@ -49,19 +49,18 @@ const createJsonFeed = (posts) => ({
     name: author.name,
     url: author.uri
   },
-  items: jsonItems(posts)
+  items: await jsonItems(posts)
 })
 
 const generateJsonFeed = async (posts) => {
   await writeFile(
     path.join('./public', 'feed.json'),
-    JSON.stringify(createJsonFeed(posts)),
+    JSON.stringify(await createJsonFeed(posts)),
     'utf8'
   ).catch((err) => {
     throw Error('\nFailed to write JSON Feed file: ', err)
   })
 
-  // eslint-disable-next-line no-console
   console.log('\nsuccess Generating JSON feed')
 }
 

src/components/Layout.tsx

@@ -11,12 +11,7 @@ import styles from './Layout.module.scss'
 //   whyDidYouRender(React)
 // }
 
-export default function Layout({
+export default function Layout({ children }: { children: any }): ReactElement {
-  children
-}: {
-  location?: Location
-  children: any
-}): ReactElement {
   return (
     <>
       <Typekit />

src/components/molecules/PostTeaser.tsx

@@ -10,10 +10,6 @@ export const postTeaserQuery = graphql`
     fileAbsolutePath
     frontmatter {
       title
-      type
-      linkurl
-      tags
-      featured
       image {
         childImageSharp {
           ...ImageFluidThumb
@@ -22,7 +18,6 @@ export const postTeaserQuery = graphql`
     }
     fields {
       slug
-      date(formatString: "MMMM DD, YYYY")
     }
   }
 `
@@ -31,7 +26,7 @@ export default function PostTeaser({
   post,
   toggleSearch
 }: {
-  post: Post
+  post: Partial<Post>
   toggleSearch?: () => void
 }): ReactElement {
   const { image, title } = post.frontmatter

src/components/templates/Archive.test.tsx

@@ -1,13 +1,10 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { createHistory, createMemorySource } from '@reach/router'
 
 import Archive from './Archive'
 import data from '../../../jest/__fixtures__/posts.json'
 
 describe('Archive', () => {
-  const history = createHistory(createMemorySource('/photos'))
-
   const pageContext = {
     tag: 'hello',
     slug: '/hello',
@@ -17,11 +14,7 @@ describe('Archive', () => {
 
   it('renders without crashing', () => {
     const { container } = render(
-      <Archive
+      <Archive data={data} pageContext={pageContext} />
-        data={data}
-        pageContext={pageContext}
-        location={history.location}
-      />
     )
     expect(container.firstChild).toBeInTheDocument()
   })

src/components/templates/Archive.tsx

@@ -8,16 +8,14 @@ import PostContent from './Post/Content'
 import PostMore from './Post/More'
 import PostLinkActions from './Post/LinkActions'
 import SEO from '../atoms/SEO'
-import styles from './Posts.module.scss'
+import styles from './Archive.module.scss'
 import { Image } from '../atoms/Image'
 
 export default function Archive({
   data,
-  location,
   pageContext
 }: {
   data: any
-  location: Location
   pageContext: {
     tag: string
     slug: string

src/components/templates/Page.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
 .pageTitle {
-  composes: archivetitle from './Posts.module.scss';
+  composes: archivetitle from './Archive.module.scss';
   margin-bottom: $spacer * 2;
 }

src/components/templates/Page.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
+import { useLocation } from '@reach/router'
 import { Post } from '../../@types/Post'
 import SEO from '../atoms/SEO'
 import styles from './Page.module.scss'
 
 export default function Page({
   title,
-  location,
   section,
   children,
   post
@@ -14,13 +14,14 @@ export default function Page({
   title: string
   children: any
   section?: string
-  location: Location
   post?: Post
 }): ReactElement {
+  const { pathname } = useLocation()
+
   return (
     <>
       <Helmet title={title} />
-      <SEO slug={location.pathname} postSEO post={post} />
+      <SEO slug={pathname} postSEO post={post} />
 
       <h1 className={styles.pageTitle}>{title}</h1>
       {section ? <section className={section}>{children}</section> : children}

src/pages/404.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { Link } from 'gatsby'
+import { Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import styles from './404.module.scss'
 
@@ -9,14 +9,12 @@ const page = {
   }
 }
 
-const NotFound = ({ location }: { location: Location }): ReactElement => (
+const NotFound = (props: PageProps): ReactElement => (
-  <Page title={page.frontmatter.title} post={page} location={location}>
+  <Page title={page.frontmatter.title} post={page}>
     <div className={styles.hal9000} />
 
     <div className={styles.wrapper}>
-      {/* eslint-disable-next-line quotes */}
       <h1 className={styles.title}>{"I'm sorry Dave"}</h1>{' '}
-      {/* eslint-disable-next-line quotes */}
       <p className={styles.text}>{"I'm afraid I can't do that"}</p>
       <Link to={'/'}>Back to homepage</Link>
     </div>

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { graphql, Link } from 'gatsby'
+import { graphql, Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import { Post } from '../@types/Post'
 import { Image } from '../components/atoms/Image'
@@ -13,20 +13,9 @@ const page = {
   }
 }
 
-export default function Home({
+export default function Home(props: PageProps): ReactElement {
-  data,
-  location
-}: {
-  data: any
-  location: Location
-}): ReactElement {
   return (
-    <Page
+    <Page title={page.frontmatter.title} post={page} section={styles.home}>
-      title={page.frontmatter.title}
-      post={page}
-      location={location}
-      section={styles.home}
-    >
       <Featured />
       Latest Posts & Links
       <br />

src/pages/photos.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { graphql, Link } from 'gatsby'
+import { graphql, Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import { Post } from '../@types/Post'
 import { Image } from '../components/atoms/Image'
@@ -28,21 +28,10 @@ const PhotoThumb = ({ photo }: { photo: Post }): ReactElement => {
   )
 }
 
-export default function Photos({
+export default function Photos(props: PageProps): ReactElement {
-  data,
-  location
-}: {
-  data: any
-  location: Location
-}): ReactElement {
   return (
-    <Page
+    <Page title={page.frontmatter.title} post={page} section={styles.photos}>
-      title={page.frontmatter.title}
+      {(props.data as any).photos.edges.map(({ node }: { node: Post }) => (
-      post={page}
-      location={location}
-      section={styles.photos}
-    >
-      {data.photos.edges.map(({ node }: { node: Post }) => (
         <PhotoThumb key={node.id} photo={node} />
       ))}
     </Page>

src/pages/tags.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { graphql } from 'gatsby'
+import { graphql, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import Tag from '../components/atoms/Tag'
 import styles from './tags.module.scss'
@@ -16,15 +16,14 @@ interface Tag {
   totalCount: number
 }
 
-interface TagsPageProps {
+interface TagsPageProps extends PageProps {
   data: {
     allMarkdownRemark: { group: Tag[] }
   }
-  location: Location
 }
 
-const TagsPage = ({ data, location }: TagsPageProps): ReactElement => (
+const TagsPage = ({ data }: TagsPageProps): ReactElement => (
-  <Page title={page.frontmatter.title} location={location} post={page}>
+  <Page title={page.frontmatter.title} post={page}>
     <ul className={styles.tags}>
       {data.allMarkdownRemark.group
         .sort((a, b) => b.totalCount - a.totalCount)