From 12575e1141ca7e7e517c38506745e6463469aee3 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 7 Mar 2023 02:41:14 +0600
Subject: [PATCH] timestamp support (#81)

---
 src/site/_data/meta.js                       |  6 ++++++
 src/site/_includes/components/timestamps.njk |  7 +++++++
 src/site/_includes/layouts/note.njk          | 11 +++++++++++
 src/site/styles/digital-garden-base.scss     | 16 ++++++++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 src/site/_includes/components/timestamps.njk

diff --git a/src/site/_data/meta.js b/src/site/_data/meta.js
index 90ae70374..eaea91ab0 100644
--- a/src/site/_data/meta.js
+++ b/src/site/_data/meta.js
@@ -38,12 +38,18 @@ module.exports = async () => {
     bodyClasses.push("links-note-icon");
     noteIconsSettings.links = true;
   }
+  let timestampSettings = {
+    timestampFormat: process.env.TIMESTAMP_FORMAT || "MMM dd, yyyy h:mm a",
+    showCreated: process.env.SHOW_CREATED_TIMESTAMP == "true",
+    showUpdated: process.env.SHOW_UPDATED_TIMESTAMP == "true",
+  };
   const meta = {
     env: process.env.ELEVENTY_ENV,
     theme: process.env.THEME,
     themeStyle,
     bodyClasses: bodyClasses.join(" "),
     noteIconsSettings,
+    timestampSettings,
     baseTheme: process.env.BASE_THEME || "dark",
     siteName: process.env.SITE_NAME_HEADER || "Digital Garden",
     siteBaseUrl: baseUrl,
diff --git a/src/site/_includes/components/timestamps.njk b/src/site/_includes/components/timestamps.njk
new file mode 100644
index 000000000..236523857
--- /dev/null
+++ b/src/site/_includes/components/timestamps.njk
@@ -0,0 +1,7 @@
+<script src=" https://cdn.jsdelivr.net/npm/luxon@3.2.1/build/global/luxon.min.js "></script>
+<script defer>
+    TIMESTAMP_FORMAT = "{{meta.timestampSettings.timestampFormat}}";
+    document.querySelectorAll('.human-date').forEach(function (el) {
+        el.innerHTML = luxon.DateTime.fromISO(el.getAttribute('data-date') || el.innerText).toFormat(TIMESTAMP_FORMAT);
+      });
+</script>
\ No newline at end of file
diff --git a/src/site/_includes/layouts/note.njk b/src/site/_includes/layouts/note.njk
index c2d391bf6..dbf6a9313 100644
--- a/src/site/_includes/layouts/note.njk
+++ b/src/site/_includes/layouts/note.njk
@@ -43,6 +43,16 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
               {% endfor %}
             </div>
           {% endif %}
+          {%- if meta.timestampSettings.showCreated or meta.timestampSettings.showUpdated -%}
+          <div class="timestamps">
+            {%- if meta.timestampSettings.showCreated and created -%}
+            <div><i icon-name="calendar-plus"></i> <span class="human-date" data-date="{{created}}"></span></div>
+            {%- endif -%}
+            {%- if meta.timestampSettings.showUpdated and updated -%}
+            <div><i icon-name="calendar-clock"></i> <span class="human-date" data-date="{{updated}}"></span></div>
+            {%- endif -%}
+          </div>
+          {%- endif -%}
         </div>
       {% for imp in dynamics.common.header %}
         {% include imp %}
@@ -74,6 +84,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
       {%include "components/linkPreview.njk"%}
     {% endif %}
     {% include "components/references.njk" %}
+    {% include "components/timestamps.njk" %}
     {% for imp in dynamics.common.footer %}
       {% include imp %}
     {% endfor %}
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 3019cb302..5ac64e736 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -719,3 +719,19 @@ body.filetree-note-icon .filename[data-note-icon="3"]::before,
 body.links-note-icon .internal-link[data-note-icon="3"]::before {
     background-image: var(--note-icon-3);
 }
+
+.timestamps {
+    display: flex;
+    flex-direction: row;
+    font-size: 0.8em;
+    color: var(--text-muted);
+    gap: 10px;
+    margin-top: 20px;
+
+    div {
+        display: flex;
+        flex-direction: row;
+        gap: 3px;
+        align-items: center;
+    }
+}