@rasenganjs/mdx 1.0.1 → 1.0.3

package/README.md

@@ -35,13 +35,8 @@ import { defineConfig } from "rasengan";
 import mdx from "@rasenganjs/mdx";
 
 export default defineConfig({
-  reactStrictMode: true,
-
-  // Define aliases
   vite: {
-    plugins: [
-      ...mdx(),
-    ],
+    plugins: [mdx()],
   },
 });
 ```
@@ -69,25 +64,26 @@ This is a `blog` page.
 
 3. Use your `markdown` file.
 
-Inside the `app.router.ts` file, import your Markdown Component and the `generatePage` function from `@rasenganjs/mdx`
+Inside the `app.router.ts` file, import your Markdown Component and the `MDXRenderer` component from `@rasenganjs/mdx` and add it to `defineRouter` option like this:
 
 ```typescript
 import { RouterComponent, defineRouter } from "rasengan";
 import AppLayout from "@app/app.layout";
 import Blog from "@app/blog.page.mdx";
-import { generatePage } from "@rasenganjs/mdx";
-
-const BlogPage = generatePage(Blog);
+import { MDXRenderer } from "@rasenganjs/mdx";
 
 class AppRouter extends RouterComponent {}
 
 export default defineRouter({
   imports: [],
   layout: AppLayout,
-  pages: [BlogPage],
+  pages: [Blog],
+  MDXRenderer
 })(AppRouter);
 ```
 
+The `MDXRenderer` component is used to render the Markdown content.
+
 Now visit [http://localhost:5320/blog](http://localhost:5320/blog)
 
 ## Community

package/lib/components/codeblock.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { CodeBlockProps, ComponentWithTextChildrenProps } from "../types/index.js";
+/**
+ * A React component that renders a code block with syntax highlighting and a copy button.
+ *
+ * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
+ * It also includes a copy button that allows the user to copy the code to their clipboard.
+ *
+ * @param {object} props - The component props.
+ * @param {string} props.children - The code content to be displayed in the code block.
+ * @param {string} [props.className] - The CSS class name to apply to the code block.
+ * @returns {React.ReactElement} - The rendered code block component.
+ */
+export declare const CodeBlock: ({ children, className, ...rest }: CodeBlockProps) => React.ReactElement;
+export declare const SimpleBlock: ({ children, }: ComponentWithTextChildrenProps) => React.ReactElement;

package/lib/components/codeblock.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { renderToString } from "react-dom/server";
+/**
+ * A React component that renders a code block with syntax highlighting and a copy button.
+ *
+ * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
+ * It also includes a copy button that allows the user to copy the code to their clipboard.
+ *
+ * @param {object} props - The component props.
+ * @param {string} props.children - The code content to be displayed in the code block.
+ * @param {string} [props.className] - The CSS class name to apply to the code block.
+ * @returns {React.ReactElement} - The rendered code block component.
+ */
+export const CodeBlock = ({ children, className = "", ...rest }) => {
+    const language = rest["data-language"] || "";
+    const numbers = rest["data-line-numbers"];
+    // const theme = rest["data-theme"] || "github-dark-dimmed";
+    const [hover, setHover] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        /**
+         * Sets the `copied` state to `false` after 2 seconds, effectively hiding the "copied" indicator.
+         * This function is called after the user's clipboard is updated with the code content.
+         */
+        const timer = setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    /**
+     * Copies the trimmed text content of the `children` prop to the user's clipboard.
+     * This function is called when the "Copy" button is clicked in the code block component.
+     * It sets the `copied` state to `true` for 2 seconds to display a "copied" indicator.
+     */
+    const handleCopy = () => {
+        const content = renderToString(children);
+        const code = extractTextFromHTML(content);
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+    };
+    /**
+  * Extracts the text content from an HTML string.
+  *
+  * This function takes an HTML string as input and returns the plain text content of the HTML, excluding any HTML tags or markup.
+  *
+  * @param htmlString - The HTML string to extract text from.
+  * @returns The plain text content of the HTML string.
+  */
+    const extractTextFromHTML = (htmlString) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlString, "text/html");
+        return doc.body.textContent || "";
+    };
+    if (!language) {
+        return _jsx(SimpleBlock, { children: children });
+    }
+    return (_jsxs("div", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: [hover ? (_jsx("button", { className: 'copy-button', onClick: handleCopy, children: copied ? (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '20', height: '20', color: '#f0f0f0', fill: 'none', children: [_jsx("path", { d: 'M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z', stroke: 'currentColor', strokeWidth: '1.5' }), _jsx("path", { d: 'M8 12.5L10.5 15L16 9', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' })] })) : (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '20', height: '20', color: '#f0f0f0', fill: 'none', children: [_jsx("path", { d: 'M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' })] })) })) : (_jsx("span", { className: 'lang', children: language })), _jsx("code", { className: `${className} code-block`, "data-line-numbers": numbers !== undefined ? "" : undefined, children: children })] }));
+};
+export const SimpleBlock = ({ children, }) => {
+    return _jsx("code", { className: 'simple-block', children: children });
+};
+//# sourceMappingURL=codeblock.js.map

package/lib/components/codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock.js","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"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"}

package/lib/components/heading.d.ts

@@ -0,0 +1,2 @@
+import { HeadingProps, HeadingProps2 } from "../types/index.js";
+export declare const Heading: ({ variant }: HeadingProps) => ({ children }: HeadingProps2) => import("react/jsx-runtime").JSX.Element;

package/lib/components/heading.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useMemo } from "react";
+export const Heading = ({ variant }) => {
+    return ({ children }) => {
+        const { text, id } = useMemo(() => {
+            // Regex pattern to match links in the format [#link text]
+            const regex = new RegExp("^\\[#.+\\]");
+            // split the children into an array of strings based on space
+            const childrenArray = children.split(" [#");
+            let lastWord = "";
+            let restOfTheWords = "";
+            let link = "";
+            // Check if we have more than one word and if the last word is a link
+            if (childrenArray.length > 1 &&
+                childrenArray.at(-1).includes("]") &&
+                regex.test(`[#${childrenArray.at(-1)}`)) {
+                lastWord = childrenArray.pop();
+            }
+            if (lastWord) {
+                link = lastWord.replace("]", "").split(" ").join("-").toLowerCase();
+                restOfTheWords = childrenArray[0];
+            }
+            else {
+                link = children.split(" ").join("-").toLowerCase();
+                restOfTheWords = children;
+            }
+            return {
+                id: variant === "h1" ? undefined : link,
+                text: restOfTheWords,
+            };
+        }, [children]);
+        const heading = createElement(variant, {
+            id,
+            className: "heading",
+            children: text,
+        });
+        return (_jsxs("div", { className: 'ra-heading-wrapper', children: [heading, id && (_jsx("a", { href: `#${id}`, children: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '24', height: '24', color: '#ffffff', fill: 'none', children: [_jsx("path", { d: 'M10 13.229C10.1416 13.4609 10.3097 13.6804 10.5042 13.8828C11.7117 15.1395 13.5522 15.336 14.9576 14.4722C15.218 14.3121 15.4634 14.1157 15.6872 13.8828L18.9266 10.5114C20.3578 9.02184 20.3578 6.60676 18.9266 5.11718C17.4953 3.6276 15.1748 3.62761 13.7435 5.11718L13.03 5.85978', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round' }), _jsx("path", { d: 'M10.9703 18.14L10.2565 18.8828C8.82526 20.3724 6.50471 20.3724 5.07345 18.8828C3.64218 17.3932 3.64218 14.9782 5.07345 13.4886L8.31287 10.1172C9.74413 8.62761 12.0647 8.6276 13.4959 10.1172C13.6904 10.3195 13.8584 10.539 14 10.7708', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round' })] }) }))] }));
+    };
+};
+//# sourceMappingURL=heading.js.map

package/lib/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../src/components/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG/C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAgB,EAAE,EAAE;IACpD,OAAO,CAAC,EAAE,QAAQ,EAAiB,EAAE,EAAE;QACtC,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;YACjC,0DAA0D;YAC1D,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,CAAC;YAEvC,6DAA6D;YAC7D,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,QAAQ,GAAG,EAAE,CAAC;YACf,IAAI,cAAc,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,GAAG,EAAE,CAAC;YAEd,qEAAqE;YACrE,IACC,aAAa,CAAC,MAAM,GAAG,CAAC;gBACxB,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAClC,KAAK,CAAC,IAAI,CAAC,KAAK,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACtC,CAAC;gBACF,QAAQ,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC;YAChC,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACV,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;gBACpE,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACP,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;gBAC/C,cAAc,GAAG,QAAQ,CAAC;YAC/B,CAAC;YAED,OAAO;gBACN,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;gBACvC,IAAI,EAAE,cAAc;aACpB,CAAC;QACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEf,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,EAAE;YACtC,EAAE;YACF,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,CACN,eAAK,SAAS,EAAC,oBAAoB,aACjC,OAAO,EACP,EAAE,IAAI,CACN,YAAG,IAAI,EAAE,IAAI,EAAE,EAAE,YAChB,eACC,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,aAEX,eACC,CAAC,EAAC,uRAAuR,EACzR,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACpB,EACF,eACC,CAAC,EAAC,yOAAyO,EAC3O,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACpB,IACG,GACH,CACJ,IACI,CACN,CAAC;IACH,CAAC,CAAC;AACH,CAAC,CAAC"}

package/lib/components/index.d.ts

@@ -1,28 +1,5 @@
 import React from "react";
-import { MDXPageComponent } from "../types/index.js";
-type ComponentWithTextChildrenProps = {
-    children: string;
-};
-type MDXRendererProps = {
-    children: MDXPageComponent;
-    className?: string;
-};
-type CodeBlockProps = ComponentWithTextChildrenProps & {
-    className?: string;
-};
-/**
- * A React component that renders a code block with syntax highlighting and a copy button.
- *
- * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
- * It also includes a copy button that allows the user to copy the code to their clipboard.
- *
- * @param {object} props - The component props.
- * @param {string} props.children - The code content to be displayed in the code block.
- * @param {string} [props.className] - The CSS class name to apply to the code block.
- * @returns {React.ReactElement} - The rendered code block component.
- */
-declare const CodeBlock: ({ children, className }: CodeBlockProps) => React.ReactElement;
-declare const SimpleBlock: ({ children }: ComponentWithTextChildrenProps) => React.ReactElement;
+import { MDXRendererProps } from "../types/index.js";
 /**
  * Renders an MDX content component with a custom code block component.
  *
@@ -32,4 +9,4 @@ declare const SimpleBlock: ({ children }: ComponentWithTextChildrenProps) => Rea
  * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
  */
 declare const MDXRenderer: ({ children: MDXContent, className }: MDXRendererProps) => React.ReactElement;
-export { MDXRenderer, CodeBlock, SimpleBlock };
+export { MDXRenderer };

package/lib/components/index.js

@@ -1,80 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { themes, Highlight } from "prism-react-renderer";
-import React from "react";
-/**
- * A React component that renders a code block with syntax highlighting and a copy button.
- *
- * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
- * It also includes a copy button that allows the user to copy the code to their clipboard.
- *
- * @param {object} props - The component props.
- * @param {string} props.children - The code content to be displayed in the code block.
- * @param {string} [props.className] - The CSS class name to apply to the code block.
- * @returns {React.ReactElement} - The rendered code block component.
- */
-const CodeBlock = ({ children, className = "" }) => {
-    const language = className.replace(/language-/, "");
-    if (!language) {
-        return _jsx(SimpleBlock, { children: children });
-    }
-    return (_jsx(Highlight, { theme: themes.oneDark, code: children.trim(), language: language, children: ({ className, tokens, getLineProps, getTokenProps }) => {
-            const [copied, setCopied] = React.useState(false);
-            React.useEffect(() => {
-                /**
-                 * Sets the `copied` state to `false` after 2 seconds, effectively hiding the "copied" indicator.
-                 * This function is called after the user's clipboard is updated with the code content.
-                 */
-                const timer = setTimeout(() => {
-                    setCopied(false);
-                }, 2000);
-                return () => clearTimeout(timer);
-            }, [copied]);
-            /**
-             * Copies the trimmed text content of the `children` prop to the user's clipboard.
-             * This function is called when the "Copy" button is clicked in the code block component.
-             * It sets the `copied` state to `true` for 2 seconds to display a "copied" indicator.
-             */
-            const handleCopy = () => {
-                navigator.clipboard.writeText(children.trim());
-                setCopied(true);
-            };
-            return (_jsxs("pre", { className: className, style: {
-                    color: "#fff",
-                    backgroundColor: "#1d2529",
-                    borderRadius: "20px",
-                    overflow: "hidden",
-                    padding: "0px",
-                }, children: [_jsxs("div", { style: {
-                            width: "100%",
-                            height: "50px",
-                            backgroundColor: "#28373f",
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            paddingLeft: "20px",
-                            paddingRight: "20px",
-                        }, children: [_jsx("span", { children: "Filename" }), _jsx("button", { className: 'copy-button', onClick: handleCopy, children: copied ? (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '24', height: '24', color: '#f0f0f0', fill: 'none', children: [_jsx("path", { d: 'M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z', stroke: 'currentColor', strokeWidth: '1.5' }), _jsx("path", { d: 'M8 12.5L10.5 15L16 9', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' })] })) : (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '24', height: '24', color: '#f0f0f0', fill: 'none', children: [_jsx("path", { d: 'M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' })] })) })] }), _jsx("div", { style: {
-                            padding: "20px",
-                            fontSize: "14px",
-                        }, children: _jsx("code", { children: tokens.map((line, i) => (_jsxs("div", { ...getLineProps({ line }), children: [_jsx("span", { style: {
-                                            opacity: 0.6,
-                                            marginRight: "5px",
-                                        }, children: i + 1 }), _jsx("span", { children: " " }), line.map((token, key) => (_jsx("span", { ...getTokenProps({ token }) }, key)))] }, i))) }) })] }));
-        } }));
-};
-const SimpleBlock = ({ children }) => {
-    return (_jsx("span", { className: "simple-block", style: {
-            fontSize: "14px",
-            borderRadius: "5px",
-            paddingLeft: "3.6px",
-            paddingRight: "3.6px",
-            paddingTop: "2px",
-            paddingBottom: "2px",
-            marginInline: "0px",
-            backgroundColor: "#f7f7f7",
-            border: "1px solid #f0f0f0",
-        }, children: children }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeBlock } from "./codeblock.js";
+import { Table } from "./table.js";
+import { Heading } from "./heading.js";
 /**
  * Renders an MDX content component with a custom code block component.
  *
@@ -86,7 +13,14 @@ const SimpleBlock = ({ children }) => {
 const MDXRenderer = ({ children: MDXContent, className }) => {
     return (_jsx("section", { className: "rasengan-markdown-body " + className, children: _jsx(MDXContent, { components: {
                 code: CodeBlock,
+                table: Table,
+                h1: Heading({ variant: "h1" }),
+                h2: Heading({ variant: "h2" }),
+                h3: Heading({ variant: "h3" }),
+                h4: Heading({ variant: "h4" }),
+                h5: Heading({ variant: "h5" }),
+                h6: Heading({ variant: "h6" }),
             } }) }));
 };
-export { MDXRenderer, CodeBlock, SimpleBlock };
+export { MDXRenderer };
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAe,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAGvC;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAoB,EAAsB,EAAE;IACjG,OAAO,CACN,kBAAS,SAAS,EAAE,yBAAyB,GAAG,SAAS,YACxD,KAAC,UAAU,IACV,UAAU,EAAE;gBACX,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,KAAK;gBACZ,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC9B,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC9B,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC9B,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC9B,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC9B,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAC9B,GACA,GACO,CACV,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EACL,WAAW,EACZ,CAAA"}

package/lib/components/table.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ComponentWithTextChildrenProps } from "../types/index.js";
+export declare const Table: ({ children, }: ComponentWithTextChildrenProps) => React.ReactElement;

package/lib/components/table.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Table = ({ children, }) => {
+    return (_jsx("div", { className: 'ra-table-wrapper', children: _jsx("table", { children: children }) }));
+};
+//# sourceMappingURL=table.js.map

package/lib/components/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACrB,QAAQ,GACwB,EAAsB,EAAE;IACxD,OAAO,CACN,cAAK,SAAS,EAAC,kBAAkB,YAChC,0BAAQ,QAAQ,GAAS,GACpB,CACN,CAAC;AACH,CAAC,CAAC"}

package/lib/index.d.ts

@@ -5,30 +5,7 @@
  *
  * This package is inspired by @mdx-js/rollup to provide a custom implement of the MDX plugin for RasenganJs.
  */
-/// <reference types="node" />
 export * from './types/index.js';
-import { generatePage } from "./utils/index.js";
-export default function (): ({
-    name: string;
-    enforce: string;
-    config(config: unknown, env: any): void;
-    configResolved(resolvedConfig: unknown): void;
-    transform(code: string, id: string): Promise<{
-        code: string;
-        map: import("rollup").SourceMapInput;
-    }>;
-} | {
-    name: string;
-    config: (config: any, env: any) => {
-        define: {
-            process: NodeJS.Process;
-        };
-        build: {
-            rollupOptions: {
-                plugins: import("rollup").Plugin<any>[];
-            };
-        };
-    };
-    apply: string;
-})[];
-export { generatePage };
+export * from './components/index.js';
+import { plugin } from "./utils/index.js";
+export default plugin;

package/lib/index.js

@@ -6,9 +6,7 @@
  * This package is inspired by @mdx-js/rollup to provide a custom implement of the MDX plugin for RasenganJs.
  */
 export * from './types/index.js';
-import { plugin, generatePage, globalsPolyfill } from "./utils/index.js";
-export default function () {
-    return [plugin(), globalsPolyfill()];
-}
-export { generatePage };
+export * from './components/index.js';
+import { plugin } from "./utils/index.js";
+export default plugin;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEzE,MAAM,CAAC,OAAO;IACZ,OAAO,CAAC,MAAM,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC;AACvC,CAAC;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,eAAe,MAAM,CAAC"}

package/lib/types/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type Metadata } from "rasengan";
 /**
  * A React functional component that represents an MDX page.
@@ -13,3 +12,28 @@ export type MDXPageComponent = React.FC<any> & {
         metadata: Metadata;
     };
 };
+/**
+ * A React functional component that represents a simple block element.
+ */
+export type ComponentWithTextChildrenProps = {
+    children: string;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+export type MDXRendererProps = {
+    children: MDXPageComponent;
+    className?: string;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+export type CodeBlockProps = ComponentWithTextChildrenProps & {
+    className?: string;
+};
+export type HeadingProps = {
+    variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+export type HeadingProps2 = ComponentWithTextChildrenProps & {
+    className?: string;
+};

package/lib/utils/extract-toc.d.ts

@@ -0,0 +1 @@
+export declare function extractToc(markdown: string): Promise<string>;

package/lib/utils/extract-toc.js

@@ -0,0 +1,12 @@
+import { remark } from "remark";
+import remarkToc from "remark-toc";
+export async function extractToc(markdown) {
+    const file = await remark()
+        .use(remarkToc, {
+        heading: "structure",
+        maxDepth: 3,
+    })
+        .process(markdown);
+    return String(file);
+}
+//# sourceMappingURL=extract-toc.js.map

package/lib/utils/extract-toc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-toc.js","sourceRoot":"","sources":["../../src/utils/extract-toc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,QAAgB;IAChD,MAAM,IAAI,GAAG,MAAM,MAAM,EAAE;SACzB,GAAG,CAAC,SAAS,EAAE;QACf,OAAO,EAAE,WAAW;QACpB,QAAQ,EAAE,CAAC;KACX,CAAC;SACD,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpB,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrB,CAAC"}

package/lib/utils/index.d.ts

@@ -1,4 +1,2 @@
-import generatePage from "./generate-page.js";
 import plugin from "./plugin.js";
-import globalsPolyfill from "./globals.js";
-export { generatePage, plugin, globalsPolyfill };
+export { plugin };

package/lib/utils/index.js

@@ -1,6 +1,3 @@
-import generatePage from "./generate-page.js";
 import plugin from "./plugin.js";
-// import nodePolyfill from "./polyfills.js";
-import globalsPolyfill from "./globals.js";
-export { generatePage, plugin, globalsPolyfill };
+export { plugin };
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,6CAA6C;AAC7C,OAAO,eAAe,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/utils/mark-to-html.d.ts

@@ -0,0 +1 @@
+export default function markToHtml(markdown: string): Promise<string>;

package/lib/utils/mark-to-html.js

@@ -0,0 +1,15 @@
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+export default async function markToHtml(markdown) {
+    const file = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype)
+        .use(rehypeStringify)
+        .process(markdown);
+    return String(file);
+}
+//# sourceMappingURL=mark-to-html.js.map

package/lib/utils/mark-to-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mark-to-html.js","sourceRoot":"","sources":["../../src/utils/mark-to-html.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,UAAU,CAAC,QAAgB;IACxD,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;SAC1B,GAAG,CAAC,WAAW,CAAC;SAChB,GAAG,CAAC,SAAS,CAAC;SACd,GAAG,CAAC,YAAY,CAAC;SACjB,GAAG,CAAC,eAAe,CAAC;SACpB,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpB,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrB,CAAC"}

package/lib/utils/plugin.d.ts

@@ -9,7 +9,7 @@
  *
  * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
  */
-export default function plugin(): {
+export default function plugin(): Promise<{
     name: string;
     enforce: string;
     config(config: unknown, env: any): void;
@@ -30,4 +30,4 @@ export default function plugin(): {
         code: string;
         map: import("rollup").SourceMapInput;
     }>;
-};
+}>;

package/lib/utils/plugin.js

@@ -1,6 +1,11 @@
-import mdx from '@mdx-js/rollup';
-import matter from 'gray-matter';
-import createFilter from './create-filter.js';
+import matter from "gray-matter";
+import createFilter from "./create-filter.js";
+import remarkGfm from "remark-gfm";
+import rehypeStringify from "rehype-stringify";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { extractToc } from "./extract-toc.js";
+import rehypePrettyCode from "rehype-pretty-code";
 /**
  * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
  *
@@ -12,14 +17,18 @@ import createFilter from './create-filter.js';
  *
  * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
  */
-export default function plugin() {
+export default async function plugin() {
+    const mdx = (await import("@mdx-js/rollup")).default;
     let config;
     const filter = createFilter("**/*.md?(x)");
-    const mdxInstance = mdx();
+    const mdxInstance = mdx({
+        remarkPlugins: [remarkParse, remarkGfm],
+        rehypePlugins: [remarkRehype, rehypeStringify, rehypePrettyCode],
+    });
     return {
         name: "vite-plugin-rasengan-mdx",
         // Apply transformation of the mdx file before other plugins
-        enforce: 'pre',
+        enforce: "pre",
         config(config, env) {
             mdxInstance.config(config, env);
         },
@@ -46,6 +55,9 @@ export default function plugin() {
             const { content, data: frontmatter } = matter(code);
             // Apply transformation of the mdx file
             const result = await mdxInstance.transform(content, id);
+            const toc = await extractToc(content);
+            // const html = await markToHtml(content);
+            // console.log({ toc });
             // Extract the file name from the path
             const fileName = id
                 .split("/")
@@ -58,6 +70,7 @@ export default function plugin() {
                     title: fileName,
                 },
             };
+            // console.log(result.code)
             return {
                 code: `
           ${result.code}

package/lib/utils/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../src/utils/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;IAC7B,IAAI,MAAe,CAAC;IACpB,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAI,GAAG,EAAE,CAAC;IAE3B,OAAO;QACN,IAAI,EAAE,0BAA0B;QAEhC,4DAA4D;QAC5D,OAAO,EAAE,KAAK;QAEd,MAAM,CAAC,MAAe,EAAE,GAAQ;YAC/B,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,CAAC;QAED;;;;WAIG;QACH,cAAc,CAAC,cAAuB;YACrC,4BAA4B;YAC5B,MAAM,GAAG,cAAc,CAAC;QACzB,CAAC;QAED;;;;;;WAMG;QACH,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;YACvC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACb,CAAC;YAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAEpD,uCAAuC;YACvC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAExD,sCAAsC;YACtC,MAAM,QAAQ,GAAG,EAAE;iBACjB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,EAAE;iBACL,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAE7B,2DAA2D;YAC3D,MAAM,QAAQ,GAAG;gBAChB,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE;gBACxC,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI;oBACjC,KAAK,EAAE,QAAQ;iBACf;aACD,CAAC;YAEF,OAAO;gBACN,IAAI,EAAE;YACE,MAAM,CAAC,IAAI;6BACM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;;;SAG5C;gBACL,GAAG,EAAE,MAAM,CAAC,GAAG;aACf,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../src/utils/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,MAAM;IACnC,MAAM,GAAG,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC;IAErD,IAAI,MAAe,CAAC;IACpB,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,GAAG,CAAC;QACvB,aAAa,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;QACvC,aAAa,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;KAChE,CAAC,CAAC;IAEH,OAAO;QACN,IAAI,EAAE,0BAA0B;QAEhC,4DAA4D;QAC5D,OAAO,EAAE,KAAK;QAEd,MAAM,CAAC,MAAe,EAAE,GAAQ;YAC/B,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,CAAC;QAED;;;;WAIG;QACH,cAAc,CAAC,cAAuB;YACrC,4BAA4B;YAC5B,MAAM,GAAG,cAAc,CAAC;QACzB,CAAC;QAED;;;;;;WAMG;QACH,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;YACvC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACb,CAAC;YAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAEpD,uCAAuC;YACvC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAExD,MAAM,GAAG,GAAG,MAAM,UAAU,CAAC,OAAO,CAAC,CAAC;YACtC,0CAA0C;YAE1C,wBAAwB;YAExB,sCAAsC;YACtC,MAAM,QAAQ,GAAG,EAAE;iBACjB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,EAAE;iBACL,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAE7B,2DAA2D;YAC3D,MAAM,QAAQ,GAAG;gBAChB,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE;gBACxC,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI;oBACjC,KAAK,EAAE,QAAQ;iBACf;aACD,CAAC;YAEF,2BAA2B;YAE3B,OAAO;gBACN,IAAI,EAAE;YACE,MAAM,CAAC,IAAI;6BACM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;;;SAG5C;gBACL,GAAG,EAAE,MAAM,CAAC,GAAG;aACf,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}