Add Upcoming section to the home page

src/_includes/main/upcoming.njk

@@ -0,0 +1,24 @@
+<section class="section--home grid-center">
+    <h2 class="heading--home">Upcoming</h2>
+    <ul class="upcoming">
+        <li class="upcoming__item">
+            <h3><a href="https://11tymeetup.dev/events/ep-19-migrating-to-3-0-and-blogging-with-storyblok/">THE Eleventy Meetup Episode 19</a></h3>
+            <strong>
+                <time datetime="2024-09-26T19:00:00+0800">26 September 2024, 7pm (Malaysia Time)</time>
+            </strong>
+            <p>I will give a talk, "Eleventy Journey From 2.0 to 3.0", about my experience with using Eleventy, including the decision and process of upgrading to Eleventy 3.0.</p>
+        </li>
+    </ul>
+</section>
+
+{%- css %}
+.upcoming {
+    padding: 0;
+    max-width: 40rem;
+}
+
+.upcoming__item {
+    display: grid;
+    gap: 0.3em;
+}
+{% endcss %}

src/index.njk

@@ -9,6 +9,7 @@ metadata:
 <div class="home--container">
     {% include "main/profile.njk" %}
     {% include "main/skills.njk" %}
+    {% include "main/upcoming.njk" %}
     <section class="section--home grid-center">
         <h2 class="heading--home">Latest Blog Posts</h2>
         {% set postList = collections.posts | reverse | limit(3) %}