Skip to content

Commit

Permalink
Fix home page filtering and make duotones less full on. (#152)
Browse files Browse the repository at this point in the history 
* fix: home page featured post filters closes #150

* fix: tune duotones fixes #151
  • Loading branch information
@ajfisher
ajfisher committed Sep 21, 2023
1 parent 266b9dc commit 427906a
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 28 deletions.
30 changes: 22 additions & 8 deletions site/src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,21 @@ export const Head = () => {
const HomePage = ({pageContext, data}) => {
const {featured, posts} = data;

// filter the main posts so that any featured posts are pulled out as they
// are going to be displayed separately. Do this just by taking the slugs
// from the featured posts and then filtering the main post list against them
const featured_slugs = featured.edges.map((post) => {
return post.node.frontmatter?.slug;
});

const filtered_posts = posts.edges.filter((post) => {
if (! featured_slugs.includes(post.node.frontmatter?.slug)) {
return true;
} else {
return false;
}
});

return (
<Layout slug="/" featured={featured.edges[0].node}>
<Intro>Observations, images and code from ajfisher</Intro>
Expand Down Expand Up @@ -62,7 +77,7 @@ const HomePage = ({pageContext, data}) => {

<h2 className="home">Recent posts</h2>
<ListItems>
{posts.edges.map(({node}) => {
{filtered_posts.map(({node}) => {
const { slug, title, date,
listimage, listimage_position } = node.frontmatter;
const readingTime = {
Expand Down Expand Up @@ -117,19 +132,19 @@ export const pageQuery = graphql`
featureimage {
childImageSharp {
base: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000"}}
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
)
small: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000"}}
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
)
medium: gatsbyImageData(width: 750, quality: 90
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000"}}
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
)
large: gatsbyImageData(width: 1050, quality: 100
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000"}}
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
)
wide: gatsbyImageData(width: 1600, quality: 100
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000"}}
transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
)
}
}
Expand All @@ -155,10 +170,9 @@ export const pageQuery = graphql`
posts: allMarkdownRemark(
filter: {frontmatter: {
layout: {regex: "/^post/"}
featured: {in: [null, false]}
}}
sort: {frontmatter: {date: DESC}}
limit: 10
limit: 13
) {
edges {
node {
Expand Down
10 changes: 5 additions & 5 deletions site/src/templates/article.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,19 @@ export const pageQuery = graphql`
featureimage {
childImageSharp {
base: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
small: gatsbyImageData(width: 500, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
medium: gatsbyImageData(width: 750, quality: 90
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
large: gatsbyImageData(width: 1050, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
wide: gatsbyImageData(width: 1600, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
}
}
Expand Down
10 changes: 5 additions & 5 deletions site/src/templates/post-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,19 @@ export const pageQuery = graphql`
featureimage {
childImageSharp {
base: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
small: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
medium: gatsbyImageData(width: 750, quality: 90
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
large: gatsbyImageData(width: 1050, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
wide: gatsbyImageData(width: 1600, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
}
}
Expand Down
10 changes: 5 additions & 5 deletions site/src/templates/post.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,19 @@ export const pageQuery = graphql`
featureimage {
childImageSharp {
base: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
small: gatsbyImageData(width: 500, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
medium: gatsbyImageData(width: 750, quality: 90
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
large: gatsbyImageData(width: 1050, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
wide: gatsbyImageData(width: 1600, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
}
}
Expand Down
10 changes: 5 additions & 5 deletions site/src/templates/tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,19 +110,19 @@ export const pageQuery = graphql`
featureimage {
childImageSharp {
base: gatsbyImageData(width: 400, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
small: gatsbyImageData(width: 500, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
medium: gatsbyImageData(width: 750, quality: 90
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
large: gatsbyImageData(width: 1050, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
wide: gatsbyImageData(width: 1600, quality: 100
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000"}}
transformOptions: {duotone: {highlight:"FF5E9A", shadow:"000000", opacity: 80}}
)
}
}
Expand Down

0 comments on commit 427906a

Please sign in to comment.