feat: finish index page

config/filters/index.js

@@ -87,12 +87,17 @@ const filterCatalogueTags = (tags) => {
 
 const limit = (collection, limit = 5) => collection.slice(0, limit);
 
+const filterFavourites = (collection) => {
+  return collection.filter((item) => item.data.favourite);
+};
+
 module.exports = {
   allTagCounts,
   allTags,
   entries,
   filter,
   filterCatalogueTags,
+  filterFavourites,
   formatDate,
   keys,
   limit,

eleventy.config.js

@@ -17,6 +17,7 @@ const {
   pluralize,
   filterCatalogueTags,
   limit,
+  filterFavourites,
 } = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
@@ -37,6 +38,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("entries", entries);
   eleventyConfig.addFilter("filter", filter);
   eleventyConfig.addFilter("filterCatalogueTags", filterCatalogueTags);
+  eleventyConfig.addFilter("filterFavourites", filterFavourites);
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("keys", keys);
   eleventyConfig.addFilter("limit", limit);

src/_includes/macros/posts.njk

@@ -0,0 +1,14 @@
+{% macro list(posts) %}
+<ul class="[ list-none p-0 flow mt-1 mb-0 flow-space-0.25 ]">
+    {% for post in posts %}
+        <li class="[ flex flex-wrap column-gap-1 row-gap-0 ]">
+            <div>
+                <a href="{{ post.url }}">{{ post.data.title }}</a>
+            </div>
+            <div class="[ text-fadeText font-size-s ]">{{ post.data.excerpt }}</div>
+            <div class="[ bg-surface radius-0.5 px-0.5 text-primary font-size-s ]">{{ post.data.date | formatDate("MM/DD/YYYY") }}</div>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+

src/css-utils/spacing.js

@@ -36,6 +36,7 @@ const helperClasses = [
   ["gap", ["gap"]],
   ["row-gap", ["row-gap"]],
   ["column-gap", ["column-gap"]],
+  ["flow-space", ["--flow-space"]],
 ];
 
 const spacingVariablesCss = Object.entries(spacing).reduce(

src/css/utilities/fonts.css

@@ -0,0 +1,15 @@
+.font-size-s {
+  font-size: 0.8rem;
+}
+
+.font-size-m {
+  font-size: 1.125rem;
+}
+
+.font-size-l {
+  font-size: 2rem;
+}
+
+.font-size-xl {
+  font-size: 3rem;
+}

src/index.html

@@ -3,6 +3,7 @@ layout: "layouts/base"
 permalink: /
 ---
 
+{% from "macros/posts.njk" import list %}
 <h1>Ahoj!</h1>
 <p>Hello! My name is Devin.</p>
 <p>I'm a creative developer who specializes in web and mobile development.</p>
@@ -13,15 +14,9 @@ permalink: /
     If you're interested, I have an <a href="/about">about page</a> all about me!
 </p>
 <h2>Favourite posts</h2>
+<p>Hand-picked, curated selection of my favourite posts!</p>
+{% set favouritePosts = collections.post | filterFavourites | reverse %}
+{{ list(favouritePosts) }}
 <h2>Recent posts</h2>
-<ul class="[ list-none p-0 flow mt-1 mb-0 ]"
-    style="--flow-space: 0.25rem">
-    {% for item in collections.post | reverse | limit(5) %}
-        <li class="[ flex flex-wrap column-gap-0.5 row-gap-0 ]">
-            <div>
-                <a href="{{ item.url }}">{{ item.data.title }}</a>
-            </div>
-            <div class="[ text-fadeText ]" style="font-size: 0.8rem">{{ item.data.date | formatDate("MM/DD/YYYY") }}</div>
-        </li>
-    {% endfor %}
-</ul>
+{% set recentPosts = collections.post | reverse | limit(5) %}
+{{ list(recentPosts) }}