generated from coulomb/repo-seed
docs: comprehensive feature documentation and HTML generation system
Added complete documentation for all TestDrive-JSUI controls and features, plus flexible HTML generation system supporting standalone and external modes. Documentation (8 files, 3,533 lines): - docs/features/README.md: Central hub with overview, config, examples - docs/features/section-editing.md: Section editing guide - docs/features/edit-control.md: Document actions and editing tools - docs/features/status-control.md: Real-time statistics and tracking - docs/features/contents-control.md: Table of contents navigation - docs/features/debug-control.md: Development and debugging tools - docs/features/keyboard-shortcuts.md: Complete shortcuts reference - docs/features/themes.md: Visual theming and customization HTML Generation System (3 files, 1,104 lines): - js/utils/html-generator.js: Dual-mode HTML generator class * Standalone mode: All CSS/JS embedded inline * External mode: References _jsui/ directory * Configurable options for title, content, controls, theme * Download and save functionality - _jsui/ directory: External resources structure * README.md: Comprehensive usage guide * css/: Symlinked CSS files (base, editor, controls, themes) * js/: Symlinked JavaScript files (core, components, controls) * Enables smaller HTML files with browser caching - examples/html-generator-demo.html: Interactive demo * Web-based configuration form * Side-by-side mode comparison * Live generation and preview * Download and copy functionality Key Features: - 4,637 total lines of documentation and code - All controls documented with examples and troubleshooting - Flexible deployment options (standalone vs external) - Developer-friendly structure with clear guides - Production-ready system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
434
examples/html-generator-demo.html
Normal file
434
examples/html-generator-demo.html
Normal file
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML Generator Demo - TestDrive-JSUI</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #24292e;
|
||||
background: #f6f8fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #0366d6;
|
||||
margin-bottom: 15px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #586069;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: #24292e;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e1e4e8;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-bottom: 15px;
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #d1d5da;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #0366d6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #0256c7;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #6a737d;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: #586069;
|
||||
}
|
||||
|
||||
.output {
|
||||
background: #f6f8fa;
|
||||
border: 1px solid #d1d5da;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 12px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #e8f5e9;
|
||||
border: 1px solid #a5d6a7;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
background: #f6f8fa;
|
||||
border: 2px solid #d1d5da;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.comparison-card h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #0366d6;
|
||||
}
|
||||
|
||||
.comparison-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comparison-card li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
}
|
||||
|
||||
.comparison-card li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.comparison-card li::before {
|
||||
content: "✓ ";
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: #fff3cd;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🎨 HTML Generator Demo</h1>
|
||||
<p>Generate TestDrive-JSUI HTML in standalone or external resources mode</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>⚙️ Configuration</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="title">Document Title:</label>
|
||||
<input type="text" id="title" value="My Test Document" placeholder="Enter title...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description:</label>
|
||||
<input type="text" id="description" value="Interactive markdown editor demo" placeholder="Enter description...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="markdown">Markdown Content:</label>
|
||||
<textarea id="markdown" placeholder="Enter markdown content..."># Welcome to TestDrive-JSUI
|
||||
|
||||
This is a **demo document** showing the HTML generator.
|
||||
|
||||
## Features
|
||||
|
||||
- Section editing
|
||||
- Control panels
|
||||
- Keyboard shortcuts
|
||||
- Theming support
|
||||
|
||||
## Getting Started
|
||||
|
||||
Click any section to edit it. Try the controls on the sides!</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Mode:</label>
|
||||
<div class="checkbox-group">
|
||||
<label>
|
||||
<input type="radio" name="mode" value="edit" checked> Edit Mode
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="mode" value="view"> View Mode
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Control Panels:</label>
|
||||
<div class="checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="editControl" checked> Edit Control
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="statusControl" checked> Status Control
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="contentsControl" checked> Contents Control
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="debugControl"> Debug Control
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Options:</label>
|
||||
<div class="checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="shortcuts" checked> Keyboard Shortcuts
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="autosave"> Autosave
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>📦 Generation Mode</h2>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="comparison-card">
|
||||
<h3>Standalone Mode</h3>
|
||||
<ul>
|
||||
<li>All CSS/JS embedded inline</li>
|
||||
<li>Single file portability</li>
|
||||
<li>No external dependencies</li>
|
||||
<li>Larger file size (~100+ KB)</li>
|
||||
<li>Works via file://</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="comparison-card">
|
||||
<h3>External Resources Mode</h3>
|
||||
<ul>
|
||||
<li>References _jsui/ directory</li>
|
||||
<li>Smaller HTML files</li>
|
||||
<li>Browser caching</li>
|
||||
<li>Easier to debug</li>
|
||||
<li>Requires web server</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px; text-align: center;">
|
||||
<button onclick="generateStandalone()">📄 Generate Standalone HTML</button>
|
||||
<button onclick="generateExternal()" class="secondary">🔗 Generate External HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>📋 Generated HTML</h2>
|
||||
<div class="info-box">
|
||||
<strong>Note:</strong> Click one of the buttons above to generate HTML.
|
||||
The output will appear below and can be downloaded.
|
||||
</div>
|
||||
<div id="output" class="output">
|
||||
<!-- Generated HTML will appear here -->
|
||||
<em>No HTML generated yet. Click a button above to generate.</em>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<button onclick="downloadHTML()" id="downloadBtn" style="display: none;">💾 Download HTML</button>
|
||||
<button onclick="copyHTML()" id="copyBtn" style="display: none;" class="secondary">📋 Copy to Clipboard</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../js/utils/html-generator.js"></script>
|
||||
<script>
|
||||
let generatedHTML = '';
|
||||
|
||||
function getConfig() {
|
||||
return {
|
||||
title: document.getElementById('title').value,
|
||||
description: document.getElementById('description').value,
|
||||
markdown: document.getElementById('markdown').value,
|
||||
mode: document.querySelector('input[name="mode"]:checked').value,
|
||||
theme: 'github',
|
||||
controls: {
|
||||
editControl: document.getElementById('editControl').checked,
|
||||
statusControl: document.getElementById('statusControl').checked,
|
||||
contentsControl: document.getElementById('contentsControl').checked,
|
||||
debugControl: document.getElementById('debugControl').checked
|
||||
},
|
||||
shortcuts: document.getElementById('shortcuts').checked,
|
||||
autosave: document.getElementById('autosave').checked
|
||||
};
|
||||
}
|
||||
|
||||
function generateStandalone() {
|
||||
const config = getConfig();
|
||||
config.standalone = true;
|
||||
|
||||
const generator = new HTMLGenerator(config);
|
||||
generatedHTML = generator.generate();
|
||||
|
||||
displayHTML(generatedHTML);
|
||||
console.log('✓ Standalone HTML generated');
|
||||
}
|
||||
|
||||
function generateExternal() {
|
||||
const config = getConfig();
|
||||
config.standalone = false;
|
||||
config.baseUrl = '_jsui';
|
||||
|
||||
const generator = new HTMLGenerator(config);
|
||||
generatedHTML = generator.generate();
|
||||
|
||||
displayHTML(generatedHTML);
|
||||
console.log('✓ External HTML generated');
|
||||
}
|
||||
|
||||
function displayHTML(html) {
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = html;
|
||||
|
||||
// Show action buttons
|
||||
document.getElementById('downloadBtn').style.display = 'inline-block';
|
||||
document.getElementById('copyBtn').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function downloadHTML() {
|
||||
if (!generatedHTML) {
|
||||
alert('No HTML generated yet!');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([generatedHTML], { type: 'text/html' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'testdrive-jsui-editor.html';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
console.log('✓ HTML downloaded');
|
||||
}
|
||||
|
||||
function copyHTML() {
|
||||
if (!generatedHTML) {
|
||||
alert('No HTML generated yet!');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(generatedHTML).then(() => {
|
||||
alert('HTML copied to clipboard!');
|
||||
console.log('✓ HTML copied to clipboard');
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
alert('Failed to copy HTML. Check browser permissions.');
|
||||
});
|
||||
}
|
||||
|
||||
// Log successful load
|
||||
console.log('✓ HTML Generator Demo loaded');
|
||||
console.log('HTMLGenerator available:', typeof HTMLGenerator !== 'undefined');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user