mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
index: split posts and events
This commit is contained in:
parent
c4638cf467
commit
e88f1fbea8
143
pages/index.js
143
pages/index.js
@ -1,8 +1,7 @@
|
||||
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 IndexCard from "../components/IndexCard";
|
||||
import {
|
||||
Container,
|
||||
SingleColumn,
|
||||
@ -26,9 +25,14 @@ import TallCard from "../components/TallCard";
|
||||
import { getAllPosts, getAllEvents } from "../lib/lib";
|
||||
import { eventKeys } from "../lib/constants";
|
||||
import { DateTime } from "luxon";
|
||||
import { formatDate, generateDisplayDate } from "../lib/lib";
|
||||
import { DateRange } from "../components/Snippets";
|
||||
import {
|
||||
formatDate,
|
||||
generateDisplayDate,
|
||||
generateRealtimeDate,
|
||||
} from "../lib/lib";
|
||||
|
||||
export default function Home({ search, whatsNew }) {
|
||||
export default function Home({ search, posts, events }) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
@ -190,52 +194,81 @@ export default function Home({ search, whatsNew }) {
|
||||
</Link>
|
||||
</Section>
|
||||
<Section className="flex flex-col space-y-8">
|
||||
<h2>What's New</h2>
|
||||
<h2>Blog</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") {
|
||||
const date = generateDisplayDate(e.date);
|
||||
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: "4 / 3" }}
|
||||
{posts.slice(0, 2).map((e) => {
|
||||
const date = generateDisplayDate(e.date);
|
||||
return (
|
||||
<IndexCard
|
||||
slug={`/blog/${e.slug}`}
|
||||
title={e.title}
|
||||
image={e.extra.image}
|
||||
author={e?.extra?.author || ""}
|
||||
ship={e?.extra?.ship || ""}
|
||||
content={
|
||||
<p className="text-wall-500 type-sub shrink-0">
|
||||
{formatDate(date)}
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TwoUp>
|
||||
</Section>
|
||||
<Section className="flex flex-col space-y-8">
|
||||
<h2>Events</h2>
|
||||
<TwoUp>
|
||||
{events.slice(0, 2).map((e) => {
|
||||
const starts = generateDisplayDate(e.starts, e.timezone);
|
||||
const ends = generateDisplayDate(e.ends, e.timezone);
|
||||
|
||||
const inFuture = generateRealtimeDate(starts) > DateTime.now();
|
||||
|
||||
return (
|
||||
<IndexCard
|
||||
slug={`/events/${e.slug}`}
|
||||
title={e.title}
|
||||
image={e?.image}
|
||||
author={e?.extra?.author || ""}
|
||||
ship={e?.extra?.ship || ""}
|
||||
content={
|
||||
<>
|
||||
<div className="w-full pr-32">
|
||||
<p className="type-sub mb-1">{e.location}</p>
|
||||
<DateRange
|
||||
starts={starts}
|
||||
ends={ends}
|
||||
className={`type-sub`}
|
||||
/>
|
||||
<div className="grow-1 shrink-0 flex flex-col h-full min-h-0 pt-4">
|
||||
<h3 className="mb-2">{e.title}</h3>
|
||||
<p className="text-sm">
|
||||
{e.extra.author ? (
|
||||
<span className="type-sub-bold mr-2">
|
||||
{e.extra.author}
|
||||
</span>
|
||||
) : null}
|
||||
{e.extra.ship ? (
|
||||
<Link
|
||||
href={`https://urbit.org/ids/${e.extra.ship}`}
|
||||
passHref
|
||||
>
|
||||
<a className="type-sub-bold text-wall-500 font-mono">
|
||||
{e.extra.ship}
|
||||
</a>
|
||||
</Link>
|
||||
) : null}
|
||||
</p>
|
||||
<p className="text-wall-500 type-sub shrink-0">
|
||||
{formatDate(date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
{inFuture && e.registration_url ? (
|
||||
<div className="absolute right-0 bottom-0 p-6">
|
||||
<a
|
||||
className="button-sm bg-green-400 text-white"
|
||||
href={e.registration_url}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
target="_blank"
|
||||
>
|
||||
RSVP
|
||||
</a>
|
||||
</div>
|
||||
) : e.youtube ? (
|
||||
<div className="absolute right-0 bottom-0 p-6">
|
||||
<a
|
||||
className="button-sm bg-wall-600 text-white"
|
||||
href={`https://www.youtube.com/watch?v=${e.youtube}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
target="_blank"
|
||||
>
|
||||
▶ Watch
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TwoUp>
|
||||
</Section>
|
||||
@ -288,20 +321,12 @@ export async function getStaticProps() {
|
||||
["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;
|
||||
});
|
||||
);
|
||||
const events = getAllEvents(eventKeys, "community/events");
|
||||
return {
|
||||
props: {
|
||||
whatsNew,
|
||||
posts,
|
||||
events,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user