From 907d126d9e3053a87ebd9635be7e68cbaa05e14b Mon Sep 17 00:00:00 2001
From: Joshwin Greene <joshwin.greene@gmail.com>
Date: Sun, 30 Jun 2024 08:47:19 -0700
Subject: [PATCH] (Temp Fix) Made it so that daysAgoFormat is no longer used to
 display dates (the published and modified date will now just be displayed
 instead of an approximation being shown); Added date-fns; Updated the README

---
 README.md                   |  2 ++
 package-lock.json           | 10 ++++++++++
 package.json                |  1 +
 quartz/components/Dates.tsx | 12 +++++++-----
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index e9f3886131c57..8a382f6f6d81b 100644
--- a/README.md
+++ b/README.md
@@ -206,6 +206,8 @@ Follow the steps that Quartz provides:
 
 Front Porch supports all of the frontmatter fields that Quartz uses.
 
+For example, 'last-modified' field should be added to notes/essays that have been modified. Additionally, the 'date' field specifies the date that a note/essay was initially published.
+
 Here are the frontmatter fields that are unique to Front Porch:
 
 | Frontmatter Field | Property Type | Description | 
diff --git a/package-lock.json b/package-lock.json
index 8dbf1bd8fcc6e..16720127286f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "chokidar": "^3.6.0",
         "cli-spinner": "^0.2.10",
         "d3": "^7.8.5",
+        "date-fns": "^3.6.0",
         "esbuild-sass-plugin": "^2.16.1",
         "flexsearch": "0.7.43",
         "github-slugger": "^2.0.0",
@@ -1915,6 +1916,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 9d6e11e29c2a8..9c8df9df7bdb1 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "chokidar": "^3.6.0",
     "cli-spinner": "^0.2.10",
     "d3": "^7.8.5",
+    "date-fns": "^3.6.0",
     "esbuild-sass-plugin": "^2.16.1",
     "flexsearch": "0.7.43",
     "github-slugger": "^2.0.0",
diff --git a/quartz/components/Dates.tsx b/quartz/components/Dates.tsx
index 5d803e80ccdc2..0925c86aa21e9 100644
--- a/quartz/components/Dates.tsx
+++ b/quartz/components/Dates.tsx
@@ -1,3 +1,4 @@
+import { format } from "date-fns";
 import { classNames } from "../util/lang"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
@@ -15,24 +16,25 @@ function Dates({ fileData, displayClass, cfg }: QuartzComponentProps) {
     const growthStage = fileData.frontmatter?.["growth-stage"];
     const tendedOrEdited = growthStage && typeof growthStage === "string" ? "Tended" : "Edited";
 
-    // -- Temp fix for modifiedDate
+    // -- Temp fix since the daysAgoFormat function is not working as expected
     const modifiedDate = fileData.frontmatter?.["last-modified"];
 
     let updatedDateStr;
 
     if (modifiedDate !== undefined && modifiedDate !== null && (typeof modifiedDate === "string" || typeof modifiedDate === "number")) {
-        updatedDateStr = daysAgoFormat(new Date(modifiedDate), cfg.locale);
+        updatedDateStr = format(modifiedDate, "MMM d, yyyy");
     }
-    // -- End temp fix
 
     const publishedDate = fileData.dates?.published;
 
     let publishedDateStr;
 
     if (publishedDate !== undefined) {
-        publishedDateStr = daysAgoFormat(publishedDate, cfg.locale)
+        publishedDateStr = format(publishedDate, "MMM d, yyyy");
     }
-    
+
+    // -- End temp fix
+
     if (publishedDateStr && updatedDateStr) {
         return (
             <div class={classNames(displayClass, "dates")}>