Skip to content

Pull in latest JSR posts to homepage #496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 10, 2024
Merged

Pull in latest JSR posts to homepage #496

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d98f543
Wire up homepage updates
josh-collinsworth May 9, 2024
efb1fa8
Remove unused import
josh-collinsworth May 9, 2024
09b5ca5
Add some additional error handling and checking
josh-collinsworth May 9, 2024
a2f1c49
ugh
josh-collinsworth May 9, 2024
76dcca1
Improved error handling
josh-collinsworth May 9, 2024
e093f79
Check for ok on fetch
josh-collinsworth May 9, 2024
20800d3
Fix typo
josh-collinsworth May 9, 2024
da1ed33
Fix broken link url
josh-collinsworth May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/components/ListPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
37 changes: 37 additions & 0 deletions frontend/components/NewsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
66 changes: 54 additions & 12 deletions frontend/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
url: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be undefined. I can't actually click on the cards 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, we call it link on dotcom, not url. Fixed now. 👍

}

interface Data {
stats: Stats;
posts: Post[];
}

export default function Home({ data }: PageProps<Data>) {
Expand All @@ -32,17 +41,47 @@ 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 && (
<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.url}
/>
))}
</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"
Expand Down Expand Up @@ -231,8 +270,11 @@ export const handler: Handlers<Data, State> = {
const statsResp = await ctx.state.api.get<Stats>(path`/stats`, undefined, {
anonymous: true,
});
const jsrPosts = await fetch("https://deno.com/blog/json?tag=JSR");
const posts = await jsrPosts.json() as Post[];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a try catch around this and set posts to [] if this fails? That way if deno.com goes down, this landing page does not :)

Also can you add a if (jsrPosts.ok) check in there to check we didn't get a 404 / 500 or something.

Also I'll add some caching to this call in a follow up.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lucacasonato I agree with the try/catch safety, but I don't think we want to do anything different if the request fails; just render the rest of the page without the posts. So I don't think we need to check for .ok, do we?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean if !jsrPosts.ok then also set posts = [] (ie not call jsrPosts.json(), as it's almost certainly going to fail anyway)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So just wrap the posts = await jsrPosts.json() as Post[]; in an if (jsrPosts.ok)


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" },
Expand Down
Loading