1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00

photo fixes, show related photos

This commit is contained in:
Matthias Kretschmann 2019-10-05 14:07:15 +02:00
parent 974f6d860c
commit d33f8825fd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 127 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View File

@ -0,0 +1,9 @@
---
type: photo
date: 2019-09-28T17:35:27.000Z
title: Vatican Museums
image: 2019-09-28-vatican-museums.jpg
---
Staircase in the [Vatican Museums](https://en.wikipedia.org/wiki/Vatican_Museums) in Vatican City.

View File

@ -9,6 +9,7 @@ const query = graphql`
edges {
node {
id
fileAbsolutePath
frontmatter {
title
type
@ -30,12 +31,8 @@ const query = graphql`
}
`
const postsWithDataFilter = (
postsArray: [],
key: string,
valuesToFind: string[]
) => {
const newArray = postsArray.filter((post: any) => {
function postsWithDataFilter(posts: [], key: string, valuesToFind: string[]) {
const newArray = posts.filter((post: any) => {
const frontmatterKey = post.node.frontmatter[key]
if (
@ -48,20 +45,42 @@ const postsWithDataFilter = (
return newArray
}
export default function RelatedPosts({ tags }: { tags: string[] }) {
function photosWithDataFilter(posts: []) {
const newArray = posts.filter((post: any) => {
const { fileAbsolutePath } = post.node
if (fileAbsolutePath.includes('content/photos')) {
return post
}
})
return newArray
}
export default function RelatedPosts({
tags,
photos
}: {
tags: string[]
photos?: boolean
}) {
const data = useStaticQuery(query)
const posts = data.allMarkdownRemark.edges
const [filteredPosts, setFilteredPosts] = useState(
postsWithDataFilter(posts, 'tags', tags)
)
function getPosts() {
return photos
? photosWithDataFilter(posts)
: postsWithDataFilter(posts, 'tags', tags)
}
const [filteredPosts, setFilteredPosts] = useState(getPosts())
function refreshPosts() {
setFilteredPosts(postsWithDataFilter(posts, 'tags', tags))
setFilteredPosts(getPosts())
}
return (
<aside className={styles.relatedPosts}>
<h1 className={styles.title}>Related Posts</h1>
<h1 className={styles.title}>Related {photos ? 'Photos' : 'Posts'}</h1>
<ul>
{filteredPosts
.sort(() => 0.5 - Math.random())
@ -71,7 +90,7 @@ export default function RelatedPosts({ tags }: { tags: string[] }) {
))}
</ul>
<button className={`${styles.button} btn`} onClick={refreshPosts}>
Refresh Related Posts
Refresh Related {photos ? 'Photos' : 'Posts'}
</button>
</aside>
)

View File

@ -22,15 +22,15 @@ a.btn {
$border-radius
);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(94, 131, 162, 0.3);
border-bottom-color: rgba(94, 131, 162, 0.4);
background-color: rgba(#fff, 0.1);
border: 1px solid rgba($brand-grey-light, 0.3);
border-bottom-color: rgba($brand-grey-light, 0.4);
font-family: $font-family-headings;
font-weight: $font-weight-headings;
color: $brand-grey;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba($brand-grey-light, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow: 0 1px 3px rgba($brand-grey-light, 0.15),
inset 0 1px 0 rgba(#fff, 0.7);
@media (min-width: $screen-sm) {
max-width: 20rem;
@ -39,26 +39,39 @@ a.btn {
&:hover,
&:focus {
outline: 0;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(#fff, 0.5);
}
&:active {
color: $brand-grey;
border-color: rgba(94, 131, 162, 0.3);
border-color: rgba($brand-grey-light, 0.3);
background-color: transparent;
box-shadow: 0 1px 0 #fff;
transition: none;
outline: 0;
}
&:focus {
outline: 0;
:global(.dark) &:not(.btn-primary) {
color: $brand-grey-light;
background-color: darken($body-background-color--dark, 3%);
border: 1px solid darken($body-background-color--dark, 10%);
box-shadow: 0 1px 3px rgba(darken($body-background-color--dark, 10%), 0.5),
inset 0 1px 0 rgba(#fff, 0.1);
&:hover,
&:focus {
background-color: darken($body-background-color--dark, 1%);
}
&:active {
background-color: darken($body-background-color--dark, 5%);
box-shadow: 0 1px 0 rgba(#fff, 0.1);
}
}
// Disabled State
&.disabled,
&[disabled],
fieldset[disabled] & {
&[disabled] {
cursor: not-allowed;
pointer-events: none;
opacity: 0.6;
@ -76,8 +89,8 @@ a.btn {
}
span {
font-size: 0.9rem;
color: rgba(19, 56, 50, 0.6);
font-size: $font-size-mini;
color: $text-color-light;
margin-left: 0.3em;
}
}
@ -103,17 +116,17 @@ a.btn-primary {
@extend .btn;
color: darken($link-color, 50%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 0 rgba(#fff, 0.3);
background: lighten($link-color, 15%);
border-color: $link-color;
box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
inset 0 1px 0 rgba(#fff, 0.4);
&:hover,
&:focus {
color: darken($link-color, 50%);
background-color: lighten($link-color, 25%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 0 rgba(#fff, 0.3);
}
&:active {
@ -121,6 +134,27 @@ a.btn-primary {
border-color: darken($link-color, 10%);
background-color: lighten($link-color, 15%);
}
.dark &,
&:global(.dark) & {
border-color: darken($body-background-color--dark, 10%);
background: $link-color;
box-shadow: 0 1px 3px darken($body-background-color--dark, 10%),
inset 0 1px 0 rgba(#fff, 0.4);
// stylelint-disable no-descending-specificity
&:hover,
&:focus {
background-color: lighten($link-color, 10%);
text-shadow: 0 1px 0 rgba(#fff, 0.3);
}
&:active {
background-color: darken($link-color, 5%);
box-shadow: 0 1px 0 rgba(#fff, 0.2);
}
// stylelint-enable no-descending-specificity
}
}
.btn-block {
@ -166,8 +200,8 @@ a.btn-primary {
.content-download {
text-align: center;
display: block;
margin-top: $spacer;
margin-bottom: $spacer;
margin-top: $spacer * 2;
margin-bottom: $spacer * 2;
@media (min-width: $screen-xs) {
display: flex;
@ -197,24 +231,38 @@ a.btn-primary {
font-size: $font-size-mini;
color: $text-color-light;
}
&[class*='icon-'] {
&::before {
content: '';
width: $font-size-large;
height: $font-size-large;
display: inline-block;
margin-right: 0.3rem;
margin-bottom: -0.25rem;
opacity: 0.75;
background-repeat: no-repeat;
background-position: left center;
.dark &,
:global(.dark) & {
filter: invert(0.75);
}
}
}
&[class*='btn-primary'] {
&::before {
.dark &,
:global(.dark) & {
filter: invert(0);
}
}
}
}
.icon-download,
.icon-heart,
.icon-wordpress,
.icon-github,
.icon-eye {
&::before {
content: '';
width: $font-size-large;
height: $font-size-large;
display: inline-block;
margin-right: 0.3rem;
margin-bottom: -0.25rem;
opacity: 0.5;
background: url('../images/arrow-with-circle-down.svg') no-repeat left
center;
}
.icon-download::before {
background-image: url('../images/arrow-with-circle-down.svg');
}
.icon-heart::before {

View File

@ -51,7 +51,6 @@ pre {
}
code {
font-size: 0.8rem;
padding: $spacer / 2;
white-space: pre;
display: block;

View File

@ -257,6 +257,7 @@ ol {
li {
position: relative;
margin-bottom: $spacer / 4;
// stylelint-disable no-descending-specificity
&::before {

View File

@ -50,7 +50,9 @@ export default function Post({
<PostMeta post={post} />
</article>
{type === 'post' && <RelatedPosts tags={tags} />}
{(type === 'post' || type === 'photo') && (
<RelatedPosts photos={type === 'photo'} tags={tags} />
)}
</Layout>
</>
)