m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00
Code

related posts tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-11-19 22:00:38 +00:00
parent ca151a6452
commit 66219cd4b0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 272 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
.jest/__fixtures__/posts.json
View File

File diff suppressed because one or more lines are too long

70
src/components/molecules/RelatedPosts.tsx
View File

@ -6,7 +6,21 @@ import { PhotoThumb } from '../templates/Photos'
const query = graphql` const query = graphql`
query RelatedPosts { query RelatedPosts {
allMarkdownRemark(sort: { fields: { date: DESC } }) { allArticles: allMarkdownRemark(
sort: { fields: { date: DESC } }
filter: { fields: { type: { regex: "/(article|link)/" } } }
) {
edges {
node {
...PostTeaser
}
}
}
allPhotos: allMarkdownRemark(
sort: { fields: { date: DESC } }
filter: { fields: { type: { eq: "photo" } } }
) {
edges { edges {
node { node {
...PostTeaser ...PostTeaser
@ -17,42 +31,30 @@ const query = graphql`
` `
function postsWithDataFilter( function postsWithDataFilter(
posts: Queries.RelatedPostsQuery['allMarkdownRemark']['edges'], posts:
| Queries.RelatedPostsQuery['allArticles']['edges']
| Queries.RelatedPostsQuery['allPhotos']['edges'],
key: keyof Queries.MarkdownRemarkFrontmatter, key: keyof Queries.MarkdownRemarkFrontmatter,
valuesToFind: string[] valuesToFind: string[]
) { ) {
const newArray = posts let filtered = posts.filter(({ node }) => {
.filter(({ node }) => { const frontmatterKey = node.frontmatter[key]
const frontmatterKey = node.frontmatter[key] as []
if ( if (
frontmatterKey !== null && frontmatterKey !== null &&
frontmatterKey.some((r: string) => valuesToFind.includes(r)) frontmatterKey.some((r: string) => valuesToFind?.includes(r))
) { ) {
return node return node
} }
}) })
.sort(() => 0.5 - Math.random())
.slice(0, 6)
return newArray if (!filtered?.length) {
} filtered = posts.filter(({ node }) => node)
}
function photosWithDataFilter( filtered = filtered.sort(() => 0.5 - Math.random()).slice(0, 6)
posts: Queries.RelatedPostsQuery['allMarkdownRemark']['edges']
) {
const newArray = posts
.filter((post) => {
const { fileAbsolutePath } = post.node
if (fileAbsolutePath.includes('content/photos')) { return filtered
return post
}
})
.sort(() => 0.5 - Math.random())
.slice(0, 6)
return newArray
} }
export default function RelatedPosts({ export default function RelatedPosts({
@ -63,12 +65,12 @@ export default function RelatedPosts({
isPhotos?: boolean isPhotos?: boolean
}): ReactElement { }): ReactElement {
const data = useStaticQuery<Queries.RelatedPostsQuery>(query) const data = useStaticQuery<Queries.RelatedPostsQuery>(query)
const posts = data.allMarkdownRemark.edges
function getPosts() { function getPosts() {
return isPhotos const dataByType = isPhotos ? data.allPhotos.edges : data.allArticles.edges
? photosWithDataFilter(posts) const posts = postsWithDataFilter(dataByType, 'tags', tags)
: tags && postsWithDataFilter(posts, 'tags', tags)
return posts
} }
const [filteredPosts, setFilteredPosts] = useState(getPosts()) const [filteredPosts, setFilteredPosts] = useState(getPosts())