` +
+ `
` +
`
${await state.flow(["div", {}, ...preview.nodes], state)}
` +
`
${await state.one(pre, state)}
`
@@ -141,51 +202,105 @@ const toc = (document: { nodes: Node[] }) =>
.join("");
const parsed = await Promise.all(
- pages.map(async (page) => {
- const document = await parseMarkdown(
- await readFile(new URL(`pages/${page.file}`, root), "utf8"),
- { plugins },
- );
- if (document.meta.issues.length)
- throw new Error(`docs/pages/${page.file}:\n${document.meta.issues.join("\n")}`);
- const [title, description, tagline, install] = [
- "title",
- "description",
- "tagline",
- "install",
- ].map((key) => str(document.frontmatter[key]));
- const skill =
- page.npm && existsSync(new URL(`../packages/${page.slug}/skills/${page.npm}/SKILL.md`, root))
- ? page.npm
- : "";
- const label = page.label ?? (page.npm ? page.slug : title);
- return {
- ...page,
- document,
- title,
- description,
- tagline,
- install,
- skill,
- label,
- toc: toc(document),
- };
- }),
+ sections.flatMap((section) =>
+ section.lists.flatMap((list) =>
+ list.slugs.map(async (slug) => {
+ const file = fileOf(slug);
+ const document = await parseMarkdown(
+ await readFile(new URL(`pages/${file}`, root), "utf8"),
+ { plugins },
+ );
+ if (document.meta.issues.length)
+ throw new Error(`docs/pages/${file}:\n${document.meta.issues.join("\n")}`);
+ const [title, description, tagline, install] = [
+ "title",
+ "description",
+ "tagline",
+ "install",
+ ].map((key) => str(document.frontmatter[key]));
+ const skill =
+ section.npm &&
+ existsSync(new URL(`../packages/${section.slug}/skills/${section.npm}/SKILL.md`, root))
+ ? section.npm
+ : "";
+ return {
+ slug,
+ section,
+ document,
+ title,
+ description,
+ tagline: tagline || description,
+ install,
+ skill,
+ label: slug === section.slug ? "Overview" : title,
+ toc: toc(document),
+ };
+ }),
+ ),
+ ),
+);
+type Page = (typeof parsed)[number];
+const pagesOf = (section: Section) =>
+ section.lists.map((list) => ({
+ ...list,
+ pages: list.slugs.flatMap((slug) => parsed.filter((page) => page.slug === slug)),
+ }));
+
+// The playground's presets: every page's top examples, under the section they come from.
+const presets = parsed.flatMap((page) =>
+ page.document.nodes
+ .filter(isElement)
+ .filter(([tag]) => tag === "examples")
+ .flatMap(([, , ...panels]) => panels.filter(isElement))
+ .map(([, attrs, ...children]) => ({
+ id: `${page.section.slug || "docs"}-${str(attrs.label)
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-|-$/g, "")}`,
+ label: str(attrs.label),
+ group: page.section.label,
+ npm: page.section.npm ?? "",
+ source: textContent(children.find(isPre) ?? ["pre", {}]),
+ }))
+ .filter((preset) => playable(preset.source)),
+);
+// A small still of each preset for the playground's column: no scripts, and a gray box for each embedded player,
+// so the column loads nothing but the pages' own images. The plugins' styles go in the page once.
+const thumbnailStyles = new Set
();
+const thumbnails = new Map(
+ await Promise.all(
+ presets.map(async (preset) => {
+ const document = await parseMarkdown(preset.source, { plugins: browserPlugins() });
+ const html = (await renderHtmlFromDocument(document, { components }))
+ .replace(/]*>[\s\S]*?<\/style>/gi, (style) => (thumbnailStyles.add(style), ""))
+ .replace(/
+