[#315,ecosystem/cohere][s]: get basic landing page for cohere by copy…

… paste of pip stuff.

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>
+    );
+}

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?
   })();

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;