/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { marked } from "https://esm.sh/marked"; // Utility function to capitalize the first letter of each word function capitalizeWords(str: string): string { return str .toLowerCase() .split(' ') .map(word => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } function CheatSheetGenerator() { const [topic, setTopic] = useState(''); const [author, setAuthor] = useState(''); const [webAddress, setWebAddress] = useState(''); const [callToAction, setCallToAction] = useState(''); const [additionalContext, setAdditionalContext] = useState(''); const [cheatSheet, setCheatSheet] = useState(''); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [error, setError] = useState(''); const [copySuccess, setCopySuccess] = useState(''); const generateCheatSheet = async () => { if (!topic.trim()) return; setLoading(true); setCheatSheet(''); setError(''); setProgress(0); try { const capitalizedTopic = capitalizeWords(topic); // Simulate progress const progressInterval = setInterval(() => { setProgress((prevProgress) => { const newProgress = prevProgress + 10; return newProgress > 90 ? 90 : newProgress; }); }, 1000); const response = await fetch('/generate', { method: 'POST', body: JSON.stringify({ topic: capitalizedTopic, author, webAddress, callToAction, additionalContext }), headers: { 'Content-Type': 'application/json' } }); clearInterval(progressInterval); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || 'Failed to generate cheat sheet'); } const result = await response.text(); setCheatSheet(result); setProgress(100); } catch (error) { setError(`Error: ${error.message}`); setProgress(0); } finally { setLoading(false); } }; const regenerateCheatSheet = () => { generateCheatSheet(); }; const copyToClipboard = async (format: 'HTML' | 'MD' | 'TXT') => { try { let content = ''; if (format === 'HTML') { content = cheatSheet; } else { const response = await fetch(`/convert?format=${format}`, { method: 'POST', body: cheatSheet, headers: { 'Content-Type': 'text/html' } }); if (!response.ok) { throw new Error(`Failed to convert to ${format}`); } content = await response.text(); } await navigator.clipboard.writeText(content); setCopySuccess(`Copied ${format} to clipboard!`); setTimeout(() => setCopySuccess(''), 3000); } catch (error) { console.error(`Error copying ${format} to clipboard:`, error); setError(`Failed to copy ${format} to clipboard. Please try again.`); } }; const downloadCheatSheet = async (format) => { try { const response = await fetch(`/download?format=${format}`, { method: 'POST', body: cheatSheet, headers: { 'Content-Type': 'text/html' } }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || `Failed to download ${format} file`); } const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = `cheat_sheet.${format.toLowerCase()}`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error(`Error downloading ${format} file:`, error); setError(`Failed to download ${format} file. Please try again.`); } }; return (

🧠 Cheat Sheet Generator

setTopic(e.target.value)} required />

setAuthor(e.target.value)} />

setWebAddress(e.target.value)} />

setCallToAction(e.target.value)} />

setAdditionalContext(e.target.value)}
                rows={3}
              />
            </div>
          </div>
          <div className="text-center">
            <button 
              className="btn btn-primary" 
              type="button" 
              onClick={generateCheatSheet}
              disabled={loading || !topic.trim()}
            >
              {loading ? 'Generating...' : 'Generate Cheat Sheet'}
            </button>
          </div>
        </div>
      </div>
      {loading && (
        <div className="text-center mt-4">
          <div className="progress mb-3">
            <div 
              className="progress-bar progress-bar-striped progress-bar-animated" 
              role="progressbar" 
              style={{width: `${progress}%`}} 
              aria-valuenow={progress} 
              aria-valuemin={0} 
              aria-valuemax={100}
            ></div>
          </div>
          <p>Generating your cheat sheet... This may take a minute.</p>
        </div>
      )}
      {error && (
        <div className="alert alert-danger mt-4" role="alert">
          {error}
        </div>
      )}
      {copySuccess && (
        <div className="alert alert-success mt-4" role="alert">
          {copySuccess}
        </div>
      )}
      {cheatSheet && (
        <div className="row mt-4">
          <div className="col-md-10 offset-md-1">
            <div className="d-flex justify-content-end mb-2">
              <button className="btn btn-secondary me-2" onClick={regenerateCheatSheet}>Regenerate</button>
              <div className="dropdown me-2">
                <button className="btn btn-success dropdown-toggle" type="button" id="copyDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                  Copy to Clipboard
                </button>
                <ul className="dropdown-menu" aria-labelledby="copyDropdown">
                  <li><button className="dropdown-item" onClick={() => copyToClipboard('HTML')}>HTML</button></li>
                  <li><button className="dropdown-item" onClick={() => copyToClipboard('MD')}>Markdown</button></li>
                  <li><button className="dropdown-item" onClick={() => copyToClipboard('TXT')}>Plain Text</button></li>
                </ul>
              </div>
              <div className="dropdown">
                <button className="btn btn-primary dropdown-toggle" type="button" id="downloadDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                  Download
                </button>
                <ul className="dropdown-menu" aria-labelledby="downloadDropdown">
                  <li><button className="dropdown-item" onClick={() => downloadCheatSheet('HTML')}>HTML</button></li>
                  <li><button className="dropdown-item" onClick={() => downloadCheatSheet('MD')}>Markdown</button></li>
                </ul>
              </div>
            </div>
            <div 
              className="card cheat-sheet-content"
              dangerouslySetInnerHTML={{ __html: cheatSheet }}
            />
          </div>
        </div>
      )}
      <a 
        href={import.meta.url.replace("esm.town", "val.town")} 
        target="_top" 
        className="text-muted small position-absolute bottom-0 end-0 m-3 d-print-none"
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<CheatSheetGenerator />);
}
if (typeof document !== "undefined") { client(); }

function sanitizeOpenAIResponse(response: string): string {
  // Remove ```html or ```markdown at the start and ``` at the end
  response = response.replace(/^```(html|markdown)\n/, '').replace(/\n```$/, '');
  
  // Remove any remaining ``` markers
  response = response.replace(/```/g, '');

// Remove any <style> tags to prevent CSS conflicts
  response = response.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');

// Convert Markdown to HTML
  const htmlContent = marked.parse(response, {
    breaks: true,
    gfm: true,
    headerIds: true,
    headerPrefix: 'section-'
  });

return htmlContent.trim();
}

export default async function server(request: Request): Promise<Response> {
  const url = new URL(request.url);

if (request.method === 'POST' && url.pathname === '/generate') {
    try {
      const { topic, author, webAddress, callToAction, additionalContext } = await request.json();
      const { OpenAI } = await import("https://esm.town/v/std/openai");
      
      const openai = new OpenAI();
      const completion = await openai.chat.completions.create({
        messages: [
          { 
            role: "system", 
            content: `You are a professional technical documentation expert creating a comprehensive, visually appealing cheat sheet. 
            
            Requirements for the cheat sheet:
            - Create a multi-section, professionally formatted document in Markdown
            - Use clear hierarchy with headers (# for main sections, ## for subsections)
            - Organize content into logical sections 
            - Use tables, lists, and code blocks where appropriate
            - Ensure content is dense but readable
            - Focus on practical, actionable information
            - Include advanced tips and best practices
            - Maintain a consistent, professional tone` 
          },
          { 
            role: "user", 
            content: `Create a comprehensive cheat sheet for: ${topic}. 
            Provide in-depth, practical information that a professional would find valuable. 
            Include advanced techniques, common pitfalls, and best practices.
            Format the entire document in GitHub Flavored Markdown.
            ${additionalContext ? `Additional context or focus areas: ${additionalContext}` : ''}` 
          }
        ],
        model: "gpt-4o-mini",
        max_tokens: 4000,
      });

let cheatSheetHtml = completion.choices[0].message.content;
      cheatSheetHtml = sanitizeOpenAIResponse(cheatSheetHtml);

// Create full HTML document with professional styling and structure
      const fullDocument = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>${topic} Cheat Sheet</title>
          <style>
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
            
            @page {
              size: A4;
              margin: 1cm;
            }
            
            * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
            }
            
            body {
              font-family: 'Inter', sans-serif;
              line-height: 1.6;
              color: #333;
              max-width: 210mm;
              margin: 0 auto;
              font-size: 10pt;
            }
            
            .title-page {
              height: 100vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              text-align: center;
              background-color: #f4f4f4;
              page-break-after: always;
            }
            
            .title-page h1 {
              font-size: 3rem;
              font-weight: 600;
              margin-bottom: 1rem;
              color: #2c3e50;
            }
            
            .title-page .subtitle {
              font-size: 1.5rem;
              color: #7f8c8d;
              margin-bottom: 2rem;
            }
            
            .copyright {
              font-size: 0.8rem;
              color: #7f8c8d;
              text-align: center;
              padding: 1rem;
              border-top: 1px solid #e0e0e0;
            }
            
            .cheat-sheet-content {
              padding: 1rem;
            }
            
            .cheat-sheet-content h1 {
              font-size: 18pt;
              border-bottom: 2px solid #2c3e50;
              padding-bottom: 0.5rem;
              margin: 1rem 0;
              color: #2c3e50;
            }
            
            .cheat-sheet-content h2 {
              font-size: 14pt;
              color: #34495e;
              margin-top: 1rem;
              margin-bottom: 0.5rem;
              border-bottom: 1px solid #bdc3c7;
              padding-bottom: 0.3rem;
            }
            
            .cheat-sheet-content h3 {
              font-size: 12pt;
              color: #34495e;
              margin-top: 0.8rem;
              margin-bottom: 0.4rem;
            }
            
            .cheat-sheet-content table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 1rem;
              font-size: 9pt;
            }
            
            .cheat-sheet-content table, 
            .cheat-sheet-content th, 
            .cheat-sheet-content td {
              border: 1px solid #bdc3c7;
              padding: 0.3rem;
            }
            
            .cheat-sheet-content th {
              background-color: #f4f4f4;
              font-weight: 600;
            }
            
            .cheat-sheet-content ul, 
            .cheat-sheet-content ol {
              margin-left: 1.5rem;
              margin-bottom: 0.8rem;
            }
            
            .cheat-sheet-content code {
              background-color: #f8f9fa;
              border: 1px solid #e9ecef;
              border-radius: 4px;
              padding: 0.1rem 0.2rem;
              font-family: 'Courier New', monospace;
              font-size: 8pt;
            }
            
            .cheat-sheet-content pre {
              background-color: #f8f9fa;
              border: 1px solid #e9ecef;
              border-radius: 4px;
              padding: 0.5rem;
              margin-bottom: 1rem;
              overflow-x: auto;
              font-size: 8pt;
            }
            
            @media print {
              body {
                width: 100%;
              }
              .title-page, .cheat-sheet-content {
                page-break-inside: avoid;
              }
            }
          </style>
        </head>
        <body>
          <div class="title-page">
            <h1>${topic} Cheat Sheet</h1>
            <div class="subtitle">Comprehensive Quick Reference Guide</div>
            <p>Created by: ${author || 'Anonymous'}</p>
            ${webAddress ? `<p>More info: <a href="${webAddress}">${webAddress}</a></p>` : ''}
          </div>
          
          <div class="copyright">
            © ${new Date().getFullYear()} ${author || 'Anonymous'}. 
            All rights reserved. 
            ${callToAction ? `| ${callToAction}` : ''}
          </div>
          
          <div class="cheat-sheet-content">
            ${cheatSheetHtml}
          </div>
        </body>
        </html>
      `;
      
      return new Response(fullDocument, {
        headers: { 'Content-Type': 'text/html' }
      });
    } catch (error) {
      console.error('Error generating cheat sheet:', error);
      return new Response(JSON.stringify({ message: `Error generating cheat sheet: ${error.message}` }), { 
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  } else if (request.method === 'POST' && url.pathname === '/download') {
    const format = url.searchParams.get('format');
    const htmlContent = await request.text();

if (format === 'HTML') {
      return new Response(htmlContent, {
        headers: {
          'Content-Type': 'text/html',
          'Content-Disposition': 'attachment; filename="cheat_sheet.html"'
        }
      });
    } else if (format === 'MD') {
      try {
        const TurndownService = (await import("https://esm.sh/turndown")).default;
        const turndownService = new TurndownService();
        const markdownContent = turndownService.turndown(htmlContent);
        return new Response(markdownContent, {
          headers: {
            'Content-Type': 'text/markdown',
            'Content-Disposition': 'attachment; filename="cheat_sheet.md"'
          }
        });
      } catch (error) {
        console.error('Error generating Markdown:', error);
        return new Response(JSON.stringify({ message: `Error generating Markdown: ${error.message}` }), { 
          status: 500,
          headers: { 'Content-Type': 'application/json' }
        });
      }
    } else {
      return new Response(JSON.stringify({ message: 'Invalid format specified' }), { 
        status: 400,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  } else if (request.method === 'POST' && url.pathname === '/convert') {
    const format = url.searchParams.get('format');
    const htmlContent = await request.text();

if (format === 'MD') {
      try {
        const TurndownService = (await import("https://esm.sh/turndown")).default;
        const turndownService = new TurndownService();
        const markdownContent = turndownService.turndown(htmlContent);
        return new Response(markdownContent, {
          headers: { 'Content-Type': 'text/markdown' }
        });
      } catch (error) {
        console.error('Error generating Markdown:', error);
        return new Response(JSON.stringify({ message: `Error generating Markdown: ${error.message}` }), { 
          status: 500,
          headers: { 'Content-Type': 'application/json' }
        });
      }
    } else if (format === 'TXT') {
      try {
        const plainText = htmlContent.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim();
        return new Response(plainText, {
          headers: { 'Content-Type': 'text/plain' }
        });
      } catch (error) {
        console.error('Error generating plain text:', error);
        return new Response(JSON.stringify({ message: `Error generating plain text: ${error.message}` }), { 
          status: 500,
          headers: { 'Content-Type': 'application/json' }
        });
      }
    } else {
      return new Response(JSON.stringify({ message: 'Invalid format specified' }), { 
        status: 400,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Cheat Sheet Generator</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
      <div id="root"></div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      <script src="https://esm.town/v/std/catch"></script>
      <script type="module" src="${import.meta.url}"></script>
    </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}</article></body></html>

cheatSheetCreator

Version 21