mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
prototype new frontpage structure
This commit is contained in:
parent
de17f9cd63
commit
44bf9b24a7
@ -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,
|
||||
|
@ -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}
|
@ -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 {
|
@ -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>
|
||||
<div className={styles.time}>
|
||||
{updated && 'published '}
|
||||
<Time date={date} />
|
||||
{updated && ' • updated '}
|
||||
{updated && <Time date={updated} />}
|
||||
</div>
|
||||
{date && (
|
||||
<div className={styles.time}>
|
||||
{updated && 'published '}
|
||||
<Time date={date} />
|
||||
{updated && ' • updated '}
|
||||
{updated && <Time date={updated} />}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
4
src/pages/index.module.scss
Normal file
4
src/pages/index.module.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
|
||||
.home {
|
||||
}
|
101
src/pages/index.tsx
Normal file
101
src/pages/index.tsx
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
Loading…
Reference in New Issue
Block a user