feat(website): website to test frontmatter can be rendered with webpa…

…ck (#11)

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

As per title.

README.md

@@ -1,6 +1,8 @@
 <p align="center">
   <a href="https://levain.tech">
     <img src=".github/levain-logo.png" height="96">
-    <h3 align="center">Frontmatter</h3>
+    <h3 align="center">Crypto Frontmatter</h3>
   </a>
 </p>
+
+A collection of frontmatter for crypto projects.

packages/crypto-frontmatter/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "crypto-frontmatter",
+  "version": "0.0.0",
+  "private": false,
+  "repository": {
+    "url": "git+https://github.com/levaintech/frontmatter"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "lint": "eslint .",
+    "test": "jest"
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --write --ignore-unknown"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "jest": {
+    "preset": "@workspace/jest-preset"
+  },
+  "devDependencies": {
+    "@crypto-frontmatter/eip155-1-erc20": "workspace:*",
+    "@workspace/jest-preset": "workspace:*",
+    "@workspace/tsconfig": "workspace:*"
+  },
+  "peerDependencies": {
+    "@crypto-frontmatter/eip155-1-erc20": "*",
+    "@crypto-frontmatter/eip155-137-erc20": "*",
+    "@crypto-frontmatter/eip155-43114-erc20": "*"
+  }
+}

packages/crypto-frontmatter/src/frontmatter.ts

@@ -0,0 +1,138 @@
+export interface FrontmatterLink {
+  name: string;
+  url: string;
+}
+
+export interface FrontmatterImage {
+  type: string;
+  mine: string;
+  size: {
+    width: number;
+    height: number;
+  };
+  path: string;
+}
+
+export interface FrontmatterIndex {
+  path: string;
+  fileId: string;
+  modifiedDate: number;
+  type: string;
+  fields: {
+    symbol: string;
+    decimals: number;
+    title?: string;
+    description?: string;
+    tags?: string[];
+    links?: FrontmatterLink[];
+    images?: FrontmatterImage[];
+  };
+}
+
+export interface FrontmatterContent extends FrontmatterIndex {
+  html: string;
+}
+
+export const SupportedCollections = [
+  ['eip155:1', 'erc20'],
+  ['eip155:137', 'erc20'],
+  ['eip155:43114', 'erc20'],
+];
+
+/**
+ * Decode CAIP-19 into CAIP-2, Asset TYPE, and Asset REFERENCE
+ * @return {[string, string, string]}
+ */
+export function decodeCaip19(caip19: string): string[] {
+  const [caip2, asset] = caip19.split('/');
+  const [type, reference] = asset.split(':');
+  return [caip2, type, reference];
+}
+
+/**
+ * Statically import (via CJS require) @crypto-frontmatter module with CAIP-2 and Asset TYPE
+ * This is a workaround to allow dynamic import of @crypto-frontmatter module for use within webpack.
+ *
+ * All @crypto-frontmatter modules are statically mapped here and must be installed as a project dependency
+ * 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.
+ *
+ * @param caip2 {string}
+ * @param type {string}
+ * @param path {string}
+ * @return {any}
+ */
+export function requireCryptoFrontmatter(caip2: string, type: string, path: string): any {
+  /* eslint-disable no-undef */
+  switch (`${caip2}/${type}`) {
+    case 'eip155:1/erc20':
+      return require('@crypto-frontmatter/eip155-1-erc20/dist/Frontmatter/' + path);
+    case 'eip155:137/erc20':
+      return require('@crypto-frontmatter/eip155-137-erc20/dist/Frontmatter/' + path);
+    case 'eip155:43114/erc20':
+      return require('@crypto-frontmatter/eip155-43114-erc20/dist/Frontmatter/' + path);
+    default:
+      throw new Error(`Unknown CAIP-2: ${caip2} and Asset TYPE: ${type}`);
+  }
+  /* eslint-enable no-undef */
+}
+
+/**
+ * Get FrontmatterIndex collection of CAIP-2 and Asset TYPE
+ * @param caip2 {string}
+ * @param type {string}
+ * @return {FrontmatterIndex[]}
+ */
+export function getFrontmatterCollection(caip2: string, type: string): FrontmatterIndex[] {
+  return requireCryptoFrontmatter(caip2, type, 'index.json');
+}
+
+/**
+ * Get a single FrontmatterIndex using CAIP-19, returns undefined if not found
+ * @param caip19 {string}
+ * @return {FrontmatterIndex | undefined}
+ */
+export function getFrontmatterIndex(caip19: string): FrontmatterIndex | undefined {
+  const [caip2, type] = decodeCaip19(caip19);
+  const collection = getFrontmatterCollection(caip2, type);
+  const index = collection.find((value: FrontmatterIndex) => value.path === caip19);
+  if (index === undefined) {
+    return undefined;
+  }
+
+  // Remove unused fields
+  return {
+    path: index.path,
+    fileId: index.fileId,
+    modifiedDate: index.modifiedDate,
+    type: index.type,
+    fields: index.fields,
+  };
+}
+
+/**
+ * Get FrontmatterContent using CAIP-19, returns undefined if not found
+ * This includes the HTML content of the Frontmatter.
+ *
+ * @param caip19 {string}
+ * @see FrontmatterContent.html
+ * @return {FrontmatterContent | undefined}
+ */
+export function getFrontmatterContent(caip19: string): FrontmatterContent | undefined {
+  const [caip2, type] = decodeCaip19(caip19);
+  const collection = getFrontmatterCollection(caip2, type);
+  const index = collection.find((value: FrontmatterIndex) => value.path === caip19);
+  if (index === undefined) {
+    return undefined;
+  }
+
+  const content = requireCryptoFrontmatter(caip2, type, index.fileId + '.json');
+  return {
+    path: content.path,
+    fileId: content.fileId,
+    modifiedDate: content.modifiedDate,
+    type: content.type,
+    fields: content.fields,
+    html: content.html,
+  };
+}

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

@@ -0,0 +1,81 @@
+import { expect, it } from '@jest/globals';
+
+import { getFrontmatterCollection, getFrontmatterContent, getFrontmatterIndex } from './frontmatter';
+
+it('should getFrontmatterCollection of eip155:1/erc20', async () => {
+  const collection = getFrontmatterCollection('eip155:1', 'erc20');
+  expect(collection).toStrictEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        type: 'Frontmatter',
+        path: 'eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8',
+        fields: expect.any(Object),
+      }),
+    ]),
+  );
+});
+
+it('should getFrontmatterIndex of eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8', async () => {
+  const frontmatterIndex = getFrontmatterIndex('eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8');
+  expect(frontmatterIndex).toStrictEqual({
+    fileId: expect.stringMatching(/[0-f]{64}/),
+    type: 'Frontmatter',
+    path: 'eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8',
+    modifiedDate: expect.any(Number),
+    fields: {
+      title: 'Dharma USD Coin',
+      symbol: 'dUSDC',
+      decimals: 8,
+      links: [
+        {
+          name: 'explorer',
+          url: 'https://etherscan.io/token/0x00000000008943c65cAf789FFFCF953bE156f6f8',
+        },
+      ],
+      images: [
+        {
+          type: 'logo',
+          mine: 'image/png',
+          size: {
+            width: 512,
+            height: 512,
+          },
+          path: expect.stringMatching(/[0-f]{64}\.logo\.png/),
+        },
+      ],
+    },
+  });
+});
+
+it('should getFrontmatterContent of eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8', async () => {
+  const frontmatterContent = getFrontmatterContent('eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8');
+  expect(frontmatterContent).toStrictEqual({
+    fileId: expect.stringMatching(/[0-f]{64}/),
+    type: 'Frontmatter',
+    path: 'eip155:1/erc20:0x00000000008943c65cAf789FFFCF953bE156f6f8',
+    modifiedDate: expect.any(Number),
+    fields: {
+      title: 'Dharma USD Coin',
+      symbol: 'dUSDC',
+      decimals: 8,
+      links: [
+        {
+          name: 'explorer',
+          url: 'https://etherscan.io/token/0x00000000008943c65cAf789FFFCF953bE156f6f8',
+        },
+      ],
+      images: [
+        {
+          type: 'logo',
+          mine: 'image/png',
+          size: {
+            width: 512,
+            height: 512,
+          },
+          path: expect.stringMatching(/[0-f]{64}\.logo\.png/),
+        },
+      ],
+    },
+    html: '<h1>Dharma USD Coin</h1>',
+  });
+});

packages/crypto-frontmatter/src/index.ts

@@ -0,0 +1 @@
+export * from './frontmatter';

packages/crypto-frontmatter/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.unit.ts"]
+}

packages/crypto-frontmatter/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@workspace/tsconfig"
+}

packages/eip155-1-erc20/contented.config.mjs

@@ -1,3 +1,6 @@
 import config from '@workspace/contented-config';
 
-export default config;
+export default config({
+  caip2: 'eip155:1',
+  namespace: 'erc20',
+});

packages/eip155-137-erc20/contented.config.mjs

@@ -1,3 +1,6 @@
 import config from '@workspace/contented-config';
 
-export default config;
+export default config({
+  caip2: 'eip155:137',
+  namespace: 'erc20',
+});

packages/eip155-43114-erc20/contented.config.mjs

@@ -1,3 +1,6 @@
 import config from '@workspace/contented-config';
 
-export default config;
+export default config({
+  caip2: 'eip155:43114',
+  namespace: 'erc20',
+});