1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

related photos fixes

This commit is contained in:
Matthias Kretschmann 2021-02-28 22:34:52 +01:00
parent 138b9f6965
commit 029c1972fe
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 22 additions and 15 deletions

View File

@ -4,7 +4,7 @@
.title { .title {
padding-left: 0.2rem; padding-left: 0.2rem;
padding-right: 0.2rem; padding-right: 0.2rem;
margin-top: $spacer / 2; margin-top: $spacer / 3;
margin-bottom: 0; margin-bottom: 0;
font-size: $font-size-base; font-size: $font-size-base;
transition: color 0.2s ease-out; transition: color 0.2s ease-out;
@ -22,6 +22,8 @@
font-style: italic; font-style: italic;
font-size: $font-size-small; font-size: $font-size-small;
color: $text-color-light; color: $text-color-light;
padding-left: 0.2rem;
padding-right: 0.2rem;
} }
.empty { .empty {

View File

@ -49,7 +49,6 @@ export default function PostTeaser({
> >
{image ? ( {image ? (
<Image <Image
title={type === 'photo' ? title : null}
fluid={image.childImageSharp.fluid} fluid={image.childImageSharp.fluid}
alt={title} alt={title}
original={image.childImageSharp.original} original={image.childImageSharp.original}

View File

@ -1,8 +1,9 @@
import React, { ReactElement, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import { graphql, useStaticQuery } from 'gatsby' import { graphql, useStaticQuery } from 'gatsby'
import PostTeaser from './PostTeaser' import PostTeaser from './PostTeaser'
import styles from './RelatedPosts.module.scss' import styles from './RelatedPosts.module.scss'
import { Post, Frontmatter } from '../../@types/Post' import { Post, Frontmatter } from '../../@types/Post'
import { PhotoThumb } from '../templates/Photos'
const query = graphql` const query = graphql`
query { query {
@ -61,30 +62,35 @@ export default function RelatedPosts({
: tags && postsWithDataFilter(posts, 'tags', tags) : tags && postsWithDataFilter(posts, 'tags', tags)
} }
const [filteredPosts, setFilteredPosts] = useState(getPosts()) const [filteredPosts, setFilteredPosts] = useState(
if (!filteredPosts) return null getPosts()
.sort(() => 0.5 - Math.random())
.slice(0, 6)
)
function refreshPosts() { function refreshPosts() {
setFilteredPosts(getPosts()) const newPosts = getPosts()
setFilteredPosts(newPosts.sort(() => 0.5 - Math.random()).slice(0, 6))
} }
return ( return (
<aside className={styles.relatedPosts}> <aside className={styles.relatedPosts}>
<h1 className={styles.title}> <h1 className={styles.title}>
Related {isPhotos ? 'Photos' : 'Posts'}{' '} Related {isPhotos ? 'Photos' : 'Posts'}{' '}
<button className={styles.button} onClick={refreshPosts}> <button className={styles.button} onClick={() => refreshPosts()}>
Refresh Refresh
</button> </button>
</h1> </h1>
<ul> <ul>
{filteredPosts {filteredPosts?.map(({ node }: { node: Post }) => (
.sort(() => 0.5 - Math.random()) <li key={node.id}>
.slice(0, 6) {isPhotos ? (
.map(({ node }: { node: Post }) => ( <PhotoThumb photo={node} />
<li key={node.id}> ) : (
<PostTeaser post={node} /> <PostTeaser post={node} hideDate />
</li> )}
))} </li>
))}
</ul> </ul>
</aside> </aside>
) )