@rasenganjs/mdx 1.0.3 → 1.0.5

package/README.md

@@ -84,6 +84,18 @@ export default defineRouter({
 
 The `MDXRenderer` component is used to render the Markdown content.
 
+4. Load the `css` file from `@rasenganjs/mdx` package into your `main.ts` file.
+
+```typescript
+import "@rasenganjs/mdx/styles/rasengan-mdx.min.css";
+import { type AppProps } from "rasengan";
+import AppRouter from "@/app/app.router";
+
+export default function App({ children, Component }: AppProps) {
+	return <Component router={AppRouter}>{children}</Component>;
+}
+```
+
 Now visit [http://localhost:5320/blog](http://localhost:5320/blog)
 
 ## Community

package/lib/styles/rasengan-mdx.min.css

@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap);:root{--bg:transparent;--bg-light:#f5f5f5;--bg-code:#282c34;--bg-code-highlight:#30313E;--bg-code-highlight-2:#494c54;--fg:#333;--fg-code:#adbac7;--fg-light:#666;--fg-dark:#000;--fg-accent:#007bff;--border:#eee;--border-dark:#494c54;--table-border:#D1D5DC}.dark{--bg:#212121;--bg-light:#30313E;--bg-code:#282c34;--bg-code-highlight:#30313E;--fg:#eee;--fg-code:#abb2bf;--fg-light:#ccc;--fg-dark:#fff;--fg-accent:#007bff;--border:#2F2F2F;--border-dark:#494c54;--table-border:#4B5563}.rasengan-markdown-body{box-sizing:border-box;margin:0;padding:0;font-weight:400}.rasengan-markdown-body .ra-heading-wrapper{display:flex;align-items:center;justify-content:start}.rasengan-markdown-body .ra-heading-wrapper:has(h2,h3,h4){border-bottom:1px solid var(--border);margin:2rem 0}.rasengan-markdown-body .ra-heading-wrapper a{margin:.67em 0;margin-left:.5em;color:var(--border);opacity:0;transition:all .3s}.rasengan-markdown-body .ra-heading-wrapper a>svg{color:var(--fg)}.rasengan-markdown-body .ra-heading-wrapper a:hover>svg{color:var(--fg-accent)}.rasengan-markdown-body .ra-heading-wrapper:has(h2) a{font-size:2em;text-decoration:none}.rasengan-markdown-body .ra-heading-wrapper:has(h3) a{font-size:1.5em;text-decoration:none}.rasengan-markdown-body .ra-heading-wrapper:has(h4) a{font-size:1em;text-decoration:none}.rasengan-markdown-body .ra-heading-wrapper:hover a{opacity:1;cursor:pointer}.rasengan-markdown-body .ra-heading-wrapper:hover a:hover{transform:scale(1.1)}.rasengan-markdown-body h1{font-size:2.5em;color:var(--fg);font-weight:700;margin:1em 0}.rasengan-markdown-body h2{font-size:2em;color:var(--fg);font-weight:700}.rasengan-markdown-body h3{font-size:1.5em;color:var(--fg);font-weight:700}.rasengan-markdown-body h4{font-size:1.17em;color:var(--fg);font-weight:700}.rasengan-markdown-body h5{font-size:1em;color:var(--fg);font-weight:700;margin:.67em 0}.rasengan-markdown-body h6{font-size:.83em;color:var(--fg);font-weight:700;margin:.67em 0}.rasengan-markdown-body h2:hover::after,.rasengan-markdown-body h3:hover::after,.rasengan-markdown-body h4:hover::after{opacity:1;cursor:pointer}.rasengan-markdown-body p{font-size:1em;color:var(--fg);margin:1em 0}.rasengan-markdown-body a{color:var(--fg-accent);text-decoration:none}.rasengan-markdown-body a:hover{text-decoration:underline}.rasengan-markdown-body code.simple-block{font-size:.8em;font-family:'JetBrains Mono',monospace;border-radius:5px;padding:2px 3.6px;margin:auto 0;background-color:var(--bg-light);border:1px solid var(--border)}.rasengan-markdown-body figure:has(pre[data-language]){background-color:var(--bg-code);border-radius:8px;margin:10px 0;color:var(--fg-code);border:1px solid var(--border);overflow:hidden}.rasengan-markdown-body figure:has(pre[data-language]) figcaption{padding:10px 20px;font-size:14px;font-weight:400;background-color:var(--bg-code-highlight);border-bottom:1px solid var(--border-dark)}.rasengan-markdown-body code[data-line-numbers]{counter-reset:line}.rasengan-markdown-body pre[data-language]{position:relative;border-radius:8px;border:none}.rasengan-markdown-body pre[data-language] code{font-family:'JetBrains Mono',monospace;font-size:14px;overflow-x:auto}.rasengan-markdown-body pre[data-language]>div code{display:grid;grid-template-columns:1fr;line-height:1.6;word-wrap:break-word;padding:16px 0}.rasengan-markdown-body pre[data-language] code>span{padding:0 16px;border-left:4px solid transparent}.rasengan-markdown-body pre[data-language] code[data-line-numbers]>span{padding:0 5px}.rasengan-markdown-body pre[data-language] mark[data-highlighted-chars]{background-color:var(--bg-code-highlight-2);border-radius:5px;padding:0 5px}.rasengan-markdown-body pre[data-language] span[data-highlighted-line]{background-color:var(--bg-code-highlight);border-left:4px solid var(--fg-accent)}.rasengan-markdown-body code[data-line-numbers] span[data-line]:before{counter-increment:line;content:counter(line);display:inline-block;width:2ch;color:#6a737d;text-align:right;margin-right:16px;opacity:.9}.rasengan-markdown-body code.code-block{position:relative;display:block;padding:20px 0;font-size:14px;max-height:800px;overflow:auto}.rasengan-markdown-body pre[data-language] button,.rasengan-markdown-body pre[data-language] span.lang{position:absolute;top:15px;right:15px;transition:all .2s;z-index:10}.rasengan-markdown-body pre[data-language] span.lang{font-size:12px;opacity:.8;color:var(--fg-code);padding:2px 5px;border-radius:5px;background-color:var(--bg-code-highlight);border:1px solid var(--border-dark)}.rasengan-markdown-body pre[data-language] code{font-family:'JetBrains Mono',monospace}.rasengan-markdown-body pre[data-language] button{opacity:.6;cursor:pointer;width:30px;height:30px;border-radius:5px;border:1px solid var(--border-dark);background-color:var(--bg-code-highlight);display:flex;align-items:center;justify-content:center}.rasengan-markdown-body pre[data-language]:hover>div button:hover{opacity:1}.rasengan-markdown-body .ra-table-wrapper{overflow-x:auto}.rasengan-markdown-body table{border-collapse:collapse;color:var(--fg);margin:.67em 0;width:100%;min-width:600px;overflow-x:auto}.rasengan-markdown-body th{background-color:transparent;color:var(--fg);font-weight:700}.rasengan-markdown-body td,.rasengan-markdown-body th{padding:10px 20px;border:1px solid var(--table-border);transition:all .3s;cursor:pointer}.rasengan-markdown-body tr:nth-child(2n){background-color:var(--bg-light)}.rasengan-markdown-body tr:hover{background-color:var(--bg-light)}.rasengan-markdown-body tr:nth-child(odd){background-color:transparent}.rasengan-markdown-body ol,.rasengan-markdown-body ul{margin:.67em 0;color:var(--fg);padding-left:15px}.rasengan-markdown-body ul{list-style:disc}.rasengan-markdown-body ul:has(li > input){list-style:none}.rasengan-markdown-body ol li,.rasengan-markdown-body ul li{margin:.67em 0;color:var(--fg)}.rasengan-markdown-body ol li input,.rasengan-markdown-body ul li input{margin-right:.3em}.rasengan-markdown-body ol li input:checked,.rasengan-markdown-body ul li input{background-color:var(--fg-accent);color:var(--bg)}.rasengan-markdown-body blockquote{border-left:4px solid var(--border);padding-left:1em;margin:1em 0}.rasengan-markdown-body blockquote p{margin:0}

package/lib/utils/index.d.ts

@@ -1,2 +1,20 @@
-import plugin from "./plugin.js";
+declare const plugin: () => (Promise<{
+    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: () => {
+        define: {
+            process: NodeJS.Process;
+        };
+    };
+    enforce: string;
+    apply: string;
+})[];
 export { plugin };

package/lib/utils/index.js

@@ -1,3 +1,5 @@
-import plugin from "./plugin.js";
+import mdxPlugin from "./plugin.js";
+import polyfill from "./polyfill.js";
+const plugin = () => [mdxPlugin(), polyfill()];
 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,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/utils/polyfill.d.ts

@@ -0,0 +1,10 @@
+export default function polyfill(): {
+    name: string;
+    config: () => {
+        define: {
+            process: NodeJS.Process;
+        };
+    };
+    enforce: string;
+    apply: string;
+};

package/lib/utils/polyfill.js

@@ -0,0 +1,15 @@
+export default function polyfill() {
+    return {
+        name: "vite-plugin-rasengan-mdx-polyfill",
+        config: () => {
+            return {
+                define: {
+                    "process": process,
+                },
+            };
+        },
+        enforce: "pre",
+        apply: "build",
+    };
+}
+//# sourceMappingURL=polyfill.js.map

package/lib/utils/polyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polyfill.js","sourceRoot":"","sources":["../../src/utils/polyfill.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,OAAO;QACN,IAAI,EAAE,mCAAmC;QAEzC,MAAM,EAAE,GAAG,EAAE;YACZ,OAAO;gBACN,MAAM,EAAE;oBACP,SAAS,EAAE,OAAO;iBAClB;aACD,CAAC;QACH,CAAC;QAED,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,OAAO;KACd,CAAC;AACH,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rasenganjs/mdx",
 	"private": false,
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "RasenganJS plugin for MDX support",
 	"type": "module",
 	"main": "lib/index.js",
@@ -10,7 +10,8 @@
 			"import": "./lib/index.js",
 			"require": "./lib/index.js",
 			"types": "./lib/types/index.d.ts"
-		}
+		},
+		"./styles/rasengan-mdx.min.css": "./lib/styles/rasengan-mdx.min.css"
 	},
 	"author": {
 		"name": "dilane3",
@@ -27,16 +28,19 @@
 	"license": "MIT",
 	"scripts": {
 		"build:clean": "rm -rf ./lib",
-		"build": "npm run build:clean && tsc",
+		"build:css": "node ./src/scripts/compile-css.js",
+		"build": "npm run build:clean && tsc && npm run build:css",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"pack": "npm pack --pack-destination ./release",
 		"deploy": "npm publish --access public"
 	},
 	"devDependencies": {
+		"@types/clean-css": "^4.2.11",
 		"@types/micromatch": "^4.0.7",
 		"@types/node": "^22.7.4",
 		"@types/react": "^18.3.11",
 		"@types/react-dom": "^18.3.1",
+		"clean-css": "^5.3.3",
 		"typescript": "^5.2.2"
 	},
 	"dependencies": {

package/tsconfig.json

@@ -32,6 +32,7 @@
   "include": [
     "src",
     "src/types",
+    "src/styles/*.css"
   ],
-  "exclude": ["node_modules", "lib"]
+  "exclude": ["node_modules", "lib", "src/scripts"]
 }