emma/tabletop-commander
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 3 Releases Wiki Activity

ttcmd: did I.... did I win? I think I won

Browse Source
This commit is contained in:
Emmaline Autumn 2024-03-12 08:33:51 -06:00
parent 3ae4dfcc82
commit 42a671d49d
5 changed files with 332 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

447
components/ttcmd/index.tsx
View File

@ -2,7 +2,7 @@
import { Accordion, AccordionContent } from "@/lib/accordion"; import { Accordion, AccordionContent } from "@/lib/accordion";
import { Poppable } from "@/lib/poppables/components/poppable"; import { Poppable } from "@/lib/poppables/components/poppable";
import { buildAbstractSyntaxTree, createElements } from "@/lib/tcmd"; import { createElements } from "@/lib/tcmd";
import Link from "next/link"; import Link from "next/link";
import React, { FC, Fragment, ReactNode, use, useMemo } from "react"; import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
@ -24,7 +24,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
</button> </button>
</div> </div>
{/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */} {/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */}
{renderer(elements, tabSpacing)} {renderer(elements.map((e) => e.token!), tabSpacing)}
</div> </div>
// <div className="grid grid-cols-3"> // <div className="grid grid-cols-3">
// {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */} // {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */}
@ -35,7 +35,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
const renderer = (tokens: Token[], tabSpacing: number) => { const renderer = (tokens: Token[], tabSpacing: number) => {
const usedIds: string[] = []; const usedIds: string[] = [];
return tokens.map((t) => ( return tokens.map((t) => (
<Fragment key={t.uuid}>{render(t, usedIds, tabSpacing)}</Fragment> <div className="p" key={t.uuid}>{render(t, usedIds, tabSpacing)}</div>
)); ));
}; };
@ -51,7 +51,6 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
data-[strength="1"]:text-4xl data-[strength="1"]:text-4xl
data-[strength="2"]:text-3xl data-[strength="2"]:text-3xl
data-[strength="3"]:text-2xl data-[strength="3"]:text-2xl
p
`} `}
> >
{token.content} {token.content}
@ -163,6 +162,18 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
</Accordion> </Accordion>
</div> </div>
); );
case "bold":
return (
<span className="font-bold">
{token.content}
</span>
);
case "italic":
return (
<span className="italic">
{token.content}
</span>
);
default: default:
return ( return (
<div className="p bg-red-600 text-white"> <div className="p bg-red-600 text-white">
@ -172,90 +183,90 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
} }
}; };
const renderBlock = ( // const renderBlock = (
block: BlockChildren, // block: BlockChildren,
usedIds: string[] = [], // usedIds: string[] = [],
): ReactNode => { // ): ReactNode => {
usedIds = usedIds || []; // usedIds = usedIds || [];
switch (block.type) { // switch (block.type) {
case "block": // case "block":
return block.children.map((e, i) => ( // return block.children.map((e, i) => (
<Fragment key={e.uuid}>{renderBlock(e, usedIds)}</Fragment> // <Fragment key={e.uuid}>{renderBlock(e, usedIds)}</Fragment>
)); // ));
case "grid": // case "grid":
return ( // return (
<div // <div
style={{ // style={{
"--grid-cols": block.metadata.columns, // "--grid-cols": block.metadata.columns,
} as React.CSSProperties} // } as React.CSSProperties}
className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6" // className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
> // >
{block.children.map((c, i) => ( // {block.children.map((c, i) => (
<div key={c.uuid}> // <div key={c.uuid}>
{renderBlock(c, usedIds)} // {renderBlock(c, usedIds)}
</div> // </div>
))} // ))}
</div> // </div>
); // );
case "card": // case "card":
return ( // return (
<div className="card mb-6"> // <div className="card mb-6">
{block.children.map((e, i) => ( // {block.children.map((e, i) => (
<Fragment key={e.uuid}> // <Fragment key={e.uuid}>
{renderBlock(e, usedIds)} // {renderBlock(e, usedIds)}
</Fragment> // </Fragment>
))} // ))}
</div> // </div>
); // );
case "accordion": // case "accordion":
return ( // return (
<div className="bg-black/20 p-1 rounded-md"> // <div className="bg-black/20 p-1 rounded-md">
<Accordion // <Accordion
title={block.metadata.title || "Expand"} // title={block.metadata.title || "Expand"}
> // >
<AccordionContent> // <AccordionContent>
{block.children.map((e, i) => ( // {block.children.map((e, i) => (
<Fragment key={e.uuid}> // <Fragment key={e.uuid}>
{renderBlock(e, usedIds)} // {renderBlock(e, usedIds)}
</Fragment> // </Fragment>
))} // ))}
</AccordionContent> // </AccordionContent>
</Accordion> // </Accordion>
</div> // </div>
); // );
default: // default:
return ( // return (
renderParagraph(block as ParagraphToken, usedIds) // renderParagraph(block as ParagraphToken, usedIds)
); // );
} // }
}; // };
const renderParagraph = (p: ParagraphToken, usedIds: string[]) => { // const renderParagraph = (p: ParagraphToken, usedIds: string[]) => {
switch (p.type) { // switch (p.type) {
case "p": // case "p":
return ( // return (
<div className="p"> // <div className="p">
{p.content.map((e, i) => ( // {p.content.map((e, i) => (
<Fragment key={e.uuid}> // <Fragment key={e.uuid}>
{renderToken(e, usedIds)} // {renderToken(e, usedIds)}
</Fragment> // </Fragment>
))} // ))}
</div> // </div>
); // );
case "code": // case "code":
return ( // return (
<pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md"> // <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
{p.content.map((c) => c.line.toString()).join("\n\n")} // {p.content.map((c) => c.line.toString()).join("\n\n")}
</pre> // </pre>
); // );
default: // default:
return ( // return (
<div className="p bg-red-600 text-white"> // <div className="p bg-red-600 text-white">
Block or paragraph missing implementation: {p.type} // Block or paragraph missing implementation: {p.type}
</div> // </div>
); // );
} // }
}; // };
const generateId = (t: string, usedIds: string[]) => { const generateId = (t: string, usedIds: string[]) => {
let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll( let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
@ -271,136 +282,136 @@ const generateId = (t: string, usedIds: string[]) => {
return id; return id;
}; };
const renderToken = (t: Token, usedIds: string[]) => { // const renderToken = (t: Token, usedIds: string[]) => {
switch (t.type) { // switch (t.type) {
case "h1": { // case "h1": {
return ( // return (
<div // <div
id={generateId(t.raw, usedIds)} // id={generateId(t.raw, usedIds)}
className="font-bold text-2xl p" // className="font-bold text-2xl p"
> // >
{renderInlineToken(t.line)} // {renderInlineToken(t.line)}
</div> // </div>
); // );
} // }
case "h2": { // case "h2": {
return ( // return (
<div // <div
id={generateId(t.raw, usedIds)} // id={generateId(t.raw, usedIds)}
className="font-bold text-xl p" // className="font-bold text-xl p"
> // >
{renderInlineToken(t.line)} // {renderInlineToken(t.line)}
</div> // </div>
); // );
} // }
case "h3": { // case "h3": {
return ( // return (
<div // <div
id={generateId(t.raw, usedIds)} // id={generateId(t.raw, usedIds)}
className="font-bold text-lg p" // className="font-bold text-lg p"
> // >
{renderInlineToken(t.line)} // {renderInlineToken(t.line)}
</div> // </div>
); // );
} // }
case "p": // case "p":
return ( // return (
<div className="p"> // <div className="p">
{t.lines.map((e, i) => ( // {t.lines.map((e, i) => (
<Fragment key={e.uuid}> // <Fragment key={e.uuid}>
{renderInlineToken(e.line)} // {renderInlineToken(e.line)}
</Fragment> // </Fragment>
))} // ))}
</div> // </div>
); // );
case "text": // case "text":
return ( // return (
<> // <>
{renderInlineToken(t.line)} // {renderInlineToken(t.line)}
&nbsp; // &nbsp;
</> // </>
); // );
case "list1": // case "list1":
return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>; // return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>;
case "list2": // case "list2":
return <li className="list-disc ml-12">{renderInlineToken(t.line)}</li>; // return <li className="list-disc ml-12">{renderInlineToken(t.line)}</li>;
default: // default:
return ( // return (
<div className="text-white bg-red-500 p"> // <div className="text-white bg-red-500 p">
Missing implementation for tcMD element `{(t as { type: string }) // Missing implementation for tcMD element `{(t as { type: string })
.type}` // .type}`
</div> // </div>
); // );
} // }
}; // };
const renderInlineToken = (l: Line) => { // const renderInlineToken = (l: Line) => {
if (typeof l === "string") return l; // if (typeof l === "string") return l;
return l.map((token) => ( // return l.map((token) => (
<Fragment key={token.uuid}> // <Fragment key={token.uuid}>
{(() => { // {(() => {
switch (token.type) { // switch (token.type) {
case "text": // case "text":
return <span>{token.content}</span>; // return <span>{token.content}</span>;
case "bold": // case "bold":
return <span className="font-bold">{token.content}</span>; // return <span className="font-bold">{token.content}</span>;
case "italic": // case "italic":
return <span className="italic">{token.content}</span>; // return <span className="italic">{token.content}</span>;
case "anchor": // case "anchor":
return ( // return (
<Link // <Link
className={token.data.style?.classes || // className={token.data.style?.classes ||
"dark:text-primary-600 underline dark:no-underline"} // "dark:text-primary-600 underline dark:no-underline"}
href={token.data.href} // href={token.data.href}
> // >
{token.content} // {token.content}
</Link> // </Link>
); // );
case "image": { // case "image": {
token.data.src = token.data.src as string; // token.data.src = token.data.src as string;
if (token.data.src.startsWith("<svg")) { // if (token.data.src.startsWith("<svg")) {
return ( // return (
<div // <div
dangerouslySetInnerHTML={{ // dangerouslySetInnerHTML={{
__html: sanitize(token.data.src, { // __html: sanitize(token.data.src, {
USE_PROFILES: { svg: true }, // USE_PROFILES: { svg: true },
}), // }),
}} // }}
> // >
</div> // </div>
); // );
} // }
// eslint-disable-next-line @next/next/no-img-element // // eslint-disable-next-line @next/next/no-img-element
return <img src={token.data.src} alt={token.content} />; // return <img src={token.data.src} alt={token.content} />;
} // }
case "popover": // case "popover":
return ( // return (
<Poppable // <Poppable
content={renderInlineToken(token.data.popover)} // content={renderInlineToken(token.data.popover)}
preferredAlign="centered" // preferredAlign="centered"
preferredEdge="bottom" // preferredEdge="bottom"
className="cursor-pointer" // className="cursor-pointer"
> // >
<span className="border-b-2 border-dotted border-white"> // <span className="border-b-2 border-dotted border-white">
{token.content} // {token.content}
</span> // </span>
</Poppable> // </Poppable>
); // );
case "inline-code": // case "inline-code":
return ( // return (
<span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2"> // <span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2">
{token.content} // {token.content}
</span> // </span>
); // );
default: // default:
return ( // return (
<span className="bg-red-500"> // <span className="bg-red-500">
Inline element not implemented: {token.type} // Inline element not implemented: {token.type}
</span> // </span>
); // );
} // }
})()} // })()}
</Fragment> // </Fragment>
)); // ));
}; // };

31
lib/tcmd/TokenIdentifiers.ts
View File

@ -140,6 +140,36 @@ TokenIdentifiers.set("inline-code", {
}; };
}, },
}); });
TokenIdentifiers.set("bold", {
rx: /\*{2}(.*?)\*{2}/g,
parse(s) {
return {
// content: inline,
content: s.match(new RegExp(this.rx, "i"))?.at(1) ||
"Unable to parse bold",
raw: s,
metadata: {},
type: "bold",
uuid: crypto.randomUUID(),
rendersContentOnly,
};
},
});
TokenIdentifiers.set("italic", {
rx: /(?<!\*)\*([^\*]+?)\*(?!\*)/g,
parse(s) {
return {
// content: inline,
content: s.match(new RegExp(this.rx, "i"))?.at(1) ||
"Unable to parse italic",
raw: s,
metadata: {},
type: "italic",
uuid: crypto.randomUUID(),
rendersContentOnly,
};
},
});
TokenIdentifiers.set("popover", { TokenIdentifiers.set("popover", {
rx: /\^\[(.*?)\]\<<(.*?)\>>/g, rx: /\^\[(.*?)\]\<<(.*?)\>>/g,
parse(s) { parse(s) {
@ -172,6 +202,7 @@ TokenIdentifiers.set("accordion", {
}, },
}); });
TokenIdentifiers.set("p", { TokenIdentifiers.set("p", {
// rx: /(?<=\n)\n?([\s\S]*?)\n(?=\n)/g,
rx: /(?<=\n\n)([\s\S]*?)(?=\n\n)/g, rx: /(?<=\n\n)([\s\S]*?)(?=\n\n)/g,
parse(s) { parse(s) {
// const [_, content] = s.match(new RegExp(this.rx, ""))!; // const [_, content] = s.match(new RegExp(this.rx, ""))!;

273
lib/tcmd/index.ts
View File

@ -3,7 +3,7 @@
import { zipArrays } from "../zip"; import { zipArrays } from "../zip";
import { TokenIdentifiers } from "./TokenIdentifiers"; import { TokenIdentifiers } from "./TokenIdentifiers";
export const createElements = (body: string): [Token[], number] => { export const createElements = (body: string): [TokenMarker[], number] => {
const tabOptions = [ const tabOptions = [
/^\s{2}(?!\s|\t)/m, /^\s{2}(?!\s|\t)/m,
/^\s{4}(?!\s|\t)/m, /^\s{4}(?!\s|\t)/m,
@ -18,13 +18,13 @@ export const createElements = (body: string): [Token[], number] => {
} }
} }
const tokens = tokenize(body); const tokens = tokenize(body);
return [buildAbstractSyntaxTree(tokens, body), tabSpacing]; return [buildAbstractSyntaxTree(tokens), tabSpacing];
}; };
const tokenize = (body: string) => { const tokenize = (body: string) => {
const tokenizedBody: tokenMarker[] = []; const tokenizedBody: TokenMarker[] = [];
const addToken = (thing: tokenMarker) => { const addToken = (thing: TokenMarker) => {
tokenizedBody.push(thing); tokenizedBody.push(thing);
}; };
@ -35,145 +35,93 @@ const tokenize = (body: string) => {
const start = match.index; const start = match.index;
const end = rx.lastIndex; const end = rx.lastIndex;
if (type !== "p" || !tokenizedBody.find((i) => i.start === start)) {
addToken({ addToken({
start, start,
end, end,
type, type,
token: token.parse(match[0]),
}); });
} }
} }
}
return tokenizedBody; return tokenizedBody;
}; };
export const buildAbstractSyntaxTree = ( function buildAbstractSyntaxTree(markers: TokenMarker[]) {
markers: tokenMarker[], markers.sort((a, b) => a.start - b.start);
body: string,
): Token[] => {
ensureNoOrphans(markers);
markers.sort((a, b) => { markers = filterOverlappingPBlocks(markers);
if (a.start === b.start) {
console.log(a, b); establishClosestParent(markers);
if (a.type === "p") return -1;
if (b.type === "p") return 1;
}
// if (a.type === "p" && a.start === b.start) return -1;
// if (b.type === "p" && a.start === b.start) return 1;
return a.start - b.start;
});
for (const marker of markers) { for (const marker of markers) {
marker.token = TokenIdentifiers.get(marker.type)?.parse( if (marker.parent) {
body.substring(marker.start, marker.end),
);
// if (marker.type === "p" && marker.parent && marker.parent?.type !== "p") {
// marker.parent = undefined;
// continue;
// }
if (!marker.token) {
throw new Error("Failed to parse token. Token type not found?");
}
if (!marker.parent) continue;
if (!marker.parent.token) {
// debugger;
throw new Error("Failed to parse token. Child tokenized before parent");
}
marker.parent.token.children = marker.parent.token.children || []; marker.parent.token.children = marker.parent.token.children || [];
marker.parent.token.children.push(marker.token); marker.parent.token.children.push(marker.token);
// marker.token.parent = marker.parent.token; }
} }
const tokens = markers.filter((m) => // By starting at the end, we can always assure that we are not filtering out children that haven't been processed yet
markers.filter((a) => a !== m && (a.end === m.end || a.start === m.start)) for (const marker of [...markers].reverse()) {
.length || m.type !== "p" contentToChildren(marker.token);
).map((t) => t.token!);
for (const token of tokens) {
contentToChildren(token);
} }
return tokens.filter((t) => !t.parent); return markers.filter((m) => !m.parent);
}; // return markers;
}
const ensureNoOrphansOld = (tokens: tokenMarker[]) => { function establishClosestParent(blocks: TokenMarker[]): void {
for (const token of tokens) { blocks.sort((a, b) => a.start - b.start); // Sort blocks by start position
const parentPs = tokens.filter((t) => (
t.type === "p" && ( for (let i = 0; i < blocks.length; i++) {
// any p that fully encapsulates the token const block = blocks[i];
(t.start <= token.start && t.end >= token.end) || if (block.parent) continue; // Skip blocks that already have a parent
// any p that contains the start of the token
(t.start <= token.start && t.end >= token.start) || let closestParent: TokenMarker | undefined = undefined;
// any p that contains the end of the token let minDistance = Number.MAX_SAFE_INTEGER;
(t.start <= token.end && t.end >= token.end)
// Find the closest parent block for each block
for (let j = 0; j < i; j++) {
const otherBlock = blocks[j];
if (otherBlock.end >= block.start && otherBlock.start <= block.start) {
const distance = block.start - otherBlock.start;
if (distance < minDistance) {
minDistance = distance;
closestParent = otherBlock;
}
}
}
if (closestParent) {
block.parent = closestParent; // Assign the closest parent block
}
}
}
function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
return blocks.filter((block) => {
if (block.type !== "p") {
return true; // Keep blocks that are not 'p' type
}
// Filter out 'p' blocks that overlap with any other block
for (const otherBlock of blocks) {
if (
otherBlock !== block && (
otherBlock.start === block.start ||
otherBlock.end === block.end
) )
)).sort((a, b) => (a.start - b.start)); ) {
return false; // Overlapping 'p' block found, filter it out
if (parentPs.length > 1) {
parentPs[0].end = parentPs.at(-1)!.end;
const remainingParents = parentPs.slice(1);
for (const token of tokens) {
if (token.parent && remainingParents.includes(token.parent)) {
token.parent = parentPs[0];
} }
} }
if (parentPs[0] && parentPs[0].end < token.end) {
parentPs[0].end = token.end;
}
tokens = tokens.filter((t) => !remainingParents.includes(t));
}
const potentialParents = tokens.filter((t) => return true; // Keep 'p' block if it doesn't overlap with any other block
(t.start < token.start && t.end > token.end) ||
(t.type === "p" && t.start <= token.start &&
t.end >= token.end && t !== token)
).sort((a, b) => {
if (token.start - a.start < token.start - b.start) return -1;
return 1;
}); });
}
token.parent = potentialParents.find((p) => p.type !== "p") ??
potentialParents[0];
if (token.type === "grid") {
debugger;
}
}
};
const ensureNoOrphans = (tokens: tokenMarker[]) => {
ensureNoOrphansOld(tokens);
};
const contentToChildren = (token: Token) => { const contentToChildren = (token: Token) => {
const children: Token[] = []; let content = token.content;
let part, content = token.content;
// for (const child of token.children || []) {
// if (!content) continue;
// [part, content] = content.split(child.raw);
// part && children.push({
// content: part.trim(),
// metadata: {},
// raw: part,
// type: "text",
// uuid: crypto.randomUUID(),
// });
// children.push(child);
// }
// if (content) {
// children.push({
// content: content.trim(),
// metadata: {},
// raw: content,
// type: "text",
// uuid: crypto.randomUUID(),
// });
// }
const splitMarker = "{{^^}}"; const splitMarker = "{{^^}}";
for (const child of token.children || []) { for (const child of token.children || []) {
content = content.replace(child.raw, splitMarker); content = content.replace(child.raw, splitMarker);
@ -181,7 +129,7 @@ const contentToChildren = (token: Token) => {
token.children = zipArrays( token.children = zipArrays(
content.split(splitMarker).map((c): Token => ({ content.split(splitMarker).map((c): Token => ({
content: c.trim(), content: c.replaceAll("\n", ""),
metadata: {}, metadata: {},
raw: c, raw: c,
type: "text", type: "text",
@ -191,96 +139,3 @@ const contentToChildren = (token: Token) => {
token.children || [], token.children || [],
).filter((c) => c.children?.length || (c.rendersContentOnly && c.content)); ).filter((c) => c.children?.length || (c.rendersContentOnly && c.content));
}; };
// const tokenize = (body: string) => {
// body = body.replace(/\n?<!--(.*?)-->\n?/gs, "");
// const paragraphs = body.split("\n\n");
// const blockTokens: BlockToken[] = [];
// const paragraphTokens: ParagraphToken[] = [];
// for (const paragraph of paragraphs) {
// const block = tokenizeBlock(paragraph);
// let openBT = blockTokens.findLast((bt) => !bt.closed);
// if (block) {
// if (typeof block === "string") {
// if (openBT) {
// openBT.closed = true;
// }
// continue;
// }
// if (openBT) {
// openBT.children.push(block);
// block.parent = openBT.type;
// }
// blockTokens.push(block);
// continue;
// }
// if (!openBT) {
// openBT = {
// children: [],
// closed: false,
// metadata: {},
// type: "block",
// uuid: crypto.randomUUID(),
// };
// blockTokens.push(openBT);
// }
// const multiline = tokenizeParagraph(paragraph);
// let openP = paragraphTokens.findLast((p) => !p.closed);
// if (multiline) {
// if (Array.isArray(multiline)) {
// if (openP) {
// openP.closed = true;
// openP.content = openP.content.concat(multiline);
// }
// continue;
// }
// openBT.children.push(multiline);
// paragraphTokens.push(multiline);
// continue;
// } else if (openP && !openP?.allowsInline) {
// openP.content.push({
// line: paragraph,
// raw: paragraph,
// type: "text",
// uuid: crypto.randomUUID(),
// });
// }
// // I don't think the closed check is necessary, but just in case
// // if (openP && !openP.closed && !openP.allowsInline) continue;
// if (!openP) {
// openP = {
// allowsInline: true,
// closed: true,
// content: [],
// metadata: {},
// type: "p",
// uuid: crypto.randomUUID(),
// };
// openBT.children.push(openP);
// paragraphTokens.push(openP);
// }
// const lines = paragraph.split("\n");
// let previous;
// for (const line of lines) {
// const singleLine = tokenizeLine(line, previous);
// if (singleLine) {
// if (singleLine !== previous) {
// openP.content.push(singleLine);
// }
// previous = singleLine;
// }
// }
// }
// return blockTokens.filter((b) => !b.parent);
// };

7
md/help articles/How to use ttcMD.md
View File

@ -21,12 +21,14 @@ This section will cover all of the enhancements that are added for basic markdow
You can use the typical link syntax: `[link name](/link/location)`, but there are a few presets that allow you to style them to look a bit nicer. You can use the typical link syntax: `[link name](/link/location)`, but there are a few presets that allow you to style them to look a bit nicer.
**Primary Button:** **Primary Button:**
Prefix the link name with ````button` to create a button. Prefix the link name with ````button` to create a button.
`[```button link name](#links)` produces: `[```button link name](#links)` produces:
[```button link name](#links) [```button link name](#links)
**Call to Action:** **Call to Action:**
Prefix the link name with ````cta` to create a modestly styled button/call to action. Prefix the link name with ````cta` to create a modestly styled button/call to action.
`[```cta link name](#links)` produces: `[```cta link name](#links)` produces:
@ -59,7 +61,6 @@ Accordions are when you can click an item to expand it to show additional inform
Syntax: Syntax:
[][][] [][][]
``` ```
[accordion title] [accordion title]
@ -77,11 +78,7 @@ As you can see, I can do normal markdown in here.
I can include a [link](#accordions), or *italic* and **bold** text. I can include a [link](#accordions), or *italic* and **bold** text.
[[ [[
I can even include a card, like this one I can even include a card, like this one
]] ]]
[/accordion] [/accordion]
/[] /[]

7
types.d.ts vendored
View File

@ -42,7 +42,6 @@ type SingleLineToken = {
type Token = { type Token = {
type: string; type: string;
metadata: Record<string, string>; metadata: Record<string, string>;
parent?: Token;
children?: Token[]; children?: Token[];
uuid: string; uuid: string;
raw: string; raw: string;
@ -51,12 +50,12 @@ type Token = {
rendersContentOnly?: boolean; rendersContentOnly?: boolean;
}; };
type tokenMarker = { type TokenMarker = {
start: number; start: number;
end: number; end: number;
type: string; type: string;
parent?: tokenMarker; parent?: TokenMarker;
token?: Token; token: Token;
}; };
type MultilineCfg = { type MultilineCfg = {