@@ -32,7 +32,8 @@ export default function Ecosystem({
3232 marketplaces,
3333 organizations,
3434 podcasts,
35− articles
35+ articles,
36+ communities
3637}) {
3738 const router = useRouter();
3839
@@ -53,6 +54,9 @@ export default function Ecosystem({
5354 case "applications":
5455 title = "Applications • Ecosystem";
5556 break;
57+ case "communities":
58+ title = "Communities • Ecosystem";
59+ break;
5660 case "applications":
5761 title = "Groups • Ecosystem";
5862 break;
@@ -124,10 +128,9 @@ export default function Ecosystem({
124128 {/* Ecosystem type layouts */}
125129 <div
126130 className={classnames("grid gap-12 w-full", {
127− "grid-cols-2 md:grid-cols-3": type == "organizations" || type == "marketplaces",
128131 "grid-cols-1": type === "podcasts" || type === "articles",
129132 "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2":
130− type === "applications" || type === "groups",
133+ type === "applications" || type === "groups" || type === "communities" || type === "organizations" || type === "marketplaces",
131134 hidden: spotlight,
132135 })}
133136 >
@@ -138,6 +141,9 @@ export default function Ecosystem({
138141 {type === "applications" &&
139142 <Applications dir={applications} />
140143 }
144+ {type === "communities" &&
145+ <Communities dir={communities} />
146+ }
141147 {type === "groups" &&
142148 <Groups dir={groups} />
143149 }
@@ -161,16 +167,6 @@ export default function Ecosystem({
161167 );
162168}
163169
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>
171− </Link>
172− ))
173−}
174170
175171const Applications = ({ dir }) => {
176172 return dir.map((app) => (
@@ -230,16 +226,6 @@ const Groups = ({ dir }) => {
230226 ))
231227}
232228
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−}
243229
244230const Podcasts = ({ dir }) => {
245231 return dir.map((pod) => (
@@ -279,6 +265,74 @@ const Articles = ({ dir }) => {
279265 ))
280266}
281267
268+const Communities = ({ dir }) => {
269+ return dir.map((community) => (
270+ <Link href={`/communities/${community.slug}`}>
271+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
272+ <div className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden">
273+ <img
274+ className="items-center h-36 w-36"
275+ src={community.image}
276+ />
277+ </div>
278+ <div className="">
279+ <p className="text-left font-bold">{community.title}</p>
280+ <p className="text-left text-wall-400 font-light">
281+ {community.description}
282+ </p>
283+ </div>
284+ </div>
285+ </Link>
286+ ))
287+}
288+
289+
290+const Marketplaces = ({ dir }) => {
291+ return dir.map((market) => (
292+ <Link href={`/marketplaces/${market.slug}`}>
293+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
294+ <div className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden">
295+ <img
296+ className="items-center h-36 w-36"
297+ src={market.image}
298+ />
299+ </div>
300+ <div className="">
301+ <p className="text-left font-bold">{market.title}</p>
302+ <p className="text-left text-wall-400 font-light">
303+ {market.description}
304+ </p>
305+ </div>
306+ </div>
307+ </Link>
308+ ))
309+}
310+
311+const Organizations = ({ dir }) => {
312+ return dir.map((org) => (
313+ <Link href={`/organizations/${org.slug}`}>
314+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
315+ <div className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden">
316+ <img
317+ className="items-center h-36 w-36"
318+ src={org.image}
319+ />
320+ </div>
321+ <div className="">
322+ <p className="text-left font-bold">{org.title}</p>
323+ <p className="text-left text-wall-400 font-light">
324+ {org.description}
325+ </p>
326+ </div>
327+ </div>
328+ </Link>
329+ ))
330+}
331+
332+
333+
334+
335+
282336
283337export async function getStaticProps() {
284338 const posts = getAllPosts(
@@ -292,6 +346,7 @@ export async function getStaticProps() {
292346 "date"
293347 )[0]);
294348 const marketplaces = getAllPosts(["title", "image", "slug"], "marketplaces");
349+ const communities = getAllPosts(["title", "image", "slug", "description"], "communities");
295350 const podcasts = getAllPosts(
296351 ["title", "image", "date", "podcast", "slug"],
297352 "podcasts",
@@ -354,7 +409,8 @@ export async function getStaticProps() {
354409 marketplaces,
355410 podcasts,
356411 organizations,
357− articles
412+ articles,
413+ communities
358414 },
359415 };
360416}