Skip to content

Commit 51ec25f

Browse files
blairwilcoxKyleAMathews
blairwilcox
authored and
KyleAMathews
committed
Use graymatter excerpt in gatsby-transformer-remark (#2883)
* Check for graymatter excerpt Checks to see if there is a gray-matter excerpt before returning a pruned character count * Fix test Remove a variable that wasn't being used * Create page to describe excerpts * Update using-remark example * Remove package-lock.json * Remove console.log statements * Update copy Updates copy to be a bit more descriptive * Update header for example page * Begin stubbing out extend-node.js tests Created a basic framework for creating a markdown node via the onCreateNode function. This should be expanded to factor in the changes that occur in the setFieldsOnGraphQLNodeType function. * Add query test Adds a test that uses graphql to query a node with its excerpt * Regroup tests Regroups tests so that graphql queries and node tests are in their own groups * Fix linting errors Fixes linting errors that were causing issues on travisCI * Format
1 parent f33c415 commit 51ec25f

File tree

16 files changed

+685
-93
lines changed

16 files changed

+685
-93
lines changed

‎examples/using-faker/src/pages/index.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,38 @@ import Link from "gatsby-link"
33
import "./index.css"
44

55
const IndexPage = ({ data }) => (
6-
<div>
7-
<div className="page-grid">
8-
<div className="address-section">
9-
<h4>Address</h4>
10-
<div>{data.personalData.address.streetAddress}</div>
11-
<div>{data.personalData.address.streetName}</div>
12-
<div>{data.personalData.address.city}</div>
13-
<div>
14-
{data.personalData.address.state} -
15-
{data.personalData.address.zipCode}
16-
</div>
17-
</div>
18-
<div className="email-section">
19-
{data.personalData.internet.email} /
20-
{data.personalData.phone.phoneNumber}
21-
</div>
22-
<div className="summary-section">
23-
<h4> Summary</h4>
24-
{data.personalData.lorem.paragraph}
6+
<div>
7+
<div className="page-grid">
8+
<div className="address-section">
9+
<h4>Address</h4>
10+
<div>{data.personalData.address.streetAddress}</div>
11+
<div>{data.personalData.address.streetName}</div>
12+
<div>{data.personalData.address.city}</div>
13+
<div>
14+
{data.personalData.address.state} -
15+
{data.personalData.address.zipCode}
2516
</div>
2617
</div>
27-
<div className="company-section">
28-
<h3>Worked at</h3>
29-
{data.allCompanyData.edges.map(({ node }) => (
30-
<div>
31-
<div>{node.company.companyName}</div>
32-
<div>{node.company.companySuffix}</div>
33-
</div>
34-
))}
18+
<div className="email-section">
19+
{data.personalData.internet.email} /
20+
{data.personalData.phone.phoneNumber}
21+
</div>
22+
<div className="summary-section">
23+
<h4> Summary</h4>
24+
{data.personalData.lorem.paragraph}
3525
</div>
3626
</div>
37-
)
27+
<div className="company-section">
28+
<h3>Worked at</h3>
29+
{data.allCompanyData.edges.map(({ node }) => (
30+
<div>
31+
<div>{node.company.companyName}</div>
32+
<div>{node.company.companySuffix}</div>
33+
</div>
34+
))}
35+
</div>
36+
</div>
37+
)
3838

3939
export default IndexPage
4040

‎examples/using-remark/gatsby-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = {
2020
{
2121
resolve: `gatsby-transformer-remark`,
2222
options: {
23+
excerpt_separator: `<!-- end -->`,
2324
plugins: [
2425
{
2526
resolve: `gatsby-remark-images`,

‎examples/using-remark/src/pages/2017-11-14---excerpts/index.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Using Excerpts"
3+
date: "2017-11-14"
4+
draft: false
5+
author: Jay Gatsby
6+
tags:
7+
- remark
8+
- excerpts
9+
---
10+
11+
`gatsby-transformer-remark` allows you to get an excerpt from a markdown post. By default, it will prune the first 140 characters, but you can optionally specify a `pruneLength` in the graphql query.
12+
13+
```graphql
14+
{
15+
allMarkdownRemark {
16+
edges {
17+
node {
18+
excerpt(pruneLength: 280)
19+
}
20+
}
21+
}
22+
}
23+
```
24+
25+
You can also manually mark in your markdown where to stop excerpting—similar to Jekyl. `gatsby-transformer-remark` uses [gray-matter]() to parse markdown frontmatter, so you can specify an excerpt_separator, as well as any of the other options mentioned [here](), in the `gatsby-config.js` file.
26+
27+
```json
28+
{
29+
resolve: `gatsby-transformer-remark`,
30+
options: {
31+
excerpt_separator: `<!-- end -->`
32+
}
33+
}
34+
```
35+
36+
Any file that does not have the given excerpt_separator will fall back to the default pruning method.
37+
38+
You can see the results [here](/excerpt-example)

‎examples/using-remark/src/pages/examples/example---custom-separator/index.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "Getting an Excerpt with a Separator"
3+
draft: false
4+
example: true
5+
author: Daisy Buchanan
6+
---
7+
8+
This example uses a custom excerpt_separator.
9+
10+
You can manually mark in your markdown where to stop excerpting—similar to Jekyl. `gatsby-transformer-remark` uses [gray-matter]() to parse markdown frontmatter, so you can specify an excerpt_separator, as well as any of the other options mentioned [here](), in the `gatsby-config.js` file.
11+
12+
<!-- end -->
13+
14+
```json
15+
{
16+
resolve: `gatsby-transformer-remark`,
17+
options: {
18+
excerpt_separator: `<!-- end -->`
19+
}
20+
}
21+
```
22+
23+
Any file that does not have the given excerpt_separator will fall back to the default pruning method.

‎examples/using-remark/src/pages/examples/example---no-separator/index.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: "A Default, 140 Character Excerpt"
3+
draft: false
4+
example: true
5+
author: Daisy Buchanan
6+
---
7+
8+
This example uses the default pruning method.
9+
10+
`gatsby-transformer-remark` allows you to get an excerpt from a markdown post. By default, it will prune the first 140 characters, but you can optionally specify a `pruneLength` in the graphql query.
11+
12+
```graphql
13+
{
14+
allMarkdownRemark {
15+
edges {
16+
node {
17+
excerpt(pruneLength: 280)
18+
}
19+
}
20+
}
21+
}
22+
```

‎examples/using-remark/src/pages/excerpt-example.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from "react"
2+
import Link from "gatsby-link"
3+
import styles from "../styles"
4+
import presets from "../utils/presets"
5+
import { rhythm, scale } from "../utils/typography"
6+
7+
class Index extends React.Component {
8+
render() {
9+
const posts = this.props.data.allMarkdownRemark.edges
10+
11+
return (
12+
<div>
13+
<div>
14+
<h1
15+
css={{
16+
...scale(4 / 5),
17+
fontWeight: `800`,
18+
marginBottom: rhythm(2),
19+
}}
20+
>
21+
This page demonstrates the different types of excerpts you can use
22+
with gatsby-transformer-remark
23+
</h1>
24+
<ul
25+
css={{
26+
marginBottom: rhythm(2),
27+
marginTop: rhythm(2),
28+
marginLeft: 0,
29+
listStyle: `none`,
30+
}}
31+
>
32+
{posts.map(post => (
33+
<li key={post.node.fields.slug}>
34+
<span
35+
css={{
36+
color: styles.colors.light,
37+
display: `block`,
38+
[presets.Tablet]: {
39+
float: `right`,
40+
marginLeft: `1rem`,
41+
},
42+
}}
43+
>
44+
{post.node.frontmatter.date}
45+
</span>
46+
<Link to={post.node.fields.slug} className="link-underline">
47+
{post.node.frontmatter.title}
48+
</Link>
49+
<p>{post.node.excerpt}</p>
50+
</li>
51+
))}
52+
</ul>
53+
</div>
54+
</div>
55+
)
56+
}
57+
}
58+
59+
export default Index
60+
61+
export const pageQuery = graphql`
62+
query ExcerptExampleQuery {
63+
allMarkdownRemark(filter: { frontmatter: { example: { eq: true } } }) {
64+
edges {
65+
node {
66+
fields {
67+
slug
68+
}
69+
frontmatter {
70+
title
71+
}
72+
excerpt
73+
}
74+
}
75+
}
76+
}
77+
`

‎examples/using-remark/src/pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const pageQuery = graphql`
7575
allMarkdownRemark(
7676
limit: 2000
7777
sort: { fields: [frontmatter___date], order: DESC }
78-
filter: { frontmatter: { draft: { ne: true } } }
78+
filter: { frontmatter: { draft: { ne: true }, example: { ne: true } } }
7979
) {
8080
edges {
8181
node {

‎examples/using-remark/src/pages/tags.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const pageQuery = graphql`
3939
}
4040
allMarkdownRemark(
4141
limit: 2000
42-
filter: { frontmatter: { draft: { ne: true } } }
42+
filter: { frontmatter: { draft: { ne: true }, example: { ne: true } } }
4343
) {
4444
group(field: frontmatter___tags) {
4545
fieldValue

‎packages/gatsby-transformer-remark/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"dependencies": {
77
"babel-runtime": "^6.26.0",
88
"bluebird": "^3.5.0",
9-
"gray-matter": "^2.1.0",
9+
"gray-matter": "^3.0.0",
1010
"hast-util-to-html": "^3.0.0",
1111
"lodash": "^4.17.4",
1212
"mdast-util-to-hast": "^2.4.0",

0 commit comments

Comments
 (0)