<commit_before>import React from 'react';
import { useAmp } from 'next/amp';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import Button from '~/components/button';
import DateHeading from '~/components/header/date';
import Image, { ImageType } from '~/components/header/image';
import Curve from '~/static/images/curve.svg';

const HeaderStyles = styled.header.attrs({ 'data-testid': 'header' })`
  height: 50vh;
  min-height: 50rem;
  max-height: 80rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;

  @media (orientation: landscape) and (max-height: 500px) {
    max-height: 100vh;
    min-height: 100vh;
    height: 100vh;
  }

  figure {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3.2rem;
    svg {
      fill: ${props => props.theme.background};
      width: 100%;
      height: 100%;
    }
  }
`;

const HeaderContent = styled.div`
  z-index: 1;
  text-align: center;
  max-width: 80vw;
`;

export const Title = styled(animated.h1)`
  margin-bottom: 2rem;
  font-size: 3rem;
  @media (min-width: 400px) {
    font-size: 4rem;
  }
`;

interface Props {
  title: string;
  url?: string;
  image: ImageType;
  date?: string;
}

const Header = ({ title, url, image, date }: Props) => {
  const isAmp = useAmp();
  const {
    query: { amp, ...query },
  } = useRouter();
  const props = useSpring({
    from: {
      opacity: isAmp ? 1 : 0,
      transform: isAmp ? 'translateY(0px)' : 'translateY(-50px)',
    },
    to: { opacity: 1, transform: 'translateY(0px)' },
  });

  return (
    <HeaderStyles>
      <HeaderContent>
        <Title style={props}>{title}</Title>
        {date && <DateHeading date={date} />}
        {url && (
          <Button
            text="Read More"
            link={{
              pathname: url,
              query: isAmp ? { ...query, amp: 1 } : query,
            }}
          />
        )}
      </HeaderContent>
      <Image image={image} />
      <figure>
        <Curve role="presentation" />
      </figure>
    </HeaderStyles>
  );
};

Header.defaultProps = {
  url: null,
  image: null,
  date: null,
};<commit_msg>feat: add noscript version of header title<commit_after>import React from 'react';
import { useAmp } from 'next/amp';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import Button from '~/components/button';
import DateHeading from '~/components/header/date';
import Image, { ImageType } from '~/components/header/image';
import Curve from '~/static/images/curve.svg';

const HeaderStyles = styled.header.attrs({ 'data-testid': 'header' })`
  height: 50vh;
  min-height: 50rem;
  max-height: 80rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;

  @media (orientation: landscape) and (max-height: 500px) {
    max-height: 100vh;
    min-height: 100vh;
    height: 100vh;
  }

  figure {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3.2rem;
    svg {
      fill: ${props => props.theme.background};
      width: 100%;
      height: 100%;
    }
  }
`;

const HeaderContent = styled.div`
  z-index: 1;
  text-align: center;
  max-width: 80vw;
`;

export const Title = styled(animated.h1)`
  margin-bottom: 2rem;
  font-size: 3rem;
  @media (min-width: 400px) {
    font-size: 4rem;
  }
`;

interface Props {
  title: string;
  url?: string;
  image: ImageType;
  date?: string;
}

const Header = ({ title, url, image, date }: Props) => {
  const isAmp = useAmp();
  const {
    query: { amp, ...query },
  } = useRouter();

  const props = useSpring({
    from: {
      opacity: isAmp ? 1 : 0,
      transform: isAmp ? 'translateY(0px)' : 'translateY(-50px)',
    },
    to: { opacity: 1, transform: 'translateY(0px)' },
  });

  return (
    <HeaderStyles>
      <HeaderContent>
        <Title style={props}>{title}</Title>
        <noscript>
          <Title>{title}</Title>
        </noscript>
        {date && <DateHeading date={date} />}
        {url && (
          <Button
            text="Read More"
            link={{
              pathname: url,
              query: isAmp ? { ...query, amp: 1 } : query,
            }}
          />
        )}
      </HeaderContent>
      <Image image={image} />
      <figure>
        <Curve role="presentation" />
      </figure>
    </HeaderStyles>
  );
};

Header.defaultProps = {
  url: null,
  image: null,
  date: null,
};
{'fraction_non_alphanumeric': 0.15740338688666955, 'fraction_numerical': 0.02127659574468085, 'mean_word_length': 2.5087585681645086, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, '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': '785975', 'n_tokens_mistral': 1665, 'n_tokens_neox': 1553, 'n_words': 389}