/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import ReactMarkdown from "https://esm.sh/react-markdown"; import remarkGfm from "https://esm.sh/remark-gfm"; import { faker } from "https://esm.sh/@faker-js/faker"; function App() { const [markdown, setMarkdown] = useState(""); const generateLoremIpsum = () => { const validIconNames = [ 'up-caret', 'down-caret', 'right-caret', 'right-arrow', 'left-arrow', 'bars', 'translate', 'pencil', 'pen', 'document', 'add-document', 'setting', 'external', 'moon', 'sun', 'laptop', 'open-book', 'information', 'magnifier', 'forward-slash', 'close', 'error', 'warning', 'approve-check-circle', 'approve-check', 'rocket', 'star', 'puzzle', 'list-format', 'random', 'comment', 'comment-alt', 'heart', 'github', 'gitlab', 'bitbucket', 'codePen', 'farcaster', 'discord', 'gitter', 'twitter', 'x.com', 'mastodon', 'codeberg', 'youtube', 'threads', 'linkedin', 'twitch', 'azureDevOps', 'microsoftTeams', 'instagram', 'stackOverflow', 'telegram', 'rss', 'facebook', 'email', 'reddit', 'patreon', 'signal', 'slack', 'matrix', 'hackerOne', 'openCollective', 'blueSky', 'discourse', 'zulip', 'pinterest', 'tiktok', 'astro', 'alpine', 'pnpm', 'biome', 'bun', 'mdx', 'apple', 'linux', 'homebrew', 'nix', 'starlight', 'pkl', 'node', 'cloudflare', 'vercel', 'netlify', 'deno', 'jsr' ]; const frontmatter = `--- title: ${faker.hacker.phrase().slice(0, 25)} --- `; const generateBodyText = () => `${faker.hacker.phrase()}. ${faker.hacker.phrase()}. ${faker.hacker.phrase()}.\n\n`; const generateCodeBlock = () => { const lang = faker.helpers.arrayElement(['js', 'ts', 'python', 'rust', 'go', 'java', 'cpp']); const fileName = `${faker.system.fileName()}.${lang}`; const codeContent = faker.hacker.phrase() + '\n' + faker.hacker.phrase() + '\n' + faker.hacker.phrase(); return `

\n\n${generateBodyText()}`;
    };

    const components = [
      () => `import { Card, CardGrid, Tabs, TabItem, Icon, LinkCard, Code } from "@astrojs/starlight/components";\n\n${generateBodyText()}`,
      (level) => `${'#'.repeat(level)} ${faker.hacker.phrase().slice(0, 25)}\n\n${generateBodyText()}`,
      () => `**${faker.hacker.phrase()}**\n\n${generateBodyText()}`,
      () => `*${faker.hacker.phrase()}*\n\n${generateBodyText()}`,
      () => `~~${faker.hacker.phrase()}~~\n\n${generateBodyText()}`,
      () => `> ${faker.hacker.phrase()}\n\n${generateBodyText()}`,
      () => `* ${faker.hacker.noun()}\n* ${faker.hacker.verb()}\n* ${faker.hacker.adjective()}\n\n${generateBodyText()}`,
      () => `1. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\n2. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\n3. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\n\n${generateBodyText()}`,
      () => `\`${faker.hacker.abbreviation()}\`\n\n${generateBodyText()}`,
      () => generateCodeBlock(),
      () => `[${faker.hacker.noun()}](${faker.internet.url()})\n\n${generateBodyText()}`,
      () => `| ${faker.hacker.noun()} | ${faker.hacker.verb()} | ${faker.hacker.adjective()} |\n|-------|--------|--------|\n| ${faker.hacker.abbreviation()} | ${faker.hacker.phrase()} | ${faker.hacker.phrase()} |\n\n${generateBodyText()}`,
      () => `- [x] ${faker.hacker.phrase()}\n- [ ] ${faker.hacker.phrase()}\n- [ ] ${faker.hacker.phrase()}\n\n${generateBodyText()}`,
      () => `---\n\n${generateBodyText()}`,
      () => `:::tip[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n:::\n\n${generateBodyText()}`,
      () => `:::caution[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n:::\n\n${generateBodyText()}`,
      () => `:::danger[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n:::\n\n${generateBodyText()}`,
      () => `:::note[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n:::\n\n${generateBodyText()}`,
      () => `\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n\n\n${generateBodyText()}`,
      () => `
  
    ${faker.hacker.phrase()}
    
    ${faker.hacker.phrase()}
  
  
    ${faker.hacker.phrase()}
    
    ${faker.hacker.phrase()}
  
\n\n${generateBodyText()}`,
      () => `
  
    ${faker.hacker.phrase()}
    
    ${faker.hacker.phrase()}
  
  
    ${faker.hacker.phrase()}
    
    ${faker.hacker.phrase()}
  
\n\n${generateBodyText()}`,
      () => `\n\n${generateBodyText()}`,
      () => `\n\n${generateBodyText()}`,
    ];

    let result = frontmatter + components[0](); // Include frontmatter and import statement
    let currentHeadingLevel = 0;

    const generateContent = (minComponents = 2, maxComponents = 5) => {
      const contentCount = Math.floor(Math.random() * (maxComponents - minComponents + 1)) + minComponents;
      let content = '';
      for (let i = 0; i < contentCount; i++) {
        const randomComponent = components[Math.floor(Math.random() * (components.length - 1)) + 1];
        if (typeof randomComponent === 'function') {
          content += randomComponent();
        }
        // Add a code block with 30% probability
        if (Math.random() < 0.3) {
          content += generateCodeBlock();
        }
      }
      return content;
    };

    const totalSections = Math.floor(Math.random() * 3) + 3; // Generate between 3 and 5 main sections

    for (let i = 0; i < totalSections; i++) {
      currentHeadingLevel = 1;
      result += components[1](currentHeadingLevel); // Add H1
      result += generateContent();

      const subSections = Math.floor(Math.random() * 3) + 1; // Generate between 1 and 3 subsections
      for (let j = 0; j < subSections; j++) {
        currentHeadingLevel = 2;
        result += components[1](currentHeadingLevel); // Add H2
        result += generateContent();

        if (Math.random() > 0.5) { // 50% chance of having an H3
          currentHeadingLevel = 3;
          result += components[1](currentHeadingLevel); // Add H3
          result += generateContent(1, 3);
        }
      }
    }

    setMarkdown(result);
  };

  const [showToast, setShowToast] = useState(false);

  useEffect(() => {
    if (showToast) {
      const timer = setTimeout(() => {
        setShowToast(false);
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [showToast]);

  const copyToClipboard = () => {
    const textArea = document.createElement("textarea");
    textArea.value = markdown;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      setShowToast(true);
    } catch (err) {
      console.error('Failed to copy: ', err);
      alert('Failed to copy to clipboard. Please try again.');
    }
    document.body.removeChild(textArea);
  };

  return (
    
      Starlight MDX Generator
      
        
        
      
      {showToast && Copied to clipboard!}
      
        
           setMarkdown(e.target.value)}
            placeholder="Click 'Generate MDX' to start..."
          />
        </div>
        <div className="preview">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
        </div>
      </div>
      <p className="footer">
        View source on <a href={import.meta.url.replace("esm.town", "val.town")}>Val Town</a>
      </p>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") { client(); }

const css = `
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1 {
  color: #2c3e50;
}
.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.editor-preview {
  display: flex;
  width: 100%;
  gap: 20px;
  margin-bottom: 20px;
}
.editor, .preview {
  flex: 1;
  min-height: 400px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  overflow-y: auto;
}
textarea {
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  font-family: monospace;
}
button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}
button:hover {
  background-color: #2980b9;
}
.footer {
  margin-top: 20px;
  font-size: 14px;
  color: #7f8c8d;
}
.footer a {
  color: #3498db;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: fadeInOut 3s ease-in-out;
}
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* Astro Starlight component styles */
:root {
  --sl-color-accent-low: #1e293b;
  --sl-color-accent: #3b82f6;
  --sl-color-accent-high: #e0f2fe;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #f1f5f9;
  --sl-color-gray-2: #e2e8f0;
  --sl-color-gray-3: #cbd5e1;
  --sl-color-gray-4: #94a3b8;
  --sl-color-gray-5: #64748b;
  --sl-color-gray-6: #475569;
  --sl-color-black: #1e293b;
}
.preview {
  --sl-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.preview :is(.tip, .caution, .danger, .note) {
  margin: 1rem 0;
  border-left: 0.25rem solid var(--sl-color-gray-5);
  padding: 0.5rem 1rem;
  background-color: var(--sl-color-gray-2);
}
.preview .tip { border-left-color: var(--sl-color-accent); }
.preview .caution { border-left-color: #eab308; }
.preview .danger { border-left-color: #ef4444; }
.preview .note { border-left-color: #22c55e; }
.preview :is(.tip, .caution, .danger, .note) p { margin: 0.5rem 0; }
`;

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Tech Jargon MDX Generator</title>
        <script src="https://unpkg.com/@astrojs/starlight@0.15.1/user-components.js" type="module"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
  {
    headers: {
      "content-type": "text/html",
    },
  });
}</article></body></html>

kylem