Add deets to home page

slices/main/assets/js/app.ts

@@ -14,6 +14,37 @@ import { md_gallery } from "./gallery.js";
       window.hljs.highlightAll();
     }
 
+    const homeTime = document.querySelector(".home-time");
+    if (homeTime != undefined) {
+      setInterval(() => {
+        const [hours, minutes, seconds] = homeTime.innerHTML
+          .split(" ")[0]
+          .split(":")
+          .map((x) => parseInt(x, 10));
+        const time = new Date();
+        time.setHours(hours, minutes, seconds);
+
+        const nextTime = time.valueOf() + 1000;
+        homeTime.innerHTML = formatAMPM(new Date(nextTime));
+      }, 1000);
+      console.log();
+    }
+
+    function formatAMPM(date) {
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      hours = hours % 12;
+      hours = hours ? hours : 12; // the hour '0' should be '12'
+
+      hours = hours < 10 ? "0" + hours : hours;
+      minutes = minutes < 10 ? "0" + minutes : minutes;
+      seconds = seconds < 10 ? "0" + seconds : seconds;
+      var strTime = hours + ":" + minutes + ":" + seconds + " " + ampm;
+      return strTime;
+    }
+
     const times = document.querySelectorAll("time");
     times.forEach((time) => {
       const oldDtime = Date.parse(time.dateTime);

slices/main/content/home.md

@@ -1,4 +1,3 @@
 Hi! 👋 I'm Daniel, a software engineer living in Canberra, Australia.
 
 Welcome to my personal site! This is where I post the things I have [written](/posts), the [photos](/photos) I have taken, the [bookmarks](/bookmarks) I have saved, the [places](/places) I have been, and a whole bunch [more](/more).
-

slices/main/templates/site/home.html.slim

@@ -1,9 +1,14 @@
 - context.content_for(:title, "")
 
-div class="h-card prose dark:prose-invert mb-12 prose-a:decoration-wavy hover:prose-a:text-blue-400 max-w-prose mx-auto text-gray-800 dark:text-gray-200"
-  p class="p-note"
+div class="h-card flex flex-col prose dark:prose-invert mb-1 prose-a:decoration-wavy hover:prose-a:text-blue-400 max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  div class="flex-col flex-1"
     == home_content
 
+  div class="rounded text-sm flex justify-between"
+    span class="font-mono inline-block text-gray-400" = formatted_date
+    span class="font-mono inline-block text-gray-400" Canberra, Australia
+    span class="font-mono inline-block text-gray-400 home-time" = time
+
 div class="mb-8 max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"
 
 - if latest_status

slices/main/views/site/home.rb

@@ -10,6 +10,18 @@ module Main
           renderer.call(content: markdown_content)
         end
 
+        private_expose :date do
+          TZInfo::Timezone.get('Australia/Canberra').now
+        end
+
+        expose :formatted_date do |date|
+          date.strftime("%B %d, %Y")
+        end
+
+        expose :time do |date|
+          date.strftime("%H:%M:%S %p")
+        end
+
         expose :week_posts do
           post_repo.week_posts(limit: 10).map do |post|
             Decorators::Posts::Decorator.new(post)