generate opengraph previews for components

package.json

@@ -65,7 +65,9 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.43.9",
         "react-singleton-hook": "^3.1.1",
+        "remark": "^14.0.3",
         "rudder-sdk-js": "^2.36.0",
+        "strip-markdown": "^5.0.1",
         "styled-components": "^5.3.6",
         "typescript": "5.0.4",
         "zustand": "^4.3.7"

src/pages/[componentAccountId]/widget/[componentName].tsx

@@ -1,14 +1,87 @@
+import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { remark } from 'remark';
+import strip from 'strip-markdown';
 
+import { MetaTags } from '@/components/MetaTags';
 import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
 import type { NextPageWithLayout } from '@/utils/types';
 
-const ViewComponentPage: NextPageWithLayout = () => {
+type ComponentMetaPreview = {
+  title: string;
+  description: string;
+  imageUrl: string | null;
+};
+
+type ComponentPayload = Record<string, { widget: Record<string, { '': string; metadata: ComponentMetadata }> }>;
+type ComponentMetadata = {
+  name: string;
+  description: string;
+  linktree: {
+    website: string;
+  };
+  image: ImageData;
+  tags: Record<string, string>;
+};
+
+type ImageData = {
+  ipfs_cid?: string;
+};
+
+function returnImageUrl(data: ImageData | undefined) {
+  if (data?.ipfs_cid) {
+    return `https://i.near.social/large/https://ipfs.near.social/ipfs/${data.ipfs_cid}`;
+  }
+  return null;
+}
+
+async function fetchPreviewData(accountId: string, componentName: string): Promise<ComponentMetaPreview | null> {
+  const response = await fetch(`https://api.near.social/get?keys=${accountId}/widget/${componentName}/**`);
+  const responseData: ComponentPayload = await response.json();
+  const metadata = responseData[accountId]?.widget?.[componentName]?.metadata;
+
+  if (!metadata) {
+    return null;
+  }
+
+  const strippedDescriptionVFile = await remark().use(strip).process(metadata.description);
+  // recommended conversion from remark docs
+  const strippedDescription = String(strippedDescriptionVFile);
+
+  return {
+    title: `${metadata.name} by ${accountId} on BOS`,
+    description: strippedDescription,
+    imageUrl: returnImageUrl(metadata.image),
+  };
+}
+
+export const getServerSideProps: GetServerSideProps<{
+  meta: ComponentMetaPreview | null;
+}> = async ({ params }) => {
+  const componentAccountId = params?.componentAccountId;
+  const componentName = params?.componentName;
+
+  if (typeof componentAccountId !== 'string' || typeof componentName !== 'string') {
+    return {
+      notFound: true,
+    };
+  }
+
+  const meta = await fetchPreviewData(componentAccountId, componentName);
+
+  return {
+    props: {
+      meta,
+    },
+  };
+};
+
+const ViewComponentPage: NextPageWithLayout = ({ meta }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const router = useRouter();
   const setComponentSrc = useCurrentComponentStore((store) => store.setSrc);
   const componentSrc = `${router.query.componentAccountId}/widget/${router.query.componentName}`;
@@ -25,27 +98,30 @@ const ViewComponentPage: NextPageWithLayout = () => {
   }, [router.query]);
 
   return (
-    <div className="container-xl">
-      <div className="row">
-        <div
-          className="d-inline-block position-relative overflow-hidden"
-          style={{
-            paddingTop: 'var(--body-top-padding)',
-          }}
-        >
-          <VmComponent
-            key={components.tosCheck}
-            src={components.tosCheck}
-            props={{
-              logOut: authStore.logOut,
-              targetProps: componentProps,
-              targetComponent: componentSrc,
-              tosName: components.tosContent,
+    <>
+      {meta && <MetaTags title={meta.title} description={meta.description} image={meta.imageUrl} />}
+      <div className="container-xl">
+        <div className="row">
+          <div
+            className="d-inline-block position-relative overflow-hidden"
+            style={{
+              paddingTop: 'var(--body-top-padding)',
             }}
-          />
+          >
+            <VmComponent
+              key={components.tosCheck}
+              src={components.tosCheck}
+              props={{
+                logOut: authStore.logOut,
+                targetProps: componentProps,
+                targetComponent: componentSrc,
+                tosName: components.tosContent,
+              }}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };