Featured post meta (#232)

* Add results of auto formatting

* Revert "Add results of auto formatting"

This reverts commit 2e2357cefa1460488e41b6f53ea98905dada60ac.

* Add result of auto format

* Add featured meta info to posts

* Add featured post meta to blog roll

Add the featured post and image meta info to blog roll GraphQL query and add image to blog post list item
Add the meta info to the CMS config

* Fix typo on featuredpost flag

Corrected a typo of the featured property. It should be `post.frontmatter.featuredpost` to add a CSS flag/modifier class for featured posts

* Add .is-featured modifier class all.sass

Author: bpk68

gatsby-config.js

@@ -1,4 +1,4 @@
-var proxy = require("http-proxy-middleware")
+var proxy = require('http-proxy-middleware')
 
 module.exports = {
   siteMetadata: {
@@ -80,11 +80,11 @@ module.exports = {
   // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
   developMiddleware: app => {
     app.use(
-      "/.netlify/functions/",
+      '/.netlify/functions/',
       proxy({
-        target: "http://localhost:9000",
+        target: 'http://localhost:9000',
         pathRewrite: {
-          "/.netlify/functions/": "",
+          '/.netlify/functions/': '',
         },
       })
     )

src/cms/preview-templates/IndexPagePreview.js

@@ -4,7 +4,7 @@ import { IndexPageTemplate } from '../../templates/index-page'
 
 const IndexPagePreview = ({ entry, getAsset }) => {
   const data = entry.getIn(['data']).toJS()
-  
+
   if (data) {
     return (
       <IndexPageTemplate
@@ -18,7 +18,7 @@ const IndexPagePreview = ({ entry, getAsset }) => {
       />
     )
   } else {
-    return (<div>Loading...</div>)
+    return <div>Loading...</div>
   }
 }
 

src/components/BlogRoll.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql, StaticQuery } from 'gatsby'
+import PreviewCompatibleImage from './PreviewCompatibleImage'
 
 class BlogRoll extends React.Component {
   render() {
@@ -12,19 +13,37 @@ class BlogRoll extends React.Component {
         {posts &&
           posts.map(({ node: post }) => (
             <div className="is-parent column is-6" key={post.id}>
-              <article className="tile is-child box notification">
-                <p>
-                  <Link
-                    className="title has-text-primary is-size-4"
-                    to={post.fields.slug}
-                  >
-                    {post.frontmatter.title}
-                  </Link>
-                  <span> &bull; </span>
-                  <span className="subtitle is-size-5 is-block">
-                    {post.frontmatter.date}
-                  </span>
-                </p>
+              <article
+                className={`blog-list-item tile is-child box notification ${
+                  post.frontmatter.featuredpost ? 'is-featured' : ''
+                }`}
+              >
+                <header>
+                  {post.frontmatter.featuredimage ? (
+                    <div className="featured-thumbnail">
+                      <PreviewCompatibleImage
+                        imageInfo={{
+                          image: post.frontmatter.featuredimage,
+                          alt: `featured image thumbnail for post ${
+                            post.title
+                          }`,
+                        }}
+                      />
+                    </div>
+                  ) : null}
+                  <p className="post-meta">
+                    <Link
+                      className="title has-text-primary is-size-4"
+                      to={post.fields.slug}
+                    >
+                      {post.frontmatter.title}
+                    </Link>
+                    <span> &bull; </span>
+                    <span className="subtitle is-size-5 is-block">
+                      {post.frontmatter.date}
+                    </span>
+                  </p>
+                </header>
                 <p>
                   {post.excerpt}
                   <br />
@@ -68,6 +87,14 @@ export default () => (
                 title
                 templateKey
                 date(formatString: "MMMM DD, YYYY")
+                featuredpost
+                featuredimage {
+                  childImageSharp {
+                    fluid(maxWidth: 120, quality: 100) {
+                      ...GatsbyImageSharpFluid
+                    }
+                  }
+                }
               }
             }
           }

src/components/Navbar.js

@@ -1,36 +1,36 @@
-import React from "react";
-import { Link } from "gatsby";
-import github from "../img/github-icon.svg";
-import logo from "../img/logo.svg";
+import React from 'react'
+import { Link } from 'gatsby'
+import github from '../img/github-icon.svg'
+import logo from '../img/logo.svg'
 
 const Navbar = class extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       active: false,
-      navBarActiveClass: ""
-    };
+      navBarActiveClass: '',
+    }
   }
 
   toggleHamburger = () => {
     // toggle the active boolean in the state
     this.setState(
       {
-        active: !this.state.active
+        active: !this.state.active,
       },
       // after state has been updated,
       () => {
         // set the class in state for the navbar accordingly
         this.state.active
           ? this.setState({
-              navBarActiveClass: "is-active"
+              navBarActiveClass: 'is-active',
             })
           : this.setState({
-              navBarActiveClass: ""
-            });
+              navBarActiveClass: '',
+            })
       }
-    );
-  };
+    )
+  }
 
   render() {
     return (
@@ -42,7 +42,7 @@ const Navbar = class extends React.Component {
         <div className="container">
           <div className="navbar-brand">
             <Link to="/" className="navbar-item" title="Logo">
-              <img src={logo} alt="Kaldi" style={{ width: "88px" }} />
+              <img src={logo} alt="Kaldi" style={{ width: '88px' }} />
             </Link>
             {/* Hamburger menu */}
             <div
@@ -91,8 +91,8 @@ const Navbar = class extends React.Component {
           </div>
         </div>
       </nav>
-    );
+    )
   }
-};
+}
 
-export default Navbar;
+export default Navbar

src/components/all.sass

@@ -112,4 +112,29 @@ $menu-label-color: $white-ter
     vertical-align: middle
     display: inline
 
+// blog roll
+.blog-list-item.is-featured
+  background-color: #d6400033;
+.blog-list-item header
+  display: flex;
+  margin-bottom: 1em;
+.blog-list-item .featured-thumbnail
+  flex-basis: 35%;
+  margin: 0 1.5em 0 0;
+
+
 @import "~bulma"
+
+
+// responsiveness
++tablet-only
+  .blog-list-item .featured-thumbnail
+    flex-basis: 50%;
+
++mobile
+  .blog-list-item header
+    display: block
+  .blog-list-item .featured-thumbnail
+    text-align: center;
+    max-width: 70%;
+    margin: 0 0 1em;

src/lambda/hello.js

@@ -1,17 +1,17 @@
 // For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-functions
 export function handler(event, context, callback) {
-    console.log("queryStringParameters", event.queryStringParameters)
-    callback(null, {
-      // return null to show no errors
-      statusCode: 200, // http status code
-      body: JSON.stringify({
-        msg: "Hello, World! " + Math.round(Math.random() * 10),
-      }),
-    })
-  }
+  console.log('queryStringParameters', event.queryStringParameters)
+  callback(null, {
+    // return null to show no errors
+    statusCode: 200, // http status code
+    body: JSON.stringify({
+      msg: 'Hello, World! ' + Math.round(Math.random() * 10),
+    }),
+  })
+}
 
-  // Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
-  // fetch("/.netlify/functions/hello")
-  //    .then(response => response.json())
-  //    .then(console.log)
-  // For more info see: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/#static-dynamic-is-a-spectrum
+// Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
+// fetch("/.netlify/functions/hello")
+//    .then(response => response.json())
+//    .then(console.log)
+// For more info see: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/#static-dynamic-is-a-spectrum

src/pages/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md

@@ -2,6 +2,8 @@
 templateKey: blog-post
 title: Making sense of the SCAA’s new Flavor Wheel
 date: 2016-12-17T15:04:10.000Z
+featuredpost: false
+featuredimage: /img/flavor_wheel.jpg
 description: The Coffee Taster’s Flavor Wheel, the official resource used by coffee tasters, has been revised for the first time this year.
 tags:
   - flavor

src/pages/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md

@@ -2,6 +2,8 @@
 templateKey: blog-post
 title: A beginners’ guide to brewing with Chemex
 date: 2017-01-04T15:04:10.000Z
+featuredpost: false
+featuredimage: /img/chemex.jpg
 description: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.
 tags:
   - brewing

src/pages/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md

@@ -2,6 +2,7 @@
 templateKey: 'blog-post'
 title: 'Just in: small batch of Jamaican Blue Mountain in store next week'
 date: 2017-01-04T15:04:10.000Z
+featuredpost: true
 description: >-
   We’re proud to announce that we’ll be offering a small batch of Jamaica Blue
   Mountain coffee beans in our store next week.

static/admin/config.yml

@@ -16,6 +16,8 @@ collections:
       - {label: "Title", name: "title", widget: "string"}
       - {label: "Publish Date", name: "date", widget: "datetime"}
       - {label: "Description", name: "description", widget: "text"}
+      - {label: "Featured Post", name: "featuredpost", widget: "boolean"}
+      - {label: "Featured Image", name: "featuredimage", widget: image}
       - {label: "Body", name: "body", widget: "markdown"}
       - {label: "Tags", name: "tags", widget: "list"}