foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Display date on header along with author

Browse source
This commit is contained in:
Foster Hangdaan 2023-08-05 17:47:37 -04:00
parent 65cf7c1b69
commit 5e5319ee3f
Signed by: foster
GPG key ID: E48D7F49A852F112
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_components/header.tsx
View file

@ -4,14 +4,20 @@ export interface Props {
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>By {props.author.name}</p>}
{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>

4
_includes/layouts/base.tsx
View file

@ -1,4 +1,4 @@
export default function({ title, description, children, comp, metas, links, author }) {
export default function({ title, description, children, comp, metas, links, author, date }) {
return (
<html lang="en-CA">
<head>
@ -25,7 +25,7 @@ export default function({ title, description, children, comp, metas, links, auth
</head>
<body>
{ comp.navbar() }
{ comp.header({title, description, author}) }
{ comp.header({title, description, author, date}) }
<main>{children}</main>
{ comp.footer() }
</body>