Resolve date discrepancy and remove tinytime dependency (#1812)

* Resolve time discrepancy and remove need for 3rd-party package tinytime

* Remove unused `DateTimeFormats`

* Resolve DateTimeFormat for blog post dates

Author: brandonmcconnell

package-lock.json

@@ -61,7 +61,6 @@
     "simple-functional-loader": "^1.2.1",
     "stringify-object": "^3.3.0",
     "tailwindcss": "^3.4.3",
-    "tinytime": "^0.2.6",
     "unified": "^10.1.2",
     "unist-util-filter": "^4.0.1",
     "unist-util-visit": "^4.1.2",

package.json

@@ -3,6 +3,12 @@ import clsx from 'clsx'
 import { Button } from '@/components/Button'
 import { formatDate } from '@/utils/formatDate'
 
+const dateFormat = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+}
+
 export default function PostItem({ title, category, slug, date, children, wide = false }) {
   return (
     <article
@@ -31,7 +37,7 @@ export default function PostItem({ title, category, slug, date, children, wide =
               'lg:absolute lg:top-0 lg:right-full lg:mr-8 lg:whitespace-nowrap': wide,
             })}
           >
-            <time dateTime={date}>{formatDate(date, '{MMMM} {DD}, {YYYY}')}</time>
+            <time dateTime={date}>{formatDate(date, dateFormat)}</time>
           </dd>
         </dl>
         <svg

src/components/PostItem.js

@@ -6,6 +6,13 @@ import { MDXProvider } from '@mdx-js/react'
 import clsx from 'clsx'
 import Link from 'next/link'
 
+const dateFormat = {
+  weekday: 'long',
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+}
+
 export function BlogPostLayout({ children, meta }) {
   return (
     <div className="overflow-hidden">
@@ -50,7 +57,7 @@ export function BlogPostLayout({ children, meta }) {
                     className={clsx('absolute top-0 inset-x-0 text-slate-700 dark:text-slate-400')}
                   >
                     <time dateTime={meta.date}>
-                      {formatDate(meta.date, '{dddd}, {MMMM} {DD}, {YYYY}')}
+                      {formatDate(meta.date, dateFormat)}
                     </time>
                   </dd>
                 </dl>

src/layouts/BlogPostLayout.js

@@ -7,6 +7,14 @@ import { mdxComponents } from '@/utils/mdxComponents'
 import { MDXProvider } from '@mdx-js/react'
 import Link from 'next/link'
 
+const dateFormat = {
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  year: 'numeric'
+}
+
 function BackgroundBeams() {
   return (
     <div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center overflow-hidden">
@@ -203,7 +211,7 @@ export function JobPostingLayout({ children, meta }) {
             <p className="mt-7 text-sm/7 text-slate-500">
               Closes on{' '}
               <time dateTime={meta.dateCloses}>
-                {formatDate(meta.dateCloses, '{MMMM} {Do} at {h}:{mm}{a} ET')}
+                {formatDate(meta.dateCloses, dateFormat)}
               </time>
             </p>
           </div>

src/layouts/JobPostingLayout.js

@@ -7,6 +7,12 @@ import { formatDate } from '@/utils/formatDate'
 import buildRss from '@/scripts/build-rss'
 import { renderToStaticMarkup } from 'react-dom/server'
 
+const dateFormat = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+}
+
 export default function Blog({ posts }) {
   return (
     <main className="max-w-[52rem] mx-auto px-4 pb-28 sm:px-6 md:px-8 xl:px-12 lg:max-w-6xl">
@@ -52,7 +58,7 @@ export default function Blog({ posts }) {
                 <dl className="absolute left-0 top-0 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]">
                   <dt className="sr-only">Date</dt>
                   <dd className={clsx('whitespace-nowrap text-sm leading-6 dark:text-slate-400')}>
-                    <time dateTime={meta.date}>{formatDate(meta.date, '{MMMM} {DD}, {YYYY}')}</time>
+                    <time dateTime={meta.date}>{formatDate(meta.date, dateFormat)}</time>
                   </dd>
                 </dl>
               </div>

src/pages/blog/index.js

@@ -1,7 +1,14 @@
-import tinytime from 'tinytime'
+export function formatDate(dateString, options) {
+  const date = new Date(dateString);
+  const defaultTimeZoneOptions = options?.hour
+    ? {
+      timeZoneName: 'shortGeneric',
+      timeZone: 'America/New_York',
+    }
+    : {};
 
-export function formatDate(date, format) {
-  return tinytime(format)
-    .render(typeof date === 'string' ? new Date(date) : date)
-    .replace('Febuary', 'February')
+  return new Intl.DateTimeFormat("en-US", {
+    ...defaultTimeZoneOptions,
+    ...options,
+  }).format(date);
 }