kylem/starlightFaker

starlightFaker

100

/** @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 `<Code code={\`${codeContent}\`} lang="${lang}" title="${fileName}" />\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()}`,

() => `<Card title="${faker.hacker.ingverb()} ${faker.hacker.noun()}">\n\n${faker.hacker.phrase()}\n\n${faker.hacker.phrase()}\n\n</Card>\n\n${generateBodyText()}`,

() => `<CardGrid>

${faker.hacker.phrase()}

</Card>

${faker.hacker.phrase()}

</Card>

</CardGrid>\n\n${generateBodyText()}`,

() => `<Tabs>

${faker.hacker.phrase()}

</TabItem>

${faker.hacker.phrase()}

</TabItem>

</Tabs>\n\n${generateBodyText()}`,

() => `<Icon name="${faker.helpers.arrayElement(validIconNames)}" size="1.5rem" />\n\n${generateBodyText()}`,

() => `<LinkCard title="${faker.hacker.ingverb()} ${faker.hacker.noun()}" description="${faker.hacker.phrase()}" href="${faker.internet.url()}" icon="${faker.helpers.arrayElement(validIconNames)}" />\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();

}