feat: Added featured post

public/css/home.css

@@ -126,6 +126,7 @@ main > :last-child {
   object-fit: cover;
   object-position: center;
   width: 100%;
+  border: 4px solid white;
 }
 .featured > h1,
 .about > h1 {
@@ -151,6 +152,14 @@ main > :last-child {
   font-weight: 300;
   margin-top: 1rem;
 }
+.featured .featured-text {
+  display: flex;
+  flex-direction: column;
+}
+.featured-text span {
+  color: rgba(var(--black), .56);
+  font-size: .85rem;
+}
 
 .about > div {
   margin-top: 2rem;
@@ -226,4 +235,7 @@ main > :last-child {
     text-align: end;
     padding-left: 2rem;
   }
+  .featured > div > div {
+    width: 50%;
+  }
 }

src/_config/filters.js

@@ -7,4 +7,9 @@ export default function(eleventyConfig) {
 
     return array[0];
 	});
+
+  eleventyConfig.addFilter("firstWords", function (content, numWords = 100) {
+    if (!content) return "";
+    return content.split(/\s+/).slice(0, numWords).join(" ");
+  });
 };

src/index.html

@@ -35,15 +35,17 @@ css: home.css
 </div>
 <div>
   <div class="container featured">
+    {% assign latestPost = collections.posts | last %}
     <h1>Featured Posts</h1>
     <div>
       <div>
-        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
+        <img class="featured-image" src="{{ latestPost.data.thumbnail }}" alt="{{ latestPost.data.title }}" />
       </div>
-      <div>
-        <h2>Latest Post Title Goes Here</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi dolorem velit facere ea? Fugit dolor libero dolorem laborum sapiente labore quidem eos, ratione deleniti. Hic sunt ea aspernatur iusto!</p>
-        <a href="#">Read more...</a>
+      <div class="featured-text">
+        <h2>{{ latestPost.data.title }}</h2>
+        <span>{{ latestPost.data.date | date: "%B %-d, %Y" }}</span>
+        <p>{{ latestPost.templateContent | strip_html | firstWords: 25 }}</p>
+        <a href="{{ latestPost.url }}">Read more...</a>
       </div>
     </div>
   </div>