V2 docs WIP

.gitignore

@@ -17,4 +17,6 @@ src/data/generated/*
 !src/data/generated/.keep
 
 .wrangler
-.claude
+.claude
+# Local Netlify folder
+.netlify

design-patterns.md

@@ -0,0 +1,45 @@
+# Design Patterns
+
+This document captures high-signal UI conventions for the docs site so brand and implementation choices stay consistent.
+
+## Core Tokens
+
+- Use CSS custom properties in `src/styles.css` for global tokens.
+- Prefer semantic token names (`--ens-*`) over hardcoded values in component styles.
+
+## Buttons
+
+- All button controls use a 4px corner radius.
+- Source of truth: `--ens-radius-button` in `src/styles.css`.
+- Applied to: `button`, `input[type='button']`, `input[type='submit']`, and `input[type='reset']`.
+
+## Tables
+
+- All documentation tables use `rounded-md` corners (6px).
+- Source of truth: `--ens-radius-table` in `src/styles.css`.
+- Applied to Vocs table wrappers/content to keep corners visibly clipped.
+
+## Typography
+
+- Primary sans serif: `ABCMonumentGrotesk`.
+- Serif: `ABCMarist`.
+- Monospace: `ABCMonumentGroteskMono` and `ABCMonumentGroteskSemiMono`.
+- Keep `font-display: swap` for self-hosted font loading behavior.
+
+## Color System
+
+- Use `--ens-*` palette tokens and semantic aliases (`--ens-background`, `--ens-text`, etc.).
+- Define both light (`:root`) and dark (`.dark`) token values in `src/styles.css`.
+- Figma source of truth: [`ENS Core` color tokens](https://www.figma.com/design/2sH9SoYCbfma5clol8dFP4/%F0%9F%93%93--ENS-Core?node-id=514-12&p=f&t=TTwQnH0qKnppCExL-0) (node `514:12`).
+
+### Figma Palette Extract (current)
+
+- **Lapis**: `100 #DBF0F8`, `300 #80C4E0`, `400 #39B4EA`, `500 #0082BB`, `900 #02293B`
+- **Quartz**: `100 #EEEDED`, `300 #C7C6C4`, `400 #737373`, `500 #595755`, `900 #191919`
+- **Peridot**: `100 #D1EEDF`, `300 #65D388`, `400 #1CBF46`, `500 #007C20`, `900 #033010`
+- **Garnet**: `100 #FEEAF0`, `300 #FFB0D0`, `400 #F569AB`, `500 #E72A96`, `900 #5A0024`
+- **Citrine**: `100 #F8F7E2`, `300 #E1B77E`, `400 #E7A259`, `500 #984D1B`, `900 #441B03`
+
+### Current Mapping Rule
+
+- `--ens-blue-primary` maps to **Lapis 500** (`#0082BB`) and is the default accent blue used by Vocs theme variables.

scripts/ensips.ts

@@ -36,7 +36,12 @@ export async function ensips() {
       'https://api.github.com/repos/ensdomains/ensips/contents/ensips',
       { headers: githubHeaders }
     )
-    if (!ensipsRepoRes.ok) throw new Error('Failed to fetch ENSIPs')
+    if (!ensipsRepoRes.ok) {
+      const body = await ensipsRepoRes.text()
+      throw new Error(
+        `Failed to fetch ENSIPs: ${ensipsRepoRes.status} ${ensipsRepoRes.statusText} — ${body}`
+      )
+    }
     const files = ((await ensipsRepoRes.json()) as DirectoryContents).filter(
       (f) => f.name.endsWith('.md')
     )
@@ -173,15 +178,12 @@ async function inlineSubdirectoryFiles(
   markdown: string,
   ensipNumber: number
 ): Promise<string> {
-  // Replace lines containing links to subdirectory .md files
-  // (e.g. "- [text](./19/supported.md)") with the actual file content.
-  // Matches the entire line to avoid leftover list markers.
-  const subfileLink =
-    /^[^\S\n]*(?:[-*]|\d+\.)\s*\[([^\]]*)\]\(\.\/\d+\/([^)]+\.md)\)\s*$/gm
+  // Matches [](./NUMBER/file.md) — content inclusion directives
+  const subfileLink = /\[\]\(\.\/\d+\/([^)]+\.md)\)/gm
   let result = markdown
 
   for (const match of markdown.matchAll(subfileLink)) {
-    const [fullMatch, , filename] = match
+    const [fullMatch, filename] = match
     const url = `https://raw.githubusercontent.com/ensdomains/ensips/master/ensips/${ensipNumber}/${filename}`
     const res = await fetchWithRetry(url)
 

src/components/AddressRecords.tsx

@@ -14,7 +14,7 @@ export const AddressRecords = ({ name, coinTypes }: UseEnsAddressesProps) => {
           src={avatar || '/img/fallback-avatar.svg'}
           className="h-8 w-8 rounded"
         />
-        <span className="font-semibold">{name}</span>
+        <span className="font-semibold font-semi-mono">{name}</span>
       </div>
 
       <Table

src/components/EnsProfile.tsx

@@ -49,14 +49,14 @@ function Profile({
   const { data: avatar } = useEnsAvatar({ name: name || undefined, chainId: 1 })
 
   return (
-    <div className="border-grey-light flex w-fit min-w-fit items-center justify-center rounded-full border bg-white p-1 pr-6 shadow-sm dark:bg-black">
+    <div className="border-grey-light flex w-fit min-w-fit items-center justify-center rounded-lg border bg-white p-1 pr-6  dark:bg-black">
       <div className="flex items-center gap-2">
         <img
           src={avatar || '/img/fallback-avatar.svg'}
-          className="border-grey-light h-10 w-10 rounded-full border"
+          className="border-grey-light h-10 w-10 rounded-sm border-0.5"
         />
         <div className="flex flex-col gap-0.5 leading-none">
-          <span className="font-semibold">{name || 'No name'}</span>
+          <span className="font-semibold font-semi-mono">{name || 'No name'}</span>
 
           {!hideAddress && (
             <span className={cn('text-grey text-xs')}>

src/components/TextRecords.tsx

@@ -14,7 +14,7 @@ export const TextRecords = ({ name, keys }: UseEnsTextsProps) => {
           src={avatar || '/img/fallback-avatar.svg'}
           className="h-8 w-8 rounded"
         />
-        <span className="font-semibold">{name}</span>
+        <span className="font-semibold font-semi-mono">{name}</span>
       </div>
 
       <Table

src/components/ensv2/ContractReference.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import { useState } from 'react'
+
+type Param = {
+  name: string
+  type: string
+  description: string
+}
+
+type FunctionDef = {
+  name: string
+  description: string
+  params?: Param[]
+  returns?: Param[]
+}
+
+export function ContractReference({
+  functions,
+}: {
+  functions: FunctionDef[]
+}) {
+  return (
+    <table
+      style={{
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '14px',
+        lineHeight: 1.6,
+        tableLayout: 'fixed',
+      }}
+    >
+      <colgroup>
+        <col style={{ width: '40%' }} />
+        <col style={{ width: '60%' }} />
+      </colgroup>
+      <tbody>
+        {functions.map((fn) => (
+          <FunctionRow key={fn.name} fn={fn} />
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+function FunctionRow({ fn }: { fn: FunctionDef }) {
+  const hasDetails =
+    (fn.params && fn.params.length > 0) ||
+    (fn.returns && fn.returns.length > 0)
+  const [open, setOpen] = useState(false)
+
+  const shortName = fn.params
+    ? `${fn.name}(${fn.params.map((p) => p.name).join(', ')})`
+    : `${fn.name}`
+
+  return (
+    <>
+      <tr
+        onClick={hasDetails ? () => setOpen(!open) : undefined}
+        style={{
+          cursor: hasDetails ? 'pointer' : 'default',
+          borderTop: '1px solid var(--ens-border)',
+        }}
+      >
+        <td
+          style={{
+            padding: '10px 12px',
+            verticalAlign: 'top',
+          }}
+        >
+          <span
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+            }}
+          >
+            {hasDetails && (
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                style={{
+                  flexShrink: 0,
+                  transition: 'transform 0.15s ease',
+                  transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+                }}
+              >
+                <path
+                  d="M4.5 2.5L8 6L4.5 9.5"
+                  stroke="var(--ens-text-secondary)"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            {!hasDetails && <span style={{ width: '12px' }} />}
+            <code
+              style={{
+                fontFamily: 'var(--vocs-fontFamily_code)',
+                fontSize: '13px',
+                color: 'var(--vocs-color_textAccent)',
+                wordBreak: 'break-word',
+              }}
+            >
+              {shortName}
+            </code>
+          </span>
+        </td>
+        <td
+          style={{
+            padding: '10px 12px',
+            verticalAlign: 'top',
+            color: 'var(--ens-text)',
+          }}
+        >
+          {fn.description}
+        </td>
+      </tr>
+      {open && hasDetails && (
+        <tr>
+          <td
+            colSpan={2}
+            style={{
+              padding: '0 12px 14px 42px',
+              borderTop: 'none',
+            }}
+          >
+            <table
+              style={{
+                fontSize: '13px',
+                lineHeight: 1.5,
+                borderCollapse: 'collapse',
+              }}
+            >
+              <colgroup>
+                <col style={{ width: 'auto' }} />
+                <col style={{ width: 'auto' }} />
+                <col />
+              </colgroup>
+              <tbody>
+                {fn.params && fn.params.length > 0 && (
+                  <>
+                    <tr>
+                      <td
+                        colSpan={3}
+                        style={{
+                          fontSize: '11px',
+                          fontWeight: 600,
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.05em',
+                          color: 'var(--ens-text-secondary)',
+                          padding: '0 0 4px 0',
+                        }}
+                      >
+                        Parameters
+                      </td>
+                    </tr>
+                    {fn.params.map((p) => (
+                      <ParamRow key={`p-${p.name}`} param={p} />
+                    ))}
+                  </>
+                )}
+                {fn.returns && fn.returns.length > 0 && (
+                  <>
+                    <tr>
+                      <td
+                        colSpan={3}
+                        style={{
+                          fontSize: '11px',
+                          fontWeight: 600,
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.05em',
+                          color: 'var(--ens-text-secondary)',
+                          padding:
+                            fn.params && fn.params.length > 0
+                              ? '10px 0 4px 0'
+                              : '0 0 4px 0',
+                        }}
+                      >
+                        Returns
+                      </td>
+                    </tr>
+                    {fn.returns.map((p) => (
+                      <ParamRow key={`r-${p.name}`} param={p} />
+                    ))}
+                  </>
+                )}
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      )}
+    </>
+  )
+}
+
+function ParamRow({ param }: { param: Param }) {
+  return (
+    <tr>
+      <td
+        style={{
+          padding: '2px 14px 2px 0',
+          verticalAlign: 'top',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <code
+          style={{
+            fontFamily: 'var(--vocs-fontFamily_code)',
+            fontSize: '12.5px',
+          }}
+        >
+          {param.name}
+        </code>
+      </td>
+      <td
+        style={{
+          padding: '2px 14px 2px 0',
+          verticalAlign: 'top',
+          whiteSpace: 'nowrap',
+          color: 'var(--ens-text-secondary)',
+        }}
+      >
+        <code
+          style={{
+            fontFamily: 'var(--vocs-fontFamily_code)',
+            fontSize: '12.5px',
+          }}
+        >
+          {param.type}
+        </code>
+      </td>
+      <td
+        style={{
+          padding: '2px 0',
+          verticalAlign: 'top',
+          color: 'var(--ens-text-secondary)',
+        }}
+      >
+        {param.description}
+      </td>
+    </tr>
+  )
+}