refactor(www): consolidate getting the excerpt from blog posts (#21386)

gatsbyjs · Feb 19, 2020 · 27aeb08 · 27aeb08
1 parent 2c7212e
commit 27aeb08
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 25 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -278,17 +278,16 @@ module.exports = {
                 ) {
                   edges {
                     node {
-                      excerpt
                       html
                       frontmatter {
                         title
                         date
-                        excerpt
                         author {
                           id
                         }
                       }
                       fields {
+                        excerpt
                         slug
                       }
                     }
@@ -314,7 +313,7 @@ module.exports = {
               allMdx.edges.map(({ node }) => {
                 return {
                   title: node.frontmatter.title,
-                  description: node.frontmatter.excerpt || node.excerpt,
+                  description: node.fields.excerpt,
                   url: site.siteMetadata.siteUrl + node.fields.slug,
                   guid: site.siteMetadata.siteUrl + node.fields.slug,
                   custom_elements: [{ "content:encoded": node.html }],

diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -16,9 +16,7 @@ const BlogPostPreviewItem = ({ post, className }) => (
   <article css={{ position: `relative` }} className={className}>
     <Link to={post.fields.slug} sx={{ "&&": { color: `card.color` } }}>
       <h2 sx={{ color: `card.header`, mt: 0 }}>{post.frontmatter.title}</h2>
-      <p>
-        {post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt}
-      </p>
+      <p>{post.fields.excerpt}</p>
     </Link>
     <div
       css={{
@@ -86,12 +84,11 @@ const BlogPostPreviewItem = ({ post, className }) => (
 
 export const blogPostPreviewFragment = graphql`
   fragment BlogPostPreview_item on Mdx {
-    excerpt
     fields {
       slug
+      excerpt
     }
     frontmatter {
-      excerpt
       title
       date
       author {

diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js
@@ -188,10 +188,8 @@ const HomepageBlogPost = ({
   desktopViewport = false,
 }) => {
   const {
-    excerpt: automaticExcerpt,
-    fields: { slug },
+    fields: { slug, excerpt },
     frontmatter: {
-      excerpt: handwrittenExcerpt,
       author: {
         id: authorName,
         avatar: {
@@ -205,8 +203,6 @@ const HomepageBlogPost = ({
     },
   } = post
 
-  const excerpt = handwrittenExcerpt ? handwrittenExcerpt : automaticExcerpt
-
   return (
     <HomepageBlogPostRoot fullWidth={fullWidth}>
       {desktopViewport && cover && (

diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
@@ -62,17 +62,10 @@ class BlogPostTemplate extends React.Component {
                 rel="author"
                 href={`https://gatsbyjs.org${post.frontmatter.author.fields.slug}`}
               />
-              <meta
-                name="description"
-                content={
-                  post.frontmatter.excerpt
-                    ? post.frontmatter.excerpt
-                    : post.excerpt
-                }
-              />
+              <meta name="description" content={post.fields.excerpt} />
 
-              <meta property="og:description" content={post.excerpt} />
-              <meta name="twitter:description" content={post.excerpt} />
+              <meta property="og:description" content={post.fields.excerpt} />
+              <meta name="twitter:description" content={post.fields.excerpt} />
               <meta property="og:title" content={post.frontmatter.title} />
               <meta property="og:url" content={href} />
               {post.frontmatter.image && (
@@ -241,15 +234,14 @@ export const pageQuery = graphql`
   query($slug: String!) {
     mdx(fields: { slug: { eq: $slug } }) {
       body
-      excerpt
       timeToRead
       fields {
         slug
+        excerpt
         publishedAt
       }
       frontmatter {
         title
-        excerpt
         date(formatString: "MMMM Do YYYY")
         rawDate: date
         canonicalLink

diff --git a/www/src/utils/node/docs.js b/www/src/utils/node/docs.js
@@ -259,6 +259,13 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
             ? publishedAt || url.parse(canonicalLink).hostname
             : null,
         })
+
+        // If an excerpt is defined, use it, otherwise default to autogenerated excerpt
+        createNodeField({
+          node,
+          name: `excerpt`,
+          value: node.frontmatter.excerpt || node.excerpt,
+        })
       }
     }