From 684d835c9e2763303ab3c412c13d41c44b514623 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 1 Mar 2021 00:03:39 +0100 Subject: [PATCH] refactor --- gatsby/createPages.js | 113 ++++++------------ src/components/molecules/PostDate.module.scss | 8 ++ src/components/molecules/PostDate.tsx | 19 +++ src/components/molecules/PostTeaser.tsx | 9 +- .../templates/Post/Meta.module.scss | 16 +-- src/components/templates/Post/Meta.tsx | 9 +- .../templates/Post/Title.module.scss | 7 -- src/components/templates/Post/Title.tsx | 10 +- 8 files changed, 71 insertions(+), 120 deletions(-) create mode 100644 src/components/molecules/PostDate.module.scss create mode 100644 src/components/molecules/PostDate.tsx diff --git a/gatsby/createPages.js b/gatsby/createPages.js index 7474e973..4e99dec2 100644 --- a/gatsby/createPages.js +++ b/gatsby/createPages.js @@ -47,90 +47,51 @@ exports.generatePostPages = (createPage, posts) => { }) } +function generateIndexPages(createPage, length, slug, template) { + const numPages = Math.ceil(length / itemsPerPage) + + Array.from({ length: numPages }).forEach((_, i) => { + const { prevPagePath, nextPagePath, path } = getPaginationData( + i, + numPages, + slug + ) + + createPage({ + path, + component: template, + context: { + slug, + limit: itemsPerPage, + skip: i * itemsPerPage, + numPages: numPages, + currentPageNumber: i + 1, + prevPagePath, + nextPagePath + } + }) + }) +} + +// Create paginated archive pages exports.generateArchivePages = (createPage, archiveLength) => { - // Create paginated archive pages - const numPagesArchive = Math.ceil(archiveLength / itemsPerPage) - const slugArchive = `/archive/` - - Array.from({ length: numPagesArchive }).forEach((_, i) => { - const { prevPagePath, nextPagePath, path } = getPaginationData( - i, - numPagesArchive, - slugArchive - ) - - createPage({ - path, - component: archiveTemplate, - context: { - slug: slugArchive, - limit: itemsPerPage, - skip: i * itemsPerPage, - numPages: numPagesArchive, - currentPageNumber: i + 1, - prevPagePath, - nextPagePath - } - }) - }) + generateIndexPages(createPage, archiveLength, `/archive/`, archiveTemplate) } +// Create paginated photos pages exports.generatePhotosPages = (createPage, photosLength) => { - // Create paginated photos pages - const numPagesPhotos = Math.ceil(photosLength / itemsPerPage) - const slugPhotos = `/photos/` - - Array.from({ length: numPagesPhotos }).forEach((_, i) => { - const { prevPagePath, nextPagePath, path } = getPaginationData( - i, - numPagesPhotos, - slugPhotos - ) - - createPage({ - path, - component: photosTemplate, - context: { - slug: slugPhotos, - limit: itemsPerPage, - skip: i * itemsPerPage, - numPages: numPagesPhotos, - currentPageNumber: i + 1, - prevPagePath, - nextPagePath - } - }) - }) + generateIndexPages(createPage, photosLength, `/photos/`, photosTemplate) } +// Create paginated tag pages exports.generateTagPages = (createPage, tags) => { tags.forEach(({ tag, totalCount }) => { - // Create paginated tag pages - const numPages = Math.ceil(totalCount / itemsPerPage) - const slug = `/archive/${tag}/` - - Array.from({ length: numPages }).forEach((_, i) => { - const { prevPagePath, nextPagePath, path } = getPaginationData( - i, - numPages, - slug - ) - - createPage({ - path, - component: archiveTemplate, - context: { - tag, - slug, - limit: itemsPerPage, - skip: i * itemsPerPage, - numPages, - currentPageNumber: i + 1, - prevPagePath, - nextPagePath - } - }) - }) + generateIndexPages( + createPage, + totalCount, + `/archive/${tag}/`, + archiveTemplate + ) }) } diff --git a/src/components/molecules/PostDate.module.scss b/src/components/molecules/PostDate.module.scss new file mode 100644 index 00000000..9dad0be4 --- /dev/null +++ b/src/components/molecules/PostDate.module.scss @@ -0,0 +1,8 @@ +@import 'variables'; + +.time { + font-style: italic; + font-size: $font-size-small; + color: $text-color-light; + margin-bottom: $spacer / $line-height; +} diff --git a/src/components/molecules/PostDate.tsx b/src/components/molecules/PostDate.tsx new file mode 100644 index 00000000..868ae3f9 --- /dev/null +++ b/src/components/molecules/PostDate.tsx @@ -0,0 +1,19 @@ +import React, { ReactElement } from 'react' +import Time from '../atoms/Time' +import styles from './PostDate.module.scss' + +export default function PostDate({ + date, + updated +}: { + date: string + updated?: string +}): ReactElement { + return ( +
+
+ ) +} diff --git a/src/components/molecules/PostTeaser.tsx b/src/components/molecules/PostTeaser.tsx index 6bd3d859..f53b1265 100644 --- a/src/components/molecules/PostTeaser.tsx +++ b/src/components/molecules/PostTeaser.tsx @@ -5,6 +5,7 @@ import { Post } from '../../@types/Post' import PostTitle from '../templates/Post/Title' import styles from './PostTeaser.module.scss' import Time from '../atoms/Time' +import PostDate from './PostDate' export const postTeaserQuery = graphql` fragment PostTeaser on MarkdownRemark { @@ -58,13 +59,7 @@ export default function PostTeaser({ )} - {date && !hideDate && ( -
-
- )} + {date && !hideDate && } ) } diff --git a/src/components/templates/Post/Meta.module.scss b/src/components/templates/Post/Meta.module.scss index 7d2e5da5..c5d5608e 100644 --- a/src/components/templates/Post/Meta.module.scss +++ b/src/components/templates/Post/Meta.module.scss @@ -7,32 +7,18 @@ font-size: $font-size-small; margin-top: $spacer * 2; color: $brand-grey-light; -} - -.byline, -.time, -.tags, -.categories { text-align: center; } -.byline, -.time { - font-style: italic; -} - .byline { margin-bottom: 0; + font-style: italic; } .by { display: block; } -.time { - margin-bottom: $spacer * 2; -} - // Types & Tags ///////////////////////////////////// diff --git a/src/components/templates/Post/Meta.tsx b/src/components/templates/Post/Meta.tsx index 4d0b765d..3535465e 100644 --- a/src/components/templates/Post/Meta.tsx +++ b/src/components/templates/Post/Meta.tsx @@ -1,12 +1,12 @@ import React, { ReactElement } from 'react' import { Link } from 'gatsby' import slugify from 'slugify' -import Time from '../../atoms/Time' import Tag from '../../atoms/Tag' import { useSiteMetadata } from '../../../hooks/use-site-metadata' import styles from './Meta.module.scss' import { Post } from '../../../@types/Post' import shortid from 'shortid' +import PostDate from '../../molecules/PostDate' export default function PostMeta({ post }: { post: Post }): ReactElement { const siteMeta = useSiteMetadata() @@ -22,12 +22,7 @@ export default function PostMeta({ post }: { post: Post }): ReactElement { -
- {updated && 'published '} -
+ {type && type === 'photo' && (
diff --git a/src/components/templates/Post/Title.module.scss b/src/components/templates/Post/Title.module.scss index b0ebe315..9f66072c 100644 --- a/src/components/templates/Post/Title.module.scss +++ b/src/components/templates/Post/Title.module.scss @@ -32,10 +32,3 @@ margin-top: -($spacer); margin-bottom: $spacer; } - -.time { - font-style: italic; - font-size: $font-size-small; - color: $text-color-light; - margin-bottom: $spacer / $line-height; -} diff --git a/src/components/templates/Post/Title.tsx b/src/components/templates/Post/Title.tsx index 5691265c..0300d2f0 100644 --- a/src/components/templates/Post/Title.tsx +++ b/src/components/templates/Post/Title.tsx @@ -2,6 +2,7 @@ import React, { ReactElement } from 'react' import styles from './Title.module.scss' import Icon from '../../atoms/Icon' import Time from '../../atoms/Time' +import PostDate from '../../molecules/PostDate' export default function PostTitle({ slug, @@ -42,14 +43,7 @@ export default function PostTitle({

{title}

- {date && ( -
- {updated && 'published '} -
- )} + {date && } ) }