mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
index: add whats new section
This commit is contained in:
parent
e2bd2b02b1
commit
1b926658c2
44
components/BlogPreview.js
Normal file
44
components/BlogPreview.js
Normal file
@ -0,0 +1,44 @@
|
||||
import { BackgroundImage } from "foundation-design-system";
|
||||
import Link from "next/link";
|
||||
import { generateDisplayDate, formatDate } from "../lib/lib";
|
||||
|
||||
export default function BlogPreview({ post }) {
|
||||
const date = generateDisplayDate(post.date);
|
||||
return (
|
||||
<div key={post.slug} className="mb-20 cursor-pointer">
|
||||
<Link href={`/blog/${post.slug}`}>
|
||||
<div>
|
||||
{
|
||||
// Not all blog posts have images
|
||||
post.extra.image ? (
|
||||
<BackgroundImage
|
||||
src={post.extra.image}
|
||||
className="rounded-lg aspect-w-5 aspect-h-4"
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
<h3 className="mt-10">{post.title}</h3>
|
||||
{post?.description && <p className="mt-3">{post.description}</p>}
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="flex items-baseline">
|
||||
{post.extra.author ? (
|
||||
<div className="type-sub-bold mr-2">{post.extra.author}</div>
|
||||
) : null}
|
||||
{post.extra.ship ? (
|
||||
<Link
|
||||
href={`https://urbit.org/ids/${post.extra.ship}`}
|
||||
passHref
|
||||
>
|
||||
<a className="type-sub-bold text-wall-500 font-mono">
|
||||
{post.extra.ship}
|
||||
</a>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-wall-500 type-sub">{formatDate(date)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,14 +1,9 @@
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Header from "../components/Header";
|
||||
import Meta from "../components/Meta";
|
||||
import {
|
||||
BackgroundImage,
|
||||
Container,
|
||||
SingleColumn,
|
||||
Section,
|
||||
} from "foundation-design-system";
|
||||
import { getAllPosts, formatDate, generateDisplayDate } from "../lib/lib";
|
||||
import BlogPreview from "../components/BlogPreview";
|
||||
import { Container, SingleColumn, Section } from "foundation-design-system";
|
||||
import { getAllPosts } from "../lib/lib";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
export default function Blog({ posts, search }) {
|
||||
@ -29,52 +24,9 @@ export default function Blog({ posts, search }) {
|
||||
<h1 className="pb-16">Developer Blog</h1>
|
||||
</Section>
|
||||
<Section narrow>
|
||||
{posts.map((post) => {
|
||||
const date = generateDisplayDate(post.date);
|
||||
return (
|
||||
<div key={post.slug} className="mb-20 cursor-pointer">
|
||||
<Link href={`/blog/${post.slug}`}>
|
||||
<div>
|
||||
{
|
||||
// Not all blog posts have images
|
||||
post.extra.image ? (
|
||||
<BackgroundImage
|
||||
src={post.extra.image}
|
||||
className="rounded-lg aspect-w-5 aspect-h-4"
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
<h3 className="mt-10">{post.title}</h3>
|
||||
{post?.description && (
|
||||
<p className="mt-3">{post.description}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="flex items-baseline">
|
||||
{post.extra.author ? (
|
||||
<div className="type-sub-bold mr-2">
|
||||
{post.extra.author}
|
||||
</div>
|
||||
) : null}
|
||||
{post.extra.ship ? (
|
||||
<Link
|
||||
href={`https://urbit.org/ids/${post.extra.ship}`}
|
||||
passHref
|
||||
>
|
||||
<a className="type-sub-bold text-wall-500 font-mono">
|
||||
{post.extra.ship}
|
||||
</a>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-wall-500 type-sub">
|
||||
{formatDate(date)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{posts.map((post) => (
|
||||
<BlogPreview post={post} />
|
||||
))}
|
||||
</Section>
|
||||
</SingleColumn>
|
||||
<Footer />
|
||||
|
@ -1,6 +1,8 @@
|
||||
import Head from "next/head";
|
||||
import Header from "../components/Header";
|
||||
import Footer from "../components/Footer";
|
||||
import BlogPreview from "../components/BlogPreview";
|
||||
import EventPreview from "../components/EventPreview";
|
||||
import {
|
||||
Container,
|
||||
SingleColumn,
|
||||
@ -20,8 +22,11 @@ import {
|
||||
} from "../components/icons";
|
||||
import Card from "../components/Card";
|
||||
import TallCard from "../components/TallCard";
|
||||
import { getAllPosts, getAllEvents } from "../lib/lib";
|
||||
import { eventKeys } from "../lib/constants";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
export default function Home({ search }) {
|
||||
export default function Home({ search, whatsNew }) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
@ -176,6 +181,38 @@ export default function Home({ search }) {
|
||||
</Section>
|
||||
<Section className="flex flex-col space-y-8">
|
||||
<h2>What's New</h2>
|
||||
<TwoUp>
|
||||
{whatsNew.slice(0, 2).map((e) => {
|
||||
if (e.type === "event") {
|
||||
return (
|
||||
<EventPreview event={e} className="basis-1/2 h-full" />
|
||||
);
|
||||
} else if (e.type === "blog") {
|
||||
return (
|
||||
<Link href={`/blog/${e.slug}`}>
|
||||
<div className="cursor-pointer bg-wall-100 rounded-xl basis-1/2 h-full">
|
||||
<div className="flex flex-col p-6 justify-between items-between h-full relative">
|
||||
<img
|
||||
className="rounded-xl w-full flex-1 object-cover"
|
||||
src={e.extra.image}
|
||||
style={{ aspectRatio: "16 / 9" }}
|
||||
/>
|
||||
<div className="grow-1 shrink-0 flex flex-col h-full min-h-0 pt-4">
|
||||
<h3 className="mb-2">{e.title}</h3>
|
||||
<div className="flex flex-col xl:flex-row justify-between">
|
||||
<p className="truncate text-sm">
|
||||
{e.description}
|
||||
</p>
|
||||
<p className="text-sm">{e.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</TwoUp>
|
||||
</Section>
|
||||
</SingleColumn>
|
||||
<Footer />
|
||||
@ -220,3 +257,26 @@ const pitch = [
|
||||
"Urbit applications can be built on any interface framework, including the web",
|
||||
},
|
||||
];
|
||||
|
||||
export async function getStaticProps() {
|
||||
const posts = getAllPosts(
|
||||
["title", "slug", "date", "description", "extra"],
|
||||
"blog",
|
||||
"date"
|
||||
).map((e) => ({ ...e, type: "blog" }));
|
||||
const events = getAllEvents(eventKeys, "community/events").map((e) => ({
|
||||
...e,
|
||||
type: "event",
|
||||
}));
|
||||
const whatsNew = [...posts, ...events].sort((a, b) => {
|
||||
return DateTime.fromISO(a.date || a.ends) >
|
||||
DateTime.fromISO(b.date || b.ends)
|
||||
? -1
|
||||
: 1;
|
||||
});
|
||||
return {
|
||||
props: {
|
||||
whatsNew,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user