zhongwei/gh-gutitrombotto-webflow-to-self-served-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-29 18:32:13 +08:00
commit 4d675832c7
10 changed files with 705 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
commands/webflow-clean.md Normal file
View File

@@ -0,0 +1,74 @@
---
description: Remove all generated files from Webflow conversion
argument-hint: [--force to skip confirmation]
allowed-tools: Bash, Read, Glob
---
Remove all generated files from the Webflow conversion process.
**Warning**: This will delete generated files. Original CSV and HTML files will NOT be deleted.
## Files to Remove
### Generated Files (will be deleted):
- `data/` directory and all JSON files
- `scripts/csv-to-json.py`
- `js/cms-loader.js`
- `README.md` (if generated by plugin)
### Original Files (will be preserved):
- All `.csv` files
- All `.html` files
- All `.css`, `.js` (original), images, fonts, etc.
## Cleanup Process
### 1. Confirmation
If `$ARGUMENTS` does not contain `--force`:
```
⚠️ Warning: This will delete all generated files
Files to be deleted:
- data/ (X JSON files)
- scripts/csv-to-json.py
- js/cms-loader.js
- README.md
Original CSV and HTML files will be preserved.
Continue? (y/n)
```
### 2. Execute Cleanup
If confirmed or `--force` flag present:
```bash
rm -rf data/
rm -f scripts/csv-to-json.py
rm -f js/cms-loader.js
rm -f README.md
```
Note: Only removes these specific files, not entire directories.
### 3. Report Results
```
🧹 Cleanup Complete
✅ Removed:
- data/ directory
- CSV converter script
- CMS loader script
- Generated documentation
📁 Preserved:
- All original CSV files
- All original HTML files
- All other assets
🚀 To reconvert: Run '/webflow-convert'
```
### 4. Optional: Remove Empty Directories
Ask user if they want to remove `data/` and `scripts/` directories if they're now empty.
**Safety Note**: This command only removes files that the plugin generates. Your original Webflow export is safe.

120
commands/webflow-convert.md Normal file
View File

@@ -0,0 +1,120 @@
---
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.

54
commands/webflow-preview.md Normal file
View File

@@ -0,0 +1,54 @@
---
description: Start local server and preview the converted Webflow page
argument-hint: [port-number]
allowed-tools: Bash
---
Start a local HTTP server to preview the converted Webflow page.
**Port**: $ARGUMENTS (if provided, otherwise try 8080, 8081, 8082, etc.)
## Preview Tasks
### 1. Check for Conversion Files
Verify that conversion has been completed:
- `data/` directory exists with JSON files
- `js/cms-loader.js` exists
- HTML files exist
If not found, suggest running `/webflow-convert` first.
### 2. Start HTTP Server
Try to start Python HTTP server:
```bash
python3 -m http.server PORT
```
If port is in use, try the next port automatically.
### 3. Display Preview Information
```
🌐 Local Server Started
📍 Preview URL: http://localhost:PORT
📁 Serving from: /path/to/directory
🔍 Testing Checklist:
- [ ] Open the URL in your browser
- [ ] Check browser console for CMS loader logs
- [ ] Verify all sections display content
- [ ] Test "ver más" buttons (if applicable)
- [ ] Check mobile responsive design
💡 Tips:
- Hard refresh (Ctrl+F5) if content doesn't appear
- Check console for "[CMS Loader]" messages
- Images should load from CDN URLs
🛑 To stop the server: Press Ctrl+C in the terminal
```
### 4. Optional: Keep Server Running
The server will run in the background. User can check output with appropriate commands.
**Note**: This command assumes conversion is already complete. Run `/webflow-convert` first if needed.

50
commands/webflow-setup.md Normal file
View File

@@ -0,0 +1,50 @@
---
description: Initialize directory structure for Webflow to self-served page conversion
argument-hint: [optional-directory-path]
allowed-tools: Bash, Write, Read
---
Initialize the directory structure for Webflow conversion.
**Target Directory**: $ARGUMENTS (if provided, otherwise current directory)
## Setup Tasks
### 1. Create Directory Structure
```bash
mkdir -p data scripts js
```
### 2. Validate Webflow Export
Check for:
- At least one `.html` file
- At least one `.csv` file
- Webflow classes (`.w-dyn-list`, `.w-dyn-bind-empty`)
If validation fails, warn the user that this might not be a valid Webflow export.
### 3. Report Findings
Display:
```
✅ Webflow Export Setup Complete
📁 Directory Structure:
- data/ (for generated JSON files)
- scripts/ (for CSV converter)
- js/ (for CMS loader)
📊 Detected Files:
- HTML files: X
- CSV files: X
- Collections detected: [list names]
🚀 Next Steps:
Run '/webflow-convert' to start the conversion process.
```
### 4. Optional: Copy Templates
If the user confirms, copy template files:
- `csv-to-json.py` → `scripts/`
- `cms-loader.js` → `js/`
**Note**: This command just sets up the structure. Use `/webflow-convert` for the full conversion workflow.

82
commands/webflow-update.md Normal file
View File

@@ -0,0 +1,82 @@
---
description: Regenerate JSON files after CSV changes
argument-hint: [optional-csv-filename]
allowed-tools: Bash, Read, Glob
---
Regenerate JSON files after CSV content has been updated.
**Target CSV**: $ARGUMENTS (if provided, otherwise process all CSV files)
## Update Workflow
### 1. Verify CSV Files
Check that CSV files exist:
- If specific file provided: verify it exists
- If no file specified: find all `.csv` files
### 2. Verify Converter Exists
Check that `scripts/csv-to-json.py` exists.
If not found, suggest running `/webflow-convert` first for initial setup.
### 3. Run Conversion
Execute the CSV to JSON converter:
```bash
python3 scripts/csv-to-json.py
```
### 4. Report Results
```
♻️ CSV Update Complete
📊 Results:
- CSV files processed: X
- JSON files updated: X
- Total items: X
📁 Updated Files:
- data/cms-collection1.json (X items)
- data/cms-collection2.json (X items)
...
✅ Changes Applied:
Your static page will now display the updated content.
🌐 Preview Changes:
Run '/webflow-preview' to see the updates in your browser.
💡 Tip: Hard refresh (Ctrl+F5) to clear browser cache.
```
### 5. Optional: Auto-Preview
Ask user if they want to start/restart the preview server to see changes immediately.
## Update Scenarios
### Scenario 1: Single CSV Updated
```bash
/webflow-update testimonials.csv
```
Only regenerates `cms-testimonials.json`
### Scenario 2: All CSVs Updated
```bash
/webflow-update
```
Regenerates all JSON files
### Scenario 3: New CSV Added
If a new CSV file is detected that doesn't have a corresponding JSON:
```
🆕 New Collection Detected: new-collection.csv
This CSV wasn't in the original conversion.
Would you like to:
1. Run full conversion (/webflow-convert) to integrate it
2. Just generate JSON for now
3. Skip this file
Recommendation: Run /webflow-convert to ensure CMS loader supports this collection.
```
**Performance Note**: This is much faster than `/webflow-convert` since it only regenerates JSON, not the entire conversion.