(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

@@ -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 | 

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",

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")}>