From 7f9164538ff11567fc6f218d6ab31a301d37fffe Mon Sep 17 00:00:00 2001
From: Bo Lopker <lopkerk@gmail.com>
Date: Thu, 14 Nov 2024 12:12:18 +0700
Subject: [PATCH] Some time SEO goodness

---
 assets/js/components/time.tsx                 | 23 +++++++++++--------
 .../templates/circles/_event_card.html        |  4 +++-
 .../templates/circles/_event_detail_card.html |  8 ++++++-
 totem/circles/templates/circles/detail.html   |  1 +
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/assets/js/components/time.tsx b/assets/js/components/time.tsx
index 249776fd..801c86b7 100644
--- a/assets/js/components/time.tsx
+++ b/assets/js/components/time.tsx
@@ -1,20 +1,27 @@
-import { JSXElement, Match, Switch } from "solid-js"
+import { type JSXElement, Match, Switch, mergeProps } from "solid-js"
 
 type TimeFormat = "short" | "at"
 
+const defaults = {
+  time: "",
+  format: "short",
+  className: "",
+}
+
 function Time(props: {
   time?: string
   format?: TimeFormat
   className?: string
   children?: JSXElement
 }) {
+  const _props = mergeProps(defaults, props)
   const time = () => {
-    return new Date(props.time!)
+    return new Date(_props.time)
   }
   return (
-    <time class={props.className} dateTime={props.time}>
+    <time class={_props.className} dateTime={_props.time}>
       <Switch>
-        <Match when={props.format === "short"}>
+        <Match when={_props.format === "short"}>
           <span>
             {time().toLocaleTimeString(undefined, {
               hour: "2-digit",
@@ -22,7 +29,7 @@ function Time(props: {
             })}
           </span>
         </Match>
-        <Match when={props.format === "at"}>
+        <Match when={_props.format === "at"}>
           {time().toLocaleDateString(undefined, {
             month: "short",
             day: "numeric",
@@ -42,9 +49,5 @@ function Time(props: {
 }
 
 Time.tagName = "t-time"
-Time.propsDefault = {
-  time: "",
-  format: "short",
-  className: "",
-}
+Time.propsDefault = defaults
 export default Time
diff --git a/totem/circles/templates/circles/_event_card.html b/totem/circles/templates/circles/_event_card.html
index feb27699..77f9cbba 100644
--- a/totem/circles/templates/circles/_event_card.html
+++ b/totem/circles/templates/circles/_event_card.html
@@ -36,7 +36,9 @@ <h1 class="h3 pb-3 text-white">{{ event.circle.title }}</h1>
     <div class="p-5">
       <div class="flex items-center justify-between gap-2">
         <p class="font-normal text-gray-700">
-          <t-time time="{{ event.start|date:'c' }}" format="at"></t-time>
+          <t-time time="{{ event.start|date:'c' }}" format="at">
+            {{ event.start|date:"M d, Y gA T" }}</t-time
+          >
         </p>
         <a
           href="{% url "circles:event_detail" event_slug=event.slug %}"
diff --git a/totem/circles/templates/circles/_event_detail_card.html b/totem/circles/templates/circles/_event_detail_card.html
index 65effb6b..117c8f11 100644
--- a/totem/circles/templates/circles/_event_detail_card.html
+++ b/totem/circles/templates/circles/_event_detail_card.html
@@ -41,10 +41,16 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
       {% endif %}
       <div class="text-white">
         with
-        <a href="{{ object.author.get_keeper_url }}"
+        <a class="font-semibold" href="{{ object.author.get_keeper_url }}"
           >{{ object.author.name }}</a
         >
       </div>
+      <div class="text-white">
+        Starting
+        <t-time time="{{ event.start|date:'c' }}" format="at"
+          >{{ event.start|date:"M d, Y gA T" }}</t-time
+        >
+      </div>
     </div>
     <div class="max-w-[150px] self-center md:max-w-[200px] md:self-end">
       <a href="{{ object.author.get_keeper_url }}">
diff --git a/totem/circles/templates/circles/detail.html b/totem/circles/templates/circles/detail.html
index def0da9b..ab4d1b17 100644
--- a/totem/circles/templates/circles/detail.html
+++ b/totem/circles/templates/circles/detail.html
@@ -37,6 +37,7 @@ <h2 class="font-semibold">← All Spaces</h2>
         eventID="{{ event.slug }}"></t-eventcalendar>
     </div>
     <div class="mt-5 flex-grow pr-4">
+      <div class="italic">Updated {{ event.date_modified|date:"M d, Y" }}</div>
       <div>
         {% if not object.published %}
           <div class="text-red-500">This Space is not published yet.</div>