Muyue
e3debb3f71
## Enhanced Mode v2 - Smart Section-Based Editing (routes/ai.js) ### Server-Side Section Replacement Architecture - Add cleanMarkdownFromTitle() to normalize section titles for matching - Add extractHeaders() to list all document sections for debugging - Add replaceSection() to surgically replace only modified sections - AI now returns ONLY the modified section, not entire document - Server automatically replaces section in original document - Automatic header level correction if AI changes ## to ### or vice versa - Section boundary detection based on header hierarchy ### Enhanced Prompt and Response Format - Modified prompt to explicitly request ONLY modified section - New closing format: document (mandatory) - Added fallback regex for old format with warnings - Explicit rules: keep exact header level (## stays ##) - Clear section boundary definition in prompt - Examples with proper formatting guidelines ### Comprehensive Logging System - Log all API requests with method, endpoint, payload size - Log AI responses with length and preview - Log section matching and replacement operations - Log header level corrections - Log section not found errors with available sections list - Track modified sections across iterations ## AI Button Mutex and Preview Mode Controls (assets/js/app.js) ### AI Button Mutex (Prevent API Overload) - Add disableAIButtons() to disable all AI buttons during operations - Add enableAIButtons() to re-enable after completion or error - Disable all AI buttons at start of any AI operation - Re-enable in finally blocks to ensure cleanup even on errors - Re-enable on validation failures (e.g., no text selected for rephrase) - Re-enable when user clicks Apply/Cancel in rephrase mode ### Preview Mode Button Restrictions - Disable Preview button during Enhanced Mode operation - Disable all AI buttons in preview mode (rephrase, inconsistencies, duplications, advice, liberty) - Disable Save and Load buttons in preview mode - Re-enable all buttons when returning to edit mode - Proper cleanup with finally blocks ## Mermaid Auto-Fix System - Complete Removal ### Removed from assets/js/app.js - Remove mermaidFixAttempts Set from constructor - Remove setupMessageListener() and postMessage handler - Remove fixMermaidDiagramBackground() function - Simplify Mermaid error display to inline messages only - Remove hash-based tracking mechanism ### Removed from routes/index.js (Present Mode) - Remove entire auto-fix fetch and retry logic - Remove status div updates and fix notifications - Remove postMessage to parent window - Simplify to display styled error message only ### Current Behavior - Preview mode: Shows inline error with simple message - Present mode: Shows styled error box with instructions - No automatic fix attempts - manual correction only ## Additional Improvements - Clean markdown formatting (##, **, etc.) from section titles in UI badges - Proper section title matching ignoring markdown syntax - Enhanced error handling with detailed logging - Better user feedback during Enhanced Mode iterations This release improves Enhanced Mode reliability, prevents API overload through button mutex, simplifies Mermaid error handling, and adds comprehensive logging for debugging.
211 lines
6.5 KiB
JavaScript
211 lines
6.5 KiB
JavaScript
const express = require('express');
|
|
const router = express.Router();
|
|
const { getPage } = require('../views/page');
|
|
|
|
// Main route
|
|
router.get('/', (req, res) => {
|
|
res.send(getPage());
|
|
});
|
|
|
|
// Present route - Display document in presentation mode
|
|
router.post('/present', (req, res) => {
|
|
const { content } = req.body;
|
|
|
|
res.send(`
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Presentation - Design Journal</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
<link rel="stylesheet" href="/assets/css/github-preview.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg-color);
|
|
}
|
|
#presentation-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 3rem 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
.presentation-header {
|
|
text-align: center;
|
|
padding: 2rem 0;
|
|
border-bottom: 2px solid var(--border-color);
|
|
margin-bottom: 3rem;
|
|
}
|
|
.presentation-header h1 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: var(--primary-color);
|
|
}
|
|
.presentation-header .date {
|
|
color: var(--text-light);
|
|
font-size: 0.9rem;
|
|
}
|
|
.presentation-content {
|
|
line-height: 1.8;
|
|
}
|
|
.print-button {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.print-button:hover {
|
|
background: var(--primary-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
}
|
|
@media print {
|
|
.print-button {
|
|
display: none;
|
|
}
|
|
#presentation-container {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="print-button" onclick="window.print()">Print / Save PDF</button>
|
|
|
|
<div id="presentation-container">
|
|
<div class="presentation-header">
|
|
<h1>Design Journal</h1>
|
|
<div class="date">${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
|
|
</div>
|
|
<div class="presentation-content markdown-body" id="content"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Render markdown content first
|
|
const content = ${JSON.stringify(content)};
|
|
const contentDiv = document.getElementById('content');
|
|
contentDiv.innerHTML = marked.parse(content);
|
|
|
|
// Initialize Mermaid
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',
|
|
securityLevel: 'loose'
|
|
});
|
|
|
|
// Process Mermaid diagrams
|
|
setTimeout(() => {
|
|
// Find all code blocks with 'mermaid' language
|
|
const mermaidBlocks = contentDiv.querySelectorAll('code.language-mermaid, pre code.language-mermaid');
|
|
|
|
mermaidBlocks.forEach((block, index) => {
|
|
try {
|
|
const mermaidCode = block.textContent;
|
|
const uniqueId = 'mermaid-' + Date.now() + '-' + index;
|
|
|
|
// Create div with unique ID for Mermaid
|
|
const mermaidDiv = document.createElement('div');
|
|
mermaidDiv.id = uniqueId;
|
|
mermaidDiv.className = 'mermaid';
|
|
mermaidDiv.textContent = mermaidCode;
|
|
|
|
// Replace code block with Mermaid div
|
|
const pre = block.closest('pre') || block;
|
|
pre.parentNode.replaceChild(mermaidDiv, pre);
|
|
|
|
// Render diagram
|
|
mermaid.render(uniqueId + '-svg', mermaidCode).then(function(result) {
|
|
mermaidDiv.innerHTML = result.svg;
|
|
}).catch(function(err) {
|
|
console.warn('Mermaid rendering error:', err);
|
|
|
|
// Show error message inline
|
|
mermaidDiv.innerHTML = '<div style="padding: 1.5rem; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; margin: 1rem 0;">' +
|
|
'<h4 style="margin-top: 0; color: #856404;">[!] Mermaid Diagram Error</h4>' +
|
|
'<p style="margin: 0.5rem 0;"><strong>Error:</strong> ' + err.message + '</p>' +
|
|
'<p style="margin: 1rem 0 0.5rem 0; color: #666;">Please check the diagram syntax in the editor.</p>' +
|
|
'</div>';
|
|
});
|
|
} catch (error) {
|
|
console.warn('Mermaid processing error:', error);
|
|
}
|
|
});
|
|
}, 200);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
});
|
|
|
|
// About route
|
|
router.get('/about', (req, res) => {
|
|
const { getHeader } = require('../views/header');
|
|
const { getFooter } = require('../views/footer');
|
|
|
|
res.send(`
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>About - Design Journal</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
${getHeader()}
|
|
|
|
<main style="display: block; max-width: 800px; margin: 0 auto; padding: 2rem;">
|
|
<section>
|
|
<h2>About the Application</h2>
|
|
<div style="padding: 2rem;">
|
|
<p>
|
|
This application helps teams maintain structured and collaborative tracking of their design projects. It allows archiving key steps, ensuring traceability of decisions, and simplifying coordination.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="margin-top: 2rem;">
|
|
<h2>History</h2>
|
|
<div style="padding: 2rem;">
|
|
<p>
|
|
This project was born from the need to centralize and organize design notes during the development of technical projects. It offers an intuitive environment for documenting architectural decisions and tracking project evolution.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="margin-top: 2rem;">
|
|
<h2>Open Source</h2>
|
|
<div style="padding: 2rem;">
|
|
<p>
|
|
This project is open source and available under the MIT License. Contributions are welcome!
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="text-align: center; margin: 3rem 0 2rem 0;">
|
|
<a href="/" style="background: var(--secondary-color); color: white; padding: 0.8rem 2rem; text-decoration: none; border-radius: 25px; display: inline-block; transition: all 0.3s ease;">
|
|
Back to Application
|
|
</a>
|
|
</div>
|
|
</main>
|
|
|
|
${getFooter()}
|
|
|
|
<script src="/assets/js/theme.js"></script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
});
|
|
|
|
module.exports = router; |