# Step 2: Scrape Assets and Content

## Your Task

Download all assets (images, fonts, SVGs) and get clean HTML from Firecrawl.

## How to Execute

```ts
import FirecrawlApp from '@mendable/firecrawl-js';
import {scrapePage, createProjectStructure, getFirecrawlApiKey} from './plugin';

// Create output directory structure
await createProjectStructure('./output');

// Initialize Firecrawl
const firecrawl = new FirecrawlApp({
  apiKey: getFirecrawlApiKey()
});

// Scrape and download assets
const scrape = await scrapePage({
  url: 'TARGET_URL',
  renderResult: render,  // From step 1
  firecrawlClient: firecrawl,
  outputDir: './output',
  downloadAssets: true,
});
```

## What You Get

| Property | Description |
|----------|-------------|
| `scrape.assets` | Array of downloaded assets with local paths |
| `scrape.html` | Playwright-rendered HTML |
| `scrape.firecrawlHtml` | Clean HTML from Firecrawl |

## Asset Mapping

Each asset has:
```ts
{
  url: 'https://cdn.example.com/image.png',  // Original URL
  localPath: './output/public/assets/image.png',  // Local path
  type: 'image',  // image, font, svg, css
  downloaded: true  // Success status
}
```

## Important: Check Downloads

Look at the console output to verify:
- How many assets were found
- How many were successfully downloaded
- Any failures (and why)

## Completion Criteria

- [ ] Project structure created (`src/app/`, `public/assets/`, etc.)
- [ ] All images downloaded to `public/assets/`
- [ ] All fonts downloaded to `public/fonts/`
- [ ] Asset URL to local path mapping available

## Next Step

Proceed to [step3-analyze.md](step3-analyze.md)