@@ -6,7 +6,6 @@ import {
66 SingleColumn,
77 Section,
88 IntraNav,
9− Markdown,
109 getAllPosts,
1110 generateDisplayDate,
1211 formatDate,
@@ -14,12 +13,15 @@ import {
1413import Header from "../../components/Header";
1514import Footer from "../../components/Footer";
1615import Sidebar from "../../components/Sidebar";
16+import EcosystemSidebar from "../../components/ecosystem/EcosystemSidebar";
17+import SpotlightArchive from "../../components/ecosystem/SpotlightArchive";
1718import Post from "../../components/ecosystem/Post";
1819import classnames from "classnames";
1920import Link from "next/link";
2021import fs from "fs";
2122import path from "path";
2223import Contact from "../../components/Contact";
24+import { matchEcosystemPost } from "../../lib/lib";
2325
2426export default function Ecosystem({
2527 search,
@@ -36,10 +38,15 @@ export default function Ecosystem({
3638
3739 const { type } = router.query;
3840
41+ // Route ?type=archive to below component;
42+ // otherwise, show directory of ecosystem type
43+ // If no param, we show the spotlight for the month
3944 if (type === "archive") {
4045 return <SpotlightArchive posts={posts} search={search} />;
4146 }
4247
48+ const spotlight = type === undefined;
49+
4350 let title;
4451 if (type) {
4552 switch (type) {
@@ -91,21 +98,19 @@ export default function Ecosystem({
9198 </Sidebar>
9299 <div
93100 className={classnames("w-full", {
94− "max-w-prose": type === undefined,
101+ "max-w-prose": spotlight,
95102 })}
96103 >
97− {type === undefined && (
98− <h3>{`Ecosystem Spotlight - ${post.title}`}</h3>
99− )}
100− {type === undefined && (
104+ {/* Default layout */}
105+ {spotlight && (
101106 <>
107+ <h3>{`Ecosystem Spotlight - ${post.title}`}</h3>
102108 <Post post={post} />
103109 <Link href="/ecosystem/?type=archive" passHref>
104110 <a className="button-lg bg-wall-600 text-white w-fit">
105111 Spotlight Archive
106112 </a>
107113 </Link>
108−
109114 <div className="pt-36">
110115 <h3 className="pb-2">Urbit Monthly</h3>
111116 <p className="pb-8">
@@ -116,126 +121,36 @@ export default function Ecosystem({
116121 </div>
117122 </>
118123 )}
119−
124+ {/* Ecosystem type layouts */}
120125 <div
121126 className={classnames("grid gap-12 w-full", {
122127 "grid-cols-2 md:grid-cols-3": type == "organizations" || type == "marketplaces",
123128 "grid-cols-1": type === "podcasts" || type === "articles",
124129 "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2":
125130 type === "applications" || type === "groups",
126− hidden: type === undefined,
131+ hidden: spotlight,
127132 })}
128133 >
129134 {type === "organizations" &&
130− organizations.map((org) => (
131− <Link href={`/organizations/${org.slug}`}>
132− <div className="flex flex-col space-y-4 items-center cursor-pointer hover:opacity-90">
133− <img className="w-36 rounded-xl" src={org.image} />
134− <p className="text-center font-bold">{org.title}</p>
135− </div>
136− </Link>
137− ))}
135+ <Organizations dir={organizations} />
136+ }
138137
139138 {type === "applications" &&
140− applications.map((app) => (
141− <Link href={`/applications/${app.ship}/${app.slug}`}>
142− <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
143− <div
144− className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
145− style={{
146− backgroundColor: app?.bgColor || "rgba(0,0,0,0)",
147− }}
148− >
149− {app?.image && (
150− <img
151− className="items-center h-36 w-36"
152− src={app.image}
153− />
154− )}
155− </div>
156− <div className="">
157− <p className="text-left font-bold">{app.title}</p>
158− <p className="text-left text-wall-400 font-light">
159− {app.description}
160− </p>
161− </div>
162− </div>
163− </Link>
164− ))}
139+ <Applications dir={applications} />
140+ }
165141 {type === "groups" &&
166− groups.map((group) => (
167− <Link href={`/groups/${group.ship}/${group.slug}`}>
168− <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
169− <div
170− className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
171− style={{
172− backgroundColor: group?.tile?.startsWith("#")
173− ? group?.tile
174− : "rgba(0,0,0,0)",
175− }}
176− >
177− {!group?.tile?.startsWith("#") && (
178− <img
179− className="items-center h-36 w-36"
180− src={group.tile}
181− />
182− )}
183− </div>
184− <div className="">
185− <p className="text-left font-bold">{group.title}</p>
186− <p className="text-left text-wall-400 font-light">
187− {group.description}
188− </p>
189− </div>
190− </div>
191− </Link>
192− ))}
142+ <Groups dir={groups} />
143+ }
193144 {type === "marketplaces" &&
194− marketplaces.map((market) => (
195− <Link href={`/marketplaces/${market.slug}`}>
196− <div className="flex flex-col space-y-4 justify-center items-center cursor-pointer hover:opacity-90">
197− <img className="w-36 rounded-xl" src={market.image} />
198− <p className="text-center font-bold">{market.title}</p>
199− </div>
200− </Link>
201− ))}
145+ <Marketplaces dir={marketplaces} />
146+ }
202147 {type === "podcasts" &&
203− podcasts.map((pod) => (
204− <Link href={`/podcasts/${pod.slug}`}>
205− <div className="flex cursor-pointer space-x-4 items-center hover:opacity-90">
206− <img className="w-28" src={pod.image} />
207− <div className="flex flex-col space-y-2 min-w-0">
208− <p className="font-bold">{pod.podcast}</p>
209− <p className="min-w-0 min-h-0 leading-5 ">
210− {pod.title}
211− </p>
212− <p className="text-wall-400">
213− {formatDate(generateDisplayDate(pod.date))}
214− </p>
215− </div>
216− </div>
217− </Link>
218− ))}
148+ <Podcasts dir={podcasts} />
149+ }
219150
220151 {type === "articles" &&
221− articles.map((article) => (
222− <Link href={`/articles/${article.slug}`}>
223− <div className="flex cursor-pointer space-x-4 items-center hover:opacity-90">
224− <img className="w-28" src={article.image} />
225− <div className="flex flex-col space-y-2 min-w-0">
226− <p className="font-bold">{article.publication}</p>
227− <p className="min-w-0 min-h-0 leading-5 ">
228− {article.title}
229− </p>
230− <p className="text-wall-400">
231− {formatDate(generateDisplayDate(article.date))}
232− </p>
233− </div>
234− </div>
235− </Link>
236− ))}
237−
238−
152+ <Articles dir={articles} />
153+ }
239154 </div>
240155 </div>
241156 </div>
@@ -246,153 +161,136 @@ export default function Ecosystem({
246161 );
247162}
248163
249−function ActiveLink({ children, href, className, currentPath }) {
250− // special casing this behaviour which overloads one nav
251− const archive = Boolean(
252− currentPath === "/ecosystem?type=archive" && href === "/ecosystem"
253− );
254− const activeClassName = classnames({
255− "text-wall-800": currentPath === href || archive,
256− "text-wall-400": currentPath !== href && !archive,
257− });
258−
259− return (
260− <Link href={href} passHref>
261− <a className={`${className} ${activeClassName}`}>{children}</a>
164+const Organizations = ({ dir }) => {
165+ return dir.map((org) => (
166+ <Link href={`/organizations/${org.slug}`}>
167+ <div className="flex flex-col space-y-4 items-center cursor-pointer hover:opacity-90">
168+ <img className="w-36 rounded-xl" src={org.image} />
169+ <p className="text-center font-bold">{org.title}</p>
170+ </div>
262171 </Link>
263− );
172+ ))
264173}
265174
266−function EcosystemSidebar() {
267− const router = useRouter();
268− let currentPath = router.asPath;
269− return (
270− <div className="flex flex-col space-y-4 pr-24">
271− <ActiveLink
272− currentPath={currentPath}
273− className="type-ui"
274− href="/ecosystem"
275− >
276− Spotlight
277− </ActiveLink>
278− <ActiveLink
279− currentPath={currentPath}
280− className="type-ui"
281− href="/ecosystem?type=organizations"
282− >
283− Organizations
284− </ActiveLink>
285− <ActiveLink
286− currentPath={currentPath}
287− className="type-ui"
288− href="/ecosystem?type=applications"
289− >
290− Applications
291− </ActiveLink>
292− <ActiveLink
293− currentPath={currentPath}
294− className="type-ui"
295− href="/ecosystem?type=groups"
296− >
297− Groups
298− </ActiveLink>
299− <ActiveLink
300− currentPath={currentPath}
301− className="type-ui"
302− href="/ecosystem?type=marketplaces"
303− >
304− Marketplaces
305− </ActiveLink>
306− <ActiveLink
307− currentPath={currentPath}
308− className="mr-5 type-ui"
309− href="/ecosystem?type=podcasts"
310− >
311− Podcasts
312− </ActiveLink>
175+const Applications = ({ dir }) => {
176+ return dir.map((app) => (
177+ <Link href={`/applications/${app.ship}/${app.slug}`}>
178+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
179+ <div
180+ className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
181+ style={{
182+ backgroundColor: app?.bgColor || "rgba(0,0,0,0)",
183+ }}
184+ >
185+ {app?.image && (
186+ <img
187+ className="items-center h-36 w-36"
188+ src={app.image}
189+ />
190+ )}
191+ </div>
192+ <div className="">
193+ <p className="text-left font-bold">{app.title}</p>
194+ <p className="text-left text-wall-400 font-light">
195+ {app.description}
196+ </p>
197+ </div>
198+ </div>
199+ </Link>
200+ ))
201+}
313202
314− <ActiveLink
315− currentPath={currentPath}
316− className="mr-5 type-ui"
317− href="/ecosystem?type=articles"
318− >
319− Articles
320− </ActiveLink>
203+const Groups = ({ dir }) => {
204+ return dir.map((group) => (
205+ <Link href={`/groups/${group.ship}/${group.slug}`}>
206+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
207+ <div
208+ className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
209+ style={{
210+ backgroundColor: group?.tile?.startsWith("#")
211+ ? group?.tile
212+ : "rgba(0,0,0,0)",
213+ }}
214+ >
215+ {!group?.tile?.startsWith("#") && (
216+ <img
217+ className="items-center h-36 w-36"
218+ src={group.tile}
219+ />
220+ )}
221+ </div>
222+ <div className="">
223+ <p className="text-left font-bold">{group.title}</p>
224+ <p className="text-left text-wall-400 font-light">
225+ {group.description}
226+ </p>
227+ </div>
228+ </div>
229+ </Link>
230+ ))
231+}
321232
233+const Marketplaces = ({ dir }) => {
234+ return dir.map((market) => (
235+ <Link href={`/marketplaces/${market.slug}`}>
236+ <div className="flex flex-col space-y-4 justify-center items-center cursor-pointer hover:opacity-90">
237+ <img className="w-36 rounded-xl" src={market.image} />
238+ <p className="text-center font-bold">{market.title}</p>
239+ </div>
240+ </Link>
241+ ))
242+}
322243
323− </div>
324− );
244+const Podcasts = ({ dir }) => {
245+ return dir.map((pod) => (
246+ <Link href={`/podcasts/${pod.slug}`}>
247+ <div className="flex cursor-pointer space-x-4 items-center hover:opacity-90">
248+ <img className="w-28" src={pod.image} />
249+ <div className="flex flex-col space-y-2 min-w-0">
250+ <p className="font-bold">{pod.podcast}</p>
251+ <p className="min-w-0 min-h-0 leading-5 ">
252+ {pod.title}
253+ </p>
254+ <p className="text-wall-400">
255+ {formatDate(generateDisplayDate(pod.date))}
256+ </p>
257+ </div>
258+ </div>
259+ </Link>
260+ ))
325261}
326262
327−function SpotlightArchive({ posts, search }) {
328− const post = {
329− title: "Spotlight Archive",
330− description: "The archive of ecosystem spotlights.",
331− };
332− return (
333− <Container>
334− <Head>
335− <title>Archive • Spotlight • Urbit</title>
336− {Meta(post)}
337− </Head>
338− <IntraNav ourSite="https://urbit.org" search={search} />
339− <SingleColumn>
340− <Header search={search} />
341− <Section>
342− <div className="measure">
343− <h1>Ecosystem</h1>
344− </div>
345− </Section>
346− <Section className="flex">
347− <Sidebar>
348− <EcosystemSidebar />
349− </Sidebar>
350− <div>
351− <h3 className="mb-12">Spotlight Archive</h3>
352− {posts.map((post) => {
353− return (
354− <div key={post.slug} className="mb-24 cursor-pointer">
355− <Link href={`/ecosystem/spotlight/${post.slug}`}>
356− <div>
357− <h3 className="text-green-400">{post.title}</h3>
358− <div className="type-ui mt-2">
359− {["featured-1", "featured-2", "featured-3"].map(
360− (feat, i) => {
361− if (post?.[feat]) {
362− return (
363− <>
364− {i ? ", " : ""}
365− <span>{post[feat].title}</span>
366− </>
367− );
368− }
369− }
370− )}
371− </div>
372− </div>
373− </Link>
374− </div>
375− );
376− })}
377− </div>
378− </Section>
379− </SingleColumn>
380− <Footer />
381− </Container>
382− );
263+const Articles = ({ dir }) => {
264+ return dir.map((article) => (
265+ <Link href={`/articles/${article.slug}`}>
266+ <div className="flex cursor-pointer space-x-4 items-center hover:opacity-90">
267+ <img className="w-28" src={article.image} />
268+ <div className="flex flex-col space-y-2 min-w-0">
269+ <p className="font-bold">{article.publication}</p>
270+ <p className="min-w-0 min-h-0 leading-5 ">
271+ {article.title}
272+ </p>
273+ <p className="text-wall-400">
274+ {formatDate(generateDisplayDate(article.date))}
275+ </p>
276+ </div>
277+ </div>
278+ </Link>
279+ ))
383280}
384281
385−export async function getStaticProps({}) {
282+
283+export async function getStaticProps() {
386284 const posts = getAllPosts(
387285 ["title", "date", "slug", "featured-1", "featured-2", "featured-3"],
388286 "ecosystem/spotlight",
389287 "date"
390288 );
391− let post = getAllPosts(
289+ const post = matchEcosystemPost(getAllPosts(
392290 ["title", "date", "featured-1", "featured-2", "featured-3"],
393291 "ecosystem/spotlight",
394292 "date"
395− )[0];
293+ )[0]);
396294 const marketplaces = getAllPosts(["title", "image", "slug"], "marketplaces");
397295 const podcasts = getAllPosts(
398296 ["title", "image", "date", "podcast", "slug"],
@@ -447,27 +345,6 @@ export async function getStaticProps({}) {
447345 return nameA < nameB ? -1 : 1;
448346 });
449347
450− ["featured-1", "featured-2", "featured-3"].forEach((feat) => {
451− if (post?.[feat]) {
452− const matchedPost = [
453− ...applications.map((e) => ({ ...e, type: "Application" })),
454− ...organizations.map((e) => ({ ...e, type: "Organization" })),
455− ...groups.map((e) => ({ ...e, type: "Group" })),
456− ...podcasts.map((e) => ({ ...e, type: "Podcast" })),
457− ...articles.map((e) => ({ ...e, type: "Article" })),
458− ...marketplaces.map((e) => ({ ...e, type: "Marketplace" })),
459− ].filter((e) => e.title === post[feat].title)?.[0];
460− post[feat].image = post[feat]?.image || matchedPost?.image || null;
461− post[feat].type = matchedPost?.type || "Podcast";
462− post[feat].matchedPost = matchedPost || null;
463− post[feat].content = JSON.stringify(
464− Markdown.parse({
465− post: { content: post[feat].content },
466− })
467− );
468− }
469− });
470−
471348 return {
472349 props: {
473350 posts,