urbit/developers.urbit.org
1
1
Fork 0
mirror of https://github.com/urbit/developers.urbit.org.git synced 2024-09-11 13:55:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

index: split posts and events

Browse Source
This commit is contained in:
Matilde Park 2022-07-18 20:39:04 -07:00
parent c4638cf467
commit e88f1fbea8
1 changed files with 84 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
pages/index.js
View File

@ -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,
},
};
}