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
gatsbyjs · Jan 10, 2018 · 51ec25f · 51ec25f
1 parent f33c415
commit 51ec25f
Show file tree

Hide file tree

Showing 16 changed files with 685 additions and 93 deletions.
diff --git a/examples/using-faker/src/pages/index.js b/examples/using-faker/src/pages/index.js
@@ -3,38 +3,38 @@ import Link from "gatsby-link"
 import "./index.css"
 
 const IndexPage = ({ data }) => (
-    <div>
-      <div className="page-grid">
-        <div className="address-section">
-          <h4>Address</h4>
-          <div>{data.personalData.address.streetAddress}</div>
-          <div>{data.personalData.address.streetName}</div>
-          <div>{data.personalData.address.city}</div>
-          <div>
-            {data.personalData.address.state} -
-            {data.personalData.address.zipCode}
-          </div>
-        </div>
-        <div className="email-section">
-          {data.personalData.internet.email} /
-          {data.personalData.phone.phoneNumber}
-        </div>
-        <div className="summary-section">
-          <h4> Summary</h4>
-          {data.personalData.lorem.paragraph}
+  <div>
+    <div className="page-grid">
+      <div className="address-section">
+        <h4>Address</h4>
+        <div>{data.personalData.address.streetAddress}</div>
+        <div>{data.personalData.address.streetName}</div>
+        <div>{data.personalData.address.city}</div>
+        <div>
+          {data.personalData.address.state} -
+          {data.personalData.address.zipCode}
         </div>
       </div>
-      <div className="company-section">
-        <h3>Worked at</h3>
-        {data.allCompanyData.edges.map(({ node }) => (
-          <div>
-            <div>{node.company.companyName}</div>
-            <div>{node.company.companySuffix}</div>
-          </div>
-        ))}
+      <div className="email-section">
+        {data.personalData.internet.email} /
+        {data.personalData.phone.phoneNumber}
+      </div>
+      <div className="summary-section">
+        <h4> Summary</h4>
+        {data.personalData.lorem.paragraph}
       </div>
     </div>
-  )
+    <div className="company-section">
+      <h3>Worked at</h3>
+      {data.allCompanyData.edges.map(({ node }) => (
+        <div>
+          <div>{node.company.companyName}</div>
+          <div>{node.company.companySuffix}</div>
+        </div>
+      ))}
+    </div>
+  </div>
+)
 
 export default IndexPage
 

diff --git a/examples/using-remark/gatsby-config.js b/examples/using-remark/gatsby-config.js
@@ -20,6 +20,7 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
+        excerpt_separator: `<!-- end -->`,
         plugins: [
           {
             resolve: `gatsby-remark-images`,

diff --git a/examples/using-remark/src/pages/2017-11-14---excerpts/index.md b/examples/using-remark/src/pages/2017-11-14---excerpts/index.md
@@ -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)
diff --git a/examples/using-remark/src/pages/examples/example---custom-separator/index.md b/examples/using-remark/src/pages/examples/example---custom-separator/index.md
@@ -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.
diff --git a/examples/using-remark/src/pages/examples/example---no-separator/index.md b/examples/using-remark/src/pages/examples/example---no-separator/index.md
@@ -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)
+      }
+    }
+  }
+}
+```
diff --git a/examples/using-remark/src/pages/excerpt-example.js b/examples/using-remark/src/pages/excerpt-example.js
@@ -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
+        }
+      }
+    }
+  }
+`
diff --git a/examples/using-remark/src/pages/index.js b/examples/using-remark/src/pages/index.js
@@ -75,7 +75,7 @@ export const pageQuery = graphql`
     allMarkdownRemark(
       limit: 2000
       sort: { fields: [frontmatter___date], order: DESC }
-      filter: { frontmatter: { draft: { ne: true } } }
+      filter: { frontmatter: { draft: { ne: true }, example: { ne: true } } }
     ) {
       edges {
         node {

diff --git a/examples/using-remark/src/pages/tags.js b/examples/using-remark/src/pages/tags.js
@@ -39,7 +39,7 @@ export const pageQuery = graphql`
     }
     allMarkdownRemark(
       limit: 2000
-      filter: { frontmatter: { draft: { ne: true } } }
+      filter: { frontmatter: { draft: { ne: true }, example: { ne: true } } }
     ) {
       group(field: frontmatter___tags) {
         fieldValue

diff --git a/packages/gatsby-transformer-remark/package.json b/packages/gatsby-transformer-remark/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "bluebird": "^3.5.0",
-    "gray-matter": "^2.1.0",
+    "gray-matter": "^3.0.0",
     "hast-util-to-html": "^3.0.0",
     "lodash": "^4.17.4",
     "mdast-util-to-hast": "^2.4.0",