Pfthb

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() 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?