From b10856ab6cb12210eb7c0e4187e7813bbbc9fc67 Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@triptease.com>
Date: Wed, 8 Feb 2023 09:29:44 +0000
Subject: [PATCH] More homepage work, show recent posts

---
 config/filters/dates.js        |  5 +++++
 config/filters/index.js        |  6 +++++-
 src/blog/posts/fourth-post.md  | 11 +++++++++++
 src/blog/posts/second-post.md  | 11 +++++++++++
 src/blog/posts/third-post.md   | 11 +++++++++++
 src/css/compositions/stack.css | 26 +++++++++++++++++++++-----
 src/css/exceptions/home.css    |  8 ++++++++
 src/css/globals.css            |  4 ++--
 src/index.html                 | 10 ++++++++--
 9 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 config/filters/dates.js
 create mode 100644 src/blog/posts/fourth-post.md
 create mode 100644 src/blog/posts/second-post.md
 create mode 100644 src/blog/posts/third-post.md

diff --git a/config/filters/dates.js b/config/filters/dates.js
new file mode 100644
index 0000000..0ed3f93
--- /dev/null
+++ b/config/filters/dates.js
@@ -0,0 +1,5 @@
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
+        "dateStyle": "short"
+    }));
+}
\ No newline at end of file
diff --git a/config/filters/index.js b/config/filters/index.js
index a485537..8d39d8b 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -1 +1,5 @@
-module.exports = function() {}
\ No newline at end of file
+const dateFilters = require('./dates');
+
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addPlugin(dateFilters);
+}
\ No newline at end of file
diff --git a/src/blog/posts/fourth-post.md b/src/blog/posts/fourth-post.md
new file mode 100644
index 0000000..f0392ce
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/blog/posts/second-post.md b/src/blog/posts/second-post.md
new file mode 100644
index 0000000..00f034f
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/blog/posts/third-post.md b/src/blog/posts/third-post.md
new file mode 100644
index 0000000..9df5cfe
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/css/compositions/stack.css b/src/css/compositions/stack.css
index c3c72ba..f356c3e 100644
--- a/src/css/compositions/stack.css
+++ b/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);
 }
diff --git a/src/css/exceptions/home.css b/src/css/exceptions/home.css
index 3b7ad84..f366d85 100644
--- a/src/css/exceptions/home.css
+++ b/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;
+  }
 }
diff --git a/src/css/globals.css b/src/css/globals.css
index ac3f5c4..de281f4 100644
--- a/src/css/globals.css
+++ b/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) {
diff --git a/src/index.html b/src/index.html
index 0fb4701..84fb7d8 100644
--- a/src/index.html
+++ b/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>