timestamp support (#81)

oleeskild · Mar 6, 2023 · 12575e1 · 12575e1
1 parent a784fd2
commit 12575e1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,7 @@
+<script src=" https://cdn.jsdelivr.net/npm/[email protected]/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>
diff --git 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
@@ -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;
+    }
+}