mirror json files over

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

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,18 +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',
-  },
-  webpack: (config, { isServer }) => {
-    if (isServer) {
-      config.module.rules.push({
-        test: /\.json$/,
-        include: /node_modules\/@crypto-frontmatter\/.+/,
-        use: 'babel-loader',
-      });
-    }
-
-    return config;
+    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"]
     }
   }
 }