chore: fix broken blog post links and CSS

Author: woop

.github/workflows/deploy-website.yml

@@ -1,21 +1,18 @@
 name: Deploy Website to GitHub Pages
 
 on:
-  # Trigger the workflow on pushes to master/main that affect the website
   push:
     branches: [ master, main ]
     paths:
       - 'infra/website/**'
   # Allow manual triggers
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment
 concurrency:
   group: "pages"
   cancel-in-progress: true

infra/website/src/pages/index.astro

@@ -3,6 +3,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import Navigation from '../components/Navigation.astro';
 import { Code } from 'astro/components';
 
+const posts = await Astro.glob('../../docs/blog/*.md');
+const sortedPosts = posts.sort((a, b) => {
+  const dateA = new Date(a.frontmatter.date || '2000-01-01');
+  const dateB = new Date(b.frontmatter.date || '2000-01-01');
+  return dateB.getTime() - dateA.getTime();
+}).slice(0, 3);
+
 const codeString = `from feast import FeatureStore
 
 # Initialize the feature store
@@ -236,21 +243,13 @@ features = store.get_online_features(
         <h3 class="integrations-subtitle text-smooth text-center">THE LATEST FROM FEAST</h3>
 
         <div class="blog-grid">
-          <a href="#" class="blog-post">
-            <div class="blog-type">Blog</div>
-            <h4 class="blog-title">Learn how to use Feast with Denormalized</h4>
-            <p class="blog-excerpt">Learn how to use Feast with Denormalized to build real-time features for ML and AI.This article was originally posted on…</p>
-          </a>
-          <a href="#" class="blog-post">
-            <div class="blog-type">Blog</div>
-            <h4 class="blog-title">Faster Feature Transformations in Feast</h4>
-            <p class="blog-excerpt">Thank you to Shuchu Han and Francisco Javier Arceo for their contributions evaluating the latency of transformation for On Demand…</p>
-          </a>
-          <a href="#" class="blog-post">
-            <div class="blog-type">Blog</div>
-            <h4 class="blog-title">Feast Launches Role Based Access Control (RBAC)</h4>
-            <p class="blog-excerpt">Feast is proud to introduce Role-Based Access Control (RBAC), a game-changing feature for secure and scalable feature store management. With…</p>
-          </a>
+          {sortedPosts.map((post) => (
+            <a href={`/blog/${post.file.split('/').pop().replace('.md', '')}`} class="blog-post">
+              <div class="blog-type">Blog</div>
+              <h4 class="blog-title">{post.frontmatter.title}</h4>
+              <p class="blog-excerpt">{post.frontmatter.description}</p>
+            </a>
+          ))}
         </div>
       </div>
     </section>

infra/website/src/styles/global.css

@@ -755,7 +755,7 @@ main::before {
 /* CTA section */
 .cta-section {
     padding: calc(var(--spacing-lg) * 0.5) 0 calc(var(--spacing-lg) * 0.75) 0;
-    margin: 0;
+    margin: 0 0 var(--spacing-lg) 0;
     border-bottom: 1px solid var(--border-color);
 }
 
@@ -771,20 +771,15 @@ main::before {
     text-align: center;
     position: relative;
     margin: 0;
-    min-height: 300px;
+    min-height: 200px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
 }
 
 .cta-tile:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: var(--border-color);
+    display: none;
 }
 
 .cta-title {
@@ -819,6 +814,8 @@ main::before {
     transition: all 0.2s ease;
     text-decoration: none;
     display: inline-block;
+    min-width: 140px;
+    max-width: 180px;
 }
 
 .cta-button:hover {
@@ -829,7 +826,9 @@ main::before {
 /* Bordered container */
 .bordered-container {
     position: relative;
-    border: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
     margin: 52px auto 0;
     max-width: calc(var(--content-max-width) - (var(--content-padding) * 2));
     box-sizing: border-box;