prototype new frontpage structure

gatsby/createPages.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const postsTemplate = path.resolve('src/components/templates/Posts.tsx')
+const archiveTemplate = path.resolve('src/components/templates/Posts.tsx')
 const { itemsPerPage } = require('../config')
 
 const redirects = [
@@ -45,9 +45,9 @@ exports.generatePostPages = (createPage, posts) => {
     })
   })
 
-  // Create paginated Blog index pages
+  // Create paginated Blog archive pages
   const numPages = Math.ceil(posts.length / itemsPerPage)
-  const slug = `/`
+  const slug = `/archive/`
 
   Array.from({ length: numPages }).forEach((_, i) => {
     const { prevPagePath, nextPagePath, path } = getPaginationData(
@@ -58,7 +58,7 @@ exports.generatePostPages = (createPage, posts) => {
 
     createPage({
       path,
-      component: postsTemplate,
+      component: archiveTemplate,
       context: {
         slug,
         limit: itemsPerPage,
@@ -87,7 +87,7 @@ exports.generateTagPages = (createPage, tags) => {
 
       createPage({
         path,
-        component: postsTemplate,
+        component: archiveTemplate,
         context: {
           tag,
           slug,

src/components/templates/Archive.test.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { createHistory, createMemorySource } from '@reach/router'
 
-import Posts from './Posts'
+import Archive from './Archive'
 import data from '../../../jest/__fixtures__/posts.json'
 
-describe('Post', () => {
+describe('Archive', () => {
   const history = createHistory(createMemorySource('/photos'))
 
   const pageContext = {
@@ -17,7 +17,7 @@ describe('Post', () => {
 
   it('renders without crashing', () => {
     const { container } = render(
-      <Posts
+      <Archive
         data={data}
         pageContext={pageContext}
         location={history.location}

src/components/templates/Archive.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from 'react'
 import { Link, graphql } from 'gatsby'
 import { Post } from '../../@types/Post'
 import Pagination from '../molecules/Pagination'
-import Featured from '../molecules/Featured'
 import PostTitle from './Post/Title'
 import PostLead from './Post/Lead'
 import PostContent from './Post/Content'
@@ -12,7 +11,7 @@ import SEO from '../atoms/SEO'
 import styles from './Posts.module.scss'
 import { Image } from '../atoms/Image'
 
-export default function Posts({
+export default function Archive({
   data,
   location,
   pageContext
@@ -70,7 +69,6 @@ export default function Posts({
   return (
     <>
       <SEO />
-      {location.pathname === '/' && <Featured />}
       {tag && (
         <h1 className={styles.archivetitle}>
           <span>#</span>
@@ -88,7 +86,7 @@ export default function Posts({
   )
 }
 
-export const postsQuery = graphql`
+export const archiveQuery = graphql`
   query($tag: String, $skip: Int, $limit: Int) {
     allMarkdownRemark(
       filter: { frontmatter: { tags: { eq: $tag } } }
@@ -103,6 +101,7 @@ export const postsQuery = graphql`
           excerpt(pruneLength: 250)
           frontmatter {
             title
+            updated
             type
             linkurl
             image {

src/components/templates/Post/Title.tsx

@@ -16,7 +16,7 @@ export default function PostTitle({
   slug?: string
   linkurl?: string
   title: string
-  date: string
+  date?: string
   updated?: string
 }): ReactElement {
   const linkHostname = linkurl ? new URL(linkurl).hostname : null
@@ -39,12 +39,14 @@ export default function PostTitle({
   ) : (
     <>
       <h1 className={styles.hentry__title}>{title}</h1>
+      {date && (
         <div className={styles.time}>
           {updated && 'published '}
           <Time date={date} />
           {updated && ' • updated '}
           {updated && <Time date={updated} />}
         </div>
+      )}
     </>
   )
 }

src/pages/index.module.scss

@@ -0,0 +1,4 @@
+@import 'variables';
+
+.home {
+}

src/pages/index.tsx

@@ -0,0 +1,101 @@
+import React, { ReactElement } from 'react'
+import { graphql, Link } from 'gatsby'
+import Page from '../components/templates/Page'
+import { Post } from '../@types/Post'
+import { Image } from '../components/atoms/Image'
+import styles from './index.module.scss'
+import Featured from '../components/molecules/Featured'
+
+const page = {
+  frontmatter: {
+    title: 'home',
+    description: 'Blog of designer & developer Matthias Kretschmann.'
+  }
+}
+
+export default function Home({
+  data,
+  location
+}: {
+  data: any
+  location: Location
+}): ReactElement {
+  return (
+    <Page
+      title={page.frontmatter.title}
+      post={page}
+      location={location}
+      section={styles.home}
+    >
+      <Featured />
+      Latest Posts & Links
+      <br />
+      Latest Photos
+    </Page>
+  )
+}
+
+export const homeQuery = graphql`
+  query {
+    latestPosts: allMarkdownRemark(
+      filter: { frontmatter: { type: { eq: "post" } } }
+      sort: { order: DESC, fields: [fields___date] }
+      limit: 5
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            type
+            image {
+              childImageSharp {
+                fluid(
+                  maxWidth: 400
+                  maxHeight: 400
+                  quality: 85
+                  cropFocus: CENTER
+                ) {
+                  ...GatsbyImageSharpFluid_withWebp
+                }
+              }
+            }
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+
+    latestPhotos: allMarkdownRemark(
+      filter: { frontmatter: { type: { eq: "photo" } } }
+      sort: { order: DESC, fields: [fields___date] }
+      limit: 10
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            type
+            image {
+              childImageSharp {
+                fluid(
+                  maxWidth: 400
+                  maxHeight: 400
+                  quality: 85
+                  cropFocus: CENTER
+                ) {
+                  ...GatsbyImageSharpFluid_withWebp
+                }
+              }
+            }
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`