2020-07-08 01:31:03 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2020-07-19 13:31:27 +02:00
|
|
|
import { graphql, PageProps } from 'gatsby'
|
2020-07-08 01:31:03 +02:00
|
|
|
import { Post } from '../@types/Post'
|
|
|
|
import styles from './index.module.scss'
|
|
|
|
import Featured from '../components/molecules/Featured'
|
2020-07-19 13:31:27 +02:00
|
|
|
import { PhotoThumb } from '../components/templates/Photos'
|
|
|
|
import PostTeaser from '../components/molecules/PostTeaser'
|
|
|
|
import PostMore from '../components/templates/Post/More'
|
2020-07-08 01:31:03 +02:00
|
|
|
|
2020-07-11 10:29:42 +02:00
|
|
|
export default function Home(props: PageProps): ReactElement {
|
2020-07-08 01:31:03 +02:00
|
|
|
return (
|
2020-07-19 13:31:27 +02:00
|
|
|
<>
|
|
|
|
<section className={styles.section}>
|
|
|
|
<h2 className={styles.title}>
|
|
|
|
Latest Articles <PostMore to="/archive">All Articles</PostMore>
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<div className={styles.articles}>
|
|
|
|
{(props.data as any).latestArticles.edges.map(
|
|
|
|
({ node }: { node: Post }) => (
|
|
|
|
<PostTeaser key={node.id} post={node} />
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section className={styles.section}>
|
|
|
|
<h2 className={styles.title}>
|
|
|
|
Latest Photos <PostMore to="/photos">All Photos</PostMore>
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<div className={styles.photos}>
|
|
|
|
{(props.data as any).latestPhotos.edges.map(
|
|
|
|
({ node }: { node: Post }) => (
|
|
|
|
<PhotoThumb key={node.id} photo={node} />
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</>
|
2020-07-08 01:31:03 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export const homeQuery = graphql`
|
|
|
|
query {
|
2020-07-11 11:42:37 +02:00
|
|
|
latestArticles: allMarkdownRemark(
|
2020-07-19 13:31:27 +02:00
|
|
|
filter: { frontmatter: { type: { ne: "photo" } } }
|
2020-07-08 01:31:03 +02:00
|
|
|
sort: { order: DESC, fields: [fields___date] }
|
2020-07-19 13:31:27 +02:00
|
|
|
limit: 6
|
2020-07-08 01:31:03 +02:00
|
|
|
) {
|
|
|
|
edges {
|
|
|
|
node {
|
2020-07-19 13:31:27 +02:00
|
|
|
...PostTeaser
|
2020-07-08 01:31:03 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
latestPhotos: allMarkdownRemark(
|
|
|
|
filter: { frontmatter: { type: { eq: "photo" } } }
|
|
|
|
sort: { order: DESC, fields: [fields___date] }
|
2020-07-19 13:31:27 +02:00
|
|
|
limit: 15
|
2020-07-08 01:31:03 +02:00
|
|
|
) {
|
|
|
|
edges {
|
|
|
|
node {
|
|
|
|
id
|
|
|
|
frontmatter {
|
|
|
|
title
|
|
|
|
type
|
|
|
|
image {
|
|
|
|
childImageSharp {
|
2020-07-19 13:31:27 +02:00
|
|
|
...PhotoFluidThumb
|
2020-07-08 01:31:03 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
fields {
|
|
|
|
slug
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|