Discoverable generic blogposts

TraceMachina · Dec 4, 2024 · cfd9bf2 · cfd9bf2
1 parent d55611a
commit cfd9bf2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/web/platform/src/content/posts/NativeLink_for_Semiconductors.md b/web/platform/src/content/posts/NativeLink_for_Semiconductors.md
@@ -1,6 +1,6 @@
 ---
 title: "NativeLink for Semiconductors"
-tags: ["news", "blog"]
+tags: ["news", "blog-posts"]
 image: https://www.gstatic.com/webp/gallery/4.sm.webp
 slug: semiconductors
 pubDate: 2024-12-04

diff --git a/web/platform/src/pages/resources/index.astro b/web/platform/src/pages/resources/index.astro
@@ -8,6 +8,7 @@ import { BackgroundVideo } from "@qwik/components/video";
 const allPosts = await getCollection("posts");
 const announcements = allPosts.filter(post => post.data.tags?.includes('announcements'));
 const caseStudies = allPosts.filter(post => post.data.tags?.includes('case-studies'));
+const blogPosts = allPosts.filter(post => post.data.tags?.includes('blog-posts'));
 
 const pageTitle = "NativeLink Resources | Blog, Case Studies, Changelog";
 ---
@@ -22,6 +23,27 @@ const pageTitle = "NativeLink Resources | Blog, Case Studies, Changelog";
       <LinearGradient text="Resources" class="z-10 text-thin text-5xl self-start pl-8 md:pl-48 py-8"/>
     </div>
 
+    <LinearGradient text="Blog Posts" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8"/>
+
+    <div id="Card" class="relative w-screen px-8 md:px-0 md:w-9/12 flex gap-4 snap-x snap-mandatory overflow-x-auto pb-16 mb-6 ">
+      {blogPosts
+        .sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
+        .map((post) => (
+          <a
+            href={"/resources/blog/" + post.slug}
+            class="h-96 w-11/12 md:w-72 shrink-0 flex flex-col snap-always md:justify-evenly justify-start rounded-xl items-center border border-solid border-white snap-center"
+          >
+            {post.data.image && (
+              <img src={post.data.image} alt={post.data.title || "Blog post image"} class="w-full h-48 object-cover rounded-t-xl" />
+            )}
+            <div class="w-full h-full flex flex-col justify-between items-start p-6">
+              <LinearGradient text={post.data.title} class="text-lg w-full" />
+              <span class="text-lg">Read More</span>
+            </div>
+          </a>
+        ))}
+    </div>
+
     <LinearGradient text="Announcements" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8"/>
 
     <div id="Card" class="relative w-screen px-8 md:px-0 md:w-9/12 flex gap-4 snap-x snap-mandatory overflow-x-auto pb-16 mb-6 ">