More homepage work, show recent posts

config/filters/dates.js

@@ -0,0 +1,5 @@
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
+        "dateStyle": "short"
+    }));
+}

config/filters/index.js

@@ -1 +1,5 @@
-module.exports = function() {}
+const dateFilters = require('./dates');
+
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addPlugin(dateFilters);
+}

src/blog/posts/fourth-post.md

@@ -0,0 +1,11 @@
+---
+title: My fourth post
+---
+
+Something something something
+
+## Something else
+
+Some content in here
+
+### A sub-subheading

src/blog/posts/second-post.md

@@ -0,0 +1,11 @@
+---
+title: My second post
+---
+
+Something something something
+
+## Something else
+
+Some content in here
+
+### A sub-subheading

src/blog/posts/third-post.md

@@ -0,0 +1,11 @@
+---
+title: My third post
+---
+
+Something something something
+
+## Something else
+
+Some content in here
+
+### A sub-subheading

src/css/compositions/stack.css

@@ -2,22 +2,38 @@
   margin-block-start: var(--vertical-spacing, 1.5rem);
 }
 
-.stack-sm {
+.stack-4xs > * + * {
+  --vertical-spacing: var(--space-size-4xs);
+}
+
+.stack-3xs > * + * {
+  --vertical-spacing: var(--space-size-3xs);
+}
+
+.stack-2xs > * + * {
+  --vertical-spacing: var(--space-size-2xs);
+}
+
+.stack-xs > * + * {
+  --vertical-spacing: var(--space-size-xs);
+}
+
+.stack-sm > * + * {
   --vertical-spacing: var(--space-size-s);
 }
 
-.stack-md {
+.stack-md > * + * {
   --vertical-spacing: var(--space-size-m);
 }
 
-.stack-lg {
+.stack-lg > * + * {
   --vertical-spacing: var(--space-size-l);
 }
 
-.stack-xl {
+.stack-xl > * + * {
   --vertical-spacing: var(--space-size-xl);
 }
 
-.stack-2xl {
+.stack-2xl > * + * {
   --vertical-spacing: var(--space-size-2xl);
 }

src/css/exceptions/home.css

@@ -16,4 +16,12 @@
     margin-left: auto;
     margin-right: auto;
   }
+
+  time {
+    color: var(--color-zinc-300);
+    display: block;
+    font-size: var(--text-size-s);
+    font-style: italic;
+    font-weight: 300;
+  }
 }

src/css/globals.css

@@ -67,8 +67,8 @@ p {
 }
 
 footer {
-  padding-top: var(--space-size-l);
-  width: 100vw;
+  padding: var(--space-size-l) 0 var(--space-size-s);
+  width: 100%;
 }
 
 @media (min-width: 50em) {

src/index.html

@@ -20,9 +20,15 @@ layout: base.njk
 		</p>
 
 	</section>
-	<section>
+	<section class="stack-md">
 		<h2>Recent Posts</h2>
 
-		<a href="/blog">View more posts</a>
+		<ul class="stack-2xs">
+		{% for post in collections.posts.slice(0, 3) %}
+			<li><a href="{{ post.data.url }}">{{ post.data.title }}</a> <time>{{ post.date | dateDisplay }}</time></li>
+		{% endfor %}
+		</ul>
+
+		<a href="/blog" class="block">View more posts</a>
 	</section>	
 </main>