<commit_before>import React from "react"
import Link from "gatsby-link"
import * as PropTypes from "prop-types"
import { rhythm } from "../utils/typography"

const propTypes = {
  data: PropTypes.object.isRequired,
}

const Product = ({ node }) =>
  <div key={node.id}>
    <Link
      style={{ color: `inherit`, textDecoration: `none` }}
      to={`/products/${node.id}/`}
    >
      <div
        style={{
          display: `flex`,
          alignItems: `center`,
          borderBottom: `1px solid lightgray`,
          paddingBottom: rhythm(1 / 2),
          marginBottom: rhythm(1 / 2),
        }}
      >
        <div style={{ marginRight: rhythm(1 / 2) }}>
          {node.image[0].responsiveResolution.src &&
            <img
              style={{ margin: 0 }}
              width={node.image[0].responsiveResolution.width}
              height={node.image[0].responsiveResolution.height}
              src={node.image[0].responsiveResolution.src}
              srcSet={node.image[0].responsiveResolution.srcSet}
            />}
        </div>
        <div style={{ flex: 1 }}>
          {node.productName.productName}
        </div>
      </div>
    </Link>
  </div>

class IndexPage extends React.Component {
  render() {
    const usProductEdges = this.props.data.us.edges
    return (
      <div style={{ marginBottom: rhythm(2) }}>
        <h2>Gatsby's integration with the Contentful Image API</h2>
        <Link to="/image-api/">See examples</Link>
        <br />
        <br />
        <br />
        <h2>Localization</h2>
        <p>
          The <code>gatsby-source-contentful</code> plugin offers full support
          for Contentful's localization features. Our sample space includes
          products localized into both English and German.
        </p>
        <p>
          An entry and asset node are created for each locale following fallback
          rules for missing localization. In addition, each node has an
          additional field added, <code>node_locale</code> so you can select for
          nodes from a single locale
        </p>
        <h3>en-US</h3>
        {usProductEdges.map(({ node }, i) => <Product node={node} />)}
      </div>
    )
  }
}

IndexPage.propTypes = propTypes

export default IndexPage

export const pageQuery = graphql`<commit_msg>Fix React missing key warnings<commit_after>import React from "react"
import Link from "gatsby-link"
import * as PropTypes from "prop-types"
import { rhythm } from "../utils/typography"

const propTypes = {
  data: PropTypes.object.isRequired,
}

const Product = ({ node }) =>
  <div key={node.id}>
    <Link
      style={{ color: `inherit`, textDecoration: `none` }}
      to={`/products/${node.id}/`}
    >
      <div
        style={{
          display: `flex`,
          alignItems: `center`,
          borderBottom: `1px solid lightgray`,
          paddingBottom: rhythm(1 / 2),
          marginBottom: rhythm(1 / 2),
        }}
      >
        <div style={{ marginRight: rhythm(1 / 2) }}>
          {node.image[0].responsiveResolution.src &&
            <img
              style={{ margin: 0 }}
              width={node.image[0].responsiveResolution.width}
              height={node.image[0].responsiveResolution.height}
              src={node.image[0].responsiveResolution.src}
              srcSet={node.image[0].responsiveResolution.srcSet}
            />}
        </div>
        <div style={{ flex: 1 }}>
          {node.productName.productName}
        </div>
      </div>
    </Link>
  </div>

class IndexPage extends React.Component {
  render() {
    const usProductEdges = this.props.data.us.edges
    return (
      <div style={{ marginBottom: rhythm(2) }}>
        <h2>Gatsby's integration with the Contentful Image API</h2>
        <Link to="/image-api/">See examples</Link>
        <br />
        <br />
        <br />
        <h2>Localization</h2>
        <p>
          The <code>gatsby-source-contentful</code> plugin offers full support
          for Contentful's localization features. Our sample space includes
          products localized into both English and German.
        </p>
        <p>
          An entry and asset node are created for each locale following fallback
          rules for missing localization. In addition, each node has an
          additional field added, <code>node_locale</code> so you can select for
          nodes from a single locale
        </p>
        <h3>en-US</h3>
        {usProductEdges.map(({ node }, i) => <Product node={node} key={node.id} />)}
      </div>
    )
  }
}

IndexPage.propTypes = propTypes

export default IndexPage

export const pageQuery = graphql`
{'fraction_non_alphanumeric': 0.1291297775858346, 'fraction_numerical': 0.009069315482617146, 'mean_word_length': 2.106639839034205, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 73, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2713141', 'n_tokens_mistral': 1361, 'n_tokens_neox': 1346, 'n_words': 358}