From fbb2221d08de5c01bb33e1d146fac6b65558d0b2 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Fri, 22 Apr 2022 14:37:35 -0400
Subject: [PATCH] switch from date-fns (and date-fns-tz) to dayjs

---
 components/Icons/index.ts                    | 36 ++++++++--------
 components/NoteMeta/NoteMeta.tsx             |  2 +-
 components/NotesList/NotesList.tsx           |  2 +-
 components/RelativeTime/RelativeTime.tsx     | 16 +++----
 components/RepositoryCard/RepositoryCard.tsx |  2 +-
 components/Time/Time.tsx                     | 10 ++---
 lib/helpers/format-date.ts                   | 44 ++++++++++++++------
 lib/helpers/format-number.ts                 |  8 +++-
 package.json                                 |  3 +-
 yarn.lock                                    | 13 ++----
 10 files changed, 78 insertions(+), 58 deletions(-)

diff --git a/components/Icons/index.ts b/components/Icons/index.ts
index c15512d4..6c7ce620 100644
--- a/components/Icons/index.ts
+++ b/components/Icons/index.ts
@@ -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";
diff --git a/components/NoteMeta/NoteMeta.tsx b/components/NoteMeta/NoteMeta.tsx
index dee5a968..1e83f79f 100644
--- a/components/NoteMeta/NoteMeta.tsx
+++ b/components/NoteMeta/NoteMeta.tsx
@@ -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>
diff --git a/components/NotesList/NotesList.tsx b/components/NotesList/NotesList.tsx
index f0ed278b..30ddad7f 100644
--- a/components/NotesList/NotesList.tsx
+++ b/components/NotesList/NotesList.tsx
@@ -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={{
diff --git a/components/RelativeTime/RelativeTime.tsx b/components/RelativeTime/RelativeTime.tsx
index 5b45ea8d..a5acd6e4 100644
--- a/components/RelativeTime/RelativeTime.tsx
+++ b/components/RelativeTime/RelativeTime.tsx
@@ -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>
   );
 };
diff --git a/components/RepositoryCard/RepositoryCard.tsx b/components/RepositoryCard/RepositoryCard.tsx
index dcbca333..d23fd10f 100644
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/components/RepositoryCard/RepositoryCard.tsx
@@ -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>
diff --git a/components/Time/Time.tsx b/components/Time/Time.tsx
index dcaef07d..83342d90 100644
--- a/components/Time/Time.tsx
+++ b/components/Time/Time.tsx
@@ -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>
 );
 
diff --git a/lib/helpers/format-date.ts b/lib/helpers/format-date.ts
index ea88bd0c..1505be6a 100644
--- a/lib/helpers/format-date.ts
+++ b/lib/helpers/format-date.ts
@@ -1,22 +1,42 @@
-import { formatDistanceToNowStrict } from "date-fns";
-import { formatInTimeZone } from "date-fns-tz";
-import enUS from "date-fns/locale/en-US";
+import dayjs from "dayjs";
+import dayjsUtc from "dayjs/plugin/utc";
+import dayjsTimezone from "dayjs/plugin/timezone";
+import dayjsRelativeTime from "dayjs/plugin/relativeTime";
+import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat";
+import dayjsAdvancedFormat from "dayjs/plugin/advancedFormat";
+import "dayjs/locale/en";
 import { timeZone } from "../config";
 
-export type FlexibleDate = string | number | Date;
+const IsomorphicDayJs = (date?: dayjs.ConfigType): dayjs.Dayjs => {
+  // plugins
+  dayjs.extend(dayjsUtc);
+  dayjs.extend(dayjsTimezone);
+  dayjs.extend(dayjsRelativeTime);
+  dayjs.extend(dayjsLocalizedFormat);
+  dayjs.extend(dayjsAdvancedFormat);
+
+  // defaults
+  dayjs.locale("en");
+  dayjs.tz.setDefault(timeZone);
+
+  return dayjs(date);
+};
 
 // normalize timezone across the site, both server and client side, to prevent hydration errors.
-// format defaults to "Apr 4, 2022, 3:04 PM EDT", see https://date-fns.org/v2.28.0/docs/format
-export const formatDateTZ = (date: FlexibleDate, formatStr = "PPp zzz", options = {}) => {
-  return formatInTimeZone(new Date(date), timeZone, formatStr, { locale: enUS, ...options });
+// format defaults to "Apr 4, 2022, 3:04 PM EDT", see https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+export const formatDate = (date?: dayjs.ConfigType, formatStr = "MMM D, YYYY, h:mm A z") => {
+  return IsomorphicDayJs(date).tz(timeZone).format(formatStr);
 };
 
 // returns a timezone-less, machine-readable string.
-export const formatDateISO = (date: FlexibleDate) => {
-  return new Date(date).toISOString();
+export const formatDateISO = (date?: dayjs.ConfigType) => {
+  return IsomorphicDayJs(date).toISOString();
 };
 
-// returns "5 minutes ago", "1 year ago", etc.
-export const formatTimeAgo = (date: FlexibleDate, options = {}) => {
-  return formatDistanceToNowStrict(new Date(date), { addSuffix: true, locale: enUS, ...options });
+// returns "5 minutes ago", "1 year ago", "in 9 months", etc.
+// set `suffix = false` to exclude the "in" or "ago"
+export const formatTimeAgo = (date: dayjs.ConfigType, suffix = true) => {
+  return IsomorphicDayJs().isBefore(date)
+    ? IsomorphicDayJs(date).toNow(!suffix)
+    : IsomorphicDayJs(date).fromNow(!suffix);
 };
diff --git a/lib/helpers/format-number.ts b/lib/helpers/format-number.ts
index 69858dff..a9335833 100644
--- a/lib/helpers/format-number.ts
+++ b/lib/helpers/format-number.ts
@@ -2,4 +2,10 @@ import { siteLocale } from "../config";
 
 // adds thousands separator
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-export const commafy = Intl.NumberFormat(siteLocale, { useGrouping: true }).format;
+export const commafy = (number: number) => {
+  if (typeof Intl !== "undefined" && typeof Intl.NumberFormat !== "undefined") {
+    return new Intl.NumberFormat(siteLocale, { useGrouping: true }).format(number);
+  } else {
+    return number;
+  }
+};
diff --git a/package.json b/package.json
index a1dadb79..00bc78f7 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,7 @@
     "@sentry/tracing": "^6.19.6",
     "@stitches/react": "^1.2.7",
     "copy-to-clipboard": "^3.3.1",
-    "date-fns": "^2.28.0",
-    "date-fns-tz": "^1.3.3",
+    "dayjs": "^1.11.1",
     "fathom-client": "^3.4.1",
     "faunadb": "^4.5.4",
     "feather-icons": "^4.29.0",
diff --git a/yarn.lock b/yarn.lock
index 4d8f62fe..85fcfd27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2419,15 +2419,10 @@ data-uri-to-buffer@^4.0.0:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
-date-fns-tz@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.3.tgz#7884a4b3ed6cd95bfd81831d608e5ef8be500c86"
-  integrity sha512-Gks46gwbSauBQnV3Oofluj1wTm8J0tM7sbSJ9P+cJq/ZnTCpMohTKmmO5Tn+jQ7dyn0+b8G7cY4O2DZ5P/LXcA==
-
-date-fns@^2.28.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
-  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+dayjs@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.1.tgz#90b33a3dda3417258d48ad2771b415def6545eb0"
+  integrity sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA==
 
 debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
   version "4.3.4"