website/_components/header.tsx

export interface Props {
  title: string;
  description?: string;
  author?: {
    name: string;
  };
  date: Date;
  comp: any;
}

export default function(props: Props) {
  const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.date);
  return (
    <header className="page-header">
      <h1>{ props.title }</h1>
      {props.author &&
        <p style={{ color: "var(--color-brown)" }}>
          By {props.author.name} on <time datetime={props.date.toISOString()}>{dateFormatted}</time>
        </p>
      }
      {props.comp.separator()}
      <p className="subheading">{ props.description }</p>
    </header>
  )
}