@@ -1,114 +0,0 @@
1−import Head from "next/head";
2−import Link from "next/link";
3−import Meta from "../components/Meta";
4−import {
5− Container,
6− SingleColumn,
7− Section,
8− IntraNav,
9−} from "foundation-design-system";
10−import Footer from "../components/Footer";
11−import Header from "../components/Header";
12−import { getAllPosts } from "../lib/lib";
13−
14−export function MediaPreview({ event, dir, className }) {
15− // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
16− const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
17− const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
18−
19− return (
20− <div
21− key={event.slug}
22− className={`mb-24 cursor-pointer bg-wall-100 rounded-xl h-96 bg-cover bg-center bg-no-repeat ${className}`}
23− style={{
24− backgroundImage:
25− `${
26− event.extra?.overlay
27− ? "linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),"
28− : ""
29− }url(${event.extra?.image})` || "",
30− }}
31− >
32− <Link href={`${dir ? dir : "/events/"}${event.slug}`}>
33− <div className="flex flex-col p-8 justify-between items-between h-full relative">
34− <div className="grow-1 flex flex-col justify-center h-full">
35− <h3 className={`mb-4 ${blackText}`}>{event.title}</h3>
36− <h4 className={grayText}>{event?.type}</h4>
37− </div>
38− <div className="absolute left-8 bottom-8 w-full">
39− <p className={grayText}>{event.extra.host}</p>
40− <p className={grayText}>{event.extra.guests}</p>
41− </div>
42− {event.extra.youtube ? (
43− <a
44− onClick={(e) => e.stopPropagation()}
45− className="absolute w-16 h-16 right-8 bottom-8 bg-white flex items-center justify-center rounded-full"
46− target="_blank"
47− href={`https://www.youtube.com/watch?v=${event.extra.youtube}`}
48− >
49− <svg
50− width="48"
51− height="48"
52− viewBox="0 0 16 16"
53− fill="none"
54− xmlns="http://www.w3.org/2000/svg"
55− >
56− <path
57− d="M11.25 7.56699C11.5833 7.75944 11.5833 8.24056 11.25 8.43301L6.75 11.0311C6.41667 11.2235 6 10.983 6 10.5981L6 5.40192C6 5.01702 6.41667 4.77646 6.75 4.96891L11.25 7.56699Z"
58− fill="black"
59− />
60− </svg>
61− </a>
62− ) : null}
63− </div>
64− </Link>
65− </div>
66− );
67−}
68−
69−export default function Media({ posts, search }) {
70− const post = {
71− title: "Media",
72− description:
73− "A selection of external appearances by the Tlon Corporation and the Urbit Foundation.",
74− };
75− return (
76− <Container>
77− <Head>
78− <title>Media • urbit.org</title>
79− {Meta(post)}
80− </Head>
81− <IntraNav ourSite="https://urbit.org" search={search} />
82− <SingleColumn>
83− <Header />
84− <Section narrow>
85− <div className="measure">
86− <h1 className="pb-16">Media</h1>
87− <p className="pb-6">
88− Selected external media appearances from Tlon and the Urbit
89− Foundation.
90− </p>
91− </div>
92− </Section>
93− <Section narrow>
94− {posts.map((post) => {
95− return <MediaPreview event={post} dir="/media/" />;
96− })}
97− </Section>
98− </SingleColumn>
99− <Footer />
100− </Container>
101− );
102−}
103−
104−export async function getStaticProps() {
105− const posts = getAllPosts(
106− ["title", "slug", "date", "description", "extra"],
107− "media",
108− "date"
109− );
110−
111− return {
112− props: { posts },
113− };
114−}