Tech Jargon MDX Generator

\\n\\n${generateBodyText()}`;\n    };\n\n    const components = [\n      () => `import { Card, CardGrid, Tabs, TabItem, Icon, LinkCard, Code } from \"@astrojs/starlight/components\";\\n\\n${generateBodyText()}`,\n      (level) => `${'#'.repeat(level)} ${faker.hacker.phrase().slice(0, 25)}\\n\\n${generateBodyText()}`,\n      () => `**${faker.hacker.phrase()}**\\n\\n${generateBodyText()}`,\n      () => `*${faker.hacker.phrase()}*\\n\\n${generateBodyText()}`,\n      () => `~~${faker.hacker.phrase()}~~\\n\\n${generateBodyText()}`,\n      () => `> ${faker.hacker.phrase()}\\n\\n${generateBodyText()}`,\n      () => `* ${faker.hacker.noun()}\\n* ${faker.hacker.verb()}\\n* ${faker.hacker.adjective()}\\n\\n${generateBodyText()}`,\n      () => `1. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\\n2. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\\n3. ${faker.hacker.ingverb()} ${faker.hacker.noun()}\\n\\n${generateBodyText()}`,\n      () => `\\`${faker.hacker.abbreviation()}\\`\\n\\n${generateBodyText()}`,\n      () => generateCodeBlock(),\n      () => `[${faker.hacker.noun()}](${faker.internet.url()})\\n\\n${generateBodyText()}`,\n      () => `| ${faker.hacker.noun()} | ${faker.hacker.verb()} | ${faker.hacker.adjective()} |\\n|-------|--------|--------|\\n| ${faker.hacker.abbreviation()} | ${faker.hacker.phrase()} | ${faker.hacker.phrase()} |\\n\\n${generateBodyText()}`,\n      () => `- [x] ${faker.hacker.phrase()}\\n- [ ] ${faker.hacker.phrase()}\\n- [ ] ${faker.hacker.phrase()}\\n\\n${generateBodyText()}`,\n      () => `---\\n\\n${generateBodyText()}`,\n      () => `:::tip[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\\n\\n${faker.hacker.phrase()}\\n\\n${faker.hacker.phrase()}\\n\\n:::\\n\\n${generateBodyText()}`,\n      () => `:::caution[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\\n\\n${faker.hacker.phrase()}\\n\\n${faker.hacker.phrase()}\\n\\n:::\\n\\n${generateBodyText()}`,\n      () => `:::danger[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\\n\\n${faker.hacker.phrase()}\\n\\n${faker.hacker.phrase()}\\n\\n:::\\n\\n${generateBodyText()}`,\n      () => `:::note[${faker.hacker.ingverb()} ${faker.hacker.noun()}]\\n\\n${faker.hacker.phrase()}\\n\\n${faker.hacker.phrase()}\\n\\n:::\\n\\n${generateBodyText()}`,\n      () => `\\n\\n${faker.hacker.phrase()}\\n\\n${faker.hacker.phrase()}\\n\\n\\n\\n${generateBodyText()}`,\n      () => `\n  \n    ${faker.hacker.phrase()}\n    \n    ${faker.hacker.phrase()}\n  \n  \n    ${faker.hacker.phrase()}\n    \n    ${faker.hacker.phrase()}\n  \n\\n\\n${generateBodyText()}`,\n      () => `\n  \n    ${faker.hacker.phrase()}\n    \n    ${faker.hacker.phrase()}\n  \n  \n    ${faker.hacker.phrase()}\n    \n    ${faker.hacker.phrase()}\n  \n\\n\\n${generateBodyText()}`,\n      () => `\\n\\n${generateBodyText()}`,\n      () => `\\n\\n${generateBodyText()}`,\n    ];\n\n    let result = frontmatter + components[0](); // Include frontmatter and import statement\n    let currentHeadingLevel = 0;\n\n    const generateContent = (minComponents = 2, maxComponents = 5) => {\n      const contentCount = Math.floor(Math.random() * (maxComponents - minComponents + 1)) + minComponents;\n      let content = '';\n      for (let i = 0; i < contentCount; i++) {\n        const randomComponent = components[Math.floor(Math.random() * (components.length - 1)) + 1];\n        if (typeof randomComponent === 'function') {\n          content += randomComponent();\n        }\n        // Add a code block with 30% probability\n        if (Math.random() < 0.3) {\n          content += generateCodeBlock();\n        }\n      }\n      return content;\n    };\n\n    const totalSections = Math.floor(Math.random() * 3) + 3; // Generate between 3 and 5 main sections\n\n    for (let i = 0; i < totalSections; i++) {\n      currentHeadingLevel = 1;\n      result += components[1](currentHeadingLevel); // Add H1\n      result += generateContent();\n\n      const subSections = Math.floor(Math.random() * 3) + 1; // Generate between 1 and 3 subsections\n      for (let j = 0; j < subSections; j++) {\n        currentHeadingLevel = 2;\n        result += components[1](currentHeadingLevel); // Add H2\n        result += generateContent();\n\n        if (Math.random() > 0.5) { // 50% chance of having an H3\n          currentHeadingLevel = 3;\n          result += components[1](currentHeadingLevel); // Add H3\n          result += generateContent(1, 3);\n        }\n      }\n    }\n\n    setMarkdown(result);\n  };\n\n  const [showToast, setShowToast] = useState(false);\n\n  useEffect(() => {\n    if (showToast) {\n      const timer = setTimeout(() => {\n        setShowToast(false);\n      }, 3000);\n      return () => clearTimeout(timer);\n    }\n  }, [showToast]);\n\n  const copyToClipboard = () => {\n    const textArea = document.createElement(\"textarea\");\n    textArea.value = markdown;\n    document.body.appendChild(textArea);\n    textArea.select();\n    try {\n      document.execCommand('copy');\n      setShowToast(true);\n    } catch (err) {\n      console.error('Failed to copy: ', err);\n      alert('Failed to copy to clipboard. Please try again.');\n    }\n    document.body.removeChild(textArea);\n  };\n\n  return (\n    \n      Starlight MDX Generator
\n      \n        \n        \n      
\n      {showToast && Copied to clipboard!
}\n      \n        \n           setMarkdown(e.target.value)}\n            placeholder=\"Click 'Generate MDX' to start...\"\n          />\n        
\n        \n          {markdown}\n        
\n      
\n      \n        View source on Val Town\n      
\n    
\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nconst css = `\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n  color: #333;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\nh1 {\n  color: #2c3e50;\n}\n.button-group {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n.editor-preview {\n  display: flex;\n  width: 100%;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n.editor, .preview {\n  flex: 1;\n  min-height: 400px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n  padding: 15px;\n  overflow-y: auto;\n}\ntextarea {\n  width: 100%;\n  height: 100%;\n  border: none;\n  resize: none;\n  font-family: monospace;\n}\nbutton {\n  background-color: #3498db;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  cursor: pointer;\n  font-size: 16px;\n  border-radius: 5px;\n}\nbutton:hover {\n  background-color: #2980b9;\n}\n.footer {\n  margin-top: 20px;\n  font-size: 14px;\n  color: #7f8c8d;\n}\n.footer a {\n  color: #3498db;\n  text-decoration: none;\n}\n.footer a:hover {\n  text-decoration: underline;\n}\n.toast {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 10px 20px;\n  border-radius: 5px;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n  animation: fadeInOut 3s ease-in-out;\n}\n@keyframes fadeInOut {\n  0%, 100% { opacity: 0; }\n  10%, 90% { opacity: 1; }\n}\n\n/* Astro Starlight component styles */\n:root {\n  --sl-color-accent-low: #1e293b;\n  --sl-color-accent: #3b82f6;\n  --sl-color-accent-high: #e0f2fe;\n  --sl-color-white: #ffffff;\n  --sl-color-gray-1: #f1f5f9;\n  --sl-color-gray-2: #e2e8f0;\n  --sl-color-gray-3: #cbd5e1;\n  --sl-color-gray-4: #94a3b8;\n  --sl-color-gray-5: #64748b;\n  --sl-color-gray-6: #475569;\n  --sl-color-black: #1e293b;\n}\n.preview {\n  --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\";\n}\n.preview :is(.tip, .caution, .danger, .note) {\n  margin: 1rem 0;\n  border-left: 0.25rem solid var(--sl-color-gray-5);\n  padding: 0.5rem 1rem;\n  background-color: var(--sl-color-gray-2);\n}\n.preview .tip { border-left-color: var(--sl-color-accent); }\n.preview .caution { border-left-color: #eab308; }\n.preview .danger { border-left-color: #ef4444; }\n.preview .note { border-left-color: #22c55e; }\n.preview :is(.tip, .caution, .danger, .note) p { margin: 0.5rem 0; }\n`;\n\nexport default async function server(request: Request): Promise {\n  return new Response(`\n    \n      \n        Tech Jargon MDX Generator\n        \n        \n        \n      \n      \n        
\n        \n      \n    \n  `,\n  {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/kylem/starlightFaker/code/main.tsx","extension","actionData","errors"]