From e105efe6e7aee1397b465d65c6ad4a0e9bee3890 Mon Sep 17 00:00:00 2001
From: Fuxing Loh <git@fuxing.dev>
Date: Thu, 16 Nov 2023 20:57:37 +0800
Subject: [PATCH 1/2] chore(website): remove tracing and use fetch assets

---
 packages/crypto-frontmatter/src/cli.ts | 38 ++++++++++++++++++++------
 website/app/[caip2]/[asset]/page.tsx   | 24 ++++++----------
 website/next.config.mjs                |  5 ----
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/crypto-frontmatter/src/cli.ts b/packages/crypto-frontmatter/src/cli.ts
index 20418f795..2654ec8f6 100644
--- a/packages/crypto-frontmatter/src/cli.ts
+++ b/packages/crypto-frontmatter/src/cli.ts
@@ -3,27 +3,47 @@ import { join } from 'node:path';
 
 import { Command, Option, runExit } from 'clipanion';
 
-import { getFrontmatterIndexArray, getInstalledFrontmatterCollection, getNodeModulesPath } from './index';
+import {
+  FrontmatterCollection,
+  getFrontmatterIndexArray,
+  getInstalledFrontmatterCollection,
+  getNodeModulesPath,
+} from './index';
 
 export class MirrorCommand extends Command {
   static override paths = [[`mirror`]];
   private target = Option.String();
+  private include = Option.Array(`--include`, { required: false }) ?? ['index.json', 'frontmatter.json', 'images'];
+
+  private async mirrorFile(collection: FrontmatterCollection, file: string): Promise<void> {
+    const from = getNodeModulesPath(collection.caip2, collection.namespace, file);
+    const to = join(this.target, file);
+    await copyFile(from, to);
+  }
 
   async execute(): Promise<number | void> {
     await mkdir(this.target, { recursive: true });
 
-    const collections = await getInstalledFrontmatterCollection();
-    for (const collection of collections) {
+    for (const collection of await getInstalledFrontmatterCollection()) {
       let count = 0;
-      const indexArray = await getFrontmatterIndexArray(collection.caip2, collection.namespace);
 
-      for (const index of indexArray) {
-        for (const image of index.fields.images) {
-          const from = getNodeModulesPath(collection.caip2, collection.namespace, image.path);
-          const to = join(this.target, image.path);
-          await copyFile(from, to);
+      if (this.include.includes('index.json')) {
+        await this.mirrorFile(collection, 'index.json');
+        count++;
+      }
+
+      for (const index of await getFrontmatterIndexArray(collection.caip2, collection.namespace)) {
+        if (this.include.includes('frontmatter.json')) {
+          await this.mirrorFile(collection, index.fileId + '.json');
           count++;
         }
+
+        if (this.include.includes('images')) {
+          for (const image of index.fields.images) {
+            await this.mirrorFile(collection, image.path);
+            count++;
+          }
+        }
       }
 
       this.context.stdout.write(`Mirrored ${count} files for "${collection.caip2}/${collection.namespace}"\n`);
diff --git a/website/app/[caip2]/[asset]/page.tsx b/website/app/[caip2]/[asset]/page.tsx
index 6a5d6db72..a0d3ea096 100644
--- a/website/app/[caip2]/[asset]/page.tsx
+++ b/website/app/[caip2]/[asset]/page.tsx
@@ -1,4 +1,4 @@
-import { FrontmatterContent, getFrontmatterContent as getUsingFs } from 'crypto-frontmatter';
+import { computeFileId, FrontmatterContent } from 'crypto-frontmatter';
 import { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
@@ -7,22 +7,20 @@ import type { ReactElement } from 'react';
 import { ContentedProse } from '@/components/contented/ContentedProse';
 import { renderHighlighterHtml } from '@/components/contented/ShikiHighlighter';
 
-async function getFrontmatterContent(params: {
-  caip2: string;
-  asset: string;
-}): Promise<FrontmatterContent | undefined> {
+async function getFrontmatterContent(params: { caip2: string; asset: string }): Promise<FrontmatterContent> {
   const caip19 = `${decodeURIComponent(params.caip2)}/${decodeURIComponent(params.asset)}`;
-  return getUsingFs(caip19);
+  const fileId = computeFileId(caip19);
+  const response = await fetch(`${process.env.BASE_URL}/_crypto-frontmatter/${fileId}.json`);
+  if (!response.ok) {
+    return notFound();
+  }
+  return await response.json();
 }
 
 export async function generateMetadata(props: Parameters<typeof Page>[0]): Promise<Metadata> {
   const frontmatter = await getFrontmatterContent(props.params);
-  if (frontmatter === undefined) {
-    return notFound();
-  }
 
   const title = frontmatter.fields.title ?? frontmatter.fields.symbol;
-
   return {
     title: title,
     description: frontmatter.fields.description,
@@ -45,10 +43,6 @@ export default async function Page(props: {
   };
 }): Promise<ReactElement> {
   const frontmatter = await getFrontmatterContent(props.params);
-  if (frontmatter === undefined) {
-    return notFound();
-  }
-
   const image = frontmatter.fields.images?.find((image) => image.type === 'logo');
 
   return (
@@ -69,7 +63,7 @@ export default async function Page(props: {
 
         <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>frontmatter.json</div>
             <div>
               <button>
                 <div className="block group-focus-within/json:hidden">▲</div>
diff --git a/website/next.config.mjs b/website/next.config.mjs
index dd253670c..a847bf5c8 100644
--- a/website/next.config.mjs
+++ b/website/next.config.mjs
@@ -15,11 +15,6 @@ const nextConfig = {
     BASE_URL: getBaseUrl(),
   },
   output: 'standalone',
-  experimental: {
-    outputFileTracingIncludes: {
-      '/': ['./node_modules/@crypto-frontmatter/*/dist/Frontmatter/*.json'],
-    },
-  },
   trailingSlash: false,
   reactStrictMode: true,
   swcMinify: true,

From d8ac855efc591ee3b92a9c712c653ed25e979ac3 Mon Sep 17 00:00:00 2001
From: Fuxing Loh <git@fuxing.dev>
Date: Thu, 16 Nov 2023 21:14:18 +0800
Subject: [PATCH 2/2] chore(website): remove tracing and use fetch assets

---
 packages/crypto-frontmatter/src/cli.ts | 12 ++++++++----
 website/package.json                   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/crypto-frontmatter/src/cli.ts b/packages/crypto-frontmatter/src/cli.ts
index 2654ec8f6..2fe0d4000 100644
--- a/packages/crypto-frontmatter/src/cli.ts
+++ b/packages/crypto-frontmatter/src/cli.ts
@@ -13,7 +13,11 @@ import {
 export class MirrorCommand extends Command {
   static override paths = [[`mirror`]];
   private target = Option.String();
-  private include = Option.Array(`--include`, { required: false }) ?? ['index.json', 'frontmatter.json', 'images'];
+  private include = Option.Array(`--include`, { required: false });
+
+  private includes(type: string): boolean {
+    return this.include?.includes(type) ?? true;
+  }
 
   private async mirrorFile(collection: FrontmatterCollection, file: string): Promise<void> {
     const from = getNodeModulesPath(collection.caip2, collection.namespace, file);
@@ -27,18 +31,18 @@ export class MirrorCommand extends Command {
     for (const collection of await getInstalledFrontmatterCollection()) {
       let count = 0;
 
-      if (this.include.includes('index.json')) {
+      if (this.includes('index.json')) {
         await this.mirrorFile(collection, 'index.json');
         count++;
       }
 
       for (const index of await getFrontmatterIndexArray(collection.caip2, collection.namespace)) {
-        if (this.include.includes('frontmatter.json')) {
+        if (this.includes('frontmatter.json')) {
           await this.mirrorFile(collection, index.fileId + '.json');
           count++;
         }
 
-        if (this.include.includes('images')) {
+        if (this.includes('images')) {
           for (const image of index.fields.images) {
             await this.mirrorFile(collection, image.path);
             count++;
diff --git a/website/package.json b/website/package.json
index 5a0efa4ee..7b356428b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -7,7 +7,7 @@
     "clean": "rm -rf .next public/_crypto-frontmatter",
     "dev": "next dev",
     "lint": "eslint .",
-    "mirror": "crypto-frontmatter mirror public/_crypto-frontmatter",
+    "mirror": "crypto-frontmatter mirror public/_crypto-frontmatter --include images --include frontmatter.json",
     "start": "next start"
   },
   "lint-staged": {