chore(website): use static json asset for .json (#38)

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

As per title.

packages/crypto-frontmatter/src/cli.ts

@@ -16,10 +16,17 @@ export class MirrorCommand extends Command {
     for (const collection of collections) {
       let count = 0;
       const indexArray = await getFrontmatterIndexArray(collection.caip2, collection.namespace);
-      for (const frontmatterIndex of indexArray) {
-        for (const frontmatterImage of frontmatterIndex.fields.images) {
-          const from = getNodeModulesPath(collection.caip2, collection.namespace, frontmatterImage.path);
-          const to = join(this.target, frontmatterImage.path);
+
+      for (const index of indexArray) {
+        const filePath = index.fileId + '.json';
+        const from = getNodeModulesPath(collection.caip2, collection.namespace, filePath);
+        const to = join(this.target, filePath);
+        count++;
+        await copyFile(from, to);
+
+        for (const image of index.fields.images) {
+          const from = getNodeModulesPath(collection.caip2, collection.namespace, image.path);
+          const to = join(this.target, image.path);
           count++;
           await copyFile(from, to);
         }

packages/crypto-frontmatter/src/index.ts

@@ -40,6 +40,7 @@ export interface FrontmatterContent extends FrontmatterIndex {
 }
 
 export interface FrontmatterCollection {
+  name: string;
   caip2: string;
   namespace: string;
 }
@@ -104,7 +105,11 @@ export async function getInstalledFrontmatterCollection(): Promise<FrontmatterCo
     const contents = await readFile(packagePath, {
       encoding: 'utf-8',
     });
-    collections.push(JSON.parse(contents).config);
+    const packageJson = JSON.parse(contents);
+    collections.push({
+      name: packageJson.name,
+      ...packageJson.config,
+    });
   }
   return collections;
 }

packages/crypto-frontmatter/src/index.unit.ts

@@ -55,19 +55,63 @@ it('should getFrontmatterContent of eip155:1/erc20:0', async () => {
   expect(frontmatterContent).toBeUndefined();
 });
 
-it('should getInstalledFrontmatterCollection', async () => {
+it('should getInstalledFrontmatterCollection()', async () => {
   const collections = await getInstalledFrontmatterCollection();
   expect(collections).toStrictEqual([
-    { caip2: 'eip155:1', namespace: 'erc20' },
-    { caip2: 'eip155:10', namespace: 'erc20' },
-    { caip2: 'eip155:1313161554', namespace: 'erc20' },
-    { caip2: 'eip155:137', namespace: 'erc20' },
-    { caip2: 'eip155:42161', namespace: 'erc20' },
-    { caip2: 'eip155:42220', namespace: 'erc20' },
-    { caip2: 'eip155:43114', namespace: 'erc20' },
-    { caip2: 'eip155:56', namespace: 'erc20' },
-    { caip2: 'eip155:8453', namespace: 'erc20' },
-    { caip2: 'tip474:728126428', namespace: 'trc10' },
-    { caip2: 'tip474:728126428', namespace: 'trc20' },
+    {
+      caip2: 'eip155:1',
+      name: '@crypto-frontmatter/eip155-1-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:10',
+      name: '@crypto-frontmatter/eip155-10-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:1313161554',
+      name: '@crypto-frontmatter/eip155-1313161554-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:137',
+      name: '@crypto-frontmatter/eip155-137-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:42161',
+      name: '@crypto-frontmatter/eip155-42161-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:42220',
+      name: '@crypto-frontmatter/eip155-42220-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:43114',
+      name: '@crypto-frontmatter/eip155-43114-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:56',
+      name: '@crypto-frontmatter/eip155-56-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'eip155:8453',
+      name: '@crypto-frontmatter/eip155-8453-erc20',
+      namespace: 'erc20',
+    },
+    {
+      caip2: 'tip474:728126428',
+      name: '@crypto-frontmatter/tip474-728126428-trc10',
+      namespace: 'trc10',
+    },
+    {
+      caip2: 'tip474:728126428',
+      name: '@crypto-frontmatter/tip474-728126428-trc20',
+      namespace: 'trc20',
+    },
   ]);
 });

packages/crypto-frontmatter/src/require.ts

@@ -6,6 +6,7 @@
  * if you want to use it.
  * For example, you must install @crypto-frontmatter/eip155-1-erc20 if you want to use eip155:1/erc frontmatter.
  *
+ * @deprecated scheduled for removal
  * @param caip2 {string}
  * @param type {string}
  * @param path {string}

website/.gitignore

@@ -1,7 +1,7 @@
 # next.js
 /.next/
 /out/
-/public/crypto-frontmatter/
+/public/_crypto-frontmatter/
 
 # misc
 .DS_Store

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

@@ -1,4 +1,4 @@
-import { FrontmatterContent, FrontmatterIndex, getFrontmatterContent } from 'crypto-frontmatter';
+import { computeFileId, FrontmatterContent } from 'crypto-frontmatter';
 import { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
@@ -8,31 +8,38 @@ import { Highlighter } from 'shiki';
 import { ContentedProse } from '@/components/contented/ContentedProse';
 import { loadHighlighter, ShikiHighlighter } from '@/components/contented/ShikiHighlighter';
 
-function asCaip19(caip2: string, asset: string): string {
-  return `${decodeURIComponent(caip2)}/${decodeURIComponent(asset)}`;
+async function getFrontmatterContent(params: {
+  caip2: string;
+  asset: string;
+}): Promise<FrontmatterContent | undefined> {
+  const caip19 = `${decodeURIComponent(params.caip2)}/${decodeURIComponent(params.asset)}`;
+  const fileId = computeFileId(caip19);
+  const response = await fetch(`${process.env.BASE_URL}/_crypto-frontmatter/${fileId}.json`);
+  if (!response.ok) {
+    return undefined;
+  }
+  return await response.json();
 }
 
 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);
-  const frontmatterIndex: FrontmatterIndex | undefined = await getFrontmatterContent(caip19);
-  if (frontmatterIndex === undefined) {
+  const frontmatter = await getFrontmatterContent(props.params);
+  if (frontmatter === undefined) {
     return notFound();
   }
 
-  const title = frontmatterIndex.fields.title ?? frontmatterIndex.fields.symbol;
+  const title = frontmatter.fields.title ?? frontmatter.fields.symbol;
 
   return {
     title: title,
-    description: frontmatterIndex.fields.description,
+    description: frontmatter.fields.description,
     openGraph: {
       title: title,
-      description: frontmatterIndex.fields.description,
-      url: `${baseUrl}/${frontmatterIndex.path}`,
+      description: frontmatter.fields.description,
+      url: `${process.env.BASE_URL}/${frontmatter.path}`,
       siteName: `Crypto Frontmatter`,
       locale: 'en_US',
       type: 'article',
-      modifiedTime: new Date(frontmatterIndex.modifiedDate).toISOString(),
+      modifiedTime: new Date(frontmatter.modifiedDate).toISOString(),
     },
   };
 }
@@ -43,31 +50,30 @@ export default async function Page(props: {
     asset: string;
   };
 }): Promise<ReactElement> {
-  const caip19 = asCaip19(props.params.caip2, props.params.asset);
-  const content = await getFrontmatterContent(caip19);
-  if (content === undefined) {
+  const frontmatter = await getFrontmatterContent(props.params);
+  if (frontmatter === undefined) {
     return notFound();
   }
 
-  const image = content.fields.images?.find((image) => image.type === 'logo');
+  const image = frontmatter.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">
         {image !== undefined && (
           <div className="mb-6 h-12 w-12">
             <Image
-              src={`/crypto-frontmatter/${image.path}`}
-              alt={`${content.fields.symbol} Logo`}
+              src={`/_crypto-frontmatter/${image.path}`}
+              alt={`${frontmatter.fields.symbol} Logo`}
               width={image.size.width}
               height={image.size.height}
             />
           </div>
         )}
 
-        <ContentedProse html={content.html} />
+        <ContentedProse html={frontmatter.html} />
 
-        <FrontmatterJson content={content} highlighter={await loadHighlighter()} />
+        <FrontmatterJson content={frontmatter} highlighter={await loadHighlighter()} />
       </div>
     </main>
   );

website/next.config.mjs

@@ -1,7 +1,18 @@
+function getBaseUrl() {
+  if (process.env.NEXT_PUBLIC_URL) {
+    return process.env.NEXT_PUBLIC_URL;
+  }
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`;
+  }
+
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   env: {
-    BASE_URL: process.env.NEXT_PUBLIC_URL ?? `https://${process.env.VERCEL_URL}` ?? 'https://frontmatter.levain.tech',
+    BASE_URL: getBaseUrl(),
   },
   trailingSlash: false,
   reactStrictMode: true,

website/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "next build --no-lint",
-    "clean": "rm -rf .next public/crypto-frontmatter",
-    "crypto-frontmatter-mirror": "crypto-frontmatter mirror ./public/crypto-frontmatter",
+    "clean": "rm -rf .next public/_crypto-frontmatter",
     "dev": "next dev",
     "lint": "eslint .",
+    "mirror": "crypto-frontmatter mirror public/_crypto-frontmatter",
     "start": "next start"
   },
   "lint-staged": {

website/turbo.json

@@ -2,17 +2,17 @@
   "$schema": "https://turborepo.org/schema.json",
   "extends": ["//"],
   "pipeline": {
-    "crypto-frontmatter-mirror": {
+    "mirror": {
       "dependsOn": ["^build"]
     },
     "build": {
       "cache": false,
-      "dependsOn": ["^build", "crypto-frontmatter-mirror"]
+      "dependsOn": ["^build", "mirror"]
     },
     "dev": {
       "cache": false,
       "persistent": true,
-      "dependsOn": ["^build", "crypto-frontmatter-mirror"]
+      "dependsOn": ["^build", "mirror"]
     }
   }
 }