git.iko.soy/urbit.org
on master help sign in
ecosystem: fall back to colours
d9b355fMatilde Park
components/ecosystem/IndexCard.js+5−2
compare with master
unifiedsplit
@@ -13,8 +13,11 @@ export default function IndexCard({ slug, feat }) {
13 />
13 />
14 ) : (
14 ) : (
15 <div
15 <div
16− className="bg-wall-200 rounded-xl w-full flex-1"
16+ className="rounded-xl w-full flex-1"
17+ style={{
17− style={{ aspectRatio: "4 / 3" }}
18+ aspectRatio: "4 / 3",
19+ backgroundColor: feat?.matchedPost?.bgColor || "rgba(0,0,0,0)",
20+ }}
18 />
21 />
19 )}
22 )}
20 <div className="grow-1 shrink-0 flex flex-col h-full min-h-0 pt-4">
23 <div className="grow-1 shrink-0 flex flex-col h-full min-h-0 pt-4">
components/ecosystem/Post.js+56−35
@@ -11,47 +11,68 @@ export default function Post({ post }) {
11 ? `/${post[feat].matchedPost.type.toLowerCase()}s/${childPath}`
11 ? `/${post[feat].matchedPost.type.toLowerCase()}s/${childPath}`
12 : null;
12 : null;
13 return post?.[feat] ? (
13 return post?.[feat] ? (
14− <div
14+ <div
15− className="mt-8 mb-24"
15+ className="mt-8 mb-24"
16− id={post?.[feat].title.toLowerCase().replace(/ /, "-")}
16+ id={post?.[feat].title.toLowerCase().replace(/ /, "-")}
17− >
17+ >
18− <div className="flex space-x-4 items-center">
18+ <div className="flex space-x-4 items-center">
19+ <div
20+ className="h-24 w-24 rounded-xl items-center justify-center shrink-0 overflow-hidden"
21+ style={{
22+ backgroundColor:
23+ post[feat]?.matchedPost?.bgColor || "rgba(0,0,0,0)",
24+ }}
25+ >
26+ {post[feat]?.image && (
19− <img
27+ <img
20− className="rounded-xl w-24 object-cover"
28+ className="rounded-xl w-24 object-cover"
21− src={post[feat].image}
29+ src={post[feat].image}
22− />
30+ />
23− <div className="flex flex-col">
31+ )}
24− <h4 className="text-xl pb-2 leading-6 font-bold">{post?.[feat].title}</h4>
25− {badge(post[feat].type)}
26− </div>
27 </div>
32 </div>
28− <div className="markdown mt-8 mb-8">
33+ <div className="flex flex-col">
29− <Markdown.render content={JSON.parse(post[feat].content)} />
34+ <h4 className="text-xl pb-2 leading-6 font-bold">
35+ {post?.[feat].title}
36+ </h4>
37+ {badge(post[feat].type)}
30 </div>
38 </div>
39+ </div>
40+ <div className="markdown mt-8 mb-8">
41+ <Markdown.render content={JSON.parse(post[feat].content)} />
42+ </div>
31
43
44+ {post[feat].type === "Podcast" && (
45+ <Link href={href || "#"} passHref>
46+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
47+ Listen to {post[feat].type}
48+ </a>
49+ </Link>
50+ )}
32
51
33− {post[feat].type === "Podcast" &&
34− (<Link href={href || "#"} passHref>
35− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">Listen to {post[feat].type}</a>
36− </Link>)}
37−
38− {post[feat].type === "Application" &&
52+ {post[feat].type === "Application" && (
39− (<Link href={href || "#"} passHref>
53+ <Link href={href || "#"} passHref>
40− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">View {post[feat].type}</a>
54+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
41− </Link>)}
55+ View {post[feat].type}
42−
56+ </a>
43− {post[feat].type === "Organization" &&
44− (<Link href={href || "#"} passHref>
45− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">More about {post[feat].title}</a>
46− </Link>)}
57+ </Link>
47−
58+ )}
48− {post[feat].type === "Marketplace" &&
49− (<Link href={href || "#"} passHref>
50− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">More about {post[feat].title}</a>
51− </Link>)}
52
59
53− </div>
60+ {post[feat].type === "Organization" && (
61+ <Link href={href || "#"} passHref>
62+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
63+ More about {post[feat].title}
64+ </a>
65+ </Link>
66+ )}
54
67
68+ {post[feat].type === "Marketplace" && (
69+ <Link href={href || "#"} passHref>
70+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
71+ More about {post[feat].title}
72+ </a>
73+ </Link>
74+ )}
75+ </div>
55 ) : null;
76 ) : null;
56 });
77 });
57}
78}
pages/ecosystem/index.js+3−2
@@ -112,7 +112,8 @@ export default function Ecosystem({
112 className={classnames("grid gap-12 w-full", {
112 className={classnames("grid gap-12 w-full", {
113 "grid-cols-2 md:grid-cols-3": type !== "podcasts",
113 "grid-cols-2 md:grid-cols-3": type !== "podcasts",
114 "grid-cols-1": type === "podcasts",
114 "grid-cols-1": type === "podcasts",
115− "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2": type === "applications",
115+ "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2":
116+ type === "applications",
116 hidden: type === undefined,
117 hidden: type === undefined,
117 })}
118 })}
118 >
119 >
@@ -356,7 +357,7 @@ export async function getStaticProps({}) {
356 ...podcasts.map((e) => ({ ...e, type: "Podcast" })),
357 ...podcasts.map((e) => ({ ...e, type: "Podcast" })),
357 ...marketplaces.map((e) => ({ ...e, type: "Marketplace" })),
358 ...marketplaces.map((e) => ({ ...e, type: "Marketplace" })),
358 ].filter((e) => e.title === post[feat].title)?.[0];
359 ].filter((e) => e.title === post[feat].title)?.[0];
359− post[feat].image = post[feat].image || matchedPost?.image;
360+ post[feat].image = post[feat]?.image || matchedPost?.image || null;
360 post[feat].type = matchedPost?.type || "Podcast";
361 post[feat].type = matchedPost?.type || "Podcast";
361 post[feat].matchedPost = matchedPost || null;
362 post[feat].matchedPost = matchedPost || null;
362 post[feat].content = JSON.stringify(
363 post[feat].content = JSON.stringify(
pages/index.js+3−1
@@ -318,8 +318,10 @@ export async function getStaticProps() {
318 ...podcasts.map((e) => ({ ...e, type: "Podcast" })),
318 ...podcasts.map((e) => ({ ...e, type: "Podcast" })),
319 ...marketplaces.map((e) => ({ ...e, type: "Marketplace" })),
319 ...marketplaces.map((e) => ({ ...e, type: "Marketplace" })),
320 ].filter((e) => e.title === ecosystem[feat].title)?.[0];
320 ].filter((e) => e.title === ecosystem[feat].title)?.[0];
321+ ecosystem[feat].image =
321− ecosystem[feat].image = ecosystem[feat].image || matchedPost?.image;
322+ ecosystem[feat].image || matchedPost?.image || null;
322 ecosystem[feat].type = matchedPost?.type || "Podcast";
323 ecosystem[feat].type = matchedPost?.type || "Podcast";
324+ ecosystem[feat].matchedPost = matchedPost || null;
323 }
325 }
324 });
326 });
325
327