endeavorance/muse
1
Fork 0
Code Issues Pull requests Releases Packages 1 Activity

Convert rendering to jsx

Browse source
This commit is contained in:
Endeavorance 2025-03-19 15:57:56 -04:00
parent 0f72d048ee
commit d1b632e83c
25 changed files with 422 additions and 513 deletions
Download patch file Download diff file Expand all files Collapse all files

112
src/render/html/index.tsx
View file

@ -1,6 +1,6 @@
import { Playbill } from "@proscenium/playbill";
import { Playbill, type TaggedComponent } from "@proscenium/playbill";
import sortBy from "lodash-es/sortBy";
import { html, renderMarkdown } from "#lib";
import { renderMarkdown } from "#lib";
import { GlossaryTable } from "./component/glossary";
import { PageHeader } from "./component/header";
import { ItemCard } from "./component/item";
@ -14,6 +14,22 @@ interface HTMLRenderOptions {
styles?: string;
}
async function processMarkdownInComponent(entry: TaggedComponent) {
entry.component.description = await renderMarkdown(entry.component.description);
if (entry.type === "resource" && entry.component.type === "table") {
const newData: string[][] = [];
for (const row of entry.component.data) {
const newRow: string[] = [];
for (const cell of row) {
newRow.push(await renderMarkdown(cell));
}
newData.push(newRow);
}
entry.component.data = newData;
}
}
export async function renderPlaybillToHTML(
playbillToRender: Playbill,
opts: HTMLRenderOptions = {},
@ -21,46 +37,40 @@ export async function renderPlaybillToHTML(
// Make a copy of the playbill to avoid modifying the original
// and compile all description markdown
const playbill = Playbill.fromSerialized(playbillToRender.serialize());
await playbill.processComponents(renderMarkdown);
// Render various resources
const resources = (
await Promise.all(Object.values(playbill.resources).map(ResourceSection))
).join("\n");
const methods = (
await Promise.all(
Object.values(playbill.methods).map((method) => {
return MethodSection(method, playbill);
}),
)
).join("\n");
const species = (
await Promise.all(
Object.values(playbill.species).map((species) => {
return SpeciesSection(species, playbill);
}),
)
).join("\n");
const items = (
await Promise.all(
Object.values(playbill.items).map((item) => {
return ItemCard(item);
}),
)
).join("\n");
await playbill.processComponents(processMarkdownInComponent);
const rulesByOrder = sortBy(Object.values(playbill.rules), "order");
const rules = rulesByOrder.map(RuleSection);
const glossaryHTML = await GlossaryTable(playbill.glossary);
// Prepare stylesheet
const css = opts.styles ? html`<style>${opts.styles}</style>` : "";
const css = opts.styles ? `<style>${opts.styles}</style>` : "";
const body = renderToString(<>
<article id="species" className="view">
{Object.values(playbill.species).map((species) => <SpeciesSection key={species.id} species={species} playbill={playbill} />)}
</article>
<article id="methods" className="view">
{Object.values(playbill.methods).map((method) => <MethodSection key={method.id} method={method} playbill={playbill} />)}
</article>
<article id="items" className="view">
{Object.values(playbill.items).map((item) => <ItemCard key={item.id} item={item} />)}
</article>
<article id="rules" className="view">
{rulesByOrder.map((rule) => <RuleSection key={rule.id} rule={rule} />)}
</article>
<article id="glossary" className="view">
{<GlossaryTable glossary={playbill.glossary} />}
</article>
<article id="resources" className="view">
{Object.values(playbill.resources).map((resource) => <ResourceSection key={resource.id} resource={resource} />)}
</article>
</>);
// Main document
const doc = html`
const doc = `
<!doctype html>
<html lang="en">
<head>
@ -126,7 +136,7 @@ export async function renderPlaybillToHTML(
</script>
</head>
<body>
${await PageHeader(playbill)}
${renderToString(<PageHeader playbill={playbill} />)}
<blockquote class="overview"><p>${playbill.description}</p></blockquote>
<nav>
<button onclick="hideAllAndShow('species')" id="species-nav">Species</button>
@ -137,31 +147,7 @@ export async function renderPlaybillToHTML(
<button onclick="hideAllAndShow('resources')" id="resources-nav">Resources</button>
<button onclick="showAllViews()" id="all-nav">Show All</button>
</nav>
<article id="species" class="view">
${species}
</article>
<article id="methods" class="view">
${methods}
</article>
<article id="items" class="view">
${items}
</article>
<article id="rules" class="view">
${renderToString(rules)}
</article>
<article id="glossary" class="view">
${glossaryHTML}
</article>
<article id="resources" class="view">
${resources}
</article>
</article>
${body}
</body>
</html>
`;