<commit_before>import React from "react"
import { Link } from "gatsby"
import LaunchDemoIcon from "react-icons/lib/md/launch"
import GithubIcon from "react-icons/lib/go/mark-github"
import MdStar from "react-icons/lib/md/star"
import { options, rhythm } from "../../utils/typography"
import { colors } from "../../utils/presets"
import styles from "../shared/styles"
import ThumbnailLink from "../shared/thumbnail"
import EmptyGridItems from "../shared/empty-grid-items"
import V2Icon from "../../assets/v2icon.svg"
import get from "lodash/get"

const StartersList = ({ urlState, starters, count, sortRecent }) => {
  if (!starters.length) {
    // empty state!
    const emptyStateReason =
      urlState.s !== ``
        ? urlState.s // if theres a search term
        : urlState.d && !Array.isArray(urlState.d)
          ? urlState.d // if theres a single dependency
          : `matching` // if no search term or single dependency
    return (
      <div
        css={{
          display: `grid`,
          height: `80%`,
          alignItems: `center`,
          justifyContent: `center`,
          textAlign: `center`,
        }}
      >
        <h1>
          No {`${emptyStateReason}`} starters found!
          <div css={{ color: colors.gatsby }}>
            <small>
              Maybe you should write one and
              {` `}
              <Link to="/docs/submit-to-starter-library/">submit it</Link>?
            </small>
          </div>
        </h1>
      </div>
    )
  }
  if (count) {
    starters = starters.sort(sortingFunction(sortRecent)).slice(0, count)
    return (
      <div
        css={{
          fontFamily: options.headerFontFamily.join(`,`),
          ...styles.showcaseList,
        }}
      >
        {starters.map(({ node: starter }) => {
          const {
            description,
            gatsbyMajorVersion,
            name,
            githubFullName,
            lastUpdated,
            owner,
            slug,
            stars,
            stub,
          } = starter.fields.starterShowcase
          const { url: demoUrl } = starter

          return (
            starter.fields && ( // have to filter out null fields from bad data
              <div
                key={starter.id}
                css={{
                  ...styles.showcaseItem,
                  ...styles.withTitleHover,
                }}
              >
                <ThumbnailLink
                  slug={`/starters${slug}`}
                  image={starter.childScreenshot}
                  title={starter.name}
                />
                <div
                  css={{
                    ...styles.meta,
                  }}
                >
                  <div
                    css={{ display: `flex`, justifyContent: `space-between` }}
                  >
                    <span css={{ color: colors.gray.dark }}>{owner} /</span>
                    <span css={{ display: `flex` }}>
                      {gatsbyMajorVersion[0][1] === `2` && (
                        <img
                          src={V2Icon}
                          alt="Gatsby v2"
                          css={{ marginBottom: 0, marginRight: rhythm(2 / 8) }}
                        />
                      )}
                      <div css={{ display: `inline-block` }}>
                        <MdStar
                          style={{
                            color: colors.gray.light,
                            verticalAlign: `text-top`,
                          }}
                        />
                        {stars}
                      </div>
                    </span>
                  </div>
                  <div>
                    <Link to={`/starters/${stub}`}>
                      <h5 css={{ margin: 0 }}><commit_msg>fix(www): title and thumbnail of Starter card route to same place (#10665)<commit_after>import React from "react"
import { Link } from "gatsby"
import LaunchDemoIcon from "react-icons/lib/md/launch"
import GithubIcon from "react-icons/lib/go/mark-github"
import MdStar from "react-icons/lib/md/star"
import { options, rhythm } from "../../utils/typography"
import { colors } from "../../utils/presets"
import styles from "../shared/styles"
import ThumbnailLink from "../shared/thumbnail"
import EmptyGridItems from "../shared/empty-grid-items"
import V2Icon from "../../assets/v2icon.svg"
import get from "lodash/get"

const StartersList = ({ urlState, starters, count, sortRecent }) => {
  if (!starters.length) {
    // empty state!
    const emptyStateReason =
      urlState.s !== ``
        ? urlState.s // if theres a search term
        : urlState.d && !Array.isArray(urlState.d)
          ? urlState.d // if theres a single dependency
          : `matching` // if no search term or single dependency
    return (
      <div
        css={{
          display: `grid`,
          height: `80%`,
          alignItems: `center`,
          justifyContent: `center`,
          textAlign: `center`,
        }}
      >
        <h1>
          No {`${emptyStateReason}`} starters found!
          <div css={{ color: colors.gatsby }}>
            <small>
              Maybe you should write one and
              {` `}
              <Link to="/docs/submit-to-starter-library/">submit it</Link>?
            </small>
          </div>
        </h1>
      </div>
    )
  }
  if (count) {
    starters = starters.sort(sortingFunction(sortRecent)).slice(0, count)
    return (
      <div
        css={{
          fontFamily: options.headerFontFamily.join(`,`),
          ...styles.showcaseList,
        }}
      >
        {starters.map(({ node: starter }) => {
          const {
            description,
            gatsbyMajorVersion,
            name,
            githubFullName,
            lastUpdated,
            owner,
            slug,
            stars,
          } = starter.fields.starterShowcase
          const { url: demoUrl } = starter

          return (
            starter.fields && ( // have to filter out null fields from bad data
              <div
                key={starter.id}
                css={{
                  ...styles.showcaseItem,
                  ...styles.withTitleHover,
                }}
              >
                <ThumbnailLink
                  slug={`/starters${slug}`}
                  image={starter.childScreenshot}
                  title={starter.name}
                />
                <div
                  css={{
                    ...styles.meta,
                  }}
                >
                  <div
                    css={{ display: `flex`, justifyContent: `space-between` }}
                  >
                    <span css={{ color: colors.gray.dark }}>{owner} /</span>
                    <span css={{ display: `flex` }}>
                      {gatsbyMajorVersion[0][1] === `2` && (
                        <img
                          src={V2Icon}
                          alt="Gatsby v2"
                          css={{ marginBottom: 0, marginRight: rhythm(2 / 8) }}
                        />
                      )}
                      <div css={{ display: `inline-block` }}>
                        <MdStar
                          style={{
                            color: colors.gray.light,
                            verticalAlign: `text-top`,
                          }}
                        />
                        {stars}
                      </div>
                    </span>
                  </div>
                  <div>
                    <Link to={`/starters${slug}`}>
                      <h5 css={{ margin: 0 }}>
{'fraction_non_alphanumeric': 0.12562417871222076, 'fraction_numerical': 0.0051248357424441525, 'mean_word_length': 1.146362098138748, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, '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': '4730990', 'n_tokens_mistral': 2057, 'n_tokens_neox': 1961, 'n_words': 452}