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",[120],"2fa24410-2824-11f0-af78-569c3dd06744","README.md","2fa24488-2824-11f0-af78-569c3dd06744",["D",1725910506741],"Generate fake doc pages for testing in [Starlight](https://starlight.astro.build/) with its built in [components](https://starlight.astro.build/guides/components/) and [hacker jargon](https://fakerjs.dev/api/hacker) from [Faker](https://fakerjs.dev/).\n\nIf you are looking to add the required `title` frontmatter for a batch of files you can use [this python script](https://gist.github.com/kmalloy24/6a4e20d30a773a7fc13ebdd4331cc73d) to interpret the `title` from the filename.",[136],"pulls","branches","forks","envVars",{"_148":41,"_150":41},"connections",{"_148":41,"_149":41},"count","unfilledCount","emptyCount",{"_18":135,"_20":136,"_121":137,"_122":-5,"_123":67,"_124":113,"_125":37,"_22":157,"_64":41,"_128":98,"_130":139,"_132":26,"_133":-5,"_154":158,"_87":159},{"_18":119,"_20":120,"_121":35,"_122":-5,"_123":67,"_124":65,"_125":37,"_22":153,"_64":127,"_128":129,"_130":131,"_132":26,"_133":-5,"_154":155,"_87":156},["D",1725982598158],"children",[],[120],["D",1725910506741],[],[136],["D",1746279633137],{"_16":17,"_85":81},{"_16":17,"_79":-5,"_80":81,"_32":33,"_82":83,"_84":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":70,"_71":41,"_72":73,"_74":75,"_76":43,"_77":21,"_78":17},"ctx",{"_57":-5,"_107":197,"_198":199,"_200":201,"_202":26,"_203":26,"_204":26,"_205":37,"_206":-5,"_207":-7,"_208":-7,"_209":41,"_210":26,"_211":26,"_212":-5,"_213":26,"_214":26,"_215":26,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":66,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
Search
