Add support to Locale Date String

data/siteMetadata.json

@@ -13,5 +13,6 @@
   "twitter": "https://twitter.com/Twitter",
   "facebook": "https://facebook.com",
   "youtube": "https://youtube.com",
-  "linkedin": "https://www.linkedin.com"
+  "linkedin": "https://www.linkedin.com",
+  "locale": "en-US"
 }

layouts/ListLayout.js

@@ -1,9 +1,9 @@
-import { useState } from 'react'
-import tinytime from 'tinytime'
 import Link from '@/components/Link'
 import Tag from '@/components/Tag'
+import siteMetdata from '@/data/siteMetadata'
+import { useState } from 'react'
 
-const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
+const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
 
 export default function ListLayout({ posts, title }) {
   const [searchValue, setSearchValue] = useState('')
@@ -53,7 +53,9 @@ export default function ListLayout({ posts, title }) {
                   <dl>
                     <dt className="sr-only">Published on</dt>
                     <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                      <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
+                      <time dateTime={date}>
+                        {new Date(date).toLocaleDateString(siteMetdata.locale, postDateTemplate)}
+                      </time>
                     </dd>
                   </dl>
                   <div className="space-y-3 xl:col-span-3">

layouts/PostLayout.js

@@ -1,8 +1,6 @@
-import tinytime from 'tinytime'
 import Link from '@/components/Link'
-
-import SectionContainer from '@/components/SectionContainer'
 import PageTitle from '@/components/PageTitle'
+import SectionContainer from '@/components/SectionContainer'
 import { BlogSeo } from '@/components/SEO'
 import Tag from '@/components/Tag'
 import siteMetdata from '@/data/siteMetadata'
@@ -11,7 +9,7 @@ const editUrl = (fileName) => `${siteMetdata.siteRepo}/blob/master/data/blog/${f
 const discussUrl = (slug) =>
   `https://mobile.twitter.com/search?q=${encodeURIComponent(`${siteMetdata.siteUrl}/blog/${slug}`)}`
 
-const postDateTemplate = tinytime('{dddd}, {MMMM} {DD}, {YYYY}')
+const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 
 export default function PostLayout({ children, frontMatter, next, prev }) {
   const { slug, fileName, date, title, tags } = frontMatter
@@ -27,7 +25,9 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                 <div>
                   <dt className="sr-only">Published on</dt>
                   <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
+                    <time dateTime={date}>
+                      {new Date(date).toLocaleDateString(siteMetdata.locale, postDateTemplate)}
+                    </time>
                   </dd>
                 </div>
               </dl>

package.json

@@ -34,8 +34,7 @@
     "remark-footnotes": "^2.0.0",
     "remark-math": "3.0.1",
     "remark-slug": "6.0.0",
-    "tailwindcss": "^2.0.2",
-    "tinytime": "^0.2.6"
+    "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^10.0.0",

pages/index.js

@@ -1,12 +1,11 @@
-import tinytime from 'tinytime'
-import { getAllFilesFrontMatter } from '@/lib/mdx'
-import siteMetadata from '@/data/siteMetadata'
-import Tag from '@/components/Tag'
 import Link from '@/components/Link'
 import { PageSeo } from '@/components/SEO'
+import Tag from '@/components/Tag'
+import siteMetadata from '@/data/siteMetadata'
+import { getAllFilesFrontMatter } from '@/lib/mdx'
 
 const MAX_DISPLAY = 5
-const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
+const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
 
 export async function getStaticProps() {
   const posts = await getAllFilesFrontMatter('blog')
@@ -42,7 +41,9 @@ export default function Home({ posts }) {
                     <dl>
                       <dt className="sr-only">Published on</dt>
                       <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                        <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
+                        <time dateTime={date}>
+                          {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
+                        </time>
                       </dd>
                     </dl>
                     <div className="space-y-5 xl:col-span-3">