markupr 2.1.8 → 2.5.0

package/src/main/output/templates/html-template.ts

@@ -1,553 +0,0 @@
-/**
- * HTML Template for Standalone Export
- *
- * Generates a self-contained HTML document with:
- * - Embedded CSS (no external dependencies)
- * - Dark theme matching markupr aesthetic
- * - Base64-embedded images
- * - Responsive design
- * - Print-friendly styles
- */
-
-import type { Session, FeedbackItem, FeedbackCategory, FeedbackSeverity } from '../MarkdownGenerator';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface HtmlExportOptions {
-  projectName?: string;
-  includeImages?: boolean;
-  theme?: 'dark' | 'light';
-}
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-function formatDuration(ms: number): string {
-  const totalSeconds = Math.floor(ms / 1000);
-  const mins = Math.floor(totalSeconds / 60);
-  const secs = totalSeconds % 60;
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatTimestamp(ms: number): string {
-  return new Date(ms).toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-function generateTitle(transcription: string): string {
-  const firstSentence = transcription.split(/[.!?]/)[0].trim();
-  if (firstSentence.length <= 50) return escapeHtml(firstSentence);
-  return escapeHtml(firstSentence.slice(0, 47) + '...');
-}
-
-function escapeHtml(text: string): string {
-  const map: Record<string, string> = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#039;',
-  };
-  return text.replace(/[&<>"']/g, (char) => map[char] || char);
-}
-
-function countByCategory(session: Session): Record<string, number> {
-  return session.feedbackItems.reduce((acc, item) => {
-    const category = item.category || 'General';
-    acc[category] = (acc[category] || 0) + 1;
-    return acc;
-  }, {} as Record<string, number>);
-}
-
-function getCategoryClass(category: FeedbackCategory): string {
-  const classes: Record<FeedbackCategory, string> = {
-    Bug: 'tag-bug',
-    'UX Issue': 'tag-ux',
-    Suggestion: 'tag-suggestion',
-    Performance: 'tag-performance',
-    Question: 'tag-question',
-    General: 'tag-general',
-  };
-  return classes[category] || 'tag-general';
-}
-
-function getSeverityClass(severity: FeedbackSeverity): string {
-  const classes: Record<FeedbackSeverity, string> = {
-    Critical: 'severity-critical',
-    High: 'severity-high',
-    Medium: 'severity-medium',
-    Low: 'severity-low',
-  };
-  return classes[severity] || 'severity-medium';
-}
-
-// ============================================================================
-// CSS Styles
-// ============================================================================
-
-function getStyles(theme: 'dark' | 'light'): string {
-  const isDark = theme === 'dark';
-
-  return `
-    :root {
-      --bg: ${isDark ? '#0f172a' : '#ffffff'};
-      --bg-secondary: ${isDark ? '#1e293b' : '#f8fafc'};
-      --text: ${isDark ? '#e2e8f0' : '#1e293b'};
-      --text-secondary: ${isDark ? '#94a3b8' : '#64748b'};
-      --border: ${isDark ? '#334155' : '#e2e8f0'};
-      --accent: #3b82f6;
-      --accent-soft: ${isDark ? 'rgba(59, 130, 246, 0.15)' : 'rgba(59, 130, 246, 0.1)'};
-    }
-
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    .container {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    /* Header */
-    header {
-      margin-bottom: 2.5rem;
-      padding-bottom: 1.5rem;
-      border-bottom: 2px solid var(--accent);
-    }
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      color: ${isDark ? '#ffffff' : '#0f172a'};
-      margin-bottom: 0.75rem;
-      letter-spacing: -0.025em;
-    }
-
-    .meta {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      display: flex;
-      gap: 1rem;
-      flex-wrap: wrap;
-    }
-
-    .meta-item {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
-
-    .meta-item svg {
-      width: 14px;
-      height: 14px;
-      opacity: 0.7;
-    }
-
-    /* Feedback Items */
-    .feedback-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-    }
-
-    .feedback-item {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 1.5rem;
-      transition: box-shadow 0.2s ease;
-    }
-
-    .feedback-item:hover {
-      box-shadow: 0 4px 12px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.08)'};
-    }
-
-    .feedback-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    .feedback-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: ${isDark ? '#ffffff' : '#0f172a'};
-      margin: 0;
-    }
-
-    .feedback-id {
-      font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
-      font-size: 0.75rem;
-      font-weight: 500;
-      color: var(--text-secondary);
-      background: var(--bg);
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-      white-space: nowrap;
-    }
-
-    .tags {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      margin-bottom: 1rem;
-    }
-
-    .tag {
-      padding: 0.25rem 0.75rem;
-      border-radius: 9999px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.025em;
-    }
-
-    .tag-bug { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
-    .tag-ux { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
-    .tag-suggestion { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
-    .tag-performance { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
-    .tag-question { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
-    .tag-general { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
-
-    .severity-critical { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
-    .severity-high { background: rgba(234, 88, 12, 0.15); color: #ea580c; }
-    .severity-medium { background: rgba(202, 138, 4, 0.15); color: #ca8a04; }
-    .severity-low { background: rgba(101, 163, 13, 0.15); color: #65a30d; }
-
-    blockquote {
-      border-left: 3px solid var(--accent);
-      margin: 0;
-      padding: 0.75rem 0 0.75rem 1rem;
-      color: var(--text);
-      font-size: 0.9375rem;
-      background: var(--accent-soft);
-      border-radius: 0 8px 8px 0;
-    }
-
-    .screenshots {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 0.75rem;
-      margin-top: 1rem;
-    }
-
-    .screenshot {
-      border-radius: 8px;
-      overflow: hidden;
-      border: 1px solid var(--border);
-      background: var(--bg);
-    }
-
-    .screenshot img {
-      width: 100%;
-      height: auto;
-      display: block;
-    }
-
-    /* Summary Section */
-    .summary {
-      margin-top: 3rem;
-      padding-top: 2rem;
-      border-top: 1px solid var(--border);
-    }
-
-    .summary h2 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: ${isDark ? '#ffffff' : '#0f172a'};
-      margin-bottom: 1.25rem;
-    }
-
-    .summary-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.875rem;
-    }
-
-    .summary-table th,
-    .summary-table td {
-      padding: 0.75rem 1rem;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .summary-table th {
-      font-weight: 600;
-      color: var(--text-secondary);
-      text-transform: uppercase;
-      font-size: 0.75rem;
-      letter-spacing: 0.05em;
-    }
-
-    .summary-table tbody tr:hover {
-      background: var(--accent-soft);
-    }
-
-    .summary-table tfoot td {
-      font-weight: 600;
-      border-top: 2px solid var(--border);
-      background: var(--bg-secondary);
-    }
-
-    /* Footer */
-    footer {
-      margin-top: 3rem;
-      padding-top: 1.5rem;
-      border-top: 1px solid var(--border);
-      text-align: center;
-      color: var(--text-secondary);
-      font-size: 0.8125rem;
-    }
-
-    footer a {
-      color: var(--accent);
-      text-decoration: none;
-    }
-
-    footer a:hover {
-      text-decoration: underline;
-    }
-
-    /* Print Styles */
-    @media print {
-      body {
-        background: white;
-        color: black;
-      }
-
-      .container {
-        max-width: 100%;
-        padding: 1rem;
-      }
-
-      .feedback-item {
-        break-inside: avoid;
-        page-break-inside: avoid;
-      }
-
-      .screenshot img {
-        max-height: 300px;
-        object-fit: contain;
-      }
-    }
-
-    /* Responsive */
-    @media (max-width: 640px) {
-      .container {
-        padding: 1rem;
-      }
-
-      h1 {
-        font-size: 1.5rem;
-      }
-
-      .feedback-header {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      .feedback-id {
-        align-self: flex-start;
-      }
-
-      .screenshots {
-        grid-template-columns: 1fr;
-      }
-    }
-  `;
-}
-
-// ============================================================================
-// HTML Generator
-// ============================================================================
-
-function generateFeedbackItemHtml(item: FeedbackItem, index: number, includeImages: boolean): string {
-  const id = `FB-${(index + 1).toString().padStart(3, '0')}`;
-  const category = item.category || 'General';
-  const severity = item.severity || 'Medium';
-
-  let screenshotsHtml = '';
-  if (includeImages && item.screenshots.length > 0) {
-    const imagesHtml = item.screenshots
-      .map((ss, ssIndex) => {
-        if (ss.base64) {
-          return `
-            <div class="screenshot">
-              <img src="data:image/png;base64,${ss.base64}" alt="Screenshot ${ssIndex + 1}" loading="lazy" />
-            </div>
-          `;
-        }
-        return '';
-      })
-      .filter(Boolean)
-      .join('');
-
-    if (imagesHtml) {
-      screenshotsHtml = `<div class="screenshots">${imagesHtml}</div>`;
-    }
-  }
-
-  return `
-    <article class="feedback-item">
-      <div class="feedback-header">
-        <h3 class="feedback-title">${generateTitle(item.transcription)}</h3>
-        <span class="feedback-id">${id}</span>
-      </div>
-      <div class="tags">
-        <span class="tag ${getCategoryClass(category as FeedbackCategory)}">${escapeHtml(category)}</span>
-        <span class="tag ${getSeverityClass(severity as FeedbackSeverity)}">${escapeHtml(severity)}</span>
-      </div>
-      <blockquote>${escapeHtml(item.transcription)}</blockquote>
-      ${screenshotsHtml}
-    </article>
-  `;
-}
-
-function generateSummaryTableHtml(session: Session): string {
-  const categories = countByCategory(session);
-  const rows = Object.entries(categories)
-    .map(([category, count]) => `
-      <tr>
-        <td>${escapeHtml(category)}</td>
-        <td>${count}</td>
-      </tr>
-    `)
-    .join('');
-
-  return `
-    <table class="summary-table">
-      <thead>
-        <tr>
-          <th>Category</th>
-          <th>Count</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${rows}
-      </tbody>
-      <tfoot>
-        <tr>
-          <td>Total</td>
-          <td>${session.feedbackItems.length}</td>
-        </tr>
-      </tfoot>
-    </table>
-  `;
-}
-
-// ============================================================================
-// Main Export Function
-// ============================================================================
-
-export function generateHtmlDocument(session: Session, options: HtmlExportOptions = {}): string {
-  const {
-    projectName = session.metadata?.sourceName || 'Project',
-    includeImages = true,
-    theme = 'dark',
-  } = options;
-
-  const duration = session.endTime
-    ? formatDuration(session.endTime - session.startTime)
-    : 'In Progress';
-  const timestamp = formatTimestamp(session.endTime || Date.now());
-  const screenshotCount = session.feedbackItems.reduce(
-    (sum, item) => sum + item.screenshots.length,
-    0
-  );
-
-  const feedbackItemsHtml = session.feedbackItems
-    .map((item, index) => generateFeedbackItemHtml(item, index, includeImages))
-    .join('');
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="generator" content="markupr">
-  <meta name="theme-color" content="${theme === 'dark' ? '#0f172a' : '#ffffff'}">
-  <title>${escapeHtml(projectName)} - Feedback Report</title>
-  <style>${getStyles(theme)}</style>
-</head>
-<body>
-  <div class="container">
-    <header>
-      <h1>${escapeHtml(projectName)} Feedback Report</h1>
-      <div class="meta">
-        <span class="meta-item">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-            <line x1="16" y1="2" x2="16" y2="6"></line>
-            <line x1="8" y1="2" x2="8" y2="6"></line>
-            <line x1="3" y1="10" x2="21" y2="10"></line>
-          </svg>
-          ${timestamp}
-        </span>
-        <span class="meta-item">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"></circle>
-            <polyline points="12 6 12 12 16 14"></polyline>
-          </svg>
-          ${duration}
-        </span>
-        <span class="meta-item">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-            <polyline points="14 2 14 8 20 8"></polyline>
-            <line x1="16" y1="13" x2="8" y2="13"></line>
-            <line x1="16" y1="17" x2="8" y2="17"></line>
-          </svg>
-          ${session.feedbackItems.length} items
-        </span>
-        <span class="meta-item">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-            <circle cx="8.5" cy="8.5" r="1.5"></circle>
-            <polyline points="21 15 16 10 5 21"></polyline>
-          </svg>
-          ${screenshotCount} screenshots
-        </span>
-      </div>
-    </header>
-
-    <main>
-      <div class="feedback-list">
-        ${feedbackItemsHtml}
-      </div>
-
-      <section class="summary">
-        <h2>Summary</h2>
-        ${generateSummaryTableHtml(session)}
-      </section>
-    </main>
-
-    <footer>
-      Generated by <a href="https://markupr.com" target="_blank" rel="noopener">markupr</a> ·
-      <a href="https://ko-fi.com/eddiesanjuan" target="_blank" rel="noopener">Support development</a>
-    </footer>
-  </div>
-</body>
-</html>`;
-}