/** @jsxImportSource https://esm.sh/react */ import { marked } from "https://esm.sh/marked"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // 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 ContentGenerator() { const [topic, setTopic] = useState(""); const [author, setAuthor] = useState(""); const [webAddress, setWebAddress] = useState(""); const [callToAction, setCallToAction] = useState(""); const [additionalContext, setAdditionalContext] = useState(""); const [outputType, setOutputType] = useState("cheatSheet"); const [generatedContent, setGeneratedContent] = useState(""); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [error, setError] = useState(""); const [copySuccess, setCopySuccess] = useState(""); const [darkMode, setDarkMode] = useState(false); useEffect(() => { const savedDarkMode = localStorage.getItem("darkMode"); const isDarkMode = savedDarkMode ? JSON.parse(savedDarkMode) : window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; setDarkMode(isDarkMode); }, []); useEffect(() => { if (darkMode) { document.body.classList.add("dark-mode"); } else { document.body.classList.remove("dark-mode"); } localStorage.setItem("darkMode", JSON.stringify(darkMode)); }, [darkMode]); const generateContent = async () => { if (!topic.trim()) return; setLoading(true); setGeneratedContent(""); 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, outputType, }), headers: { "Content-Type": "application/json", }, }); clearInterval(progressInterval); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || "Failed to generate content"); } const result = await response.text(); setGeneratedContent(result); setProgress(100); } catch (error) { setError(`Error: ${error.message}`); setProgress(0); } finally { setLoading(false); } }; const regenerateContent = () => { generateContent(); }; const copyToClipboard = async (format: "HTML" | "MD" | "TXT") => { try { let content = ""; if (format === "HTML") { content = generatedContent; } else { const response = await fetch(`/convert?format=${format}`, { method: "POST", body: generatedContent, 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 downloadContent = async (format) => { try { const response = await fetch(`/download?format=${format}`, { method: "POST", body: generatedContent, 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 = `${outputType === "combined" ? "content" : outputType}.${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 (

Content 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 className="col-12">
              <div className="d-flex justify-content-center">
                <div className="btn-group" role="group" aria-label="Output Type">
                  <input
                    type="radio"
                    className="btn-check"
                    name="outputType"
                    id="cheatSheet"
                    value="cheatSheet"
                    checked={outputType === "cheatSheet"}
                    onChange={(e) => setOutputType(e.target.value)}
                  />
                  <label className="btn btn-outline-primary" htmlFor="cheatSheet">
                    Cheat Sheet
                  </label>

<input
                    type="radio"
                    className="btn-check"
                    name="outputType"
                    id="checklist"
                    value="checklist"
                    checked={outputType === "checklist"}
                    onChange={(e) => setOutputType(e.target.value)}
                  />
                  <label className="btn btn-outline-primary" htmlFor="checklist">
                    Checklist
                  </label>

<input
                    type="radio"
                    className="btn-check"
                    name="outputType"
                    id="combined"
                    value="combined"
                    checked={outputType === "combined"}
                    onChange={(e) => setOutputType(e.target.value)}
                  />
                  <label className="btn btn-outline-primary" htmlFor="combined">
                    Combined
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <button
              className="btn btn-primary modern-button"
              type="button"
              onClick={generateContent}
              disabled={loading || !topic.trim()}
            >
              {loading ? "Generating..." : "Generate Content"}
            </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 content... 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>
      )}
      {generatedContent && (
        <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 modern-button" onClick={regenerateContent}>Regenerate</button>
              <div className="dropdown me-2">
                <button
                  className="btn btn-success dropdown-toggle modern-button"
                  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 modern-button"
                  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={() => downloadContent("HTML")}>HTML</button>
                  </li>
                  <li>
                    <button className="dropdown-item" onClick={() => downloadContent("MD")}>Markdown</button>
                  </li>
                </ul>
              </div>
            </div>
            <div
              className="card content-output"
              dangerouslySetInnerHTML={{ __html: generatedContent }}
            />
          </div>
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<ContentGenerator />);
}
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, outputType } = 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 comprehensive, visually appealing ${
                outputType === "combined"
                  ? "cheat sheets and checklists"
                  : outputType === "checklist"
                  ? "checklists"
                  : "cheat sheets"
              }. 
            
            Requirements for the ${outputType === "combined" ? "content" : outputType}:
            - 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
            ${
                outputType === "checklist" || outputType === "combined"
                  ? "- For checklists, use - [ ] for unchecked items"
                  : ""
              }
            ${
                outputType === "combined"
                  ? "- Create a cheat sheet first, followed by a checklist, with clear separation between the two"
                  : ""
              }`,
          },
          {
            role: "user",
            content: `Create ${
              outputType === "combined"
                ? "a comprehensive cheat sheet and a detailed checklist"
                : outputType === "checklist"
                ? "a detailed checklist"
                : "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}` : ""}
            ${outputType === "combined" ? "Clearly separate the cheat sheet and checklist sections." : ""}`,
          },
        ],
        model: "gpt-4o-mini",
        max_tokens: 4000,
      });

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

// Create full HTML document with professional styling and structure
      const fullDocument = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>${topic} ${
        outputType === "combined"
          ? "Cheat Sheet and Checklist"
          : outputType === "checklist"
          ? "Checklist"
          : "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;
            }
            
            .content-output {
              padding: 1rem;
            }
            
            .content-output h1 {
              font-size: 18pt;
              border-bottom: 2px solid #2c3e50;
              padding-bottom: 0.5rem;
              margin: 1rem 0;
              color: #2c3e50;
            }
            
            .content-output h2 {
              font-size: 14pt;
              color: #34495e;
              margin-top: 1rem;
              margin-bottom: 0.5rem;
              border-bottom: 1px solid #bdc3c7;
              padding-bottom: 0.3rem;
            }
            
            .content-output h3 {
              font-size: 12pt;
              color: #34495e;
              margin-top: 0.8rem;
              margin-bottom: 0.4rem;
            }
            
            .content-output table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 1rem;
              font-size: 9pt;
            }
            
            .content-output table, 
            .content-output th, 
            .content-output td {
              border: 1px solid #bdc3c7;
              padding: 0.3rem;
            }
            
            .content-output th {
              background-color: #f4f4f4;
              font-weight: 600;
            }
            
            .content-output ul, 
            .content-output ol {
              margin-left: 1.5rem;
              margin-bottom: 0.8rem;
            }
            
            .content-output code {
              background-color: #f8f9fa;
              border: 1px solid #e9ecef;
              border-radius: 4px;
              padding: 0.1rem 0.2rem;
              font-family: 'Courier New', monospace;
              font-size: 8pt;
            }
            
            .content-output 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, .content-output {
                page-break-inside: avoid;
              }
            }
          </style>
        </head>
        <body>
          <div class="title-page">
            <h1>${topic} ${
        outputType === "combined"
          ? "Cheat Sheet and Checklist"
          : outputType === "checklist"
          ? "Checklist"
          : "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.includes("http") ? `<a href="${callToAction}">${callToAction}</a>` : callToAction}`
          : ""
      }
          </div>
          
          <div class="content-output">
            ${contentHtml}
          </div>
        </body>
        </html>
      `;

return new Response(fullDocument, {
        headers: { "Content-Type": "text/html" },
      });
    } catch (error) {
      console.error("Error generating content:", error);
      return new Response(JSON.stringify({ message: `Error generating content: ${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=\"content.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=\"content.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>Content Generator</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root {
          --primary-color: #007AFF;
          --secondary-color: #5AC8FA;
          --background-color: #F2F2F7;
          --text-color: #1C1C1E;
          --input-text-color: #1C1C1E;
          --border-color: #C7C7CC;
          --input-focus-bg: #FFFFFF;
        }

body {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
          background-color: var(--background-color);
          color: var(--text-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }

body.dark-mode {
          --primary-color: #0A84FF;
          --secondary-color: #64D2FF;
          --background-color: #1C1C1E;
          --text-color: #FFFFFF;
          --input-text-color: #FFFFFF;
          --border-color: #38383A;
          --input-focus-bg: #3A3A3C;
        }

.container {
          max-width: 800px;
          padding: 2rem;
          background-color: #FFFFFF;
          border-radius: 20px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

body.dark-mode .container {
          background-color: #2C2C2E;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

/* Ensure button group corners are rounded and consistent */
        .btn-group {
          border-radius: 10px;
          display: inline-flex;
          overflow: hidden;
        }

.btn-group .btn {
          border-radius: 0;
          border: 1px solid var(--primary-color);
          background-color: transparent;
          color: var(--primary-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }

.btn-group .btn:first-child {
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }

.btn-group .btn:last-child {
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        
        /* Ensure input text color is set correctly in both modes */
        .modern-input {
          color: var(--input-text-color) !important;
        }

body.dark-mode .modern-input {
          color: var(--input-text-color) !important;
        }

.modern-input:active,
        .modern-input:focus {
          color: var(--input-text-color) !important;
        }

/* Dark mode placeholder color */
        body.dark-mode .modern-input::placeholder {
          color: rgba(255, 255, 255, 0.5); /* Light, semi-transparent text for placeholders */
        }

.modern-input::placeholder {
          color: rgba(0, 0, 0, 0.5); /* Light, semi-transparent text for placeholders in light mode */
        }

h1 {
          font-weight: 600;
          color: var(--primary-color);
        }

.modern-input {
          border: 1px solid var(--border-color);
          border-radius: 10px;
          padding: 0.75rem;
          transition: border-color 0.3s ease, box-shadow 0.3s ease;
          background-color: var(--input-focus-bg);
          color: var(--input-text-color);
        }

.modern-input:focus {
          border-color: var(--primary-color);
          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
          background-color: var(--input-focus-bg);
        }

.modern-button {
          border-radius: 10px;
          padding: 0.75rem 1.5rem;
          font-weight: 600;
          transition: background-color 0.3s ease, transform 0.1s ease;
        }

.modern-button:active {
          transform: scale(0.98);
        }

.btn-group {
          border-radius: 10px;
          overflow: hidden;
        }

.btn-group .btn {
          border: 1px solid var(--primary-color);
          background-color: transparent;
          color: var(--primary-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }

.btn-group .btn:hover,
        .btn-group .btn:focus,
        .btn-group .btn.active {
          background-color: var(--primary-color);
          color: #FFFFFF;
        }

.progress {
          height: 8px;
          border-radius: 4px;
          background-color: var(--border-color);
        }

.progress-bar {
          background-color: var(--primary-color);
        }

.alert {
          border-radius: 10px;
        }

.content-output {
          border: 1px solid var(--border-color);
          border-radius: 10px;
          padding: 1rem;
          margin-top: 1rem;
          background-color: var(--background-color);
          color: var(--text-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }

@media (max-width: 768px) {
          .container {
            padding: 1rem;
          }
        }
      </style>
    </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>

forEmulated2