<commit_before>import React from 'react'
import Img from 'gatsby-image'

import { Container } from './Container'
import { H1, H2 } from './Headings'

const renderProject = (project) => {
  const { name, id, repoUrl, liveUrl, excerpt, image } = project

  return (
    <li key={id} className="flex py-12 space-x-6">
      <div className={`${image && 'sm:w-2/3'} w-full space-y-5`}>
        <div className="space-y-6">
          <div className="flex items-center">
            {liveUrl ? (
              <a
                href={liveUrl}
                target="_blank"
                rel="noreferrer"
                className="font-bold no-underline "
                aria-label={`Go to ${liveUrl}`}
              >
                <H2>{name}</H2>
              </a>
            ) : (
              <H2>{name}</H2>
            )}
            {liveUrl && (
              <a
                href={liveUrl}
                target="_blank"
                rel="noreferrer"
                aria-label={`Follow external link to ${liveUrl}`}
              >
                <svg
                  className="w-5 h-5 ml-1 text-gray-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  ></path>
                </svg>
              </a>
            )}
          </div>
          <div
            className="text-gray-500 prose max-w-none"
            dangerouslySetInnerHTML={{ __html: excerpt }}
          />
        </div>
        {repoUrl && (
          <div>
            <a
              href={repoUrl}
              className="text-base font-bold text-blue-600 no-underline hover:text-blue-400"
              aria-label={`Go to ${repoUrl}`}
            >
              <span className="mr-1">View source -&gt;</span>
            </a>
          </div>
        )}
      </div>
      {!image ? null : (
        <div className="hidden sm:block sm:w-1/3">
          <Img
            fluid={image.node.childImageSharp.fluid}
            alt={`screen shot of ${name}`}
          />
        </div>
      )}
    </li>
  )
}

const Projects = ({ projects = [] }) => {
  if (!projects.length) return null

  return (
    <Container>
      <H1>Projects</H1>
      <ul className="divide-y divide-gray-200">
        {projects.map(renderProject)}
      </ul>
    </Container>
  )
}

export { Projects }<commit_msg>Split Project layout 50/50 when screenshots show<commit_after>import React from 'react'
import Img from 'gatsby-image'

import { Container } from './Container'
import { H1, H2 } from './Headings'

const renderProject = (project) => {
  const { name, id, repoUrl, liveUrl, excerpt, image } = project

  return (
    <li key={id} className="flex py-12 space-x-6">
      <div className={`${image && 'sm:w-1/2'} w-full space-y-5`}>
        <div className="space-y-6">
          <div className="flex items-center">
            {liveUrl ? (
              <a
                href={liveUrl}
                target="_blank"
                rel="noreferrer"
                className="font-bold no-underline "
                aria-label={`Go to ${liveUrl}`}
              >
                <H2>{name}</H2>
              </a>
            ) : (
              <H2>{name}</H2>
            )}
            {liveUrl && (
              <a
                href={liveUrl}
                target="_blank"
                rel="noreferrer"
                aria-label={`Follow external link to ${liveUrl}`}
              >
                <svg
                  className="w-5 h-5 ml-1 text-gray-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  ></path>
                </svg>
              </a>
            )}
          </div>
          <div
            className="text-gray-500 prose max-w-none"
            dangerouslySetInnerHTML={{ __html: excerpt }}
          />
        </div>
        {repoUrl && (
          <div>
            <a
              href={repoUrl}
              className="text-base font-bold text-blue-600 no-underline hover:text-blue-400"
              aria-label={`Go to ${repoUrl}`}
            >
              <span className="mr-1">View source -&gt;</span>
            </a>
          </div>
        )}
      </div>
      {!image ? null : (
        <div className="hidden sm:block sm:w-1/2">
          <Img
            fluid={image.node.childImageSharp.fluid}
            alt={`screen shot of ${name}`}
          />
        </div>
      )}
    </li>
  )
}

const Projects = ({ projects = [] }) => {
  if (!projects.length) return null

  return (
    <Container>
      <H1>Projects</H1>
      <ul className="divide-y divide-gray-200">
        {projects.map(renderProject)}
      </ul>
    </Container>
  )
}

export { Projects }
{'fraction_non_alphanumeric': 0.13863762230016613, 'fraction_numerical': 0.034336348532398, 'mean_word_length': 1.2259654889071487, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, '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': '2982019', 'n_tokens_mistral': 1760, 'n_tokens_neox': 1595, 'n_words': 330}