featured component

content/meta.yml

@@ -28,3 +28,4 @@ author:
 
 
 typekitID:              msu4qap
+itemsPerPage:           15

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:
 

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

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

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'
             }
           },
           {

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
   })

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
     }
   }
 `

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 = () => (
+  <StaticQuery
+    query={query}
+    render={data => (
+      <div className={styles.featured}>
+        {data.allMarkdownRemark.edges.map(({ node }) => {
+          const { title, image } = node.frontmatter
+          const { slug } = node.fields
+
+          return (
+            <article className={styles.featuredItem} key={node.id}>
+              <Link to={slug}>
+                <Image fluid={image.childImageSharp.fluid} alt={title} />
+                <h1 className={styles.featuredTitle}>{title}</h1>
+              </Link>
+            </article>
+          )
+        })}
+      </div>
+    )}
+  />
+)
+
+export default Featured

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);
+        }
+    }
+}

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 (
     <Layout location={location}>
+      {humanPageNumber === 1 && <Featured />}
       {Posts}
       <Pagination pageContext={pageContext} />
     </Layout>