doccupine 0.0.1-1

package/README.md

@@ -0,0 +1,65 @@
+# Welcome to Doccupine
+
+Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.
+
+## Open Source and Extensible
+
+Doccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website’s look and features to match your organization’s requirements.
+
+## Getting Started
+
+To get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:
+
+- **Install Doccupine CLI:**
+
+```bash
+npm install -g doccupine-beta
+```
+
+- **Create a new Doccupine project:**
+  Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
+
+```bash
+doccupine-beta
+```
+
+Once you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.
+After selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.
+
+This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
+
+- **Generate the website:**
+
+```bash
+doccupine build
+```
+
+This will generate the build files for your documentation website without starting the development server. You can then deploy the generated files to a hosting service of your choice.
+
+## Features
+
+- 📝 Markdown-based content
+- 📦 Built-in file structure
+- ⚡ Live Preview & Auto-Update
+- 🚀 Easy Deployment
+
+## Start documenting
+
+Start documenting your project by creating a new **index.mdx** file in the choosen MDX directory. You can use the following template as a starting point:
+
+```text
+---
+title: "Home"
+description: "This is my first Doccupine project"
+date: "2025-01-15"
+category: "General"
+categoryOrder: 0
+order: 0
+---
+
+# Home
+
+This is some **markdown** content with MDX support.
+```
+
+In your MDX directory, you can structure your content using folders and files. Doccupine will automatically generate a navigation menu based on the configured categories and order.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,532 @@
+#!/usr/bin/env node
+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 { gitignoreTemplate } from "./templates/gitignore.js";
+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 = {
+            ".gitignore": this.generateGitIgnore(),
+            "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");
+    }
+    generateGitIgnore() {
+        return gitignoreTemplate;
+    }
+    // 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";