<commit_before>// @flow
import React from 'react';
import styled from 'styled-components';
import webp from '../../utils/webp';
import { unsplashParams } from '../../config';

const Picture = styled.picture`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
`;

const Image = styled.img`
  height: 100%;
  width: 100%;
  object-fit: cover;
`;

type Props = {
  image: {
    imageUrl: string,
    name: string,
    url?: string,
  },
};

const HeaderImage = ({ image }: Props) => {
  const imgUrl = `/static/images/posts/${image.imageUrl}`;
  const { url: webpImage, type } = webp(image.imageUrl);

  const webpbg = `/static/images/posts/${webpImage}`;

  return (
    <Picture>
      <source srcSet={webpbg} type="image/webp" />
      <source srcSet={image} type={type} />
      <Image
        src={`/static/images/posts/${image.imageUrl}`}
        alt={image.name ? `Taken by ${image.name}` : ''}
        data-source-url={unsplashParams(imgUrl)}
      />
    </Picture>
  );
};

export default HeaderImage;<commit_msg>fix image paths with Header Image<commit_after>// @flow
import React from 'react';
import styled from 'styled-components';
import webp from '../../utils/webp';
import { unsplashParams } from '../../config';

const Picture = styled.picture`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
`;

const Image = styled.img`
  height: 100%;
  width: 100%;
  object-fit: cover;
`;

type Props = {
  image: {
    imageUrl: string,
    name: string,
    url?: string,
  },
};

const HeaderImage = ({ image }: Props) => {
  const imagePath = '/static/images/posts';
  const imgUrl = `${imagePath}/${image.imageUrl}`;
  const { url: webpImage, type } = webp(image.imageUrl);

  const webpbg = `${imagePath}/${webpImage}`;

  return (
    <Picture>
      <source srcSet={webpbg} type="image/webp" />
      <source srcSet={imgUrl} type={type} />
      <Image
        src={imgUrl}
        alt={image.name ? `Taken by ${image.name}` : ''}
        data-source-url={unsplashParams(image.url)}
      />
    </Picture>
  );
};

export default HeaderImage;
{'fraction_non_alphanumeric': 0.17781402936378465, 'fraction_numerical': 0.02202283849918434, 'mean_word_length': 2.8268330733229328, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, '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': '5078567', 'n_tokens_mistral': 914, 'n_tokens_neox': 864, 'n_words': 211}