121 lines
4.0 KiB
Markdown
121 lines
4.0 KiB
Markdown
---
|
|
description: Convert Webflow export to self-served page with dynamic CSV content loading
|
|
argument-hint: [optional-directory-path]
|
|
allowed-tools: Read, Write, Edit, Bash, Glob, Grep, Task
|
|
---
|
|
|
|
You are running the Webflow to Self-Served Page conversion workflow.
|
|
|
|
**Task**: Convert a Webflow landing page export (with CSV CMS data) into a self-served static page with dynamic content loading.
|
|
|
|
**Target Directory**: $ARGUMENTS (if provided, otherwise current directory)
|
|
|
|
## Conversion Workflow
|
|
|
|
### Step 1: Analyze the Webflow Export
|
|
1. Scan for CSV files in the target directory
|
|
2. Identify all HTML files
|
|
3. Validate this is a Webflow export (check for .w-dyn-list, .w-dyn-bind-empty classes)
|
|
|
|
### Step 2: Set Up Directory Structure
|
|
1. Create `data/` directory for JSON files
|
|
2. Create `scripts/` directory for converter script
|
|
3. Create `js/` directory if it doesn't exist
|
|
|
|
### Step 3: Analyze CSV Structure
|
|
For each CSV file found:
|
|
1. Read the CSV headers to understand the data structure
|
|
2. Detect the collection type based on field names:
|
|
- Has "Comentario" or "testimonial" → testimonials
|
|
- Has "Logo" or "school" → schools
|
|
- Has "Instagram" or "ambassador" → ambassadors
|
|
- Has "profesor" or "teacher" → teachers
|
|
- Otherwise → generic collection
|
|
3. Map CSV fields to JSON structure intelligently
|
|
|
|
### Step 4: Generate CSV to JSON Converter
|
|
1. Copy the Python converter template from `${CLAUDE_PLUGIN_ROOT}/scripts/templates/csv-to-json.py`
|
|
2. Customize it based on detected CSV structures
|
|
3. Make it generic to handle any CSV format
|
|
4. Save to `scripts/csv-to-json.py`
|
|
|
|
### Step 5: Run CSV Conversion
|
|
1. Execute: `python3 scripts/csv-to-json.py`
|
|
2. Verify JSON files are created in `data/` directory
|
|
3. Report number of items converted per collection
|
|
|
|
### Step 6: Analyze HTML Structure
|
|
1. Search for dynamic content containers:
|
|
- Elements with class `.w-dyn-list`
|
|
- Elements with class `.w-dyn-items`
|
|
- Elements with class `.w-dyn-bind-empty`
|
|
- Text containing "No items found"
|
|
2. Map HTML sections to CSV/JSON collections
|
|
3. Identify the CSS selectors needed for injection
|
|
|
|
### Step 7: Generate CMS Loader JavaScript
|
|
1. Copy the CMS loader template from `${CLAUDE_PLUGIN_ROOT}/scripts/templates/cms-loader.js`
|
|
2. Customize based on detected HTML structure and collections
|
|
3. Create rendering functions for each collection type
|
|
4. Add debug mode and error handling
|
|
5. Save to `js/cms-loader.js`
|
|
|
|
### Step 8: Update HTML Files
|
|
1. Find all HTML files that need the CMS loader
|
|
2. Add script reference before closing `</body>` tag:
|
|
```html
|
|
<!-- CMS Data Loader -->
|
|
<script src="js/cms-loader.js"></script>
|
|
```
|
|
3. Report which HTML files were updated
|
|
|
|
### Step 9: Generate Documentation
|
|
1. Create a README.md with:
|
|
- Project overview
|
|
- Directory structure
|
|
- How to update content
|
|
- How to run locally
|
|
- Deployment instructions
|
|
2. Include CSV field documentation for each collection
|
|
|
|
### Step 10: Set Up Local Preview
|
|
1. Start a Python HTTP server on available port (try 8080, 8081, etc.)
|
|
2. Display the URL for preview
|
|
3. Provide instructions for testing
|
|
|
|
## Success Criteria
|
|
- ✅ All CSV files converted to JSON
|
|
- ✅ CMS loader JavaScript generated
|
|
- ✅ HTML files updated with script references
|
|
- ✅ Documentation created
|
|
- ✅ Local server running for preview
|
|
|
|
## Output Format
|
|
Provide a summary at the end:
|
|
```
|
|
🎉 Webflow Conversion Complete!
|
|
|
|
📊 Results:
|
|
- CSV Files Processed: X
|
|
- JSON Files Generated: X
|
|
- Total Items: X
|
|
- HTML Files Updated: X
|
|
|
|
📁 Generated Files:
|
|
- data/cms-*.json
|
|
- scripts/csv-to-json.py
|
|
- js/cms-loader.js
|
|
- README.md
|
|
|
|
🚀 Next Steps:
|
|
1. Preview: http://localhost:XXXX
|
|
2. Review: Check browser console for CMS loader logs
|
|
3. Test: Verify all sections display content
|
|
4. Deploy: Upload all files to your web server
|
|
|
|
Run '/webflow-preview' to open the preview again anytime.
|
|
Run '/webflow-update' to regenerate JSON after CSV changes.
|
|
```
|
|
|
|
**Important**: Use the webflow-converter subagent for this task by explicitly invoking it for complex analysis and generation tasks.
|