add: Time component

Author: carsakiller

src/components/common/README.md

@@ -80,7 +80,7 @@ Extends the default `<a>` HTML element to add custom styles. Should be used on a
 | `url`    | `string`   | The url to link to                                                                                                               |
 | `newTab` | `boolean?` | Whether the linked page should be opened in another tab. Defaults to `true`.                                                     |
 | `refer`  | `boolean?` | Whether to [refer](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) when navigating away. Defaults to `false`. |
-| `icon` | `boolean?` | Whether or not to display the "external" icon next to the link. Defaults to `true`.                                             |
+| `icon`   | `boolean?` | Whether or not to display the "external" icon next to the link. Defaults to `true`.                                              |
 | `class`  | `string?`  | Allows you to pass in a class to be applied to the link.                                                                         |
 
 ### Slots
@@ -212,6 +212,27 @@ A group of tabs where the content of only one tab is visible at a time.
 </Tabs>
 ```
 
+## [Time](./Time.astro)
+
+An extension of the [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) element that can display a datetime in the user's local timezone or as a relative time.
+
+### Arguments
+
+| Name     | Type    | Description                                                  |
+| -------- | ------- | ------------------------------------------------------------ |
+| datetime | string  | The datetime stamp, e.g. `2024-01-14T01:50:27-04:00`.        |
+| relative | boolean | Whether to display the time relatively, e.g. `2 months ago`. |
+
+### Slots
+
+`default` - Default time to display before being overridden on page load
+
+### Examples
+
+```HTML
+<Time datetime="2024-04-05T01:50:27-04:00" relative>Some time ago</Time>
+```
+
 ## [Tooltip](./Tooltip.astro)
 
 A [tippy.js](https://atomiks.github.io/tippyjs/) tooltip that can be placed around other elements.

src/components/common/Time.astro

@@ -0,0 +1,39 @@
+---
+const { datetime, relative } = Astro.props;
+
+export interface Props {
+  datetime: string;
+  relative?: boolean;
+}
+---
+
+<time datetime={datetime} data-relative={relative ? "true" : null}
+  ><slot /></time
+>
+
+<script>
+  import dayjs from "dayjs";
+  import relativeTime from "dayjs/plugin/relativeTime";
+  import localizedFormat from "dayjs/plugin/localizedFormat";
+
+  dayjs.extend(relativeTime);
+  dayjs.extend(localizedFormat);
+
+  const timeElements = document.querySelectorAll("time");
+
+  for (const element of timeElements) {
+    const dateTime = element.getAttribute("datetime");
+
+    if (!dateTime) {
+      console.warn(element, "is missing datetime attribute");
+      continue;
+    }
+
+    const date = dayjs(dateTime);
+    if (element.getAttribute("data-relative") === "true") {
+      element.innerText = date.fromNow();
+    } else {
+      element.innerText = date.format("lll");
+    }
+  }
+</script>

src/pages/wiki/[...slug].astro

@@ -13,6 +13,7 @@ import H5 from "~/components/wiki/headings/H5.astro";
 import H6 from "~/components/wiki/headings/H6.astro";
 import dayjs from "~/services/time";
 import Tooltip from "~/components/common/Tooltip.astro";
+import Time from "~/components/common/Time.astro";
 
 export const getStaticPaths = async () => {
   const articles = await getCollection("wiki");
@@ -53,30 +54,10 @@ const modifiedTime = remarkPluginFrontmatter.lastModified
     <p>
       Last Modified:
       <Tooltip content={modifiedTime}>
-        <time datetime={remarkPluginFrontmatter.lastModified} data-localize
-          >{modifiedTime}</time
+        <Time datetime={remarkPluginFrontmatter.lastModified}
+          >{modifiedTime}</Time
         >
       </Tooltip>
     </p>
   </div>
 </Layout>
-
-<script>
-  const times = document.querySelectorAll("time[data-localize]");
-
-  const formatter = new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-    second: "2-digit",
-    timeZoneName: "short",
-  });
-
-  times.forEach((el) => {
-    const timestamp = el.getAttribute("datetime");
-    if (!timestamp) return;
-    el.textContent = formatter.format(new Date(timestamp));
-  });
-</script>