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%;
+  }
 }

public/css/posts.css

@@ -11,7 +11,7 @@
 }
 .post-layout main .thumbnail {
   width: 100%;
-  height: 375px;
+  height: 300px;
   object-fit: contain;
   object-position: center;
 }
@@ -40,6 +40,7 @@
   border-radius: 1rem;
   box-shadow: 0 2px 4px rgba(var(--black), .21);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 0 1rem;
 }
 .post-card:hover {
   transform: translate(-4px, -4px); /* Up and left by 4px */
@@ -56,8 +57,21 @@
   padding: 2rem;
 }
 
+@media (min-width: 768px) {
+  .post-layout main .thumbnail {
+    height: 375px;
+    margin: 1rem 0;
+  }
+}
 @media (min-width: 992px) {
   .posts {
     grid-template-columns: repeat(2, 1fr);
   }
+  .post-card {
+    margin: 0;
+  }
+  .post-layout main .thumbnail {
+    height: 375px;
+    margin: 2rem 0;
+  }
 }

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>
+      <div class="featured-text">
-        <h2>Latest Post Title Goes Here</h2>
+        <h2>{{ latestPost.data.title }}</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>
+        <span>{{ latestPost.data.date | date: "%B %-d, %Y" }}</span>
-        <a href="#">Read more...</a>
+        <p>{{ latestPost.templateContent | strip_html | firstWords: 25 }}</p>
+        <a href="{{ latestPost.url }}">Read more...</a>
       </div>
     </div>
   </div>