@rasenganjs/mdx 1.0.0

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,38 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability or other physical appearance.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+- Be kind and courteous
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [reactgx@gmail.com](mailto:reactgx@gmail.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-Present Dilane Kombou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# Rasengan MDX Plugin
+
+[![npm version](https://badge.fury.io/js/@rasenganjs%mdx.svg)](https://badge.fury.io/js/@rasenganjs%mdx)
+![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%mdx)
+[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-mdx-plugin)](https://github.com/rasengan-dev/rasengan-mdx-plugin/blob/main/LICENSE)
+
+MDX plugin for Rasengan.Js
+
+## Installation
+
+You can install the `@rasenganjs/mdx` package using the following command:
+
+```bash
+npm install @rasenganjs/mdx
+```
+
+or
+
+```bash
+yarn add @rasenganjs/mdx
+```
+
+## Usage
+
+Here is an example of how you can use the `@rasenganjs/mdx` package:
+
+### Basic Usage
+
+1. Setup the `rasengan.config.js` file
+
+Import the `mdx` plugin into the `rasengan.config.js` file.
+
+```javascript
+import { defineConfig } from "rasengan";
+import mdx from "@rasenganjs/mdx";
+
+export default defineConfig({
+  reactStrictMode: true,
+
+  // Define aliases
+  vite: {
+    plugins: [
+      mdx(),
+    ],
+  },
+});
+```
+
+2. Create your `markdown` file.
+
+Create a `markdown` file inside the `app` folder with the pattern `[name].page.mdx` or `[name].page.md`
+
+```mdx
+---
+path: /blog
+metadata:
+  title: Blog page
+  description: Discover our new blog posts
+---
+
+import Button from "@/components/Button";
+
+# Blog page
+
+This is a `blog` page.
+
+<Button>Click Me</Button>
+```
+
+3. Use your `markdown` file.
+
+Inside the `app.router.ts` file, import your Markdown Component and the `generatePage` function from `@rasenganjs/mdx`
+
+```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);
+
+class AppRouter extends RouterComponent {}
+
+export default defineRouter({
+  imports: [],
+  layout: AppLayout,
+  pages: [BlogPage],
+})(AppRouter);
+```
+
+Now visit [http://localhost:5320/blog](http://localhost:5320/blog)
+
+## Community
+
+The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.
+
+We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.
+
+## License
+
+Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE).
+
+## Authors
+
+Here is the authors list:
+
+- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))

package/lib/components/index.d.ts

@@ -0,0 +1,35 @@
+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;
+/**
+ * Renders an MDX content component with a custom code block component.
+ *
+ * @param {MDXRendererProps} props - The props for the MDX renderer.
+ * @param {React.ReactNode} props.children - The MDX content to render.
+ * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
+ * @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 };

package/lib/components/index.js

@@ -0,0 +1,92 @@
+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 }));
+};
+/**
+ * Renders an MDX content component with a custom code block component.
+ *
+ * @param {MDXRendererProps} props - The props for the MDX renderer.
+ * @param {React.ReactNode} props.children - The MDX content to render.
+ * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
+ * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
+ */
+const MDXRenderer = ({ children: MDXContent, className }) => {
+    return (_jsx("section", { className: "rasengan-markdown-body " + className, children: _jsx(MDXContent, { components: {
+                code: CodeBlock,
+            } }) }));
+};
+export { MDXRenderer, CodeBlock, SimpleBlock };
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

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

package/lib/index.d.ts

@@ -0,0 +1,35 @@
+export * from './types/index.js';
+export * from "./utils/index.js";
+export * from './components/index.js';
+/**
+ * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ *
+ * The plugin performs the following tasks:
+ * - Resolves the Vite configuration and stores it for later use.
+ * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
+ * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
+ * - Appends the `metadata` object to the transformed MDX content.
+ *
+ * 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 rasengan(): {
+    name: string;
+    enforce: string;
+    /**
+     * Stores the resolved Vite configuration for later use.
+     *
+     * @param resolvedConfig - The resolved Vite configuration object.
+     */
+    configResolved(resolvedConfig: unknown): void;
+    /**
+     * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
+     *
+     * @param code - The content of the MDX file.
+     * @param id - The ID of the MDX file.
+     * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
+     */
+    transform(code: string, id: string): Promise<{
+        code: string;
+        map: import("rollup").SourceMapInput;
+    }>;
+};

package/lib/index.js

@@ -0,0 +1,72 @@
+import mdx from '@mdx-js/rollup';
+import { createFilter } from "@rollup/pluginutils";
+import matter from 'gray-matter';
+export * from './types/index.js';
+export * from "./utils/index.js";
+export * from './components/index.js';
+/**
+ * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ *
+ * The plugin performs the following tasks:
+ * - Resolves the Vite configuration and stores it for later use.
+ * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
+ * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
+ * - Appends the `metadata` object to the transformed MDX content.
+ *
+ * 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 rasengan() {
+    let config;
+    const filter = createFilter(/\.mdx?$/);
+    return {
+        name: "vite-plugin-rasengan-mdx",
+        // Apply transformation of the mdx file before other plugins
+        enforce: 'pre',
+        /**
+         * Stores the resolved Vite configuration for later use.
+         *
+         * @param resolvedConfig - The resolved Vite configuration object.
+         */
+        configResolved(resolvedConfig) {
+            // store the resolved config
+            config = resolvedConfig;
+        },
+        /**
+         * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
+         *
+         * @param code - The content of the MDX file.
+         * @param id - The ID of the MDX file.
+         * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
+         */
+        async transform(code, id) {
+            if (!filter(id)) {
+                return null;
+            }
+            const { content, data: frontmatter } = matter(code);
+            // Apply transformation of the mdx file
+            const result = await mdx().transform(content, id);
+            // Extract the file name from the path
+            const fileName = id
+                .split("/")
+                .pop()
+                .replace(/.page.mdx?$/, "");
+            // TODO: Consider other params of metadata from frontmatter
+            const metadata = {
+                path: frontmatter.path || `/${fileName}`,
+                metadata: frontmatter.metadata || {
+                    title: fileName,
+                },
+            };
+            return {
+                code: `
+          ${result.code}
+          const metadata = ${JSON.stringify(metadata)};
+          
+          MDXContent.metadata = metadata;
+        `,
+                map: result.map,
+            };
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AAEtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,IAAI,MAAe,CAAC;IACpB,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAEvC,OAAO;QACN,IAAI,EAAE,0BAA0B;QAEhC,4DAA4D;QAC5D,OAAO,EAAE,KAAK;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,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAElD,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"}

package/lib/types/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type Metadata } from "rasengan";
+/**
+ * A React functional component that represents an MDX page.
+ *
+ * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type, which means it is a React functional component that accepts the standard props for a React component.
+ *
+ * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`, which can be used to store metadata about the page.
+ */
+export type MDXPageComponent = React.FC<any> & {
+    metadata?: {
+        path: string;
+        metadata: Metadata;
+    };
+};

package/lib/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/lib/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":""}

package/lib/utils/generate-page.d.ts

@@ -0,0 +1,10 @@
+import { type PageComponent } from "rasengan";
+import { MDXPageComponent } from "../types/index.js";
+/**
+ * Generates a React component from an MDXPageComponent.
+ *
+ * @param MDXPage - The MDXPageComponent to generate the React component from.
+ * @param className - An optional CSS class name to apply to the MDXRenderer component.
+ * @returns A React component that renders the MDXPage content using the MDXRenderer.
+ */
+export default function generatePage(MDXPage: MDXPageComponent, className?: string): PageComponent;

package/lib/utils/generate-page.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MDXRenderer } from "../components/index.js";
+/**
+ * Generates a React component from an MDXPageComponent.
+ *
+ * @param MDXPage - The MDXPageComponent to generate the React component from.
+ * @param className - An optional CSS class name to apply to the MDXRenderer component.
+ * @returns A React component that renders the MDXPage content using the MDXRenderer.
+ */
+export default function generatePage(MDXPage, className = "") {
+    const Page = () => {
+        return _jsx(MDXRenderer, { className: className, children: MDXPage });
+    };
+    Page.path = MDXPage.metadata.path;
+    Page.metadata = MDXPage.metadata.metadata;
+    return Page;
+}
+//# sourceMappingURL=generate-page.js.map

package/lib/utils/generate-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-page.js","sourceRoot":"","sources":["../../src/utils/generate-page.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CACnC,OAAyB,EACzB,SAAS,GAAG,EAAE;IAEd,MAAM,IAAI,GAAkB,GAAG,EAAE;QAChC,OAAO,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,YAAG,OAAO,GAAe,CAAC;IACnE,CAAC,CAAC;IAEF,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;IAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAE1C,OAAO,IAAI,CAAC;AACb,CAAC"}

package/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+import generatePage from "./generate-page.js";
+export { generatePage };

package/lib/utils/index.js

@@ -0,0 +1,3 @@
+import generatePage from "./generate-page.js";
+export { generatePage };
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@rasenganjs/mdx",
+  "private": false,
+  "version": "1.0.0",
+  "description": "RasenganJS plugin for MDX support",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.js"
+    }
+  },
+  "author": {
+    "name": "dilane3",
+    "email": "komboudilane125@gmail.com",
+    "url": "https://dilane3.com",
+    "twitter": "https://twitter.com/dilanekombou",
+    "github": "https://github.com/dilane3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rasengan-dev/rasengan-mdx-plugin.git",
+    "issues": "https://github.com/rasengan-dev/rasengan-mdx-plugin/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:clean": "rm -rf ./lib",
+    "build": "npm run build:clean && tsc",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "pack": "npm pack --pack-destination ./../../packages/@rasenganjs/mdx",
+    "deploy": "npm publish --access public"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@mdx-js/rollup": "^3.0.1",
+    "@rollup/pluginutils": "^5.1.0",
+    "gray-matter": "^4.0.3",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0"
+  },
+  "peerDependencies": {
+    "rasengan": "^1.0.0-beta.35",
+    "react": "^18.3.1"
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,219 @@
+import { themes, Highlight } from "prism-react-renderer";
+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.
+ */
+const CodeBlock = ({ children, className = "" }: CodeBlockProps): React.ReactElement => {
+	const language = className.replace(/language-/, "");
+
+	if (!language) {
+		return <SimpleBlock>{children}</SimpleBlock>;
+	}
+
+	return (
+		<Highlight
+			theme={themes.oneDark}
+			code={children.trim()}
+			language={language}
+		>
+			{({ className, tokens, getLineProps, getTokenProps }: any) => {
+				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 (
+					<pre
+						className={className}
+						style={{
+							color: "#fff",
+							backgroundColor: "#1d2529",
+							borderRadius: "20px",
+							overflow: "hidden",
+							padding: "0px",
+						}}
+					>
+						<div
+							style={{
+								width: "100%",
+								height: "50px",
+								backgroundColor: "#28373f",
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center",
+								paddingLeft: "20px",
+								paddingRight: "20px",
+							}}
+						>
+							<span>Filename</span>
+
+							<button className='copy-button' onClick={handleCopy}>
+								{copied ? (
+									<svg
+										xmlns='http://www.w3.org/2000/svg'
+										viewBox='0 0 24 24'
+										width='24'
+										height='24'
+										color='#f0f0f0'
+										fill='none'
+									>
+										<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'
+										/>
+										<path
+											d='M8 12.5L10.5 15L16 9'
+											stroke='currentColor'
+											strokeWidth='1.5'
+											strokeLinecap='round'
+											strokeLinejoin='round'
+										/>
+									</svg>
+								) : (
+									<svg
+										xmlns='http://www.w3.org/2000/svg'
+										viewBox='0 0 24 24'
+										width='24'
+										height='24'
+										color='#f0f0f0'
+										fill='none'
+									>
+										<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'
+										/>
+										<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'
+										/>
+									</svg>
+								)}
+							</button>
+						</div>
+
+						<div
+							style={{
+								padding: "20px",
+								fontSize: "14px",
+							}}
+						>
+							<code>
+								{tokens.map((line: any, i: number) => (
+									<div key={i} {...getLineProps({ line })}>
+										<span
+											style={{
+												opacity: 0.6,
+												marginRight: "5px",
+											}}
+										>
+											{i + 1}
+										</span>
+										<span> </span>
+										{line.map((token: any, key: number) => (
+											<span key={key} {...getTokenProps({ token })} />
+										))}
+									</div>
+								))}
+							</code>
+						</div>
+					</pre>
+				);
+			}}
+		</Highlight>
+	);
+};
+
+const SimpleBlock = ({ children }: ComponentWithTextChildrenProps): React.ReactElement => {
+	return (
+		<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}</span>
+	);
+};
+
+/**
+ * Renders an MDX content component with a custom code block component.
+ *
+ * @param {MDXRendererProps} props - The props for the MDX renderer.
+ * @param {React.ReactNode} props.children - The MDX content to render.
+ * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
+ * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
+ */
+const MDXRenderer = ({ children: MDXContent, className }: MDXRendererProps): React.ReactElement => {
+	return (
+		<section className={"rasengan-markdown-body " + className}>
+			<MDXContent
+				components={{
+					code: CodeBlock,
+				}}
+			/>
+		</section>
+	);
+};
+
+export {
+  MDXRenderer,
+  CodeBlock,
+	SimpleBlock
+}

package/src/index.ts

@@ -0,0 +1,82 @@
+import mdx from '@mdx-js/rollup'
+import { createFilter } from "@rollup/pluginutils";
+import matter from 'gray-matter';
+
+export * from './types/index.js';
+export * from "./utils/index.js";
+export * from './components/index.js';
+
+/**
+ * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ *
+ * The plugin performs the following tasks:
+ * - Resolves the Vite configuration and stores it for later use.
+ * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
+ * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
+ * - Appends the `metadata` object to the transformed MDX content.
+ *
+ * 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 rasengan() {
+	let config: unknown;
+	const filter = createFilter(/\.mdx?$/);
+
+	return {
+		name: "vite-plugin-rasengan-mdx",
+
+		// Apply transformation of the mdx file before other plugins
+		enforce: 'pre',
+
+		/**
+		 * Stores the resolved Vite configuration for later use.
+		 *
+		 * @param resolvedConfig - The resolved Vite configuration object.
+		 */
+		configResolved(resolvedConfig: unknown) {
+			// store the resolved config
+			config = resolvedConfig;
+		},
+
+		/**
+		 * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
+		 *
+		 * @param code - The content of the MDX file.
+		 * @param id - The ID of the MDX file.
+		 * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
+		 */
+		async transform(code: string, id: string) {
+			if (!filter(id)) {
+				return null;
+			}
+
+			const { content, data: frontmatter } = matter(code);
+
+			// Apply transformation of the mdx file
+			const result = await mdx().transform(content, id);
+
+			// Extract the file name from the path
+			const fileName = id
+				.split("/")
+				.pop()
+				.replace(/.page.mdx?$/, "");
+
+			// TODO: Consider other params of metadata from frontmatter
+			const metadata = {
+				path: frontmatter.path || `/${fileName}`,
+				metadata: frontmatter.metadata || {
+					title: fileName,
+				},
+			};
+
+			return {
+				code: `
+          ${result.code}
+          const metadata = ${JSON.stringify(metadata)};
+          
+          MDXContent.metadata = metadata;
+        `,
+				map: result.map,
+			};
+		},
+	};
+}

package/src/types/index.ts

@@ -0,0 +1,15 @@
+import {type Metadata } from "rasengan";
+
+/**
+ * A React functional component that represents an MDX page.
+ *
+ * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type, which means it is a React functional component that accepts the standard props for a React component.
+ *
+ * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`, which can be used to store metadata about the page.
+ */
+export type MDXPageComponent = React.FC<any> & {
+	metadata?: {
+    path: string;
+    metadata: Metadata;
+  };
+};

package/src/utils/generate-page.tsx

@@ -0,0 +1,24 @@
+import { type PageComponent } from "rasengan";
+import { MDXPageComponent } from "../types/index.js";
+import { MDXRenderer } from "../components/index.js";
+
+/**
+ * Generates a React component from an MDXPageComponent.
+ *
+ * @param MDXPage - The MDXPageComponent to generate the React component from.
+ * @param className - An optional CSS class name to apply to the MDXRenderer component.
+ * @returns A React component that renders the MDXPage content using the MDXRenderer.
+ */
+export default function generatePage(
+	MDXPage: MDXPageComponent,
+	className = ""
+): PageComponent {
+	const Page: PageComponent = () => {
+		return <MDXRenderer className={className}>{MDXPage}</MDXRenderer>;
+	};
+
+	Page.path = MDXPage.metadata.path;
+	Page.metadata = MDXPage.metadata.metadata;
+
+	return Page;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+import generatePage from "./generate-page.js";
+
+export { generatePage };

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src",
+    "target": "ESNext",
+    "lib": [
+      "ES2015",
+      "ESNext",
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "noEmit": false,
+    "declaration": true,
+    "sourceMap": true,
+
+    /* Types */
+    "typeRoots": ["node_modules/@types", "src/types"]
+  },
+  "include": [
+    "src",
+    "src/types",
+  ],
+  "exclude": ["node_modules", "lib"]
+}