diff --git a/content/meta.yml b/content/meta.yml index 957ec9b4..f78ab9f3 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -28,3 +28,4 @@ author: typekitID: msu4qap +itemsPerPage: 15 diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index 6e5124ab..faec1a86 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -7,7 +7,9 @@ download: ../media/momcorp_wall_by_kremalicious.zip author: Matthias Kretschmann date: 2010-07-03 17:12:53+00:00 - + +featured: true + tags: - goodies - wallpaper @@ -16,7 +18,7 @@ tags: coinhive: true --- -The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode. +The Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode. The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview: diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 8e82b453..9aeb3779 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -7,6 +7,8 @@ author: Matthias Kretschmann date: 2015-08-02 21:57:30.912218000 +02:00 updated: 2018-07-11 00:52:46+02:00 +featured: true + tags: - goodies - tutorial diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index 422d24fb..627efddd 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -7,7 +7,8 @@ image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 -category: +featured: true + tags: - goodies - css diff --git a/gatsby-config.js b/gatsby-config.js index 892046d9..606ba197 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -49,10 +49,12 @@ module.exports = { resolve: 'gatsby-remark-images', options: { maxWidth: 940, + quality: 80, + withWebp: true, linkImagesToOriginal: false, // sizeByPixelDensity: true, showCaptions: true, - backgroundColor: '#dfe8ef' + backgroundColor: '#e7eef4' } }, { diff --git a/gatsby-node.js b/gatsby-node.js index 8c7c758e..931852bf 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,12 @@ const path = require('path') +const fs = require('fs') +const yaml = require('js-yaml') const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') +const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) +const { itemsPerPage } = meta + // Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions @@ -107,7 +112,7 @@ const generateContent = (createPage, posts) => { paginate({ createPage, items: posts, - itemsPerPage: 5, + itemsPerPage: itemsPerPage, pathPrefix: '/', component: postsTemplate }) diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx index f8cea4c1..e961ab57 100644 --- a/src/components/atoms/Image.jsx +++ b/src/components/atoms/Image.jsx @@ -24,7 +24,7 @@ Image.propTypes = { export const projectImage = graphql` fragment ImageFluid on ImageSharp { fluid(maxWidth: 940, quality: 85) { - ...GatsbyImageSharpFluid_withWebp + ...GatsbyImageSharpFluid_withWebp_noBase64 } } ` diff --git a/src/components/molecules/Featured.jsx b/src/components/molecules/Featured.jsx new file mode 100644 index 00000000..ae423e8c --- /dev/null +++ b/src/components/molecules/Featured.jsx @@ -0,0 +1,57 @@ +import React from 'react' +import { Link, graphql, StaticQuery } from 'gatsby' +import Image from '../atoms/Image' +import styles from './Featured.module.scss' + +const query = graphql` + query { + allMarkdownRemark( + filter: { frontmatter: { featured: { eq: true } } } + sort: { fields: [fields___date], order: DESC } + ) { + edges { + node { + id + frontmatter { + title + image { + childImageSharp { + fluid(maxWidth: 260, maxHeight: 100, cropFocus: CENTER) { + ...GatsbyImageSharpFluid_withWebp_noBase64 + } + } + } + } + fields { + slug + } + } + } + } + } +` + +const Featured = () => ( + ( +
+ {data.allMarkdownRemark.edges.map(({ node }) => { + const { title, image } = node.frontmatter + const { slug } = node.fields + + return ( +
+ + {title} +

{title}

+ +
+ ) + })} +
+ )} + /> +) + +export default Featured diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss new file mode 100644 index 00000000..f41fcb8b --- /dev/null +++ b/src/components/molecules/Featured.module.scss @@ -0,0 +1,46 @@ +@import 'variables'; +@import 'mixins'; + +.featured { + @include breakoutviewport; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; +} + +.featuredTitle { + transition: .1s ease-out; + font-size: $font-size-small; + margin: 0; + position: absolute; + top: 25%; + min-width: 45%; + text-align: right; + padding: $spacer / 3; + background: rgba($link-color, .85); + color: #fff; + text-shadow: 0 1px 0 #000; + left: 0; + opacity: 0; + transform: translate3d(0, -20px, 0); +} + +.featuredItem { + flex: 0 0 31%; + position: relative; + margin-bottom: 3%; + + a:hover { + > div { + border-color: $link-color !important; + } + + .featuredTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } +} diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index b0a9e73d..7ffeaa63 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -9,11 +9,13 @@ import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' import Pagination from '../components/molecules/Pagination' +import Featured from '../components/molecules/Featured' import postStyles from '../templates/Post.module.scss' import styles from './Posts.module.scss' const IndexPage = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges + const { humanPageNumber } = pageContext const Posts = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter @@ -47,6 +49,7 @@ const IndexPage = ({ data, location, pageContext }) => { return ( + {humanPageNumber === 1 && } {Posts}