Tech Jargon MDX Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_173":174,"_175":176},"routes/_app.x.$handle.$name",{"_97":96,"_32":44,"_105":84,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":119,"_120":25,"_121":122,"_123":56,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",34,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","2fa23dd0-2824-11f0-af78-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown\";\nimport remarkGfm from \"https://esm.sh/remark-gfm\";\nimport { faker } from \"https://esm.sh/@faker-js/faker\";\n\nfunction App() {\n const [markdown, setMarkdown] = useState(\"\");\n const generateLoremIpsum = () => {\n const validIconNames = [\n 'up-caret', 'down-caret', 'right-caret', 'right-arrow', 'left-arrow', 'bars', 'translate', 'pencil', 'pen', 'document',\n 'add-document', 'setting', 'external', 'moon', 'sun', 'laptop', 'open-book', 'information', 'magnifier', 'forward-slash',\n 'close', 'error', 'warning', 'approve-check-circle', 'approve-check', 'rocket', 'star', 'puzzle', 'list-format', 'random',\n 'comment', 'comment-alt', 'heart', 'github', 'gitlab', 'bitbucket', 'codePen', 'farcaster', 'discord', 'gitter',\n 'twitter', 'x.com', 'mastodon', 'codeberg', 'youtube', 'threads', 'linkedin', 'twitch', 'azureDevOps', 'microsoftTeams',\n 'instagram', 'stackOverflow', 'telegram', 'rss', 'facebook', 'email', 'reddit', 'patreon', 'signal', 'slack',\n 'matrix', 'hackerOne', 'openCollective', 'blueSky', 'discourse', 'zulip', 'pinterest', 'tiktok', 'astro', 'alpine',\n 'pnpm', 'biome', 'bun', 'mdx', 'apple', 'linux', 'homebrew', 'nix', 'starlight', 'pkl', 'node', 'cloudflare',\n 'vercel', 'netlify', 'deno', 'jsr'\n ];\n\n const frontmatter = `---\ntitle: ${faker.hacker.phrase().slice(0, 25)}\n---\n\n`;\n\n const generateBodyText = () => `${faker.hacker.phrase()}. ${faker.hacker.phrase()}. ${faker.hacker.phrase()}.\\n\\n`;\n\n const generateCodeBlock = () => {\n const lang = faker.helpers.arrayElement(['js', 'ts', 'python', 'rust', 'go', 'java', 'cpp']);\n const fileName = `${faker.system.fileName()}.${lang}`;\n const codeContent = faker.hacker.phrase() + '\\n' + faker.hacker.phrase() + '\\n' + faker.hacker.phrase();\n return `

\\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      Tech Jargon MDX Generator
\n      \n        \n        \n      
\n      {showToast && Copied to clipboard!
}\n      \n        \n           setMarkdown(e.target.value)}\n            placeholder=\"Click 'Generate Tech Jargon 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}","createdAt",["D",1725915574562],"branchVersion","branchId","2fa01ab4-2824-11f0-af78-569c3dd06744","id","2f9fc85c-2824-11f0-af78-569c3dd06744","starlightFaker",["D",1746279633137],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","f933fefc-1f0a-4701-a199-b25b7e032ed6","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","08c5a2ec-1c42-454a-bb50-77e07c428d43","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":53,"_101":102,"_103":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":60,"_89":90,"_91":92,"_93":62,"_94":44,"_95":96},"isOwned",40,"main","projectId","forkedBranchId","2e862fb0-2824-11f0-af78-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","unlisted","forkedProjectId","2e85f2d4-2824-11f0-af78-569c3dd06744","forkedProjectOrgId","projectName","userHandle","kylem","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaXF2dkV1N3BnOGhkZFBWblJTaFE1UmllZFcifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":169,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":170,"_78":171,"_80":172,"_82":25},"tree",[160,161],"files",[160,161],"counts",{"_150":60,"_151":131,"_152":60,"_153":154,"_155":156},"contents",[135,136],"upstreamProject","upstreamBranch",{"_42":87,"_37":128,"_129":130,"_32":84,"_85":92,"_13":131,"_86":-5,"_88":-5,"_132":133,"_46":-5,"_82":25,"_48":90,"_95":96,"_61":62,"_94":134},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746279631293],"updatedAt",["D",1725909841660],1,"lockfileKey","1763656798731-esm.town_v_kylem_loremIpsumMarkdownGenerator@1-main","loremIpsumMarkdownGenerator",{"_42":144,"_32":145,"_30":146,"_138":-5,"_40":41,"_39":131,"_139":56,"_37":147,"_13":60,"_33":20,"_35":148,"_24":25,"_142":-5,"_27":149},{"_42":137,"_32":28,"_30":31,"_138":-5,"_40":41,"_39":14,"_139":25,"_37":140,"_13":141,"_33":34,"_35":36,"_24":25,"_142":-5,"_27":143},"30585d18-2824-11f0-af78-569c3dd06744","parentId","latest",["D",1725915574562],33,"label",[28],"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.",[145],"pulls","branches","forks","envVars",{"_157":60,"_159":60},"connections",{"_157":60,"_158":60},"count","unfilledCount","emptyCount",{"_42":144,"_32":145,"_30":146,"_138":-5,"_40":41,"_39":131,"_139":56,"_37":166,"_13":60,"_33":20,"_35":148,"_24":25,"_142":-5,"_163":167,"_27":168},{"_42":137,"_32":28,"_30":31,"_138":-5,"_40":41,"_39":14,"_139":25,"_37":162,"_13":141,"_33":34,"_35":36,"_24":25,"_142":-5,"_163":164,"_27":165},["D",1725915574562],"children",[],[28],["D",1725910506741],[],[145],["D",1746279633137],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":53,"_101":102,"_103":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":60,"_89":90,"_91":92,"_93":62,"_94":44,"_95":96},"ctx",{"_76":-5,"_125":206,"_207":208,"_209":210,"_211":25,"_212":25,"_213":25,"_214":56,"_215":-5,"_216":-7,"_217":-7,"_218":60,"_219":25,"_220":25,"_221":-5,"_222":25,"_223":25,"_224":25,"_225":-5},"ENV",{"_177":178,"_179":180,"_181":84,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Diff · v34