Ndtyjky

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.

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?