refactor: better dates

zyrouge · Apr 4, 2024 · c4ec96c · c4ec96c
1 parent 87d1be2
commit c4ec96c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/components/articles/ArticlesGridItem.astro b/src/components/articles/ArticlesGridItem.astro
@@ -21,13 +21,14 @@ const { article } = Astro.props;
  href={Routes.articles.constructRead(article.slug)}
 >
  <p class="text-xs pb-1">
- <span
- id="article-item-time"
+ <time
+ id="article-time"
  class="text-primary-500 group-hover:text-white"
- data-iso-date={article.data.time.toISOString()}
+ datetime={article.data.time.toISOString()}
+ title={sugar.Date.full(article.data.time)}
  >
  {sugar.Date.format(article.data.time)}
- </span>
+ </time>
  <span class="text-secondary-500 group-hover:text-white">
  / {Articles.getReadingTime(article.body)} mins. read
  </span>
@@ -52,8 +53,8 @@ const { article } = Astro.props;
  import sugar from "sugar";
 
  document.addEventListener("DOMContentLoaded", () => {
- document.querySelectorAll("#article-item-time").forEach((x) => {
- const iso = x.getAttribute("data-iso-date")!;
+ document.querySelectorAll("time#article-time").forEach((x) => {
+ const iso = x.getAttribute("datetime")!;
  const date = new Date(iso);
  x.innerHTML = sugar.Date.relative(date);
  });

diff --git a/src/pages/articles/[...slug].astro b/src/pages/articles/[...slug].astro
@@ -60,9 +60,11 @@ const readingTime = Articles.getReadingTime(body);
  <p class="text-xs">
  <time
  class="text-primary-500"
+ id="article-time"
  datetime={time.toISOString()}
+ title={sugar.Date.full(time)}
  >
- {sugar.Date.relative(time)}
+ {sugar.Date.format(time)}
  </time>
  <span class="text-secondary-500">
  / {readingTime} mins. read</span
@@ -113,3 +115,15 @@ const readingTime = Articles.getReadingTime(body);
 
  <script src="../../assets/scripts/article.ts"></script>
 </Base>
+
+<script>
+ import sugar from "sugar";
+
+ document.addEventListener("DOMContentLoaded", () => {
+ document.querySelectorAll("time#article-time").forEach((x) => {
+ const iso = x.getAttribute("datetime")!;
+ const date = new Date(iso);
+ x.innerHTML = sugar.Date.relative(date);
+ });
+ });
+</script>