-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
f33c415
commit 51ec25f
Showing
16 changed files
with
685 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
examples/using-remark/src/pages/2017-11-14---excerpts/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
--- | ||
title: "Using Excerpts" | ||
date: "2017-11-14" | ||
draft: false | ||
author: Jay Gatsby | ||
tags: | ||
- remark | ||
- excerpts | ||
--- | ||
|
||
`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. | ||
|
||
```graphql | ||
{ | ||
allMarkdownRemark { | ||
edges { | ||
node { | ||
excerpt(pruneLength: 280) | ||
} | ||
} | ||
} | ||
} | ||
``` | ||
|
||
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. | ||
|
||
```json | ||
{ | ||
resolve: `gatsby-transformer-remark`, | ||
options: { | ||
excerpt_separator: `<!-- end -->` | ||
} | ||
} | ||
``` | ||
|
||
Any file that does not have the given excerpt_separator will fall back to the default pruning method. | ||
|
||
You can see the results [here](/excerpt-example) |
23 changes: 23 additions & 0 deletions
23
examples/using-remark/src/pages/examples/example---custom-separator/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
title: "Getting an Excerpt with a Separator" | ||
draft: false | ||
example: true | ||
author: Daisy Buchanan | ||
--- | ||
|
||
This example uses a custom excerpt_separator. | ||
|
||
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. | ||
|
||
<!-- end --> | ||
|
||
```json | ||
{ | ||
resolve: `gatsby-transformer-remark`, | ||
options: { | ||
excerpt_separator: `<!-- end -->` | ||
} | ||
} | ||
``` | ||
|
||
Any file that does not have the given excerpt_separator will fall back to the default pruning method. |
22 changes: 22 additions & 0 deletions
22
examples/using-remark/src/pages/examples/example---no-separator/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
--- | ||
title: "A Default, 140 Character Excerpt" | ||
draft: false | ||
example: true | ||
author: Daisy Buchanan | ||
--- | ||
|
||
This example uses the default pruning method. | ||
|
||
`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. | ||
|
||
```graphql | ||
{ | ||
allMarkdownRemark { | ||
edges { | ||
node { | ||
excerpt(pruneLength: 280) | ||
} | ||
} | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import React from "react" | ||
import Link from "gatsby-link" | ||
import styles from "../styles" | ||
import presets from "../utils/presets" | ||
import { rhythm, scale } from "../utils/typography" | ||
|
||
class Index extends React.Component { | ||
render() { | ||
const posts = this.props.data.allMarkdownRemark.edges | ||
|
||
return ( | ||
<div> | ||
<div> | ||
<h1 | ||
css={{ | ||
...scale(4 / 5), | ||
fontWeight: `800`, | ||
marginBottom: rhythm(2), | ||
}} | ||
> | ||
This page demonstrates the different types of excerpts you can use | ||
with gatsby-transformer-remark | ||
</h1> | ||
<ul | ||
css={{ | ||
marginBottom: rhythm(2), | ||
marginTop: rhythm(2), | ||
marginLeft: 0, | ||
listStyle: `none`, | ||
}} | ||
> | ||
{posts.map(post => ( | ||
<li key={post.node.fields.slug}> | ||
<span | ||
css={{ | ||
color: styles.colors.light, | ||
display: `block`, | ||
[presets.Tablet]: { | ||
float: `right`, | ||
marginLeft: `1rem`, | ||
}, | ||
}} | ||
> | ||
{post.node.frontmatter.date} | ||
</span> | ||
<Link to={post.node.fields.slug} className="link-underline"> | ||
{post.node.frontmatter.title} | ||
</Link> | ||
<p>{post.node.excerpt}</p> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
export default Index | ||
|
||
export const pageQuery = graphql` | ||
query ExcerptExampleQuery { | ||
allMarkdownRemark(filter: { frontmatter: { example: { eq: true } } }) { | ||
edges { | ||
node { | ||
fields { | ||
slug | ||
} | ||
frontmatter { | ||
title | ||
} | ||
excerpt | ||
} | ||
} | ||
} | ||
} | ||
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.