Pull in latest JSR posts to homepage (#496)

Now that there's a JSON API for Deno blog posts that allows us to filter
by tags, we can pull in the three latest JSR blog posts and display them
on the JSR homepage.

**NOTE:** because of CORS, this won't work locally. The images will load
properly once live, however. (You can run your own `dotcom` locally,
update its `_middleware.ts` file to allow your local JSR domain, and
replace all image URLs to point to your local dotcom localhost domain
instead of `deno.com` to verify.)

<img width="1279" alt="image"
src="https://github.com/jsr-io/jsr/assets/22334764/cd2c2675-1cbf-4098-9ba0-1762c674d706">

Author: josh-collinsworth

frontend/components/ListPanel.tsx

@@ -17,9 +17,9 @@ export function ListPanel(
     <div class="w-full">
       <div class="mb-2">
         {title && (
-          <h2 class="text-xl md:text-2xl font-semibold">
+          <h3 class="text-lg md:text-xl font-semibold">
             {title}
-          </h2>
+          </h3>
         )}
         {subtitle && (
           <div class="text-base text-gray-500">

frontend/components/NewsCard.tsx

@@ -0,0 +1,37 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+export function NewsCard({
+  title,
+  description,
+  image,
+  url,
+}: {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+}) {
+  return (
+    <li class="group border-1.5 border-jsr-cyan-950 rounded list-none overflow-hidden hover:border-jsr-cyan-400 focus-within:border-jsr-cyan-400 transition-colors duration-150">
+      <a
+        href={url}
+        class="h-full flex flex-col justify-stretch cursor-pointer"
+        tabIndex={0}
+      >
+        <img
+          src={image}
+          crossOrigin={"anonymous"}
+          alt=""
+          class="w-full h-48 object-cover border-b-1.5 border-jsr-cyan-950 group-hover:border-jsr-cyan-400 group-focus-within:border-jsr-cyan-400 transition-colors duration-150"
+        />
+        <div class="p-4 flex flex-grow flex-col gap-4">
+          <h3 class="text-xl lg:text-2xl font-semibold !leading-tight text-balance">
+            {title}
+          </h3>
+          <p class="text-sm">
+            {description}
+          </p>
+        </div>
+      </a>
+    </li>
+  );
+}

frontend/routes/index.tsx

@@ -9,9 +9,18 @@ import { Head } from "$fresh/runtime.ts";
 import { ComponentChildren } from "preact";
 import { HomepageHero } from "../components/HomepageHero.tsx";
 import { Logo } from "../components/Logo.tsx";
+import { NewsCard } from "../components/NewsCard.tsx";
+
+interface Post {
+  title: string;
+  description: string;
+  image: string;
+  link: string;
+}
 
 interface Data {
   stats: Stats;
+  posts: Post[];
 }
 
 export default function Home({ data }: PageProps<Data>) {
@@ -32,17 +41,46 @@ export default function Home({ data }: PageProps<Data>) {
         apiKey={Deno.env.get("ORAMA_PACKAGE_PUBLIC_API_KEY")}
         indexId={Deno.env.get("ORAMA_PACKAGE_PUBLIC_INDEX_ID")}
       />
-      <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        <ListPanel title="Featured Packages">
-          {data.stats.featured.map(PackageToPanelEntry)}
-        </ListPanel>
-        <ListPanel title="Recent updates">
-          {data.stats.updated.map(PackageVersionToPanelEntry)}
-        </ListPanel>
-        <ListPanel title="New Packages">
-          {data.stats.newest.map(PackageToPanelEntry)}
-        </ListPanel>
-      </div>
+      {data.posts.length > 0 && (
+        <section class="flex flex-col gap-4 mb-16 md:mb-32">
+          <h2 class="text-3xl md:text-4xl mb-4 md:mb-8 font-semibold text-center">
+            Latest updates
+          </h2>
+          <ul class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
+            {data?.posts?.slice(0, 3).map((post) => (
+              <NewsCard
+                image={post.image}
+                title={post.title}
+                description={post.description}
+                url={post.link}
+              />
+            ))}
+          </ul>
+          <a
+            href="https://deno.com/blog?tag=jsr"
+            class="underline block mt-4 w-full text-center"
+          >
+            More JSR updates <span aria-hidden="true">&rsaquo;</span>
+          </a>
+        </section>
+      )}
+
+      <section class="flex flex-col gap-4">
+        <h2 class="text-3xl md:text-4xl mb-4 md:mb-8 font-semibold text-center">
+          Packages
+        </h2>
+        <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          <ListPanel title="Featured">
+            {data.stats.featured.map(PackageToPanelEntry)}
+          </ListPanel>
+          <ListPanel title="Recently updated">
+            {data.stats.updated.map(PackageVersionToPanelEntry)}
+          </ListPanel>
+          <ListPanel title="New to JSR">
+            {data.stats.newest.map(PackageToPanelEntry)}
+          </ListPanel>
+        </div>
+      </section>
 
       <h2
         class="font-semibold text-5xl md:text-7xl lg:text-center mt-16 md:mt-24 lg:mt-48 lg:mb-16"
@@ -231,8 +269,20 @@ export const handler: Handlers<Data, State> = {
     const statsResp = await ctx.state.api.get<Stats>(path`/stats`, undefined, {
       anonymous: true,
     });
+
+    let posts: Post[] = [];
+    try {
+      const jsrPosts = await fetch("https://deno.com/blog/json?tag=JSR");
+      if (jsrPosts.ok) {
+        posts = await jsrPosts.json() as Post[];
+        console.log(posts);
+      }
+    } catch (e) {
+      // ignore
+    }
+
     if (!statsResp.ok) throw statsResp; // gracefully handle this
-    return ctx.render({ stats: statsResp.data }, {
+    return ctx.render({ stats: statsResp.data, posts: posts || [] }, {
       headers: ctx.state.api.hasToken()
         ? undefined
         : { "Cache-Control": "public, s-maxage=60" },