doccupine 0.0.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,526 @@
+import { program } from "commander";
+import chokidar from "chokidar";
+import fs from "fs-extra";
+import path from "path";
+import matter from "gray-matter";
+import chalk from "chalk";
+import prompts from "prompts";
+import { homeTemplate } from "./templates/home.js";
+import { notFoundTemplate } from "./templates/not-found.js";
+import { layoutTemplate } from "./templates/layout.js";
+import { themeTemplate } from "./templates/theme.js";
+import { iconTemplate } from "./templates/components/layout/Icon.js";
+import { pictogramsTemplate } from "./templates/components/layout/Pictograms.js";
+import { typographyTemplate } from "./templates/components/layout/Typography.js";
+import { headerTemplate } from "./templates/components/layout/Header.js";
+import { footerTemplate } from "./templates/components/layout/Footer.js";
+import { themeToggleTemplate } from "./templates/components/layout/ThemeToggle.js";
+import { sharedStyledTemplate } from "./templates/components/layout/SharedStyles.js";
+import { codeTemplate } from "./templates/components/layout/Code.js";
+import { docsComponentsTemplate } from "./templates/components/layout/DocsComponents.js";
+import { clickOutsideTemplate } from "./templates/components/ClickOutside.js";
+import { docsTemplate } from "./templates/components/Docs.js";
+import { orderNavItemsTemplate } from "./templates/utils/orderNavItems.js";
+import { sideBarTemplate } from "./templates/components/SideBar.js";
+class MDXToNextJSGenerator {
+    watchDir;
+    outputDir;
+    watcher = null;
+    constructor(watchDir, outputDir) {
+        this.watchDir = path.resolve(watchDir);
+        this.outputDir = path.resolve(outputDir);
+    }
+    async init() {
+        console.log(chalk.blue("🚀 Initializing MDX to Next.js generator..."));
+        // Ensure directories exist
+        await fs.ensureDir(this.watchDir);
+        await fs.ensureDir(this.outputDir);
+        // Create initial Next.js structure
+        await this.createNextJSStructure();
+        // Process existing files
+        await this.processAllMDXFiles();
+        console.log(chalk.green("✅ Initial setup complete!"));
+        console.log(chalk.cyan("💡 To start the Next.js dev server:"));
+        console.log(chalk.white(`   cd ${path.relative(process.cwd(), this.outputDir)}`));
+        console.log(chalk.white("   npm install && npm run dev"));
+    }
+    async createNextJSStructure() {
+        const structure = {
+            "package.json": this.generatePackageJson(),
+            "next.config.ts": this.generateNextConfig(),
+            "tsconfig.json": this.generateTSConfig(),
+            "app/layout.tsx": await this.generateRootLayout(),
+            "app/page.tsx": this.generateHomePage(),
+            "app/not-found.tsx": this.generateNotFoundPage(),
+            "app/theme.ts": this.generateTheme(),
+            "components/layout/Icon.tsx": this.generateIcon(),
+            "components/layout/Pictograms.tsx": this.generatePictograms(),
+            "components/layout/Typography.ts": this.generateTypography(),
+            "components/layout/Header.tsx": this.generateHeader(),
+            "components/layout/Footer.tsx": this.generateFooter(),
+            "components/layout/ThemeToggle.tsx": this.generateThemeToggle(),
+            "components/layout/SharedStyled.ts": this.generateSharedStyled(),
+            "components/layout/Code.tsx": this.generateCode(),
+            "components/layout/DocsComponents.tsx": this.generateDocsComponents(),
+            "components/ClickOutside.ts": this.generateClickOutside(),
+            "components/Docs.tsx": this.generateDocs(),
+            "components/SideBar.tsx": this.generateSideBar(),
+            "utils/orderNavItems.ts": this.generateOrderNavItems(),
+        };
+        for (const [filePath, content] of Object.entries(structure)) {
+            const fullPath = path.join(this.outputDir, filePath);
+            await fs.ensureDir(path.dirname(fullPath));
+            await fs.writeFile(fullPath, String(content), "utf8");
+        }
+    }
+    async startWatching() {
+        console.log(chalk.yellow(`👀 Watching for changes in: ${this.watchDir}`));
+        this.watcher = chokidar.watch("**/*.mdx", {
+            cwd: this.watchDir,
+            persistent: true,
+            ignoreInitial: false,
+        });
+        this.watcher
+            .on("add", (filePath) => this.handleFileChange("added", filePath))
+            .on("change", (filePath) => this.handleFileChange("changed", filePath))
+            .on("unlink", (filePath) => this.handleFileDelete(filePath));
+    }
+    async handleFileChange(action, filePath) {
+        console.log(chalk.cyan(`📝 File ${action}: ${filePath}`));
+        const fullPath = path.join(this.watchDir, filePath);
+        try {
+            const content = await fs.readFile(fullPath, "utf8");
+            const { data: frontmatter, content: mdxContent } = matter(content);
+            if (filePath === "index.mdx" || filePath === "./index.mdx") {
+                console.log(chalk.blue("🏠 Updating homepage with index.mdx content"));
+                await this.updatePagesIndex();
+                await this.updateRootLayout();
+            }
+            else {
+                const mdxFile = {
+                    path: filePath,
+                    content: mdxContent,
+                    frontmatter,
+                    slug: this.generateSlug(filePath),
+                };
+                await this.generatePageFromMDX(mdxFile);
+                await this.updatePagesIndex();
+                await this.updateRootLayout();
+            }
+            console.log(chalk.green(`✅ Generated page for: ${filePath}`));
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error processing ${filePath}:`), error);
+        }
+    }
+    async handleFileDelete(filePath) {
+        console.log(chalk.red(`🗑️ File deleted: ${filePath}`));
+        try {
+            if (filePath === "index.mdx" || filePath === "./index.mdx") {
+                console.log(chalk.blue("🏠 Updating homepage - index.mdx deleted"));
+                await this.updatePagesIndex();
+                await this.updateRootLayout();
+            }
+            else {
+                const slug = this.generateSlug(filePath);
+                const pagePath = path.join(this.outputDir, "app", slug);
+                await fs.remove(pagePath);
+                await this.updatePagesIndex();
+                await this.updateRootLayout();
+            }
+            console.log(chalk.green(`✅ Removed page for: ${filePath}`));
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error removing page for ${filePath}:`), error);
+        }
+    }
+    async processAllMDXFiles() {
+        const files = await this.getAllMDXFiles();
+        for (const file of files) {
+            await this.handleFileChange("processed", file);
+        }
+    }
+    async getAllMDXFiles() {
+        const files = [];
+        async function scanDir(dir, relativePath = "") {
+            const entries = await fs.readdir(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                const fullPath = path.join(dir, entry.name);
+                const relPath = path.join(relativePath, entry.name);
+                if (entry.isDirectory()) {
+                    await scanDir(fullPath, relPath);
+                }
+                else if (entry.name.endsWith(".mdx")) {
+                    files.push(relPath);
+                }
+            }
+        }
+        await scanDir(this.watchDir);
+        return files;
+    }
+    generateSlug(filePath) {
+        if (filePath === "index.mdx" || filePath === "./index.mdx") {
+            return "";
+        }
+        return filePath
+            .replace(/\.mdx$/, "")
+            .replace(/\\/g, "/")
+            .replace(/[^a-zA-Z0-9\/\-_]/g, "-")
+            .toLowerCase();
+    }
+    async generatePageFromMDX(mdxFile) {
+        const files = await this.getAllMDXFiles();
+        const pages = [];
+        for (const file of files) {
+            const fullPath = path.join(this.watchDir, file);
+            const content = await fs.readFile(fullPath, "utf8");
+            const { data: frontmatter } = matter(content);
+            pages.push({
+                slug: this.generateSlug(file),
+                title: frontmatter.title || "Untitled",
+                description: frontmatter.description || "",
+                date: frontmatter.date || null,
+                category: frontmatter.category || "",
+                path: file,
+                categoryOrder: frontmatter.categoryOrder || 0,
+                order: frontmatter.order || 0,
+            });
+        }
+        const pageContent = `import { Metadata } from "next";
+import { Docs } from "@/components/Docs";
+
+const content = \`${mdxFile.content.replace(/`/g, "\\`")}\`;
+
+export const metadata: Metadata = {
+  title: '${mdxFile.frontmatter.title || "Generated with Doccupine"}',
+  description: '${mdxFile.frontmatter.description || "Automatically generated from MDX files using Doccupine"}',
+};
+
+export default function Page() {
+  return (
+    <Docs content={content} />
+  );
+}`;
+        const pagePath = path.join(this.outputDir, "app", mdxFile.slug, "page.tsx");
+        await fs.ensureDir(path.dirname(pagePath));
+        await fs.writeFile(pagePath, pageContent, "utf8");
+    }
+    async updatePagesIndex() {
+        const files = await this.getAllMDXFiles();
+        let indexMDX = null;
+        for (const file of files) {
+            const fullPath = path.join(this.watchDir, file);
+            const content = await fs.readFile(fullPath, "utf8");
+            const { data: frontmatter, content: mdxContent } = matter(content);
+            if (file === "index.mdx" || file === "./index.mdx") {
+                indexMDX = {
+                    content: mdxContent,
+                    frontmatter,
+                    title: frontmatter.title || "Welcome",
+                    category: frontmatter.category || "",
+                    description: frontmatter.description || "",
+                    categoryOrder: frontmatter.categoryOrder || 0,
+                    order: frontmatter.order || 0,
+                };
+            }
+        }
+        const indexContent = `import { Metadata } from "next";
+import { Docs } from "@/components/Docs";
+
+${indexMDX ? `const indexContent = \`${indexMDX.content.replace(/`/g, "\\`")}\`;` : `const indexContent = null;`}
+
+${indexMDX
+            ? `export const metadata: Metadata = {
+  title: '${indexMDX.title}',
+  description: '${indexMDX.description}',
+};`
+            : `export const metadata: Metadata = {
+  title: 'Generated with Doccupine',
+  description: 'Automatically generated from MDX files using Doccupine',
+};`} 
+
+export default function Home() {
+  return (
+    <Docs content={indexContent} />
+  );
+}`;
+        await fs.writeFile(path.join(this.outputDir, "app", "page.tsx"), indexContent, "utf8");
+    }
+    // Configuration file generators
+    generatePackageJson() {
+        return JSON.stringify({
+            name: "doccupine",
+            version: "0.1.0",
+            private: true,
+            scripts: {
+                dev: "next dev",
+                build: "next build",
+                start: "next start",
+                lint: "next lint",
+            },
+            dependencies: {
+                next: "15.5.2",
+                react: "19.1.1",
+                "react-dom": "19.1.1",
+            },
+            devDependencies: {
+                "@types/node": "^24",
+                "@types/react": "^19",
+                "@types/react-dom": "^19",
+                "cherry-styled-components": "^0.1.0-43",
+                eslint: "^9",
+                "eslint-config-next": "15.5.2",
+                "lucide-react": "^0.542.0",
+                polished: "^4.3.1",
+                prettier: "^3.6.2",
+                "react-markdown": "^10.1.0",
+                "rehype-highlight": "^7.0.2",
+                "rehype-parse": "^9.0.1",
+                "rehype-stringify": "^10.0.1",
+                "remark-gfm": "^4.0.1",
+                "styled-components": "^6.1.19",
+                typescript: "^5",
+            },
+        }, null, 2);
+    }
+    generateNextConfig() {
+        return `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  transpilePackages: ["lucide-react"],
+};
+
+export default nextConfig;
+`;
+    }
+    generateTSConfig() {
+        return JSON.stringify({
+            compilerOptions: {
+                target: "es5",
+                lib: ["dom", "dom.iterable", "es6"],
+                allowJs: true,
+                skipLibCheck: true,
+                strict: true,
+                noEmit: true,
+                esModuleInterop: true,
+                module: "esnext",
+                moduleResolution: "bundler",
+                resolveJsonModule: true,
+                isolatedModules: true,
+                jsx: "preserve",
+                incremental: true,
+                plugins: [{ name: "next" }],
+                baseUrl: ".",
+                paths: {
+                    "@/*": ["./*"],
+                },
+            },
+            include: [
+                "next-env.d.ts",
+                "**/*.ts",
+                "**/*.tsx",
+                ".next/types/**/*.ts",
+            ],
+            exclude: ["node_modules"],
+        }, null, 2);
+    }
+    async generateRootLayout() {
+        const files = await this.getAllMDXFiles();
+        const pages = [];
+        for (const file of files) {
+            const fullPath = path.join(this.watchDir, file);
+            const content = await fs.readFile(fullPath, "utf8");
+            const { data: frontmatter } = matter(content);
+            pages.push({
+                slug: this.generateSlug(file),
+                title: frontmatter.title || "Untitled",
+                description: frontmatter.description || "",
+                date: frontmatter.date || null,
+                category: frontmatter.category || "",
+                path: file,
+                categoryOrder: frontmatter.categoryOrder || 0,
+                order: frontmatter.order || 0,
+            });
+        }
+        return layoutTemplate(pages);
+    }
+    async updateRootLayout() {
+        const layoutContent = await this.generateRootLayout();
+        await fs.writeFile(path.join(this.outputDir, "app", "layout.tsx"), layoutContent, "utf8");
+    }
+    generateHomePage() {
+        return homeTemplate;
+    }
+    generateNotFoundPage() {
+        return notFoundTemplate;
+    }
+    generateTheme() {
+        return themeTemplate;
+    }
+    generateIcon() {
+        return iconTemplate;
+    }
+    generatePictograms() {
+        return pictogramsTemplate;
+    }
+    generateClickOutside() {
+        return clickOutsideTemplate;
+    }
+    generateTypography() {
+        return typographyTemplate;
+    }
+    generateHeader() {
+        return headerTemplate;
+    }
+    generateFooter() {
+        return footerTemplate;
+    }
+    generateThemeToggle() {
+        return themeToggleTemplate;
+    }
+    generateSharedStyled() {
+        return sharedStyledTemplate;
+    }
+    generateCode() {
+        return codeTemplate;
+    }
+    generateDocsComponents() {
+        return docsComponentsTemplate;
+    }
+    generateDocs() {
+        return docsTemplate;
+    }
+    generateSideBar() {
+        return sideBarTemplate;
+    }
+    generateOrderNavItems() {
+        return orderNavItemsTemplate;
+    }
+    stop() {
+        if (this.watcher) {
+            this.watcher.close();
+            console.log(chalk.yellow("👋 Stopped watching for changes"));
+        }
+    }
+}
+// CLI Commands
+program
+    .name("doccupine")
+    .description("Watch MDX files and generate Next.js documentation pages automatically")
+    .version("0.0.1");
+program
+    .command("watch", { isDefault: true })
+    .description("Watch a directory for MDX changes and generate Next.js app")
+    .option("--port <port>", "Port for Next.js dev server", "3000")
+    .option("--verbose", "Show verbose output")
+    .action(async (options) => {
+    const questions = [
+        {
+            type: "text",
+            name: "watchDir",
+            message: "Enter directory to watch for MDX files:",
+            initial: "docs",
+        },
+        {
+            type: "text",
+            name: "outputDir",
+            message: "Enter output directory for Next.js app:",
+            initial: "nextjs-app",
+        },
+    ];
+    const { watchDir: watchDirInput, outputDir: outputDirInput } = (await prompts(questions));
+    const watchDir = path.resolve(process.cwd(), watchDirInput);
+    const outputDir = path.resolve(process.cwd(), outputDirInput);
+    const generator = new MDXToNextJSGenerator(watchDir, outputDir);
+    await generator.init();
+    let devServer = null;
+    console.log(chalk.blue("📦 Installing dependencies..."));
+    const { spawn } = await import("child_process");
+    // Install dependencies first
+    const install = spawn("npm", ["install"], {
+        cwd: outputDir,
+        stdio: "pipe",
+    });
+    await new Promise((resolve, reject) => {
+        install.on("close", (code) => {
+            if (code === 0) {
+                console.log(chalk.green("✅ Dependencies installed"));
+                resolve(void 0);
+            }
+            else {
+                reject(new Error(`npm install failed with code ${code}`));
+            }
+        });
+        install.on("error", reject);
+    });
+    // Start dev server
+    console.log(chalk.blue(`🚀 Starting Next.js dev server on port ${options.port}...`));
+    devServer = spawn("npm", ["run", "dev", "--", "--port", options.port], {
+        cwd: outputDir,
+        stdio: ["ignore", "pipe", "pipe"],
+    });
+    devServer.stdout.on("data", (data) => {
+        const output = data.toString();
+        if (output.includes("Ready") || output.includes("started")) {
+            console.log(chalk.green(`🌐 Next.js ready at http://localhost:${options.port}`));
+        }
+        // Filter out noisy Next.js logs, show important ones
+        if (output.includes("compiled") ||
+            output.includes("error") ||
+            output.includes("Ready")) {
+            process.stdout.write(chalk.gray("[Next.js] ") + output);
+        }
+    });
+    if (options.verbose) {
+        devServer.stderr.on("data", (data) => {
+            process.stderr.write(chalk.red("[Next.js Error] ") + data.toString());
+        });
+    }
+    devServer.on("error", (error) => {
+        console.error(chalk.red("❌ Error starting dev server:"), error);
+    });
+    await generator.startWatching();
+    // Handle graceful shutdown
+    process.on("SIGINT", () => {
+        console.log(chalk.yellow("\n🛑 Shutting down..."));
+        generator.stop();
+        if (devServer) {
+            devServer.kill();
+        }
+        process.exit(0);
+    });
+    console.log(chalk.green("🎉 Generator is running! Press Ctrl+C to stop."));
+    if (options.dev) {
+        console.log(chalk.cyan(`📝 Edit your MDX files in: ${watchDir}`));
+        console.log(chalk.cyan(`🌐 View changes at: http://localhost:${options.port}`));
+    }
+});
+program
+    .command("build")
+    .description("One-time build of Next.js app from MDX files")
+    .action(async () => {
+    const questions = [
+        {
+            type: "text",
+            name: "watchDir",
+            message: "Enter directory to watch for MDX files:",
+            initial: "docs",
+        },
+        {
+            type: "text",
+            name: "outputDir",
+            message: "Enter output directory for Next.js app:",
+            initial: "nextjs-app",
+        },
+    ];
+    const { watchDir: watchDirInput, outputDir: outputDirInput } = (await prompts(questions));
+    const watchDir = path.resolve(process.cwd(), watchDirInput);
+    const outputDir = path.resolve(process.cwd(), outputDirInput);
+    const generator = new MDXToNextJSGenerator(watchDir, outputDir);
+    await generator.init();
+    console.log(chalk.green("🎉 Build complete!"));
+});
+program.parse();

package/dist/templates/click-outside.d.ts

@@ -0,0 +1 @@
+export declare const clickOutsideTemplate = "\nimport { RefObject, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        refs &&\n        refs\n          .map(\n            (ref) =>\n              ref && ref.current && ref.current.contains(event.target as Node),\n          )\n          .every((i) => i === false)\n      ) {\n        cb();\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [refs, cb]);\n}\n";

package/dist/templates/click-outside.js

@@ -0,0 +1,28 @@
+export const clickOutsideTemplate = `
+import { RefObject, useEffect } from "react";
+
+export function useOnClickOutside(
+  refs: RefObject<HTMLElement | null>[],
+  cb: () => void,
+) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        refs &&
+        refs
+          .map(
+            (ref) =>
+              ref && ref.current && ref.current.contains(event.target as Node),
+          )
+          .every((i) => i === false)
+      ) {
+        cb();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [refs, cb]);
+}
+`;

package/dist/templates/code.d.ts

@@ -0,0 +1 @@
+export declare const codeTemplate = "\"use client\";\n\"use client\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components/src/lib\";\nimport { rgba } from \"polished\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { editableContent } from \"@/app/components/layout/SharedStyled\";\n\ninterface CodeProps extends React.HTMLAttributes<HTMLDivElement> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px\n    ${({ theme }) =>\n      theme.isDark ? rgba(theme.colors.dark, 0.2) : rgba(theme.colors.dark, 0)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: #0d1117;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px ${rgba(\"#ffffff\", 0.1)};\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  gap: 5px;\n  padding: 10px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  margin: auto 0;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: ${rgba(\"#ffffff\", 0.1)};\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #0d1117;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #ffffff;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100svh - 400px);\n  ${({ theme }) => styledCode(theme)};\n\n  &[contenteditable=\"true\"] {\n    ${editableContent};\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst highlightCode = (code: string, language: string): string => {\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${language}\">${code}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", ...props }: CodeProps) {\n  const highlightedCode = highlightCode(code, language);\n  return (\n    <CodeWrapper>\n      <TopBar>\n        <Dot />\n        <Dot />\n        <Dot />\n      </TopBar>\n      <Body dangerouslySetInnerHTML={{ __html: highlightedCode }} {...props} />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";