use <time> element for all dates

components/CodeBlock/CodeBlock.tsx

@@ -23,6 +23,7 @@ const Block = styled("div", {
       textAlign: "right",
       color: "$codeComment",
       content: "attr(line)", // added as spans by prism
+      fontVariantNumeric: "tabular-nums",
       userSelect: "none",
     },
 

components/NoteMeta/NoteMeta.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
+import Time from "../Time";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
-import { formatDateTZ } from "../../lib/helpers/format-date";
 import { styled } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { NoteType } from "../../types";
@@ -68,11 +68,11 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
           }}
           passHref={true}
         >
-          <MetaLink title={formatDateTZ(date)}>
+          <MetaLink>
             <span>
               <Icon as={DateIcon} />
             </span>
-            <span>{formatDateTZ(date, "MMMM d, yyyy")}</span>
+            <Time date={date} format="MMMM d, yyyy" />
           </MetaLink>
         </Link>
       </MetaItem>

components/NotesList/NotesList.tsx

@@ -1,5 +1,5 @@
 import Link from "../Link";
-import { formatDateTZ } from "../../lib/helpers/format-date";
+import Time from "../Time";
 import { styled } from "../../lib/styles/stitches.config";
 import type { NoteType } from "../../types";
 
@@ -47,7 +47,7 @@ const Post = styled("li", {
   },
 });
 
-const PostDate = styled("span", {
+const PostDate = styled(Time, {
   width: "5.25em",
   flexShrink: 0,
   color: "$medium",
@@ -67,7 +67,7 @@ const NotesList = ({ notesByYear }: NotesListProps) => {
         <List>
           {notes.map(({ slug, date, htmlTitle }) => (
             <Post key={slug}>
-              <PostDate title={formatDateTZ(date)}>{formatDateTZ(date, "MMM d")}</PostDate>
+              <PostDate date={date} format="MMM d" />
               <span>
                 <Link
                   href={{

components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,21 @@
+import { useHasMounted } from "../../hooks/use-has-mounted";
+import { formatDateTZ, formatDateISO, formatTimeAgo, FlexibleDate } from "../../lib/helpers/format-date";
+
+export type RelativeTimeProps = {
+  date: FlexibleDate;
+  className?: string;
+};
+
+const RelativeTime = ({ date, className }: RelativeTimeProps) => {
+  // play nice with SSR -- only use relative time on the client, since it'll quickly become outdated on the server and
+  // cause a react hydration mismatch error.
+  const hasMounted = useHasMounted();
+
+  return (
+    <time dateTime={formatDateISO(date)} title={formatDateTZ(date)} className={className}>
+      Updated {hasMounted ? formatTimeAgo(date) : `on ${formatDateTZ(date, "PP")}`}
+    </time>
+  );
+};
+
+export default RelativeTime;

components/RelativeTime/index.ts

@@ -0,0 +1,2 @@
+export * from "./RelativeTime";
+export { default } from "./RelativeTime";

components/RepositoryCard/RepositoryCard.tsx

@@ -1,7 +1,6 @@
 import Link from "../Link";
+import RelativeTime from "../RelativeTime";
 import { StarOcticon, ForkOcticon } from "../Icons";
-import { useHasMounted } from "../../hooks/use-has-mounted";
-import { formatDateTZ, formatTimeAgo } from "../../lib/helpers/format-date";
 import { styled } from "../../lib/styles/stitches.config";
 import { siteLocale } from "../../lib/config";
 import type { RepositoryType } from "../../types";
@@ -83,8 +82,6 @@ const RepositoryCard = ({
   updatedAt,
   className,
 }: RepositoryCardProps) => {
-  const hasMounted = useHasMounted();
-
   return (
     <Wrapper className={className}>
       <Name href={url}>{name}</Name>
@@ -128,8 +125,8 @@ const RepositoryCard = ({
         )}
 
         {/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
-        <MetaItem title={formatDateTZ(updatedAt)}>
-          <span>Updated {hasMounted ? formatTimeAgo(updatedAt) : `on ${formatDateTZ(updatedAt, "PP")}`}</span>
+        <MetaItem>
+          <RelativeTime date={updatedAt} />
         </MetaItem>
       </Meta>
     </Wrapper>

components/Time/Time.tsx

@@ -0,0 +1,15 @@
+import { formatDateTZ, formatDateISO, FlexibleDate } from "../../lib/helpers/format-date";
+
+export type TimeProps = {
+  date: FlexibleDate;
+  format?: string;
+  className?: string;
+};
+
+const Time = ({ date, format = "MMM d", className }: TimeProps) => (
+  <time dateTime={formatDateISO(date)} title={formatDateTZ(date)} className={className}>
+    {formatDateTZ(date, format)}
+  </time>
+);
+
+export default Time;

components/Time/index.ts

@@ -0,0 +1,2 @@
+export * from "./Time";
+export { default } from "./Time";