OliverBooth/Pages/Blog/Index.cshtml

@@ -60,18 +60,20 @@
 
             <p>@Html.Raw(BlogService.GetExcerpt(post, out bool trimmed))</p>
 
-            @if (trimmed)
+            <article>
-            {
+                @if (trimmed)
-                <p>
+                {
-                    <a asp-page="/blog/article"
+                    <p>
-                       asp-route-year="@year"
+                        <a asp-page="/blog/article"
-                       asp-route-month="@month"
+                           asp-route-year="@year"
-                       asp-route-day="@day"
+                           asp-route-month="@month"
-                       asp-route-slug="@post.Slug">
+                           asp-route-day="@day"
-                        Read more...
+                           asp-route-slug="@post.Slug">
-                    </a>
+                            Read more...
-                </p>
+                        </a>
-            }
+                    </p>
+                }
+            </article>
         </div>
     </div>
 

src/ts/app.ts

@@ -83,7 +83,7 @@ declare const katex: any;
 
                 i += 4;
             }
-
+            
             const disqusCounter = document.createElement("script");
             disqusCounter.id = "dsq-count-scr";
             disqusCounter.src = "https://oliverbooth-dev.disqus.com/count.js";
@@ -97,6 +97,41 @@ declare const katex: any;
         });
     }
 
+    const formatRelativeTime = function (timestamp) {
+        const now = new Date();
+        // @ts-ignore
+        const diff = now - timestamp;
+        const suffix = diff < 0 ? 'from now' : 'ago';
+
+        const seconds = Math.floor(diff / 1000);
+        if (seconds < 60) {
+            return `${seconds} second${seconds !== 1 ? 's' : ''} ${suffix}`;
+        }
+
+        const minutes = Math.floor(diff / 60000);
+        if (minutes < 60) {
+            return `${minutes} minute${minutes !== 1 ? 's' : ''} ${suffix}`;
+        }
+
+        const hours = Math.floor(diff / 3600000);
+        if (hours < 24) {
+            return `${hours} hour${hours !== 1 ? 's' : ''} ${suffix}`;
+        }
+
+        const days = Math.floor(diff / 86400000);
+        if (days < 30) {
+            return `${days} day${days !== 1 ? 's' : ''} ${suffix}`;
+        }
+
+        const months = Math.floor(diff / 2592000000);
+        if (months < 12) {
+            return `${months} month${months !== 1 ? 's' : ''} ${suffix}`;
+        }
+
+        const years = Math.floor(diff / 31536000000);
+        return `${years} year${years !== 1 ? 's' : ''} ${suffix}`;
+    };
+
     document.querySelectorAll("pre code").forEach((block) => {
         let content = block.textContent;
         if (content.trim().split("\n").length > 1) {
@@ -160,7 +195,7 @@ declare const katex: any;
 
             case "R":
                 setInterval(() => {
-                    timestamp.textContent = TimeUtility.formatRelativeTimestamp(date);
+                    timestamp.textContent = formatRelativeTime(date);
                 }, 1000);
                 break;
         }