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

Style updates

Browse source
This commit is contained in:
Endeavorance 2025-03-21 12:20:51 -04:00
parent a9a979c5f8
commit e7218143ec
18 changed files with 928 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import { ResourceSection } from "./component/resource";
import { RuleSection } from "./component/rule";
import { SpeciesSection } from "./component/species";
import { renderToString } from "react-dom/server";
import defaultCSS from "./default.css" with { type: "text" };
export async function renderPlaybillToHTML(
boundPlaybill: BoundPlaybill,
@ -22,7 +23,9 @@ export async function renderPlaybillToHTML(
// Define a processor function to iterate over all components and process their markdown
const processMarkdownInComponent = async (entry: TaggedComponent) => {
entry.component.description = await renderMarkdown(entry.component.description);
entry.component.description = await renderMarkdown(
entry.component.description,
);
if (entry.type === "resource" && entry.component.type === "table") {
const newData: string[][] = [];
@ -35,7 +38,7 @@ export async function renderPlaybillToHTML(
}
entry.component.data = newData;
}
}
};
// Process all components
await playbill.processComponents(processMarkdownInComponent);
@ -44,33 +47,59 @@ export async function renderPlaybillToHTML(
const rulesByOrder = sortBy(Object.values(playbill.rules), "order");
// Prepare stylesheet
const css = `<style>${boundPlaybill.styles}</style>`;
const cssParts: string[] = [];
const body = renderToString(<>
<article id="species" className="view">
{Object.values(playbill.species).map((species) => <SpeciesSection key={species.id} species={species} playbill={playbill} />)}
</article>
if (!boundPlaybill.omitDefaultStyles) {
cssParts.push(`<style>${defaultCSS}</style>`);
}
<article id="methods" className="view" style={{ display: "none" }}>
{Object.values(playbill.methods).map((method) => <MethodSection key={method.id} method={method} playbill={playbill} />)}
</article>
if (boundPlaybill.styles.length > 0) {
cssParts.push(`<style>${boundPlaybill.styles}</style>`);
}
<article id="items" className="view" style={{ display: "none" }}>
{Object.values(playbill.items).map((item) => <ItemCard key={item.id} item={item} />)}
</article>
const css = cssParts.join("\n");
<article id="rules" className="view" style={{ display: "none" }}>
{rulesByOrder.map((rule) => <RuleSection key={rule.id} rule={rule} />)}
</article>
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="glossary" className="view" style={{ display: "none" }}>
{<GlossaryTable glossary={playbill.glossary} />}
</article>
<article id="methods" className="view" style={{ display: "none" }}>
{Object.values(playbill.methods).map((method) => (
<MethodSection key={method.id} method={method} playbill={playbill} />
))}
</article>
<article id="resources" className="view" style={{ display: "none" }}>
{Object.values(playbill.resources).map((resource) => <ResourceSection key={resource.id} resource={resource} />)}
</article>
</>);
<article id="items" className="view" style={{ display: "none" }}>
{Object.values(playbill.items).map((item) => (
<ItemCard key={item.id} item={item} />
))}
</article>
<article id="rules" className="view" style={{ display: "none" }}>
{rulesByOrder.map((rule) => (
<RuleSection key={rule.id} rule={rule} />
))}
</article>
<article id="glossary" className="view" style={{ display: "none" }}>
{<GlossaryTable glossary={playbill.glossary} />}
</article>
<article id="resources" className="view" style={{ display: "none" }}>
{Object.values(playbill.resources).map((resource) => (
<ResourceSection key={resource.id} resource={resource} />
))}
</article>
</>,
);
// Main document
const doc = `