Expandable opcode rows with embedded static MDX

- Convert opcodes.json reference doc to use hex
- Use `next-mdx-remote` and `gray-matter to power markdown with meta
- Define markdown doc specific UI components (h1, h2, h3, ul, ol, li, p)
- Add a sample 00.mdx doc
- Refactor reference table by separating column data and doc rows

Closes #40

components/Reference/DocRow.tsx

@@ -0,0 +1,67 @@
+import cn from 'classnames'
+import { MDXRemote } from 'next-mdx-remote'
+import { IOpcodeDoc } from 'types'
+
+import { GITHUB_REPO_URL } from 'util/constants'
+
+import * as Doc from 'components/ui/Doc'
+
+type Props = {
+  opcode: IOpcodeDoc
+}
+
+const docComponents = {
+  h1: Doc.H1,
+  h2: Doc.H2,
+  p: Doc.P,
+  ul: Doc.UL,
+  ol: Doc.OL,
+  li: Doc.LI,
+}
+
+const colClassName = 'py-1 px-2 border border-gray-400'
+
+const DocRow = ({ opcode }: Props) => {
+  return (
+    <div className="text-sm px-4 py-4 bg-yellow-100">
+      {opcode && (
+        <>
+          <table className="table-auto mb-4">
+            <thead>
+              <tr>
+                <td className={cn('font-medium', colClassName)}>
+                  Appeared in fork
+                </td>
+                <td className={cn('font-medium', colClassName)}>Group</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className={colClassName}>{opcode.meta.fork}</td>
+                <td className={colClassName}>{opcode.meta.group}</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <MDXRemote {...opcode.mdxSource} components={docComponents} />
+        </>
+      )}
+      {!opcode && (
+        <div>
+          There is no reference doc for this opcode yet. Why not{' '}
+          <a
+            className="underline font-medium"
+            href={`${GITHUB_REPO_URL}/new/main/docs/opcodes`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            contribute?
+          </a>{' '}
+          ;)
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DocRow

components/Reference/data.tsx

@@ -0,0 +1,74 @@
+// import { hardforkColor } from 'util/opcodes'
+// import { isEmpty } from 'util/string'
+
+import { StackBox } from 'components/ui'
+
+const tableData = [
+  {
+    Header: 'Opcode',
+    accessor: 'code',
+    className: 'font-mono uppercase pl-2',
+  },
+  {
+    Header: 'Name',
+    accessor: 'name',
+    className: 'font-mono',
+  },
+  {
+    Header: 'Gas',
+    accessor: 'fee',
+  },
+  {
+    Header: 'Stack Input',
+    accessor: 'input',
+    Cell: ({ value }: { value: string }) => <StackBox value={value} />,
+    maxWidth: 200,
+  },
+  {
+    Header: 'Stack Ouput',
+    accessor: 'output',
+    Cell: ({ value }: { value: string }) => <StackBox value={value} />,
+    maxWidth: 200,
+  },
+  {
+    Header: 'Description',
+    accessor: 'description',
+    className: 'hidden md:table-cell',
+  },
+  //  FIXME: Use in table filters:
+  // {
+  //   Header: 'Fork',
+  //   accessor: 'fork',
+  //   Cell: ({ value }: { value: string }) => {
+  //     return isEmpty(value) ? (
+  //       ''
+  //     ) : (
+  //       <span
+  //         className={cn(
+  //           'bg-gray-200 rounded-full px-4 py-1 text-2xs uppercase font-medium whitespace-nowrap',
+  //           hardforkColor[value],
+  //         )}
+  //       >
+  //         {value}
+  //       </span>
+  //     )
+  //   },
+  // },
+  // {
+  //   Header: 'Group',
+  //   accessor: 'group',
+  //   Cell: ({ value }: { value: string }) => {
+  //     const label = groupLabels[value]
+  //     return isEmpty(label) ? (
+  //       ''
+  //     ) : (
+  //       <span className="bg-gray-200 rounded-full px-4 py-1 text-2xs uppercase font-medium whitespace-nowrap">
+  //         {label}
+  //       </span>
+  //     )
+  //   },
+  //   className: 'hidden lg:table-cell',
+  // },
+]
+
+export default tableData