feat: use time tag for date (#760)

* feat: use `time` tag

* refactor: use `DATE_US` filter

7 files changed, 15 insertions, 17 deletions

diff --git a/internal/lume/lume.go b/internal/lume/lume.go
index c605279..7a966c0 100644
--- a/internal/lume/lume.go
+++ b/internal/lume/lume.go
@@ -431,9 +431,7 @@ const seriesPageTemplateStr = `export const title = "{{.Series}}";
 export const layout = "base.njk";
 export const date = "2012-01-01";
 
-export default ({ search }) => {
-  const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
-
+export default ({ search }, { date }) => {
   return (
     <div>
       <h1 className="text-3xl mb-4">{title}</h1>
@@ -446,7 +444,7 @@ export default ({ search }) => {
           const url = post.data.redirect_to ? post.data.redirect_to : post.data.url;
           return (
           <li>
-            <span className="font-mono">{post.data.date.toLocaleDateString("en-US", dateOptions)}</span> -{" "}
+            <time datetime={date(post.data.date)} className="font-mono">{date(post.data.date, "DATE_US")}</time> -{" "}
             <a href={url}>{post.data.title}</a>
           </li>
         );
diff --git a/lume/_config.ts b/lume/_config.ts
index 885e662..e5b3049 100644
--- a/lume/_config.ts
+++ b/lume/_config.ts
@@ -44,7 +44,11 @@ site.data("getYear", () => {
 
 site.use(jsx_preact());
 site.use(attributes());
-site.use(date());
+site.use(date({
+  formats: {
+    "DATE_US": "MM/dd/yyyy",
+  },
+}));
 site.use(esbuild({ esm: true }));
 site.use(feed({
   output: ["/blog.rss", "/blog.json"],
diff --git a/lume/src/_includes/blog.njk b/lume/src/_includes/blog.njk
index 6349cce..9e8d625 100644
--- a/lume/src/_includes/blog.njk
+++ b/lume/src/_includes/blog.njk
@@ -7,7 +7,7 @@ layout: base.njk
 <article class="prose dark:prose-invert max-w-none">
     <h1>{{title}}</h1>
     <p class="text-sm text-fg-3 dark:text-fgDark-3 mb-2">
-        Published on {{date.toLocaleDateString("en-US", { year: "numeric", month: "2-digit", day: "2-digit" })}}, {{ readingInfo.words }} words, {{ readingInfo.minutes }} minutes to read
+        Published on <time datetime={{date | date("DATE")}}>{{date | date("DATE_US")}}</time>, {{ readingInfo.words }} words, {{ readingInfo.minutes }} minutes to read
     </p>
 
     {% if hero %}
diff --git a/lume/src/blog.jsx b/lume/src/blog.jsx
index 9fdd325..cca8869 100644
--- a/lume/src/blog.jsx
+++ b/lume/src/blog.jsx
@@ -1,7 +1,7 @@
 export const title = "Blog Articles";
 export const layout = "base.njk";
 
-export default ({ search }) => {
+export default ({ search }, { date }) => {
   const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
 
   return (
@@ -19,7 +19,7 @@ export default ({ search }) => {
           const url = post.data.redirect_to ? post.data.redirect_to : post.data.url;
           return (
           <li>
-            <span className="font-mono">{post.data.date.toLocaleDateString("en-US", dateOptions)}</span> -{" "}
+            <time datetime={date(post.data.date)} className="font-mono">{post.data.date.toLocaleDateString("en-US", dateOptions)}</time> -{" "}
             <a href={url}>{post.data.title}</a>
           </li>
         );
diff --git a/lume/src/index.njk b/lume/src/index.njk
index ac81c1a..9321b8c 100644
--- a/lume/src/index.njk
+++ b/lume/src/index.njk
@@ -18,7 +18,7 @@ date: 2012-12-21
 <h2 class="text-2xl mb-4">Recent Articles</h2>
 <ul class="list-disc ml-4 mb-4">
     {% for post in search.pages("type=blog", "order date=desc", 5) %}
-        <li>{{post.data.date | date("DATE")}} - <a href="{{post.data.url}}">{{post.data.title}}</a>
+        <li><time datetime={{post.data.date | date("DATE")}}>{{post.data.date | date("DATE")}}</time> - <a href="{{post.data.url}}">{{post.data.title}}</a>
         </li>
     {% endfor %}
 </ul>
diff --git a/lume/src/talks.jsx b/lume/src/talks.jsx
index b8e0950..1004d94 100644
--- a/lume/src/talks.jsx
+++ b/lume/src/talks.jsx
@@ -1,9 +1,7 @@
 export const title = "Conference Talks";
 export const layout = "base.njk";
 
-export default ({ search }) => {
-  const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
-
+export default ({ search }, { date }) => {
   return (
     <>
       <h1 className="text-3xl mb-4">{title}</h1>
@@ -11,7 +9,7 @@ export default ({ search }) => {
       <ul class="list-disc ml-4 mb-4">
         {search.pages("layout=talk.njk", "order date=desc").map((post) => (
           <li>
-            {post.data.date.toLocaleDateString("en-US", dateOptions)} -{" "}
+            <time datetime={date(post.data.date)}>{date(post.data.date, "DATE_US")}</time> -{" "}
             <a href={post.data.url}>{post.data.title}</a>
           </li>
         ))}
diff --git a/lume/src/vods.jsx b/lume/src/vods.jsx
index d7f6f3f..2ac125e 100644
--- a/lume/src/vods.jsx
+++ b/lume/src/vods.jsx
@@ -1,9 +1,7 @@
 export const title = "Stream VODs";
 export const layout = "base.njk";
 
-export default ({ search }) => {
-  const dateOptions = { year: "numeric", month: "numeric", day: "numeric" };
-
+export default ({ search }, { date }) => {
   return (
     <>
       <h1 className="text-3xl mb-4">{title}</h1>
@@ -30,7 +28,7 @@ export default ({ search }) => {
       <ul class="list-disc ml-4 mb-4">
         {search.pages("layout=vod.njk", "order date=desc").map((post) => (
           <li>
-            {post.data.date.toLocaleDateString("en-US", dateOptions)} -{" "}
+            <time datetime={date(post.data.date)}>{date(post.data.date, "DATE_US")}</time> -{" "}
             <a href={post.data.url}>
               {post.data.title}
             </a>