@@ -5,6 +5,14 @@ const Case = require("case"); const hyperfast = require("hyperfast");
 const indent = require("indent-string");
 
+const postDateFormatter = new Intl.DateTimeFormat("en-GB", {
+  hour12: false,
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+});
+
 const getTemplate = name =>
   fs.readFileSync(`${__dirname}/templates/${name}.html`, "utf8");
 
@@ -36,12 +44,20 @@ function title(siteTitle, pageTitle) {   return pageTitle ? `${pageTitle} · ${siteTitle}` : siteTitle;
 }
 
-const renderPostListItem = ctx => post => ({
-  a: {
-    href: ctx.getURL("post", post.basename),
-    _text: post.data.get("title")
-  }
+const makeTime = date => ({
+  datetime: date.toISOString(),
+  _text: postDateFormatter.format(date)
 });
+
+const renderPostListItem = ctx => post => {
+  return {
+    time: makeTime(post.data.get("date")),
+    a: {
+      href: ctx.getURL("post", post.basename),
+      _text: post.data.get("title")
+    }
+  };
+};
 
 function layout(config, pageTitle, pageElement) {
   return hyperfast(templates.layout, {
@@ -80,6 +96,7 @@ config,       post.data.get("title"),
       hyperfast(templates.post, {
         "article h1": post.data.get("title"),
+        "article time": makeTime(post.data.get("date")),
         "article .post-content": {
           _html: post.body
         }

@@ -1,5 +1,6 @@ <ul class="posts">
   <li class="post">
     <a href="/">Test post please ignore</a>
+    <time></time>
   </li>
 </ul>

@@ -1,5 +1,6 @@ <article>
   <h1>post title</h1>
+  <time></time>
   <div class="post-content">
     Fringilla ut morbi tincidunt augue interdum velit euismod!
     Interdum velit laoreet id donec ultrices tincidunt arcu, non

@@ -1,5 +1,6 @@ <ul class="posts">
   <li class="post">
     <a href="/">Test post please ignore</a>
+    <time></time>
   </li>
 </ul>

@@ -39,6 +39,15 @@ $(".post:first-of-type a").attr("href"),         "/post/testfile",
         "first post url"
       );
+      t.is(
+        $(".post:first-of-type time").text(),
+        "Sunday, January 1, 2017",
+        "first post date"
+      );
+      t.is(
+        $(".post:first-of-type time").attr("datetime"),
+        new Date("2017-01-01").toISOString()
+      );
       return $;
     })
     .then(toMicroformatsOptions)
@@ -84,6 +93,15 @@ "This is a test",         "article header is post title"
       );
       t.is(
+        $("article time").text(),
+        "Sunday, January 1, 2017",
+        "first post date"
+      );
+      t.is(
+        $("article time").attr("datetime"),
+        new Date("2017-01-01").toISOString()
+      );
+      t.is(
         $("article p").text(),
         `Ut enim blandit volutpat maecenas? Volutpat blandit aliquam etiam erat \
 velit, scelerisque in dictum non, consectetur a erat nam at lectus \
@@ -123,6 +141,11 @@ t.is(         $(".post:first-of-type a").attr("href"),
         "/post/testfile",
         "post url"
+      );
+      t.is(
+        $(".post:first-of-type time").text(),
+        "Sunday, January 1, 2017",
+        "first post date"
       );
     });
 });

@@ -14,6 +14,7 @@ const expected = new Map(     Object.entries({
       title: "This is a test",
       description: "Test file",
+      date: new Date("2017-01-01T00:00:00Z"),
       tags: ["a", "b"]
     })
   );

@@ -1,6 +1,7 @@ +++
 Title = "This is a test"
 Description = "Test file"
+Date = 2017-01-01T02:00:00+02:00
 Tags = ["a", "b"]
 +++
 Ut enim blandit volutpat maecenas? Volutpat blandit aliquam etiam erat