Skip to content

Commit 7af0355

Browse files
bpk68ZoltanVeres
authored andcommittedApr 24, 2019
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
1 parent da32b2d commit 7af0355

10 files changed

+109
-50
lines changed
 

‎gatsby-config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var proxy = require("http-proxy-middleware")
1+
var proxy = require('http-proxy-middleware')
22

33
module.exports = {
44
siteMetadata: {
@@ -80,11 +80,11 @@ module.exports = {
8080
// read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
8181
developMiddleware: app => {
8282
app.use(
83-
"/.netlify/functions/",
83+
'/.netlify/functions/',
8484
proxy({
85-
target: "http://localhost:9000",
85+
target: 'http://localhost:9000',
8686
pathRewrite: {
87-
"/.netlify/functions/": "",
87+
'/.netlify/functions/': '',
8888
},
8989
})
9090
)

‎src/cms/preview-templates/IndexPagePreview.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { IndexPageTemplate } from '../../templates/index-page'
44

55
const IndexPagePreview = ({ entry, getAsset }) => {
66
const data = entry.getIn(['data']).toJS()
7-
7+
88
if (data) {
99
return (
1010
<IndexPageTemplate
@@ -18,7 +18,7 @@ const IndexPagePreview = ({ entry, getAsset }) => {
1818
/>
1919
)
2020
} else {
21-
return (<div>Loading...</div>)
21+
return <div>Loading...</div>
2222
}
2323
}
2424

‎src/components/BlogRoll.js

+40-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { Link, graphql, StaticQuery } from 'gatsby'
4+
import PreviewCompatibleImage from './PreviewCompatibleImage'
45

56
class BlogRoll extends React.Component {
67
render() {
@@ -12,19 +13,37 @@ class BlogRoll extends React.Component {
1213
{posts &&
1314
posts.map(({ node: post }) => (
1415
<div className="is-parent column is-6" key={post.id}>
15-
<article className="tile is-child box notification">
16-
<p>
17-
<Link
18-
className="title has-text-primary is-size-4"
19-
to={post.fields.slug}
20-
>
21-
{post.frontmatter.title}
22-
</Link>
23-
<span> &bull; </span>
24-
<span className="subtitle is-size-5 is-block">
25-
{post.frontmatter.date}
26-
</span>
27-
</p>
16+
<article
17+
className={`blog-list-item tile is-child box notification ${
18+
post.frontmatter.featuredpost ? 'is-featured' : ''
19+
}`}
20+
>
21+
<header>
22+
{post.frontmatter.featuredimage ? (
23+
<div className="featured-thumbnail">
24+
<PreviewCompatibleImage
25+
imageInfo={{
26+
image: post.frontmatter.featuredimage,
27+
alt: `featured image thumbnail for post ${
28+
post.title
29+
}`,
30+
}}
31+
/>
32+
</div>
33+
) : null}
34+
<p className="post-meta">
35+
<Link
36+
className="title has-text-primary is-size-4"
37+
to={post.fields.slug}
38+
>
39+
{post.frontmatter.title}
40+
</Link>
41+
<span> &bull; </span>
42+
<span className="subtitle is-size-5 is-block">
43+
{post.frontmatter.date}
44+
</span>
45+
</p>
46+
</header>
2847
<p>
2948
{post.excerpt}
3049
<br />
@@ -68,6 +87,14 @@ export default () => (
6887
title
6988
templateKey
7089
date(formatString: "MMMM DD, YYYY")
90+
featuredpost
91+
featuredimage {
92+
childImageSharp {
93+
fluid(maxWidth: 120, quality: 100) {
94+
...GatsbyImageSharpFluid
95+
}
96+
}
97+
}
7198
}
7299
}
73100
}

‎src/components/Navbar.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
import React from "react";
2-
import { Link } from "gatsby";
3-
import github from "../img/github-icon.svg";
4-
import logo from "../img/logo.svg";
1+
import React from 'react'
2+
import { Link } from 'gatsby'
3+
import github from '../img/github-icon.svg'
4+
import logo from '../img/logo.svg'
55

66
const Navbar = class extends React.Component {
77
constructor(props) {
8-
super(props);
8+
super(props)
99
this.state = {
1010
active: false,
11-
navBarActiveClass: ""
12-
};
11+
navBarActiveClass: '',
12+
}
1313
}
1414

1515
toggleHamburger = () => {
1616
// toggle the active boolean in the state
1717
this.setState(
1818
{
19-
active: !this.state.active
19+
active: !this.state.active,
2020
},
2121
// after state has been updated,
2222
() => {
2323
// set the class in state for the navbar accordingly
2424
this.state.active
2525
? this.setState({
26-
navBarActiveClass: "is-active"
26+
navBarActiveClass: 'is-active',
2727
})
2828
: this.setState({
29-
navBarActiveClass: ""
30-
});
29+
navBarActiveClass: '',
30+
})
3131
}
32-
);
33-
};
32+
)
33+
}
3434

3535
render() {
3636
return (
@@ -42,7 +42,7 @@ const Navbar = class extends React.Component {
4242
<div className="container">
4343
<div className="navbar-brand">
4444
<Link to="/" className="navbar-item" title="Logo">
45-
<img src={logo} alt="Kaldi" style={{ width: "88px" }} />
45+
<img src={logo} alt="Kaldi" style={{ width: '88px' }} />
4646
</Link>
4747
{/* Hamburger menu */}
4848
<div
@@ -91,8 +91,8 @@ const Navbar = class extends React.Component {
9191
</div>
9292
</div>
9393
</nav>
94-
);
94+
)
9595
}
96-
};
96+
}
9797

98-
export default Navbar;
98+
export default Navbar

‎src/components/all.sass

+25
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,29 @@ $menu-label-color: $white-ter
112112
vertical-align: middle
113113
display: inline
114114

115+
// blog roll
116+
.blog-list-item.is-featured
117+
background-color: #d6400033;
118+
.blog-list-item header
119+
display: flex;
120+
margin-bottom: 1em;
121+
.blog-list-item .featured-thumbnail
122+
flex-basis: 35%;
123+
margin: 0 1.5em 0 0;
124+
125+
115126
@import "~bulma"
127+
128+
129+
// responsiveness
130+
+tablet-only
131+
.blog-list-item .featured-thumbnail
132+
flex-basis: 50%;
133+
134+
+mobile
135+
.blog-list-item header
136+
display: block
137+
.blog-list-item .featured-thumbnail
138+
text-align: center;
139+
max-width: 70%;
140+
margin: 0 0 1em;

‎src/lambda/hello.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-functions
22
export function handler(event, context, callback) {
3-
console.log("queryStringParameters", event.queryStringParameters)
4-
callback(null, {
5-
// return null to show no errors
6-
statusCode: 200, // http status code
7-
body: JSON.stringify({
8-
msg: "Hello, World! " + Math.round(Math.random() * 10),
9-
}),
10-
})
11-
}
3+
console.log('queryStringParameters', event.queryStringParameters)
4+
callback(null, {
5+
// return null to show no errors
6+
statusCode: 200, // http status code
7+
body: JSON.stringify({
8+
msg: 'Hello, World! ' + Math.round(Math.random() * 10),
9+
}),
10+
})
11+
}
1212

13-
// Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
14-
// fetch("/.netlify/functions/hello")
15-
// .then(response => response.json())
16-
// .then(console.log)
17-
// For more info see: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/#static-dynamic-is-a-spectrum
13+
// Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
14+
// fetch("/.netlify/functions/hello")
15+
// .then(response => response.json())
16+
// .then(console.log)
17+
// 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
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
templateKey: blog-post
33
title: Making sense of the SCAA’s new Flavor Wheel
44
date: 2016-12-17T15:04:10.000Z
5+
featuredpost: false
6+
featuredimage: /img/flavor_wheel.jpg
57
description: The Coffee Taster’s Flavor Wheel, the official resource used by coffee tasters, has been revised for the first time this year.
68
tags:
79
- flavor

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

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
templateKey: blog-post
33
title: A beginners’ guide to brewing with Chemex
44
date: 2017-01-04T15:04:10.000Z
5+
featuredpost: false
6+
featuredimage: /img/chemex.jpg
57
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.
68
tags:
79
- brewing

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

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

‎static/admin/config.yml

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ collections:
1616
- {label: "Title", name: "title", widget: "string"}
1717
- {label: "Publish Date", name: "date", widget: "datetime"}
1818
- {label: "Description", name: "description", widget: "text"}
19+
- {label: "Featured Post", name: "featuredpost", widget: "boolean"}
20+
- {label: "Featured Image", name: "featuredimage", widget: image}
1921
- {label: "Body", name: "body", widget: "markdown"}
2022
- {label: "Tags", name: "tags", widget: "list"}
2123

0 commit comments

Comments
 (0)