switch from date-fns (and date-fns-tz) to dayjs

This commit is contained in:
2022-04-22 14:37:35 -04:00
parent 8a97b706be
commit fbb2221d08
10 changed files with 78 additions and 58 deletions
+18 -18
View File
@@ -1,26 +1,26 @@
// Icons from various packs, imported directly from the package's SVG files instead of their exports so they're all
// processed consistently via svgr/webpack into React components.
// NOTE: each node_modules/ directory *must* be listed in svgr's webpack config in next.config.js.
// NOTE: each package's path inside ./node_modules *must* be listed in svgr's webpack config in next.config.js.
// feather icons: https://feathericons.com/
export { default as ContactIcon } from "../../node_modules/feather-icons/dist/icons/mail.svg";
export { default as DateIcon } from "../../node_modules/feather-icons/dist/icons/calendar.svg";
export { default as EditIcon } from "../../node_modules/feather-icons/dist/icons/edit.svg";
export { default as HomeIcon } from "../../node_modules/feather-icons/dist/icons/home.svg";
export { default as NotesIcon } from "../../node_modules/feather-icons/dist/icons/edit-3.svg";
export { default as ProjectsIcon } from "../../node_modules/feather-icons/dist/icons/code.svg";
export { default as TagIcon } from "../../node_modules/feather-icons/dist/icons/tag.svg";
export { default as ViewsIcon } from "../../node_modules/feather-icons/dist/icons/eye.svg";
export { default as ContactIcon } from "feather-icons/dist/icons/mail.svg";
export { default as DateIcon } from "feather-icons/dist/icons/calendar.svg";
export { default as EditIcon } from "feather-icons/dist/icons/edit.svg";
export { default as HomeIcon } from "feather-icons/dist/icons/home.svg";
export { default as NotesIcon } from "feather-icons/dist/icons/edit-3.svg";
export { default as ProjectsIcon } from "feather-icons/dist/icons/code.svg";
export { default as TagIcon } from "feather-icons/dist/icons/tag.svg";
export { default as ViewsIcon } from "feather-icons/dist/icons/eye.svg";
// octicons: https://primer.style/octicons/
export { default as CheckOcticon } from "../../node_modules/@primer/octicons/build/svg/check-16.svg";
export { default as ClipboardOcticon } from "../../node_modules/@primer/octicons/build/svg/paste-16.svg";
export { default as ForkOcticon } from "../../node_modules/@primer/octicons/build/svg/repo-forked-16.svg";
export { default as HeartIcon } from "../../node_modules/@primer/octicons/build/svg/heart-fill-16.svg";
export { default as MarkdownIcon } from "../../node_modules/@primer/octicons/build/svg/markdown-16.svg";
export { default as OctocatOcticon } from "../../node_modules/@primer/octicons/build/svg/mark-github-16.svg";
export { default as StarOcticon } from "../../node_modules/@primer/octicons/build/svg/star-16.svg";
export { default as XOcticon } from "../../node_modules/@primer/octicons/build/svg/x-16.svg";
export { default as CheckOcticon } from "@primer/octicons/build/svg/check-16.svg";
export { default as ClipboardOcticon } from "@primer/octicons/build/svg/paste-16.svg";
export { default as ForkOcticon } from "@primer/octicons/build/svg/repo-forked-16.svg";
export { default as HeartIcon } from "@primer/octicons/build/svg/heart-fill-16.svg";
export { default as MarkdownIcon } from "@primer/octicons/build/svg/markdown-16.svg";
export { default as OctocatOcticon } from "@primer/octicons/build/svg/mark-github-16.svg";
export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg";
export { default as XOcticon } from "@primer/octicons/build/svg/x-16.svg";
// simple icons: https://simpleicons.org/
export { default as NextjsLogo } from "../../node_modules/simple-icons/icons/nextdotjs.svg";
export { default as NextjsLogo } from "simple-icons/icons/nextdotjs.svg";
+1 -1
View File
@@ -73,7 +73,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
<span>
<Icon as={DateIcon} />
</span>
<Time date={date} format="MMMM d, yyyy" />
<Time date={date} format="MMMM D, YYYY" />
</MetaLink>
</Link>
</MetaItem>
+1 -1
View File
@@ -67,7 +67,7 @@ const NotesList = ({ notesByYear }: NotesListProps) => {
<List>
{notes.map(({ slug, date, htmlTitle }) => (
<Post key={slug}>
<PostDate date={date} format="MMM d" />
<PostDate date={date} format="MMM D" />
<span>
<Link
href={{
+8 -8
View File
@@ -1,22 +1,22 @@
import { useHasMounted } from "../../hooks/use-has-mounted";
import { formatDateTZ, formatDateISO, formatTimeAgo, FlexibleDate } from "../../lib/helpers/format-date";
import { formatDate, formatDateISO, formatTimeAgo } from "../../lib/helpers/format-date";
export type RelativeTimeProps = {
date: FlexibleDate;
prefix?: string; // optional "Updated", "Published", "Created", etc.
staticFormat?: string; // full date (without timestamp)
date: string | number | Date;
verb?: string; // optional "Updated", "Published", "Created", etc.
staticFormat?: string; // format for the placeholder/fallback before client-side renders the relative time
className?: string;
};
const RelativeTime = ({ date, prefix, staticFormat = "PP", className }: RelativeTimeProps) => {
const RelativeTime = ({ date, verb, staticFormat, 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}>
{prefix && `${prefix} `}
{hasMounted ? formatTimeAgo(date) : `on ${formatDateTZ(date, staticFormat)}`}
<time dateTime={formatDateISO(date)} title={formatDate(date)} className={className}>
{verb && `${verb} `}
{hasMounted ? formatTimeAgo(date, true) : `on ${formatDate(date, staticFormat)}`}
</time>
);
};
+1 -1
View File
@@ -126,7 +126,7 @@ const RepositoryCard = ({
{/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
<MetaItem>
<RelativeTime date={updatedAt} prefix="Updated" />
<RelativeTime date={updatedAt} verb="Updated" />
</MetaItem>
</Meta>
</Wrapper>
+5 -5
View File
@@ -1,14 +1,14 @@
import { formatDateTZ, formatDateISO, FlexibleDate } from "../../lib/helpers/format-date";
import { formatDate, formatDateISO } from "../../lib/helpers/format-date";
export type TimeProps = {
date: FlexibleDate;
date: string | number | Date;
format?: string;
className?: string;
};
const Time = ({ date, format = "MMM d", className }: TimeProps) => (
<time dateTime={formatDateISO(date)} title={formatDateTZ(date)} className={className}>
{formatDateTZ(date, format)}
const Time = ({ date, format = "MMM D", className }: TimeProps) => (
<time dateTime={formatDateISO(date)} title={formatDate(date)} className={className}>
{formatDate(date, format)}
</time>
);