From 0338fb098e39e21af1868274bbdf82623acc9225 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus@lifeitself.us>
Date: Thu, 6 Jun 2024 16:29:58 +0000
Subject: [PATCH] [#315,ecosystem/cohere][s]: get basic landing page for cohere
 by copy paste of pip stuff.

---
 layouts/cohere.tsx         | 113 +++++++++++++++++++++++++++++++++++++
 lib/computeFields.ts       |   1 +
 pages/ecosystem/cohere.tsx |  77 +++++++++++++++++++++++++
 3 files changed, 191 insertions(+)
 create mode 100644 layouts/cohere.tsx
 create mode 100644 pages/ecosystem/cohere.tsx

diff --git a/layouts/cohere.tsx b/layouts/cohere.tsx
new file mode 100644
index 00000000..b2cec725
--- /dev/null
+++ b/layouts/cohere.tsx
@@ -0,0 +1,113 @@
+// @ts-nocheck
+import {
+    GlobeAltIcon,
+    LocationMarkerIcon,
+    UserCircleIcon,
+    BriefcaseIcon,
+    HashtagIcon
+} from '@heroicons/react/solid';
+
+export default function Profile({ children, ...frontMatter }) {
+    // const { title, url, locations, people, topic, activity, image } = frontMatter;
+    const { title, url, locations, people, topic, activity } = frontMatter;
+    const image = frontMatter.logo.cached_new;
+
+    return (
+        <div className="max-w-2xl mx-auto pb-16 pt-10 px-4 sm:pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
+            <div className="mt-4">
+                <h1 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+                    {title}
+                </h1>
+            </div>
+            <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
+                {/* details */}
+                <div className="lg:max-w-lg lg:self-end text-gray-500">
+                    <div className="flex flex-col mt-6 gap-y-3 not-prose">
+                        {url && (
+                            <div className="flex flex-row">
+                                <GlobeAltIcon className="h-5 w-5" />
+                                <ul className=" ml-2 text-sm">
+                                    <a href={url} className="underline">
+                                        {url}
+                                    </a>
+                                </ul>
+                            </div>
+                        )}
+                        {locations?.length > 0 && (
+                            <div className="flex flex-row">
+                                <LocationMarkerIcon className="h-5 w-5" title="Locations" />
+                                <ul className=" ml-2 text-sm text-gray-500">
+                                    {locations.map((value, index) => {
+                                        return (
+                                            <li key={index} className="inline-block mr-2">
+                                                {value}
+                                            </li>
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        )}
+                        {people?.length > 0 && (
+                            <div className="flex flex-row">
+                                <UserCircleIcon className="h-5 w-5" />
+                                <ul className="ml-2 text-sm text-gray-500 capitalize">
+                                    {people.map((value, index) => {
+                                        return (
+                                            <li key={index} className="inline-block mr-2">
+                                                {value + (index === people.length - 1 ? '' : ',')}
+                                            </li>
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        )}
+                        {activity?.length > 0 && (
+                            <div className="flex flex-row">
+                                <BriefcaseIcon className="h-5 w-5" />
+                                <ul className="ml-2 text-sm text-gray-500 capitalize">
+                                    {activity.map((value, index) => {
+                                        return (
+                                            <li key={index} className="inline-block mr-2">
+                                                {value + (index === activity.length - 1 ? '' : ',')}
+                                            </li>
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        )}
+                        {topic?.length > 0 && (
+                            <div className="flex flex-row">
+                                <HashtagIcon className="h-5 w-5" />
+                                <ul className="ml-2 text-sm text-gray-500 capitalize">
+                                    {topic.map((value, index) => {
+                                        return (
+                                            <li key={index} className="inline-block mr-2">
+                                                {value + (index === topic.length - 1 ? '' : ',')}
+                                            </li>
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        )}
+                    </div>
+                    <section aria-labelledby="information-heading" className="mt-4">
+                        <h2 id="information-heading" className="sr-only">
+                            Organization information
+                        </h2>
+                        <div className="mt-6 space-y-6 text-base text-gray-500">{children}</div>
+                    </section>
+                </div>
+                {/* image */}
+                <div className="mt-10 lg:mt-0 row-span-2">
+                    <div className="aspect-w-1 aspect-h-1 rounded-lg overflow-hidden">
+                        <img
+                            src={image}
+                            alt={title}
+                            className="w-full h-full object-center object-cover"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/lib/computeFields.ts b/lib/computeFields.ts
index 0e9c44c7..5f7d5a2d 100644
--- a/lib/computeFields.ts
+++ b/lib/computeFields.ts
@@ -42,6 +42,7 @@ const computeFields = async ({
     if (frontMatter.layout) return frontMatter.layout;
     if (urlPath.startsWith("blog/")) return "blog";
     if (urlPath.includes("ecosystem/pip/profiles")) return "profile";
+    if (urlPath.includes("ecosystem/cohere/profiles")) return "cohere";
     // if (urlPath.startsWith("docs/")) return "docs";
     return "docs"; // TODO default layout from config?
   })();
diff --git a/pages/ecosystem/cohere.tsx b/pages/ecosystem/cohere.tsx
new file mode 100644
index 00000000..dd6deea1
--- /dev/null
+++ b/pages/ecosystem/cohere.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { GetStaticProps, GetStaticPropsResult } from "next";
+
+import clientPromise from "@/lib/mddb.mjs";
+
+import ProfileSearch from "@/components/custom/ProfileSearch"
+import MdxComponent from "@/components/MdxComponent";
+
+import type { CustomAppProps } from "../_app";
+import { hasRequiredProfileFields } from "@/lib/temp/hasRequiredProfileFields";
+
+
+interface Props extends CustomAppProps {
+    profiles: any; // TODO: type
+    topics: any; // TODO: type
+}
+
+const HomePage: React.FC<Props> = ({ profiles, topics }) => {
+    return (
+        <>
+            <div className="prose mx-auto max-w-xl">
+            {profiles.map((profile: any, idx)  => (
+                <p>{profile.title}</p>
+            ))}
+            </div>
+            <div id="profiles" className="mt-12 sm:mt-24 prose max-w-5xl mx-auto">
+                <h1 className="text-center">
+                    Directory
+                </h1>
+                <div className="text-center py-5">Explore the directory of organizations, communities, and initiatives who are active in or close to the ecosystem.</div>
+                <ProfileSearch profiles={profiles} />
+            </div>
+        </>
+    );
+}
+
+export const getStaticProps: GetStaticProps = async (): Promise<
+    GetStaticPropsResult<Props>
+> => {
+
+    const mddb = await clientPromise;
+
+    // TODO: this should really be a library function ...
+    const profileFiles = await mddb.getFiles({ folder: "ecosystem/cohere/profiles" });
+    const profiles = profileFiles.reduce((acc, file) => {
+        acc.push({
+            ...file.metadata,
+            image: file.metadata.image?.url ?? file.metadata.image,
+            urlPath: '/' + file.url_path,
+        });
+        return acc;
+    }, []);
+
+    const topicFiles = await mddb.getFiles({ folder: "topics" });
+    const topics = topicFiles.map((file) => {
+        return {
+            ...file.metadata,
+            urlPath: file.url_path,
+        };
+    });
+
+    return {
+        props: {
+            meta: {
+                urlPath: "/",
+                showToc: false,
+                showEditLink: false,
+                showSidebar: false,
+                showComments: false,
+            },
+            profiles,
+            topics,
+        },
+    };
+};
+
+export default HomePage;