mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 17:15:18 +01:00
photo fixes, show related photos
This commit is contained in:
parent
974f6d860c
commit
d33f8825fd
GPG Key ID:
606EEEF3C479A91F
BIN
content/photos/2019-09-28-vatican-museums.jpg
Normal file
BIN
content/photos/2019-09-28-vatican-museums.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
9
content/photos/2019-09-28-vatican-museums.md
Normal file
9
content/photos/2019-09-28-vatican-museums.md
Normal 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.
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -51,7 +51,6 @@ pre {
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.8rem;
|
||||
padding: $spacer / 2;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
|
||||
@ -257,6 +257,7 @@ ol {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: $spacer / 4;
|
||||
|
||||
// stylelint-disable no-descending-specificity
|
||||
&::before {
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user