feat: fix dates, add back button

package-lock.json

@@ -8,6 +8,8 @@
       "name": "www-aaronjy-2024",
       "version": "1.0.0",
       "dependencies": {
+        "date-fns": "^4.1.0",
+        "feather-icons": "^4.29.2",
         "next": "^14.2.6",
         "next-seo": "^6.5.0",
         "react": "^18",
@@ -4692,6 +4694,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -4830,6 +4837,16 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.38.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -5118,6 +5135,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -6255,6 +6281,15 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.2",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.2.tgz",
+      "integrity": "sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",

package.json

@@ -18,6 +18,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
+    "feather-icons": "^4.29.2",
     "next": "^14.2.6",
     "next-seo": "^6.5.0",
     "react": "^18",

src/components/Article/Article.jsx

@@ -1,5 +1,8 @@
+import { formatDate } from '@/lib/helpers'
 import { NextSeo } from 'next-seo'
+import Link from 'next/link'
 import React from 'react'
+import * as feather from 'feather-icons'
 
 function Article ({ attributes, html }) {
   return (
@@ -17,9 +20,15 @@ function Article ({ attributes, html }) {
       }
       />
       <div>
+        <Link href='./'>
+          <p className='row'>
+            <span className='icon icon-left' dangerouslySetInnerHTML={{ __html: feather.icons['arrow-left'].toSvg() }} />
+            <span>Go back</span>
+          </p>
+        </Link>
         <h1>{attributes.title}</h1>
         <p>{attributes.desc}</p>
-        {attributes.pubdate && <p>{attributes.pubdate}</p>}
+        {attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
         <hr />
         <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
       </div>

src/lib/helpers.js

@@ -1,3 +1,9 @@
+import * as dateFns from 'date-fns'
+
 export function toSlug (input) {
   return input.substring(0, input.indexOf('.')).trim()
 }
+
+export function formatDate (date) {
+  return dateFns.format(Date.parse(date), 'PPP')
+}

src/pages/writing/index.js

@@ -3,6 +3,7 @@ import React from 'react'
 import Link from 'next/link'
 import { getStaticEntryListProps } from '@/lib/content'
 import { NextSeo } from 'next-seo'
+import { formatDate } from '@/lib/helpers'
 
 export const getStaticProps = () => getStaticEntryListProps('./content/writing', '/writing/')
 
@@ -33,7 +34,7 @@ export default function Writing ({ entries, urlPrefix }) {
             <h2>
               <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
             </h2>
-            {!!e.attributes.pubdate && <p>{e.attributes.pubdate}</p>}
+            {!!e.attributes.pubdate && <p>{formatDate(e.attributes.pubdate)}</p>}
 
             <p>{e.attributes.desc}</p>
             <Link href={`${urlPrefix}${e.slug}`}>Read more</Link>

src/styles/globals.css

@@ -70,4 +70,17 @@ pre code {
 code:not(pre > code) {
   background-color: var(--color-default);
   color: var(--color-bg)
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  display: inline-flex;
+}
+
+.icon-left {
+  margin-right: 5px;
 }