chore(website): remove static generation (#29)

#### What this PR does / why we need it:

Remove static generation for website.

package.json

@@ -27,7 +27,7 @@
     "turbo": "^1.10.16",
     "typescript": "5.2.2"
   },
-  "packageManager": "pnpm@8.10.4",
+  "packageManager": "pnpm@8.10.5",
   "engines": {
     "node": "^18 <19",
     "pnpm": "^8 <9"

website/app/[caip2]/[asset]/page.tsx

@@ -1,33 +1,17 @@
-import {
-  FrontmatterIndex,
-  getFrontmatterContent,
-  getFrontmatterIndexArray,
-  getInstalledFrontmatterCollection,
-} from 'crypto-frontmatter';
+import { FrontmatterContent, FrontmatterIndex, getFrontmatterContent } from 'crypto-frontmatter';
 import { Metadata } from 'next';
+import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { ReactElement } from 'react';
+import { Highlighter } from 'shiki';
 
 import { ContentedProse } from '@/components/contented/ContentedProse';
-import { FrontmatterImage } from '@/components/contented/FrontmatterImage';
 import { loadHighlighter, ShikiHighlighter } from '@/components/contented/ShikiHighlighter';
 
 function asCaip19(caip2: string, asset: string): string {
   return `${decodeURIComponent(caip2)}/${decodeURIComponent(asset)}`;
 }
 
-export async function generateStaticParams(): Promise<Parameters<typeof Page>[0]['params'][]> {
-  const params: Parameters<typeof Page>[0]['params'][] = [];
-  const collections = await getInstalledFrontmatterCollection();
-  for (const { caip2, namespace } of collections) {
-    for (const index of await getFrontmatterIndexArray(caip2, namespace)) {
-      const [caip2, asset] = index.path.split('/');
-      params.push({ caip2, asset });
-    }
-  }
-  return params;
-}
-
 export async function generateMetadata(props: Parameters<typeof Page>[0]): Promise<Metadata> {
   const baseUrl = process.env.BASE_URL!;
   const caip19 = asCaip19(props.params.caip2, props.params.asset);
@@ -60,44 +44,57 @@ export default async function Page(props: {
   };
 }): Promise<ReactElement> {
   const caip19 = asCaip19(props.params.caip2, props.params.asset);
-  const frontmatterContent = await getFrontmatterContent(caip19);
-  if (frontmatterContent === undefined) {
+  const content = await getFrontmatterContent(caip19);
+  if (content === undefined) {
     return notFound();
   }
 
-  const highlighter = await loadHighlighter();
+  const image = content.fields.images?.find((image) => image.type === 'logo');
 
   return (
     <main className="flex h-full min-w-0 flex-grow flex-col">
       <div className="flex-auto pb-48">
-        <div className="mb-6 h-12 w-12">
-          <FrontmatterImage frontmatter={frontmatterContent} type="logo" />
-        </div>
+        {image !== undefined && (
+          <div className="mb-6 h-12 w-12">
+            <Image
+              src={`/crypto-frontmatter/${image.path}`}
+              alt={`${content.fields.symbol} Logo`}
+              width={image.size.width}
+              height={image.size.height}
+            />
+          </div>
+        )}
 
-        <ContentedProse html={frontmatterContent.html} />
+        <ContentedProse html={content.html} />
 
-        <div className="border-mono-800 group/json mt-8 rounded border">
-          <header className="bg-mono-950 text-mono-500 relative flex items-center justify-between rounded-t border-b px-4 py-2 text-sm">
-            <div>Frontmatter.json</div>
-            <div>
-              <button>
-                <div className="block group-focus-within/json:hidden">▲</div>
-                <div className="hidden group-focus-within/json:block">▼</div>
-              </button>
-              <span className="absolute inset-0 hidden cursor-pointer group-focus-within/json:block" />
-            </div>
-          </header>
+        <FrontmatterJson content={content} highlighter={await loadHighlighter()} />
+      </div>
+    </main>
+  );
+}
 
-          <div tabIndex={1}>
-            <ShikiHighlighter
-              className="max-h-40 overflow-hidden px-4 py-3 text-sm group-focus-within/json:max-h-full group-focus-within/json:overflow-x-auto"
-              highlighter={highlighter}
-              code={JSON.stringify(frontmatterContent, null, 2)}
-              language="json"
-            />
-          </div>
+function FrontmatterJson(props: { content: FrontmatterContent; highlighter: Highlighter }): ReactElement {
+  return (
+    <div className="border-mono-800 group/json mt-8 rounded border">
+      <header className="bg-mono-950 text-mono-500 relative flex items-center justify-between rounded-t border-b px-4 py-2 text-sm">
+        <div>Frontmatter.json</div>
+        <div>
+          <button>
+            <div className="block group-focus-within/json:hidden">▲</div>
+            <div className="hidden group-focus-within/json:block">▼</div>
+          </button>
+          <span className="absolute inset-0 hidden cursor-pointer group-focus-within/json:block" />
         </div>
+      </header>
+
+      <div tabIndex={1}>
+        <ShikiHighlighter
+          className="max-h-40 overflow-hidden px-4 py-3 text-sm group-focus-within/json:max-h-full group-focus-within/json:overflow-x-auto"
+          highlighter={props.highlighter}
+          code={JSON.stringify(props.content, null, 2)}
+          language="json"
+        />
       </div>
-    </main>
+    </div>
   );
 }