Better Strapi integrationHEADmaster

1 files changed, 125 insertions, 0 deletions

diff --git a/src/deps/strapi/blocks.tsx b/src/deps/strapi/blocks.tsx
new file mode 100644
index 0000000..bb60f71
--- /dev/null
+++ b/src/deps/strapi/blocks.tsx
@@ -0,0 +1,125 @@
+import { ContentImage } from "$/ui/objects/ContentImage.tsx";
+
+import { type Node, type DefaultInlineNode } from "./schema.ts";
+
+export function walkBlocks(
+        content: (Node | DefaultInlineNode)[],
+        fn: (_: Node | DefaultInlineNode) => unknown,
+): void {
+        for (const node of content) {
+                fn(node);
+
+                switch (node.type) {
+                        case "heading":
+                        case "code":
+                        case "quote":
+                        case "paragraph":
+                        case "list":
+                        case "list-item":
+                        case "link": {
+                                return walkBlocks(node.children, fn);
+                        }
+                }
+        }
+}
+
+function blocksNodeToTSX(node: Node | DefaultInlineNode) {
+        switch (true) {
+                case node.type === "heading": {
+                        switch (node.level) {
+                                case 1:
+                                        return <h1>{blocksToTSX(node.children)}</h1>;
+                                case 2:
+                                        return <h2>{blocksToTSX(node.children)}</h2>;
+                                case 3:
+                                        return <h3>{blocksToTSX(node.children)}</h3>;
+                                case 4:
+                                        return <h4>{blocksToTSX(node.children)}</h4>;
+                                case 5:
+                                        return <h5>{blocksToTSX(node.children)}</h5>;
+                                default:
+                                        return <h6>{blocksToTSX(node.children)}</h6>;
+                        }
+                }
+
+                case node.type === "image" && !!node.image.caption: {
+                        return (
+                                <figure>
+                                        <ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />
+                                        <figcaption>{node.image.caption}</figcaption>
+                                </figure>
+                        );
+                }
+
+                case node.type === "image": {
+                        return <ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />;
+                }
+
+                case node.type === "code": {
+                        return (
+                                <pre>
+                                        <code>{blocksToTSX(node.children)}</code>
+                                </pre>
+                        );
+                }
+
+                case node.type === "quote": {
+                        return <blockquote>{blocksToTSX(node.children)}</blockquote>;
+                }
+
+                case node.type === "paragraph" &&
+                        node.children.length === 1 &&
+                        node.children[0]?.type === "text" &&
+                        node.children[0].text === "---": {
+                        return <hr />;
+                }
+
+                case node.type === "paragraph": {
+                        return <p>{blocksToTSX(node.children)}</p>;
+                }
+
+                case node.type === "list" && node.format === "ordered": {
+                        return <ol>${blocksToTSX(node.children)}</ol>;
+                }
+
+                case node.type === "list": {
+                        return <ul>${blocksToTSX(node.children)}</ul>;
+                }
+
+                case node.type === "list-item": {
+                        return <li>${blocksToTSX(node.children)}</li>;
+                }
+
+                case node.type === "link": {
+                        return <a href={node.url}>{blocksToTSX(node.children)}</a>;
+                }
+
+                case node.type === "text": {
+                        return [
+                                node.bold ? "strong" : undefined,
+                                node.code ? "code" : undefined,
+                                node.italic ? "em" : undefined,
+                                node.strikethrough ? "del" : undefined,
+                                node.underline ? "u" : undefined,
+                        ].reduce((res: JSX.Element, Tag) => (Tag ? <Tag>{res}</Tag> : res), node.text);
+                }
+        }
+}
+
+export function blocksToTSX(
+        content: (Node | DefaultInlineNode)[],
+        filter: (node: Node | DefaultInlineNode) => boolean = () => true,
+): JSX.Element {
+        return content
+                .filter(filter)
+                .map(blocksNodeToTSX)
+                .filter((s) => s !== undefined);
+}
+
+export const Blocks = ({
+        content,
+        filter = () => true,
+}: {
+        content: (Node | DefaultInlineNode)[];
+        filter?: (node: Node | DefaultInlineNode) => boolean;
+}) => blocksToTSX(content, filter);