@@ -11,17 +11,20 @@ import {
1111 Section,
1212 IntraNav,
1313 getPostBySlug,
14− getAllPosts,
14+ getPage,
1515 formatDate,
1616} from "@urbit/foundation-design-system";
1717import Header from "../../components/Header";
1818import Footer from "../../components/Footer";
19+import MetadataBlock from "../../components/ecosystem/MetadataBlock";
20+import ResourceCard from "../../components/gateway/ResourceCard";
21+import JoinGroup from "../../components/JoinGroup";
1922import ob from "urbit-ob";
2023import { DateTime } from "luxon";
2124import fs from 'fs';
22−import { join } from 'path';
25+import path, { join } from 'path';
2326
24−export default function Grant({ post, markdown, search }) {
27+export default function Grant({ post, markdown, match, search }) {
2528 const router = useRouter();
2629 if (!router.isFallback && !post?.slug) {
2730 return <ErrorPage />;
@@ -65,6 +68,44 @@ export default function Grant({ post, markdown, search }) {
6568 );
6669 });
6770
71+ let status = "";
72+ if (isOpen) {
73+ status = "Open"
74+ } else if (post?.extra?.completed) {
75+ status = "Completed"
76+ } else if (post?.extra?.canceled) {
77+ status = "Canceled"
78+ } else {
79+ status = "In Progress"
80+ }
81+ const statusBadge = <div className={
82+ classnames("badge-sm mr-1 my-1", {
83+ "bg-red": status === "Canceled",
84+ "bg-green-400 text-white": status === "Completed" || status === "Open",
85+ "bg-wall-300": status === "In Progress",
86+ })}>
87+ {status}
88+ </div>;
89+
90+ let deliverable = null;
91+ if (post.extra.deliverable) {
92+ if (match) {
93+ deliverable = <ResourceCard
94+ title={match.data.title}
95+ image={match.data.image}
96+ color={match.data.bgColor || "#000000"}
97+ description={match.data?.description || ""}
98+ type="Application"
99+ full
100+ />
101+ }
102+ else if (post.extra.deliverable.startsWith("~")) {
103+ deliverable = <JoinGroup emphasize groupName={post.extra.deliverable} />
104+ } else {
105+ deliverable = <a className="font-medium text-green-400" href={post.extra.deliverable}>{post.extra.deliverable}</a>
106+ }
107+ }
108+
68109 const metaPost = Object.assign({}, post);
69110 metaPost.title = `${post.title} - Grant`;
70111
@@ -79,38 +120,8 @@ export default function Grant({ post, markdown, search }) {
79120 <Header search={search} />
80121 <Section narrow short>
81122 <h1>{post.title}</h1>
82− {post.extra.assignee ? (
83− <div className="type-ui text-wall-500 mt-4">
84− Grantee(s): {assigneeLink}
85− </div>
86− ) : null}
87− {post.extra.mentor ? (
88− <div className="type-ui text-wall-500 mt-4">
89− Mentor: {mentorLink}
90− </div>
91− ) : null}
92− {post.extra.champion ? (
93− <div className="type-ui text-wall-500 mt-4">
94− Champion: {mentorLink}
95− </div>
96− ) : null}
97− {post.extra.ship ? (
98− <Link href={`/ids/${post.extra.ship}`} passHref>
99− <a className="type-sub-bold text-wall-500 font-mono">
100− {post.extra.ship}
101− </a>
102− </Link>
103− ) : null}
104− <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10 flex items-center space-x-1">
105− {formatDate(DateTime.fromISO(post.date))}
106− {post?.extra?.grant_id ? (
107− <>
108− <p className="ml-1 text-wall-500 type-ui">• ID:</p>
109− <p className="font-mono type-ui"> {post.extra.grant_id}</p>
110− </>
111− ) : null}
112− </div>
113− <div className="flex items-center flex-wrap mt-4 md:mt-8 lg:mt-10">
123+ <div className="flex items-center flex-wrap my-4">
124+ {statusBadge}
114125 {post.taxonomies.grant_type.map((category) => {
115126 const className = classnames({
116127 "bg-blue-400 text-white": category === "Proposal",
@@ -129,6 +140,46 @@ export default function Grant({ post, markdown, search }) {
129140 </div>
130141 ))}
131142 </div>
143+ <div className="flex flex-wrap md:flex-nowrap justify-between">
144+ {post?.extra?.grant_id ? (
145+ <>
146+ <MetadataBlock
147+ title="ID"
148+ content={post.extra.grant_id}
149+ />
150+ </>
151+ ) : null}
152+ <MetadataBlock
153+ title="Date"
154+ content={formatDate(DateTime.fromISO(post.date))}
155+ />
156+ {post.extra.mentor ? (
157+ <MetadataBlock
158+ title="Mentor"
159+ content={mentorLink}
160+ />
161+ ) : null}
162+ {post.extra.champion ? (
163+ <MetadataBlock
164+ title="Champion"
165+ content={mentorLink}
166+ />
167+ ) : null}
168+ {post.extra.assignee ? (
169+ <MetadataBlock
170+ title="Grantee(s)"
171+ content={assigneeLink}
172+ />
173+ ) : null}
174+ </div>
175+ {post?.extra?.link?.startsWith("~") && <div className="flex flex-col my-4 space-y-2">
176+ <p className="text-wall-400 font-semibold">Group</p>
177+ <JoinGroup emphasize groupName={post.extra.link} />
178+ </div>}
179+ {deliverable && <div className="flex flex-col my-4 space-y-2">
180+ <p className="text-wall-400 font-semibold">Deliverable</p>
181+ {deliverable}
182+ </div>}
132183 </Section>
133184 <Section narrow className="markdown">
134185 <Markdown.render content={JSON.parse(markdown)} />
@@ -149,6 +200,7 @@ export default function Grant({ post, markdown, search }) {
149200}
150201
151202export async function getStaticProps({ params }) {
203+ // Gets post in any year folder sharing the slug name in the param
152204 const basePath = join(process.cwd(), 'content/grants')
153205 const years = fs.readdirSync(basePath, { 'withFileTypes': true }).filter((f) => f.isDirectory());
154206 const dir = years.find((year) => {
@@ -162,8 +214,23 @@ export async function getStaticProps({ params }) {
162214 )
163215
164216 const markdown = JSON.stringify(Markdown.parse({ post }));
217+
218+ // Matches deliverable to page
219+ let match = null;
220+ if (post?.extra?.deliverable?.startsWith("~")) {
221+ const ship = post.extra.deliverable.split("/")[0];
222+ const application = post.extra.deliverable.split("/")[1];
223+ const fileExists = fs.existsSync(path.join(process.cwd(), "content/applications", ship, `${application}.md`));
224+ match = fileExists ? getPage(
225+ join(
226+ process.cwd(),
227+ "content/applications",
228+ post.extra.deliverable
229+ )
230+ ) : null
231+ }
165232 return {
166− props: { post, markdown },
233+ props: { post, markdown, match },
167234 };
168235}
169236