obsidian-plugin/jacobinwwey_obsidian-NotEMD
1
0
Fork 0
mirror of https://github.com/jacobinwwey/obsidian-NotEMD.git synced 2026-07-22 12:40:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
jacobinwwey_obsidian-NotEMD/docs/SLIDEV_HTML_FIX.md
Jacobinwwey 121bee0f5d fix(standalone-bundle): correct export transformation for Vue components 
## Bug Fix
- Fix empty slide rendering in standalone HTML bundles
- Root cause: export {X as default} only generated module.exports.default=X
- Solution: Generate dual assignment module.exports.default=module.exports=X
- Result: Vue components now load correctly, all slides display content

## Documentation Added
- docs/STANDALONE_BUNDLE_FIX.md - Detailed bug fix analysis
- BUNDLE_SCRIPTS_README.md - Bundler scripts reference
- docs/export/README.md - User export guide
- docs/dist/README.md - Build output reference
- CHANGELOG_STANDALONE_BUNDLE.md - Version history
- .github/BUNDLE_EXPORT_GUIDE.md - Contributor guide
- DOCUMENTATION_INDEX.md - Complete documentation index
- SUMMARY.md - Update summary

## Documentation Updated
- docs/SINGLE_FILE_BUNDLER.md - Added bugfix section
- docs/README.md - Added slide export documentation links
- test-bundle-FIXED.js - Added header comments

## Testing
- Automated verification: PASS
- Visual test: Content displays correctly
- Cross-browser: Chrome, Firefox, Edge verified
- Protocol: file:// and http:// both working
2026-06-16 04:48:46 -05:00

3.4 KiB
Raw Blame History

Slidev HTML Export Fix - Testing Documentation

Problem

Slidev HTML exports use ES modules with dynamic imports, which are blocked by browser CORS policy when opened via file:// protocol. This causes the slides to fail loading in Edge, Firefox, Chrome when double-clicked.

Solution

Generate standalone server scripts (start-server.sh and start-server.bat) along with the HTML export. Users can run these scripts to serve the presentation via HTTP, which bypasses the file:// protocol restriction.

Key Features

  • No plugin dependency: Users can run presentations even when Obsidian/plugin is closed
  • No embedded HTTP server: Plugin doesn't run any server, eliminating attack surface
  • Cross-platform: Works on Windows, macOS, Linux
  • Auto-detection: Scripts automatically detect Python or Node.js
  • User-friendly: Simple one-command execution

Implementation Files

  • src/slideExport/serverScripts.ts - Generates server scripts and README
  • src/slideExport/slidevExporter.ts - Calls script generator after HTML build
  • src/slideExport/localServer.ts - (Optional) Auto-launch helper when plugin is active
  • src/main.ts - Integration with plugin commands

Testing

1. Build Plugin

cd ~/obsidian-NotEMD
npm run build

2. Export Slides via Obsidian

  • Open Obsidian with NotEMD plugin
  • Open a markdown file with Slidev frontmatter
  • Run command: "Export Slides"
  • Set format to "HTML"
  • Export completes

3. Verify Generated Files

Check the export directory contains:

  • index.html - Main presentation file
  • assets/ - JavaScript and CSS bundles
  • start-server.sh - Unix/macOS server script
  • start-server.bat - Windows server script
  • README.md - User instructions

4. Test Server Script (Manual)

cd docs/export/<presentation-name>-slides
./start-server.sh

Expected output:

🎬 Starting Slidev Presentation Server
📍 Server: http://localhost:8765
⏹  Press Ctrl+C to stop

▶ Using Python 3...

5. Test in Browser

Open http://localhost:8765 in:

  • Chrome
  • Firefox
  • Edge

Expected: Presentation loads and displays correctly with all slides navigable.

6. Test Without Plugin

  1. Close Obsidian completely
  2. Navigate to export directory in file manager
  3. Run start-server.sh (or .bat on Windows)
  4. Open http://localhost:8765
  5. Verify presentation works

Verification Checklist

  • Plugin builds without errors
  • HTML export generates all required files
  • start-server.sh has execute permissions
  • Server script auto-detects Python/Node.js
  • Presentation loads at http://localhost:8765
  • All slides are navigable
  • Dynamic content (v-clicks, animations) works
  • Works in Chrome, Firefox, Edge
  • Works when Obsidian is closed
  • README provides clear instructions
  • No HTTP server embedded in plugin

Security Notes

  • Server runs only on localhost (127.0.0.1)
  • No external network access
  • User must manually start/stop server
  • No persistent background process
  • Plugin itself runs no server
  • Clean architecture with no attack surface

Future Enhancements (Optional)

  1. Auto-detect available port if 8765 is busy
  2. Add option to auto-open browser when plugin exports
  3. Include QR code for mobile viewing
  4. Add server status indicator

Resolved Issues

  • ✅ HTML exports work without plugin running
  • ✅ No embedded HTTP server in plugin
  • ✅ Cross-platform compatibility
  • ✅ Simple user experience
  • ✅ Secure by design