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)
 

scripts/ensv2-deployments.ts

@@ -0,0 +1,233 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { Hex } from 'viem'
+
+// ENSv2 deployment addresses, sourced from what ENSjs v2 tracks.
+//
+// Pinned to a commit on the `feature/fet-1885-ensjs-refactor` branch so the
+// build cannot break if the branch is force-pushed or deleted. To pick up new
+// deployments, bump the SHA:
+//   git ls-remote https://github.com/ensdomains/ensjs refs/heads/feature/fet-1885-ensjs-refactor
+// and delete src/data/generated/ensv2-deployments.json to re-fetch.
+//
+// TODO: switch to ingesting a proper deployments file once ensjs/ens-contracts
+// publish one for ENSv2 (only the fetch + parse below should need to change).
+const ENSJS_COMMIT = 'd946c1fb520fe1989d9e50687b545f341d366e62'
+const ENSJS_L1_URL = `https://raw.githubusercontent.com/ensdomains/ensjs/${ENSJS_COMMIT}/packages/ensjs/src/clients/l1.ts`
+
+const CONTRACTS_V2_BLOB =
+  'https://github.com/ensdomains/contracts-v2/blob/main/contracts'
+
+// Deployment artifact snapshot in contracts-v2 that corresponds to the
+// deployment set ensjs tracks (verified address-by-address; the generate step
+// below re-checks this and fails on any mismatch). The newer `deployments/sepolia`
+// set on main is NOT the one ensjs uses yet.
+const ABI_SNAPSHOT = 'sepolia-official-v1-20260525-r2'
+const ABI_BLOB = `https://github.com/ensdomains/contracts-v2/blob/main/contracts/deployments/${ABI_SNAPSHOT}`
+const ABI_RAW = `https://raw.githubusercontent.com/ensdomains/contracts-v2/main/contracts/deployments/${ABI_SNAPSHOT}`
+
+type ENSv2Deployment = {
+  name: string
+  ensjsKey: string
+  abiFilename?: string // artifact name in the contracts-v2 snapshot
+  address?: Hex
+  sourceUrl?: string
+  abiUrl?: string
+}
+
+export type ENSv2DeploymentsByChain = {
+  name: string // Sepolia, etc.
+  slug: string // sepolia, etc.
+  contracts: ENSv2Deployment[]
+}
+
+// Exactly the `// v2` section of `supportedL1Contracts` in ensjs l1.ts,
+// mapped to display names and contracts-v2 source files.
+const ENSV2_CONTRACTS: ENSv2Deployment[] = [
+  {
+    name: 'ETHRegistry',
+    ensjsKey: 'ensRegistry',
+    abiFilename: 'ETHRegistry',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/registry/PermissionedRegistry.sol`,
+  },
+  {
+    name: 'ETHRegistrar',
+    ensjsKey: 'ensEthRegistrar',
+    abiFilename: 'ETHRegistrar',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/registrar/ETHRegistrar.sol`,
+  },
+  {
+    name: 'StandardRentPriceOracle',
+    ensjsKey: 'ensStandardRentPriceOracle',
+    abiFilename: 'StandardRentPriceOracle',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/registrar/StandardRentPriceOracle.sol`,
+  },
+  {
+    name: 'VerifiableFactory',
+    ensjsKey: 'ensVerifiableFactory',
+    abiFilename: 'VerifiableFactory',
+    sourceUrl:
+      'https://github.com/ensdomains/verifiable-factory/blob/main/src/VerifiableFactory.sol',
+  },
+  {
+    name: 'UserRegistryImpl',
+    ensjsKey: 'ensUserRegistryImpl',
+    abiFilename: 'UserRegistryImpl',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/registry/UserRegistry.sol`,
+  },
+  {
+    name: 'PermissionedResolverImpl',
+    ensjsKey: 'ensPermissionedResolverImpl',
+    abiFilename: 'PermissionedResolverImpl',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/resolver/PermissionedResolver.sol`,
+  },
+  {
+    name: 'HCAFactory',
+    ensjsKey: 'ensHcaFactory',
+    abiFilename: 'HCAFactory',
+  },
+  {
+    name: 'LockedMigrationController',
+    ensjsKey: 'ensLockedMigrationController',
+    abiFilename: 'LockedMigrationController',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/migration/LockedMigrationController.sol`,
+  },
+  {
+    name: 'UnlockedMigrationController',
+    ensjsKey: 'ensUnlockedMigrationController',
+    abiFilename: 'UnlockedMigrationController',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/migration/UnlockedMigrationController.sol`,
+  },
+  {
+    name: 'MigrationHelper',
+    ensjsKey: 'ensMigrationHelper',
+    abiFilename: 'MigrationHelper',
+    sourceUrl: `${CONTRACTS_V2_BLOB}/src/migration/MigrationHelper.sol`,
+  },
+  {
+    name: 'USDC (payment token)',
+    ensjsKey: 'usdc',
+    abiFilename: 'MockUSDC',
+  },
+  {
+    name: 'DAI (payment token)',
+    ensjsKey: 'dai',
+    abiFilename: 'MockDAI',
+  },
+]
+
+const CHAINS = [{ name: 'Sepolia', slug: 'sepolia', ensjsChainKey: 'sepolia' }]
+
+// Extract `key: { address: '0x...' }` pairs from one chain block of the
+// `ensL1Contracts` object in ensjs l1.ts. `zeroAddress` means not deployed.
+function parseChainBlock(
+  source: string,
+  chainKey: string
+): Map<string, Hex | undefined> {
+  const exportStart = source.indexOf('export const ensL1Contracts')
+  if (exportStart === -1)
+    throw new Error('ensv2-deployments: ensL1Contracts not found in l1.ts')
+  const exportEnd = source.indexOf('export ', exportStart + 1)
+  const block = source.slice(
+    exportStart,
+    exportEnd === -1 ? undefined : exportEnd
+  )
+
+  const chainStart = block.indexOf(`[supportedL1Chains.${chainKey}]`)
+  if (chainStart === -1)
+    throw new Error(
+      `ensv2-deployments: chain block ${chainKey} not found in ensL1Contracts`
+    )
+  const nextChain = block.indexOf('[supportedL1Chains.', chainStart + 1)
+  const chainBlock = block.slice(
+    chainStart,
+    nextChain === -1 ? undefined : nextChain
+  )
+
+  const addresses = new Map<string, Hex | undefined>()
+  const entry =
+    /(\w+):\s*\{\s*address:\s*(?:'(0x[0-9a-fA-F]{40})'|zeroAddress)\s*,?\s*\}/g
+  for (const match of chainBlock.matchAll(entry)) {
+    addresses.set(match[1], match[2] as Hex | undefined)
+  }
+  if (addresses.size === 0)
+    throw new Error(
+      `ensv2-deployments: no addresses parsed for ${chainKey}, format changed?`
+    )
+  return addresses
+}
+
+// Generate a JSON file with ENSv2 contract deployment info from ensjs.
+// Only runs once; delete the generated file to re-fetch.
+export async function ensv2Deployments() {
+  const outFile = path.join(
+    __dirname,
+    '..',
+    'src/data/generated/ensv2-deployments.json'
+  )
+
+  const alreadyExists = await fs
+    .access(outFile)
+    .then(() => true)
+    .catch(() => false)
+  if (alreadyExists) {
+    return
+  }
+
+  console.log('Fetching ENSv2 deployments (ensjs)')
+
+  const source = await fetch(ENSJS_L1_URL).then((res) => {
+    if (!res.ok)
+      throw new Error(`ensv2-deployments: fetch failed (${res.status})`)
+    return res.text()
+  })
+
+  const result: ENSv2DeploymentsByChain[] = CHAINS.map((chain) => {
+    const addresses = parseChainBlock(source, chain.ensjsChainKey)
+    const contracts = ENSV2_CONTRACTS.map((contract) => {
+      if (!addresses.has(contract.ensjsKey))
+        throw new Error(
+          `ensv2-deployments: key ${contract.ensjsKey} missing for ${chain.slug}`
+        )
+      const address = addresses.get(contract.ensjsKey)
+      if (!address) {
+        console.warn(
+          `ensv2-deployments: ${contract.ensjsKey} is zeroAddress on ${chain.slug}, skipping`
+        )
+        return undefined
+      }
+      return { ...contract, address }
+    }).filter((c): c is ENSv2Deployment => c !== undefined)
+    return { name: chain.name, slug: chain.slug, contracts }
+  })
+
+  // Guard: the ABI snapshot in contracts-v2 must describe the same deployment
+  // set as ensjs. If a future ENSJS_COMMIT bump moves to a newer deployment,
+  // this fails the build until ABI_SNAPSHOT is updated to match.
+  await Promise.all(
+    result.flatMap((chain) =>
+      chain.contracts
+        .filter((c) => c.abiFilename)
+        .map(async (contract) => {
+          const artifact = (await fetch(
+            `${ABI_RAW}/${contract.abiFilename}.json`
+          ).then((res) => {
+            if (!res.ok)
+              throw new Error(
+                `ensv2-deployments: artifact fetch failed for ${contract.abiFilename} (${res.status})`
+              )
+            return res.json()
+          })) as { address: string }
+          if (
+            artifact.address.toLowerCase() !== contract.address!.toLowerCase()
+          )
+            throw new Error(
+              `ensv2-deployments: address mismatch for ${contract.name}: ensjs ${contract.address} vs snapshot ${artifact.address}. Update ABI_SNAPSHOT to the deployment set ensjs tracks.`
+            )
+          contract.abiUrl = `${ABI_BLOB}/${contract.abiFilename}.json`
+        })
+    )
+  )
+
+  await fs.writeFile(outFile, JSON.stringify(result, null, 2))
+}

scripts/run-plugins.ts

@@ -1,8 +1,9 @@
 import { daoProposalsSidebar } from './dao-proposals'
 import { deployments } from './deployments'
 import { ensips } from './ensips'
+import { ensv2Deployments } from './ensv2-deployments'
 
-const plugins = [ensips, deployments, daoProposalsSidebar]
+const plugins = [ensips, deployments, ensv2Deployments, daoProposalsSidebar]
 
 for (const plugin of plugins) {
   await plugin()

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