Extract static page content using the page DOM API

// scripts/outline-pages.js
// Run once to generate page-outlines.json before building component-map.js
import { JSDOM } from 'jsdom'
import fs from 'fs'
import path from 'path'

const exportDir = './webflow/export'
const output = {}

for (const file of fs.readdirSync(exportDir).filter(f => f.endsWith('.html'))) {
  const html = fs.readFileSync(path.join(exportDir, file), 'utf8')
  const doc = new JSDOM(html).window.document
  // Looks for <main> first, then any element with "main" in its class as a fallback.
  // If your export uses neither, this page is skipped. Fix: replace the selector
  // with the actual wrapper class from your export (e.g. '.page-wrapper').
  const main = doc.querySelector('main') ?? doc.querySelector('[class*="main"]')
  if (!main) continue

  output[file] = []

  for (const child of main.children) {
    const tag = child.tagName.toLowerCase()
    if (['script', 'style', 'template'].includes(tag)) continue
    const classes = (child.className || '').trim()
    const wfId = child.getAttribute('data-wf-id') || child.getAttribute('data-wf-element-id') || ''
    const entry = { tag, classes, wfId, children: [] }
    for (const gc of child.children) {
      entry.children.push({
        tag: gc.tagName.toLowerCase(),
        classes: (gc.className || '').trim(),
        wfId: gc.getAttribute('data-wf-id') || gc.getAttribute('data-wf-element-id') || ''
      })
    }
    output[file].push(entry)
  }
}

fs.writeFileSync('webflow/api/page-outlines.json', JSON.stringify(output, null, 2))
console.log('Written to webflow/api/page-outlines.json')

node --env-file=.env scripts/outline-pages.js

@webflow/api/page-outlines.json Read the page structure outlines and classify each page by its layout pattern. Group them into: (a) simple stacked sections — full-width blocks stacked in a single column inside <main>; (b) split layout — a left content column alongside a right sidebar or sticky track; (c) CMS-collection-driven — pages whose layout is a fixed template and whose content comes entirely from CMS collection records, with no unique per-page sections; (d) other complex layouts. For each group, list which pages fall into it. For CMS-driven pages, identify which collection they display. Don't generate any code yet — just classify.

@webflow/export/*.html For each page, answer two questions: (1) Is the page content driven entirely by a CMS collection record, or does it have unique sections configured per page? (2) Does the right-side column always show the same content regardless of which page you're on, or does it vary per page? List each page with your answers and conclude whether this site needs a Sanity page builder (sections array) at all, or whether fixed collection templates are sufficient.

@webflow/export/[your-split-layout-page].html @sanity/schemaTypes/sections/ @sanity/schemaTypes/objects/ This page has a split layout with a main content column and a sidebar. Write a splitLayoutPage document type schema with a title field, a slug field (no source), a mainContent sections array referencing the appropriate section types from the sections directory, and a sidebarContent array referencing any sidebar-appropriate section types. Save it to /sanity/schemaTypes/documents/splitLayoutPage.ts and update index.ts.

@webflow/export/ @sanity/schemaTypes/documents/splitLayoutPage.ts Find all HTML files in the export directory that use a split layout — a main content column alongside a sidebar. For each one, extract the content into a Sanity document matching the splitLayoutPage schema: left column content into mainContent, right sidebar content into sidebarContent. Use a deterministic _id of page-{slug} for each. Output a single script that calls client.createOrReplace() for each document and saves it to scripts/import-split-pages.js.

{
  "type": "component-instance",
  "componentId": "e3410077-d7db-43e6-8889-0d7f61184424",
  "propertyOverrides": [
    { "label": "Headline", "type": "Plain Text", "text": { "text": "Ship faster with structured content" } },
    { "label": "Subheading", "type": "Rich Text", "text": { "html": "<p>One content platform, every channel.</p>" } }
  ]
}

@webflow/api/page-outlines.json @webflow/api/components.json @webflow/export/index.html @webflow/export/[your-most-content-rich-page].html

Analyze the page structure outlines and HTML exports to produce a complete inventory of section types for this Sanity page builder. Look at both Webflow components (from components.json) and raw HTML sections built inline without becoming components.

For Webflow components, classify each into one of three types:

- Type 1 — Page section: direct child of <main>, identified by the <section> tag or as a full-width top-level block. Goes in page.sections[].
- Type 2 — Reusable content component: nested inside a section — a repeating sub-item like a card, tier, or feature item. Belongs inside a parent section's sub-array.
- Type 3 — Global or UI-only: nav, footer, logo, styling wrapper — no editable content. Maps to null.

For raw HTML sections (top-level <section> blocks with no matching UUID in components.json): identify what content each contains, whether it appears on multiple pages, and propose a Sanity section type name.

Output two things:

1. scripts/component-map.js — exports COMPONENT_TYPE_MAP mapping every Webflow component UUID to its Sanity type name or null. Include a comment on each entry explaining the classification.

2. A section inventory in this format — one entry per discovered section type, including both component-based and raw HTML sections:

Type: [heroSection | featureGrid | richTextSection | etc.]
Source: [Webflow component "Component Name" | Raw HTML section]
Classification: [Type 1 page section | Type 2 nested component (parent: X) | Type 3 null]
Fields needed: [list of fields with types]
Appears on: [page list]
Notes: [anything relevant — w-dyn-list, collection reference, etc.]

Do not map any component to a Sanity document type name. Only use inline object type names.

@webflow/api/section-inventory.md @sanity/schemaTypes/sections/ @sanity/schemaTypes/objects/ @sanity/schemaTypes/index.ts Using the confirmed section inventory, generate a Sanity schema file for every section type listed — including all proposed new section types. For Type 1 and Type 2 types, write defineType object schemas with the fields listed in the inventory. Save all section schemas to /sanity/schemaTypes/sections/. Register all new types in index.ts. Add all Type 1 section types to the sections array's of list on the page document type. For each Type 2 type, add it to the of list of its parent section's sub-array field.

// scripts/component-map.js
export const COMPONENT_TYPE_MAP = {
  // Type 1: Page sections — direct children of <main>, go in page.sections[]
  'e3410077-d7db-43e6-8889-0d7f61184424': 'heroSection',
  'f1234abc-8899-44ff-aaaa-000000000001': 'featureGrid',
  'f1234abc-8899-44ff-aaaa-000000000002': 'emailSignupSection',
  'f1234abc-8899-44ff-aaaa-000000000008': 'testimonialsSection',
  // Note: richTextSection and any other raw-HTML-only sections won't appear here
  // because they have no Webflow component UUID — they're seeded from HTML directly

  // Type 2: Reusable content components — nested inside a parent section
  'f1234abc-8899-44ff-aaaa-000000000010': 'featureItem',      // child of featureGrid
  'f1234abc-8899-44ff-aaaa-000000000011': 'testimonialCard',  // child of testimonialsSection
  'f1234abc-8899-44ff-aaaa-000000000012': 'pricingTier',      // child of pricingSection

  // Type 3: Global and UI-only — no Sanity representation
  'f1234abc-8899-44ff-aaaa-000000000003': null, // LogoComponent — decorative, hardcoded in React
  'f1234abc-8899-44ff-aaaa-000000000009': null, // TagList — w-dyn-list, data from collection import
  'f1234abc-8899-44ff-aaaa-000000000005': null, // NavBar — global nav
  'f1234abc-8899-44ff-aaaa-000000000006': null, // Footer — global footer
  'f1234abc-8899-44ff-aaaa-000000000007': null, // GlobalStyles — styling only
}

@webflow/export/ @webflow/api/section-inventory.md @sanity/schemaTypes/sections/ The section inventory identifies which section types have no Webflow component UUID — these are raw HTML sections whose content must be extracted from the HTML export directly. For every HTML file in the export directory, find all raw HTML sections matching the inventory, extract their content into the correct schema shape, and generate a single script saved to scripts/seed-raw-sections.js that calls client.createOrReplace() for each page document containing raw sections. Use htmlToBlocks() from @sanity/block-tools for any rich text fields. Look up image asset IDs via lookupAssetId() from ./rich-text.js.

// Fetch component defaults once, keyed by componentId
const componentDefaults = {}
for (const component of components) {
  const res = await fetch(
    `https://api.webflow.com/v2/sites/${SITE_ID}/components/${component.id}`,
    { headers: { Authorization: `Bearer ${WEBFLOW_API_TOKEN}` } }
  )
  const { properties } = await res.json()
  componentDefaults[component.id] = Object.fromEntries(
    (properties ?? []).map(p => [p.label, p])
  )
}

const defaults = componentDefaults[node.componentId] ?? {}
const mergedProps = { ...defaults, ...Object.fromEntries(node.propertyOverrides.map(p => [p.label, p])) }
for (const prop of Object.values(mergedProps)) {
  fields[toCamelCase(prop.label)] = mapPropToField(prop)
}

// scripts/extract-static-pages.js
import { client } from '../lib/sanity-client.js'
import { COMPONENT_TYPE_MAP } from './component-map.js'
import { convertRichText } from './rich-text.js'
import fs from 'fs'

const WEBFLOW_API_TOKEN = process.env.WEBFLOW_API_TOKEN
const SITE_ID = process.env.WEBFLOW_SITE_ID
const assetMap = JSON.parse(fs.readFileSync('asset-map.json', 'utf8'))

// Convert 'Hero Headline' → 'heroHeadline'
function toCamelCase(label) {
  return label
    .split(' ')
    .map((w, i) => i === 0 ? w.toLowerCase() : w[0].toUpperCase() + w.slice(1).toLowerCase())
    .join('')
}

function mapPropToField(prop) {
  if (prop.type === 'Plain Text') return prop.text.text ?? ''
  if (prop.type === 'Rich Text') return convertRichText(prop.text.html ?? '')
  if (prop.type === 'Alt Text') return prop.text.text ?? ''
  return null
}

async function fetchComponentDefaults() {
  const { components } = JSON.parse(fs.readFileSync('webflow/api/components.json', 'utf8'))
  const defaults = {}
  for (const component of components) {
    const res = await fetch(
      `https://api.webflow.com/v2/sites/${SITE_ID}/components/${component.id}`,
      { headers: { Authorization: `Bearer ${WEBFLOW_API_TOKEN}` } }
    )
    const { properties } = await res.json()
    defaults[component.id] = Object.fromEntries(
      (properties ?? []).map(p => [p.label, p])
    )
  }
  return defaults
}

async function run() {
  const { pages } = JSON.parse(fs.readFileSync('webflow/api/pages.json', 'utf8'))
  const componentDefaults = await fetchComponentDefaults()

  for (const page of pages) {
    // Skip CMS collection template pages — handled via collection item import
    if (page.collectionId) continue

    // limit=100 covers most pages. The DOM API is paginated — if a page has more
    // than 100 content nodes, nodes beyond the first page are silently dropped.
    // Content-heavy pages (long landing pages, docs) may need a pagination loop.
    const res = await fetch(
      `https://api.webflow.com/v2/pages/${page.id}/dom?limit=100`,
      { headers: { Authorization: `Bearer ${WEBFLOW_API_TOKEN}` } }
    )
    const { nodes } = await res.json()

    const sections = nodes
      .filter(node => node.type === 'component-instance')
      .map((node, idx) => {
        const sectionType = COMPONENT_TYPE_MAP[node.componentId]
        if (!sectionType) {
          console.warn(`No mapping for componentId: ${node.componentId}`)
          return null
        }
        // Merge component defaults with page-specific overrides.
        // Overrides take precedence; defaults fill in any properties
        // the editor left unchanged on this page.
        const defaults = componentDefaults[node.componentId] ?? {}
        const overrides = Object.fromEntries(node.propertyOverrides.map(p => [p.label, p]))
        const mergedProps = { ...defaults, ...overrides }
        const fields = {}
        for (const prop of Object.values(mergedProps)) {
          fields[toCamelCase(prop.label)] = mapPropToField(prop)
        }
        return { _key: `${node.componentId}-${node.id ?? idx}`, _type: sectionType, ...fields }
      })
      .filter(Boolean)

    // Webflow returns "" or dot-notation identifiers (e.g. "page.home") for
    // the home page and some system pages. Normalize these to "home" so the
    // slug and _id are clean. Re-running is safe — createOrReplace updates in place.
    const rawSlug = page.slug ?? ''
    const normalizedSlug = rawSlug === '' || rawSlug.startsWith('page.') ? 'home' : rawSlug
    const _id = `page-${normalizedSlug.replace(/\//g, '-')}`
    await client.createOrReplace({
      _id,
      _type: 'page',
      title: page.title,
      slug: { _type: 'slug', current: normalizedSlug },
      sections,
      seo: {
        metaTitle: page.seo?.title ?? '',
        metaDescription: page.seo?.description ?? '',
        noIndex: page.seo?.noIndex ?? false,
      }
    })

    console.log(`Upserted page: ${page.slug ?? 'home'} (${sections.length} sections)`)
  }
}

run().catch(err => { console.error(err.message); process.exit(1) })

node --env-file=.env scripts/extract-static-pages.js

export const COMPONENT_TYPE_MAP = {
  '08180112-1657-0593-751b-912f96c3051f': null, // header/nav — handled by navigationMenu
  '713b265d-c54e-b104-ce39-23abfb0cddde': null, // footer — handled by navigationMenu
  // ... your actual section mappings
}