doccupine 0.0.98 → 0.0.100

package/dist/templates/accordion.mdx.js

@@ -1,41 +0,0 @@
-export const accordionMdxTemplate = `---
-title: "Accordion"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 1
-order: 4
----
-# Accordion
-Interactive panels for toggling visibility of content.
-
-Accordion elements help organize information by letting users show or hide sections as needed. They’re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.
-
-## Accordion Usage
-You can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:
-
-~~~mdx
-<Accordion title="What is MDX?">
-    You can put any content in here, including other components, like code:
-
-   \`\`\`java HelloWorld.java
-    class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-  \`\`\`
-</Accordion>
-~~~
-
-<Accordion title="What is MDX?">
-    You can put any content in here, including other components, like code:
-
-   \`\`\`java HelloWorld.java
-    class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-  \`\`\`
-</Accordion>`;

package/dist/templates/api/theme/routes.d.ts

@@ -1 +0,0 @@
-export declare const routesTemplate = "import { NextResponse } from \"next/server\";\nimport { cookies } from \"next/headers\";\n\nexport async function POST(request: Request) {\n  try {\n    const { theme } = await request.json();\n    if (theme !== \"light\" && theme !== \"dark\") {\n      return NextResponse.json(\n        { ok: false, error: \"Invalid theme\" },\n        { status: 400 },\n      );\n    }\n\n    const cookieStore = await cookies();\n    cookieStore.set(\"theme\", theme, {\n      path: \"/\",\n      maxAge: 60 * 60 * 24 * 365,\n      sameSite: \"lax\",\n    });\n\n    return NextResponse.json({ ok: true });\n  } catch (e) {\n    return NextResponse.json(\n      { ok: false, error: \"Bad Request\" },\n      { status: 400 },\n    );\n  }\n}";

package/dist/templates/api/theme/routes.js

@@ -1,28 +0,0 @@
-export const routesTemplate = `import { NextResponse } from "next/server";
-import { cookies } from "next/headers";
-
-export async function POST(request: Request) {
-  try {
-    const { theme } = await request.json();
-    if (theme !== "light" && theme !== "dark") {
-      return NextResponse.json(
-        { ok: false, error: "Invalid theme" },
-        { status: 400 },
-      );
-    }
-
-    const cookieStore = await cookies();
-    cookieStore.set("theme", theme, {
-      path: "/",
-      maxAge: 60 * 60 * 24 * 365,
-      sameSite: "lax",
-    });
-
-    return NextResponse.json({ ok: true });
-  } catch (e) {
-    return NextResponse.json(
-      { ok: false, error: "Bad Request" },
-      { status: 400 },
-    );
-  }
-}`;

package/dist/templates/app/api/theme/routes.d.ts

@@ -1 +0,0 @@
-export declare const routesTemplate = "import { NextResponse } from \"next/server\";\nimport { cookies } from \"next/headers\";\n\nexport async function POST(request: Request) {\n  try {\n    const { theme } = await request.json();\n    if (theme !== \"light\" && theme !== \"dark\") {\n      return NextResponse.json(\n        { ok: false, error: \"Invalid theme\" },\n        { status: 400 },\n      );\n    }\n\n    const cookieStore = await cookies();\n    cookieStore.set(\"theme\", theme, {\n      path: \"/\",\n      maxAge: 60 * 60 * 24 * 365,\n      sameSite: \"lax\",\n    });\n\n    return NextResponse.json({ ok: true });\n  } catch {\n    return NextResponse.json(\n      { ok: false, error: \"Bad Request\" },\n      { status: 400 },\n    );\n  }\n}\n";

package/dist/templates/app/api/theme/routes.js

@@ -1,29 +0,0 @@
-export const routesTemplate = `import { NextResponse } from "next/server";
-import { cookies } from "next/headers";
-
-export async function POST(request: Request) {
-  try {
-    const { theme } = await request.json();
-    if (theme !== "light" && theme !== "dark") {
-      return NextResponse.json(
-        { ok: false, error: "Invalid theme" },
-        { status: 400 },
-      );
-    }
-
-    const cookieStore = await cookies();
-    cookieStore.set("theme", theme, {
-      path: "/",
-      maxAge: 60 * 60 * 24 * 365,
-      sameSite: "lax",
-    });
-
-    return NextResponse.json({ ok: true });
-  } catch {
-    return NextResponse.json(
-      { ok: false, error: "Bad Request" },
-      { status: 400 },
-    );
-  }
-}
-`;

package/dist/templates/app/error.d.ts

@@ -1 +0,0 @@
-export declare const errorTemplate = "\"use client\";\n\nimport { useEffect } from \"react\";\n\nexport default function Error({\n  error,\n  reset,\n}: {\n  error: Error & { digest?: string };\n  reset: () => void;\n}) {\n  useEffect(() => {\n    console.error(\"Unhandled error:\", error);\n  }, [error]);\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        minHeight: \"50vh\",\n        padding: \"2rem\",\n        textAlign: \"center\",\n      }}\n    >\n      <h2 style={{ marginBottom: \"1rem\" }}>Something went wrong</h2>\n      <button\n        onClick={reset}\n        style={{\n          padding: \"0.5rem 1rem\",\n          borderRadius: \"6px\",\n          border: \"1px solid #ccc\",\n          background: \"#fff\",\n          cursor: \"pointer\",\n          fontSize: \"1rem\",\n        }}\n      >\n        Try again\n      </button>\n    </div>\n  );\n}\n";

package/dist/templates/app/error.js

@@ -1,45 +0,0 @@
-export const errorTemplate = `"use client";
-
-import { useEffect } from "react";
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    console.error("Unhandled error:", error);
-  }, [error]);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "50vh",
-        padding: "2rem",
-        textAlign: "center",
-      }}
-    >
-      <h2 style={{ marginBottom: "1rem" }}>Something went wrong</h2>
-      <button
-        onClick={reset}
-        style={{
-          padding: "0.5rem 1rem",
-          borderRadius: "6px",
-          border: "1px solid #ccc",
-          background: "#fff",
-          cursor: "pointer",
-          fontSize: "1rem",
-        }}
-      >
-        Try again
-      </button>
-    </div>
-  );
-}
-`;

package/dist/templates/app/layout.d.ts

@@ -1,34 +0,0 @@
-interface SectionConfig {
-    label: string;
-    slug: string;
-    directory?: string;
-}
-interface PageData {
-    slug: string;
-    title: string;
-    description: string;
-    date: string | null;
-    category: string;
-    path: string;
-    categoryOrder: number;
-    order: number;
-    section: string;
-}
-interface GoogleFontConfig {
-    fontName?: string;
-    subsets?: string[];
-    weight?: string | string[];
-}
-interface LocalFontSrc {
-    path: string;
-    weight: string;
-    style: string;
-}
-interface FontConfig {
-    googleFont?: GoogleFontConfig;
-    localFonts?: string | {
-        src?: LocalFontSrc[];
-    };
-}
-export declare const layoutTemplate: (pages: PageData[], fontConfig: FontConfig | null, sectionsConfig?: SectionConfig[] | null) => string;
-export {};

package/dist/templates/app/layout.js

@@ -1,184 +0,0 @@
-import { DEFAULT_DESCRIPTION, DEFAULT_FAVICON, DEFAULT_OG_IMAGE, DEFAULT_SITE_NAME, } from "../../lib/constants.js";
-function formatObjectArray(items) {
-    const MAX_WIDTH = 80;
-    const formatted = items.map((item) => {
-        const lines = ["  {"];
-        const entries = Object.entries(item);
-        for (const [key, value] of entries) {
-            const valueStr = JSON.stringify(value);
-            const line = `    ${key}: ${valueStr},`;
-            if (line.length > MAX_WIDTH) {
-                lines.push(`    ${key}:`);
-                lines.push(`      ${valueStr},`);
-            }
-            else {
-                lines.push(line);
-            }
-        }
-        lines.push("  },");
-        return lines.join("\n");
-    });
-    return "[\n" + formatted.join("\n") + "\n]";
-}
-function isGoogleFont(fc) {
-    return !!fc?.googleFont?.fontName;
-}
-function isLocalFont(fc) {
-    if (!fc?.localFonts)
-        return false;
-    if (typeof fc.localFonts === "string")
-        return true;
-    return !!fc.localFonts.src?.length;
-}
-function getLocalFontSrc(fc) {
-    if (typeof fc.localFonts === "string")
-        return `"${fc.localFonts}"`;
-    return JSON.stringify(fc.localFonts?.src, null, 2).replace(/"([^"]+)":/g, "$1:");
-}
-export const layoutTemplate = (pages, fontConfig, sectionsConfig = null) => {
-    const hasSections = sectionsConfig !== null && sectionsConfig.length > 0;
-    return `import type { Metadata } from "next";
-${isGoogleFont(fontConfig) ? `import { ${fontConfig.googleFont.fontName} } from "next/font/google";` : isLocalFont(fontConfig) ? 'import localFont from "next/font/local";' : 'import { Inter } from "next/font/google";'}
-import dynamic from "next/dynamic";
-import { StyledComponentsRegistry } from "cherry-styled-components";
-import { theme, themeDark } from "@/app/theme";
-import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
-import { ChtProvider } from "@/components/Chat";
-${hasSections
-        ? ""
-        : `import { Footer } from "@/components/layout/Footer";
-`}import { Header } from "@/components/layout/Header";
-import {
-  DocsWrapper,
-  SectionBarProvider,
-} from "@/components/layout/DocsComponents";
-${hasSections
-        ? ""
-        : `import { SideBar } from "@/components/SideBar";
-import { DocsNavigation } from "@/components/layout/DocsNavigation";
-`}import {
-  transformPagesToGroupedStructure,
-  type PagesProps,
-} from "@/utils/orderNavItems";
-${hasSections
-        ? ""
-        : `import { StaticLinks } from "@/components/layout/StaticLinks";
-`}import { config } from "@/utils/config";
-import { verifyBrandingKey } from "@/utils/branding";
-import navigation from "@/navigation.json";
-${hasSections
-        ? `import { SectionBar } from "@/components/layout/SectionBar";
-import { SectionNavProvider } from "@/components/SectionNavProvider";
-`
-        : ""}const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
-
-${isGoogleFont(fontConfig)
-        ? `const font = ${fontConfig.googleFont.fontName}({ ${[fontConfig.googleFont.subsets?.length ? `subsets: ${JSON.stringify(fontConfig.googleFont.subsets)}` : "", fontConfig.googleFont.weight?.length ? `weight: ${Array.isArray(fontConfig.googleFont.weight) ? JSON.stringify(fontConfig.googleFont.weight) : `"${fontConfig.googleFont.weight}"`}` : ""].filter(Boolean).join(", ")} });`
-        : isLocalFont(fontConfig)
-            ? `const font = localFont({
-  src: ${getLocalFontSrc(fontConfig)},
-});`
-            : 'const font = Inter({ subsets: ["latin"] });'}
-
-export const metadata: Metadata = {
-  title: config.name || "${DEFAULT_SITE_NAME}",
-  description:
-    config.description ||
-    "${DEFAULT_DESCRIPTION}",
-  icons: config.icon || "${DEFAULT_FAVICON}",
-  openGraph: {
-    title: config.name || "${DEFAULT_SITE_NAME}",
-    description:
-      config.description ||
-      "${DEFAULT_DESCRIPTION}",
-    images: config.image || "${DEFAULT_OG_IMAGE}",
-  },
-};
-
-const doccupinePages = ${formatObjectArray(pages)};${hasSections ? `\nconst doccupineSections = ${formatObjectArray(sectionsConfig)};` : ""}
-
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const hideBranding = verifyBrandingKey();
-${hasSections
-        ? `
-  const pages: PagesProps[] = doccupinePages;
-
-  return (
-    <html lang="en">
-      <body className={font.className}>
-        <StyledComponentsRegistry>
-          <CherryThemeProvider theme={theme} themeDark={themeDark}>
-            <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
-              <Header>
-                <SectionBar sections={doccupineSections} />
-              </Header>
-              {process.env.LLM_PROVIDER && <Chat />}
-              <DocsWrapper>
-                <SectionNavProvider
-                  sections={doccupineSections}
-                  allPages={pages}
-                  hideBranding={hideBranding}
-                >
-                  {children}
-                </SectionNavProvider>
-              </DocsWrapper>
-            </ChtProvider>
-          </CherryThemeProvider>
-        </StyledComponentsRegistry>
-      </body>
-    </html>
-  );
-}`
-        : `
-  const defaultPages = [
-    {
-      slug: "",
-      title: "Getting Started",
-      description:
-        "${DEFAULT_DESCRIPTION}",
-      date: "2025-01-15",
-      category: "Introduction",
-      categoryOrder: 0,
-      order: 0,
-    },
-  ];
-
-  const pages: PagesProps[] = doccupinePages;
-  const result =
-    Array.isArray(navigation) && navigation.length
-      ? navigation
-      : transformPagesToGroupedStructure(pages);
-  const defaultResults = transformPagesToGroupedStructure(defaultPages);
-
-  return (
-    <html lang="en">
-      <body className={font.className}>
-        <StyledComponentsRegistry>
-          <CherryThemeProvider theme={theme} themeDark={themeDark}>
-            <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
-              <Header />
-              {process.env.LLM_PROVIDER && <Chat />}
-              <SectionBarProvider hasSectionBar={false}>
-                <DocsWrapper>
-                  <SideBar result={result.length ? result : defaultResults} />
-                  {children}
-                  <DocsNavigation
-                    result={result.length ? result : defaultResults}
-                  />
-                  <StaticLinks />
-                  <Footer hideBranding={hideBranding} />
-                </DocsWrapper>
-              </SectionBarProvider>
-            </ChtProvider>
-          </CherryThemeProvider>
-        </StyledComponentsRegistry>
-      </body>
-    </html>
-  );
-}`}
-`;
-};

package/dist/templates/callouts.mdx.d.ts

@@ -1 +0,0 @@
-export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n# Callouts\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n~~~\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>";

package/dist/templates/callouts.mdx.js

@@ -1,57 +0,0 @@
-export const calloutsMdxTemplate = `---
-title: "Callouts"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 1
-order: 7
----
-# Callouts
-Make your content stand out by using callouts for extra emphasis.
-
-You can format them as Note, Warning, Info, Danger and Success.
-
-## Callouts Usage
-You can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:
-
-~~~mdx
-<Callout type="note">
-  This is a note callout
-</Callout>
-
-<Callout type="warning">
-  This is a warning callout
-</Callout>
-
-<Callout type="info">
-  This is an info callout
-</Callout>
-
-<Callout type="danger">
-  This is a danger callout
-</Callout>
-
-<Callout type="success">
- This is a success callout
-</Callout>
-~~~
-
-<Callout type="note">
-  This is a note callout
-</Callout>
-
-<Callout type="warning">
-  This is a warning callout
-</Callout>
-
-<Callout type="info">
-  This is an info callout
-</Callout>
-
-<Callout type="danger">
-  This is a danger callout
-</Callout>
-
-<Callout type="success">
- This is a success callout
-</Callout>`;

package/dist/templates/cards.mdx.d.ts

@@ -1 +0,0 @@
-export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n# Cards\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n~~~\n\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>";

package/dist/templates/cards.mdx.js

@@ -1,25 +0,0 @@
-export const cardsMdxTemplate = `---
-title: "Cards"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 1
-order: 6
----
-# Cards
-Duplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.
-
-Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.
-
-## Cards Usage
-You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
-
-~~~mdx
-<Card title="Note" icon="BadgeInfo">
-  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
-</Card>
-~~~
-
-<Card title="Note" icon="BadgeInfo">
-  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
-</Card>`;

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

@@ -1 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-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";