Log inSign up
kylem avatar
Forked from kylem/loremIpsumMarkdownGenerator
Public
HTTP
Fork
0 Likes
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

Generate fake doc pages for testing in Starlight with its built in components and hacker jargon from Faker.

If you are looking to add the required title frontmatter for a batch of files you can use this python script to interpret the title from the filename.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>
<Card title="${faker.hacker.ingverb()} ${faker.hacker.noun()}" icon="${faker.helpers.arrayElement(validIconNames)}">
${faker.hacker.phrase()}
${faker.hacker.phrase()}
</Card>
<Card title="${faker.hacker.ingverb()} ${faker.hacker.noun()}" icon="${faker.helpers.arrayElement(validIconNames)}">
${faker.hacker.phrase()}
${faker.hacker.phrase()}
</Card>
</CardGrid>\n\n${generateBodyText()}`,
() => `<Tabs>
<TabItem label="${faker.hacker.noun()}">
${faker.hacker.phrase()}
${faker.hacker.phrase()}
</TabItem>
<TabItem label="${faker.hacker.verb()}">
${faker.hacker.phrase()}
${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();
}
kylem-starlightfaker.web.val.run
September 10, 2024