Gatsby + Netlify CMS: Any ways to enable featured images for each entry in src/pages/index.js?

Question

is there any solution for enabling featured images in TOP/HOME page from the template https://github.com/netlify-templates/gatsby-starter-netlify-cms ?

I meant to say I want the TOP/HOME page (src/pages.index.js) to display those images as well.

I've tried to do that in 2 ways but it fails.

Way 1:

From config.yml like that in below.

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
      label: "Homepage"
      name: "homepage"

Then created a src/pages/index.md markdown file and move the js file src/pages/index.js to a directory src/template. Added that markdown file as an entry in my pages collection. But I got an Gatsby related error like this.

Your site's "gatsby-node.js" created a page with a component that doesn't exist

{ path: '/',
  tags: null,
  component: '/Users/class/gatsby-netlify-blog/src/templates/null.js',
  context: { id: 'bb87bb60-04a6-51ea-8524-c7b2332a2fdb' } }
error See the documentation for createPage https://www.gatsbyjs.org/docs/bound-action-creators/#createPage

Way 2:

Tried the same way in src/pages/index.js from the templae, gatsby-starter-netlify-cms wrote in blog-post.js, using Content component.

import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import Content, { HTMLContent } from '../components/Content'

export default class IndexPage extends React.Component {
  render() {
    const { data } = this.props
    const { edges: posts } = data.allMarkdownRemark
    const FeaturedImg = {
      content,
      contentComponent,
    }
    const PostContent = contentComponent || Content

    return (
      <Layout>
        <FeaturedImg
          content={post.html}
          contentComponent={HTMLContent}
        />
        <section className="section">
          <div className="container">
            <div className="content">
              <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
            </div>
            {posts
              .map(({ node: post }) => (
                <div
                  className="content"
                  style={{ border: '1px solid #eaecee', padding: '2em 4em' }}
                  key={post.id}
                >
                  <p>
                    <Link className="has-text-primary" to={post.fields.slug}>
                      {post.frontmatter.title}
                    </Link>
                    <span> &nbsp; </span>
                    <small>{post.frontmatter.date}</small>
                  </p>
                  <PostContent content={content} />
                  <p>
                    {post.excerpt}
                    <br />
                    <br />
                    <Link className="button is-small" to={post.fields.slug}>
                      Keep Reading →
                    </Link>
                  </p>
                </div>
              ))}
          </div>
        </section>
      </Layout>
    )
  }
}

IndexPage.propTypes = {
  content: PropTypes.node.isRequired,
  contentComponent: PropTypes.func,
  data: PropTypes.shape({
    allMarkdownRemark: PropTypes.shape({
      edges: PropTypes.array,
    }),
  }),
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] },
      filter: { frontmatter: { templateKey: { eq: "blog-post" } }}
    ) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
            date(formatString: "MMMM DD, YYYY")
          }
        }
      }
    }
  }
`

But again, I got errors like this in below.

ERROR  Failed to compile with 1 errors                                                                                                                                                                    11:23:51

 error  in ./src/pages/index.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/class/gatsby-netlify-blog/src/pages/index.js
  12:7   error  'content' is not defined           no-undef
  13:7   error  'contentComponent' is not defined  no-undef
  15:25  error  'contentComponent' is not defined  no-undef
  20:20  error  'post' is not defined              no-undef
  42:41  error  'content' is not defined           no-undef

✖ 5 problems (5 errors, 0 warnings)


 @ ./.cache/sync-requires.js 19:50-112
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app

*I've already asked Gitter, issue in gatsby-starter-netlify-cms and Gatsby's Spectrum Chat but couldn't get the right path.

Answer 1

For #1 your markdown file needs a template key to tell gatsby where to find the js file to use to render your markdown.

For #2 those variables are not defined in the scope they are being used, your linter is catching it and they would fail at runtime. Should those be imported from somewhere?