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