<commit_before>import React from 'react';
import '@formatjs/intl-relativetimeformat/polyfill';
import styled from 'styled-components';
import { parseISO } from 'date-fns';
import { selectUnit } from '@formatjs/intl-utils';

import { formatPostDate } from '~/utils/dates';

if (!Intl.PluralRules) {
  require('@formatjs/intl-pluralrules');
}

const H2 = styled.h2`
  font-size: 2.5rem;
  @media screen and (min-width: 450px) {
    font-size: 3rem;
  }
`;

interface Props {
  date: string;
}

const DateHeading: React.FC<Props> = ({ date }) => {
  const now = Date.now();
  const formatted = formatPostDate(date);
  const parsed = parseISO(date);
  const { unit, value } = selectUnit(parsed, now);

  const formatRelative = new (Intl as any).RelativeTimeFormat('en', {
    numeric: 'auto',
  });

  if ((unit === 'month' && value <= -4) || ['quarter', 'year'].includes(unit)) {
    return <H2 title={formatted}>Posted {formatted}</H2>;
  }

  return <H2 title={formatted}>Posted {formatRelative.format(value, unit)}</H2>;
};

export default DateHeading;
<commit_msg>fix: polyfill locales for relativetimeformat<commit_after>import React from 'react';
import '@formatjs/intl-relativetimeformat/polyfill';
import styled from 'styled-components';
import { parseISO } from 'date-fns';
import { selectUnit } from '@formatjs/intl-utils';
import '@formatjs/intl-relativetimeformat/polyfill-locales';
import { formatPostDate } from '~/utils/dates';

if (!Intl.PluralRules) {
  require('@formatjs/intl-pluralrules');
}

const H2 = styled.h2`
  font-size: 2.5rem;
  @media screen and (min-width: 450px) {
    font-size: 3rem;
  }
`;

interface Props {
  date: string;
}

const DateHeading: React.FC<Props> = ({ date }) => {
  const now = Date.now();
  const formatted = formatPostDate(date);
  const parsed = parseISO(date);
  const { unit, value } = selectUnit(parsed, now);

  const formatRelative = new (Intl as any).RelativeTimeFormat('en', {
    numeric: 'auto',
  });

  if ((unit === 'month' && value <= -4) || ['quarter', 'year'].includes(unit)) {
    return <H2 title={formatted}>Posted {formatted}</H2>;
  }

  return <H2 title={formatted}>Posted {formatRelative.format(value, unit)}</H2>;
};

export default DateHeading;

{'fraction_non_alphanumeric': 0.16794236830256642, 'fraction_numerical': 0.01170643854119766, 'mean_word_length': 4.555, 'pattern_counts': {'":': 0, '<': 15, '<?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': '1175774', 'n_tokens_mistral': 779, 'n_tokens_neox': 752, 'n_words': 178}