doccupine 0.0.1

package/dist/templates/docs.js

@@ -0,0 +1,48 @@
+export const docsTemplate = `"use client";
+import { useState } from "react";
+import { Flex } from "cherry-styled-components/src/lib";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Code } from "@/app/components/layout/Code";
+import { 
+  DocsContainer,
+  StyledMarkdownContainer,
+} from "@/app/components/layout/DocsComponents";
+  
+function Docs({content, result}) {
+  return (
+    <DocsContainer>
+      <Flex $gap={20}>
+        <StyledMarkdownContainer>
+        {content && (
+          <Markdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              code(props) {
+                const { children, className, node, ...rest } = props;
+                const match = /language-(\\w+)/.exec(className || "");
+                return match ? (
+                <Code
+                    {...rest}
+                    className={className}
+                    code={String(children).replace(/\\n\$/, "")}
+                  />
+                ) : (
+                  <code {...rest} className={className}>
+                    {children}
+                  </code>
+                );
+              },
+            }}
+          >
+            {content}
+          </Markdown>
+         )}
+        </StyledMarkdownContainer>
+      </Flex>
+    </DocsContainer>
+  );
+}
+
+export { Docs };
+`;

package/dist/templates/footer.d.ts

@@ -0,0 +1 @@
+export declare const footerTemplate = "\n\"use client\";\nimport React from \"react\";\n\nfunction Footer() {\n  return <footer> </footer>;\n}\nexport { Footer };\n";

package/dist/templates/footer.js

@@ -0,0 +1,9 @@
+export const footerTemplate = `
+"use client";
+import React from "react";
+
+function Footer() {
+  return <footer> </footer>;
+}
+export { Footer };
+`;

package/dist/templates/header.d.ts

@@ -0,0 +1 @@
+export declare const headerTemplate = "\n\"use client\";\nimport Image from \"next/image\";\nimport {\n  Flex,\n  MaxWidth,\n  resetButton,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport React, { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { ToggleTheme } from \"@/app/components/layout/ThemeToggle\";\nimport {\n  StyledDataArrowButton,\n  StyledDataDropdown,\n  StyledDataDropdownItem,\n  StyledDataDropdownWrapper,\n  StyledDataUserAvatar,\n  StyledDesktopOnly,\n  StyledMobileOnly,\n  StyledTinyDesktopOnly,\n  StyledTinyMobileOnly,\n} from \"@/app/components/layout/SharedStyled\";\nimport { Icon } from \"@/app/components/layout/Icon\";\nimport { useOnClickOutside } from \"@/app/components/ClickOutside\";\nimport { LinkButton } from \"@/app/components/layout/LinkButton\";\nimport { Logo } from \"@/app/components/layout/Pictograms\";\nimport { rgba } from \"polished\";\n\nconst StyledHeader = styled.header<{ theme: Theme }>`\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  margin: 0;\n  z-index: 1000;\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg {\n      margin: auto;\n    }\n  }\n`;\n\nconst StyledLink = styled(Link)<{ theme: Theme }>`\n  text-decoration: none;\n  margin: auto 0;\n  color: ${({ theme }) => theme.colors.primary};\n  font-weight: 500;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n  }\n`;\n\nexport const StyledMobileBurger = styled.button<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${resetButton};\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 2px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 4px;\n  }\n\n  &::after {\n    bottom: 4px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(4px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nconst StyledMobileMenu = styled.ul<{ theme: Theme; $isActive: boolean }>`\n  list-style: none;\n  padding: 70px 0 0 0;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  pointer-events: none;\n  opacity: 0;\n  width: 100%;\n  height: 100dvh;\n  transition: all 0.3s ease;\n  z-index: 800;\n  transform: translateY(40px) scale(1.2);\n  display: block;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      pointer-events: all;\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    `};\n\n  & li {\n    display: block;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n    &.languages {\n      display: flex;\n      justify-content: center;\n      gap: 10px;\n    }\n\n    & a,\n    & button {\n      ${({ theme }) => styledText(theme)};\n      font-family: ${({ theme }) => theme.fonts.text};\n      font-weight: 500;\n      appearance: none;\n      background: transparent;\n      border: none;\n      color: ${({ theme }) => theme.colors.dark};\n      display: flex;\n      margin: 0;\n      padding: 20px;\n      font-weight: 500;\n      text-decoration: none;\n      cursor: pointer;\n    }\n\n    & button {\n      flex: 1;\n      border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n      text-align: center;\n      justify-content: center;\n\n      &:last-of-type {\n        border-right: none;\n      }\n    }\n  }\n`;\n\nconst StyledMenu = styled.div<{ theme: Theme }>`\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: flex;\n    gap: 20px;\n  }\n`;\n\nconst StyledDivider = styled.div<{ theme: Theme }>`\n  width: 1px;\n  height: calc(100% - 10px);\n  margin: auto 0;\n  background: ${({ theme }) => theme.colors.grayLight};\n`;\n\nfunction Header() {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n\n  return (\n    <>\n      <StyledHeader>\n        <MaxWidth $size={1000}>\n          <Flex $justifyContent=\"space-between\" $wrap=\"nowrap\">\n            <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n              <StyledTinyDesktopOnly>\n                <Logo />\n              </StyledTinyDesktopOnly>\n              <StyledTinyMobileOnly>\n                <Logo />\n              </StyledTinyMobileOnly>\n            </Link>\n            <span ref={wrapperRef}>\n              <Flex $gap={20} $wrap=\"wrap\">\n                <StyledMenu>\n                <StyledLink href=\"/\">\n                  Doccupine\n                </StyledLink>\n                </StyledMenu>\n                <ToggleTheme />\n                <StyledMobileBurger\n                  $isActive={isMobileMenuActive}\n                  onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}\n                  aria-label=\"Burger Menu\"\n                />\n              </Flex>\n            </span>\n          </Flex>\n        </MaxWidth>\n      </StyledHeader>\n      <StyledMobileMenu $isActive={isMobileMenuActive}>\n        <li onClick={() => setIsMobileMenuActive(false)}>\n          <Link href=\"/\">Doccupine</Link>\n        </li>\n      </StyledMobileMenu>\n    </>\n  );\n}\n\nexport { Header };\n";

package/dist/templates/header.js

@@ -0,0 +1,275 @@
+export const headerTemplate = `
+"use client";
+import Image from "next/image";
+import {
+  Flex,
+  MaxWidth,
+  resetButton,
+  styledText,
+} from "cherry-styled-components/src/lib";
+import React, { useCallback, useContext, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import Link from "next/link";
+import { mq, Theme } from "@/app/theme";
+import { ToggleTheme } from "@/app/components/layout/ThemeToggle";
+import {
+  StyledDataArrowButton,
+  StyledDataDropdown,
+  StyledDataDropdownItem,
+  StyledDataDropdownWrapper,
+  StyledDataUserAvatar,
+  StyledDesktopOnly,
+  StyledMobileOnly,
+  StyledTinyDesktopOnly,
+  StyledTinyMobileOnly,
+} from "@/app/components/layout/SharedStyled";
+import { Icon } from "@/app/components/layout/Icon";
+import { useOnClickOutside } from "@/app/components/ClickOutside";
+import { LinkButton } from "@/app/components/layout/LinkButton";
+import { Logo } from "@/app/components/layout/Pictograms";
+import { rgba } from "polished";
+
+const StyledHeader = styled.header<{ theme: Theme }>\`
+  position: sticky;
+  top: 0;
+  padding: 20px;
+  margin: 0;
+  z-index: 1000;
+
+  &::before,
+  &::after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: \${({ theme }) => theme.colors.light};
+    z-index: -2;
+  }
+
+  &::after {
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
+    z-index: -1;
+  }
+
+  & .logo {
+    display: flex;
+
+    & svg {
+      margin: auto;
+    }
+  }
+\`;
+
+const StyledLink = styled(Link)<{ theme: Theme }>\`
+  text-decoration: none;
+  margin: auto 0;
+  color: \${({ theme }) => theme.colors.primary};
+  font-weight: 500;
+
+  @media (hover: hover) {
+    &:hover {
+      color: \${({ theme }) => theme.colors.primaryDark};
+    }
+  }
+\`;
+
+export const StyledMobileBurger = styled.button<{
+  theme: Theme;
+  $isActive: boolean;
+}>\`
+  \${resetButton};
+  display: block;
+  margin: auto 0;
+  width: 18px;
+  height: 18px;
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+  position: relative;
+
+  \${mq("lg")} {
+    display: none;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 2px;
+    border-radius: 3px;
+    background: \${({ theme }) => theme.colors.primary};
+    transition: all 0.3s ease;
+  }
+
+  &::before {
+    top: 4px;
+  }
+
+  &::after {
+    bottom: 4px;
+  }
+
+  \${({ $isActive }) =>
+    $isActive &&
+    css\`
+      &::before {
+        transform: translateY(4px) rotate(45deg);
+      }
+
+      &::after {
+        transform: translateY(-4px) rotate(-45deg);
+      }
+    \`};
+\`;
+
+const StyledMobileMenu = styled.ul<{ theme: Theme; $isActive: boolean }>\`
+  list-style: none;
+  padding: 70px 0 0 0;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: \${({ theme }) => theme.colors.light};
+  pointer-events: none;
+  opacity: 0;
+  width: 100%;
+  height: 100dvh;
+  transition: all 0.3s ease;
+  z-index: 800;
+  transform: translateY(40px) scale(1.2);
+  display: block;
+
+  \${({ $isActive }) =>
+    $isActive &&
+    css\`
+      pointer-events: all;
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    \`};
+
+  & li {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
+
+    &.languages {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    & a,
+    & button {
+      \${({ theme }) => styledText(theme)};
+      font-family: \${({ theme }) => theme.fonts.text};
+      font-weight: 500;
+      appearance: none;
+      background: transparent;
+      border: none;
+      color: \${({ theme }) => theme.colors.dark};
+      display: flex;
+      margin: 0;
+      padding: 20px;
+      font-weight: 500;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    & button {
+      flex: 1;
+      border-right: solid 1px \${({ theme }) => theme.colors.grayLight};
+      text-align: center;
+      justify-content: center;
+
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+  }
+\`;
+
+const StyledMenu = styled.div<{ theme: Theme }>\`
+  display: none;
+
+  \${mq("lg")} {
+    display: flex;
+    gap: 20px;
+  }
+\`;
+
+const StyledDivider = styled.div<{ theme: Theme }>\`
+  width: 1px;
+  height: calc(100% - 10px);
+  margin: auto 0;
+  background: \${({ theme }) => theme.colors.grayLight};
+\`;
+
+function Header() {
+  const [isOptionActive, setIsOptionActive] = useState(false);
+  const [isLangActive, setIsLangActive] = useState(false);
+  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);
+
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+  const elmRef = useRef<HTMLDivElement>(null);
+  const langRef = useRef<HTMLSpanElement>(null);
+  const closeMenu = useCallback(() => {
+    setIsOptionActive(false);
+    setIsLangActive(false);
+  }, []);
+
+  useOnClickOutside(
+    [elmRef, wrapperRef],
+    isOptionActive ? closeMenu : () => {},
+  );
+  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});
+
+  return (
+    <>
+      <StyledHeader>
+        <MaxWidth $size={1000}>
+          <Flex $justifyContent="space-between" $wrap="nowrap">
+            <Link href="/" className="logo" aria-label="Logo">
+              <StyledTinyDesktopOnly>
+                <Logo />
+              </StyledTinyDesktopOnly>
+              <StyledTinyMobileOnly>
+                <Logo />
+              </StyledTinyMobileOnly>
+            </Link>
+            <span ref={wrapperRef}>
+              <Flex $gap={20} $wrap="wrap">
+                <StyledMenu>
+                <StyledLink href="/">
+                  Doccupine
+                </StyledLink>
+                </StyledMenu>
+                <ToggleTheme />
+                <StyledMobileBurger
+                  $isActive={isMobileMenuActive}
+                  onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}
+                  aria-label="Burger Menu"
+                />
+              </Flex>
+            </span>
+          </Flex>
+        </MaxWidth>
+      </StyledHeader>
+      <StyledMobileMenu $isActive={isMobileMenuActive}>
+        <li onClick={() => setIsMobileMenuActive(false)}>
+          <Link href="/">Doccupine</Link>
+        </li>
+      </StyledMobileMenu>
+    </>
+  );
+}
+
+export { Header };
+`;

package/dist/templates/home.d.ts

@@ -0,0 +1 @@
+export declare const homeTemplate = "import { Metadata } from \"next\";\nimport { Docs } from \"@/components/Docs\";\n\nconst content = `# Welcome to Doccupine\n\nDoccupine 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.\n\n## Open Source and Extensible\nDoccupine 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\u2019s look and features to match your organization\u2019s requirements.\n\n## Getting Started\n\nTo get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:\n\n- **Install Doccupine CLI:**\n\n~~~bash\nnpm install -g doccupine-beta\n~~~\n\n- **Create a new Doccupine project:**\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n~~~bash\ndoccupine-beta\n~~~\n\nOnce 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.\nAfter 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.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n- **Generate the website:**\n\n~~~bash\ndoccupine build\n~~~\n\nThis 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.\n\n## Features\n\n- \uD83D\uDCDD Markdown-based content\n- \uD83D\uDCE6 Built-in file structure\n- \u26A1 Live Preview & Auto-Update\n- \uD83D\uDE80 Easy Deployment\n\n## Start documenting\nStart 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:\n\n~~~text\n ---\ntitle: \"Home\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n\n# Home\n\nThis is some **markdown** content with MDX support.\n~~~\n\nIn 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. You can also use the *frontmatter* to add metadata to your content.\n\n`;\n\nexport const metadata: Metadata = {\n  title: 'Welcome to Doccupine',\n  description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',\n};\n\nexport default function Page() {\n  return (\n    <Docs content={content} />\n  );\n}\n";

package/dist/templates/home.js

@@ -0,0 +1,80 @@
+export const homeTemplate = `import { Metadata } from "next";
+import { Docs } from "@/components/Docs";
+
+const content = \`# 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. You can also use the *frontmatter* to add metadata to your content.
+
+\`;
+
+export const metadata: Metadata = {
+  title: 'Welcome to Doccupine',
+  description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
+};
+
+export default function Page() {
+  return (
+    <Docs content={content} />
+  );
+}
+`;

package/dist/templates/icon.d.ts

@@ -0,0 +1 @@
+export declare const iconTemplate = "\nimport { icons } from \"lucide-react\";\n\nexport type IconProps = keyof typeof icons;\n\ninterface Props {\n  name: IconProps;\n  color?: string;\n  size?: number;\n  className?: string;\n}\n\nconst Icon = ({ name, color, size, className }: Props) => {\n  const LucideIcon = icons[name];\n\n  return <LucideIcon color={color} size={size} className={className} />;\n};\n\nexport { Icon };\n";

package/dist/templates/icon.js

@@ -0,0 +1,20 @@
+export const iconTemplate = `
+import { icons } from "lucide-react";
+
+export type IconProps = keyof typeof icons;
+
+interface Props {
+  name: IconProps;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+const Icon = ({ name, color, size, className }: Props) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} className={className} />;
+};
+
+export { Icon };
+`;

package/dist/templates/layout.d.ts

@@ -0,0 +1 @@
+export declare const layoutTemplate: (pages: any[]) => string;

package/dist/templates/layout.js

@@ -0,0 +1,66 @@
+export const layoutTemplate = (pages) => `import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { 
+  Container,
+  StyledComponentsRegistry,
+  CherryThemeProvider 
+} from "cherry-styled-components/src/lib";
+import { theme, themeDark } from "@/app/theme";
+import { Footer } from "@/components/layout/Footer";
+import { Header } from "@/components/layout/Header";
+import { DocsWrapper } from "@/components/layout/DocsComponents";
+import { SideBar } from "@/components/SideBar";
+import { transformPagesToGroupedStructure } from "@/utils/orderNavItems";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: 'Doccupine',
+  description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
+  openGraph: {
+    title: 'Doccupine',
+    description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const defaultPages = [
+  {
+    "slug": "",
+    "title": "Getting Started",
+    "description": "Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.",
+    "date": "2025-01-15",
+    "category": "Introduction",
+    "categoryOrder": 0,
+    "order": 0
+  },
+];
+
+  const pages = ${JSON.stringify(pages, null, 2)};
+  const result = transformPagesToGroupedStructure(pages);
+  const defaultResults = transformPagesToGroupedStructure(defaultPages);
+
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <StyledComponentsRegistry>
+          <CherryThemeProvider theme={theme} themeDark={themeDark}>
+            <Header />
+            <Container $padding={20}>
+              <DocsWrapper>
+                <SideBar result={result.length ? result : defaultResults} />
+                {children}
+              </DocsWrapper>
+            </Container>
+            <Footer />
+          </CherryThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
+`;

package/dist/templates/not-found.d.ts

@@ -0,0 +1 @@
+export declare const notFoundTemplate = "import { Metadata } from \"next\";\nimport { Docs } from \"@/components/Docs\";\n\nconst content = `# 404 Not Found\n\nYou just hit a route that doesn't exist.`;\n\nexport const metadata: Metadata = {\n  title: 'Not Found',\n  description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',\n  openGraph: {\n    title: 'Not Found',\n    description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',\n  },\n};\n\nexport default function Page() {\n  return (\n    <Docs content={content} />\n  );\n}\n";

package/dist/templates/not-found.js

@@ -0,0 +1,22 @@
+export const notFoundTemplate = `import { Metadata } from "next";
+import { Docs } from "@/components/Docs";
+
+const content = \`# 404 Not Found
+
+You just hit a route that doesn't exist.\`;
+
+export const metadata: Metadata = {
+  title: 'Not Found',
+  description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
+  openGraph: {
+    title: 'Not Found',
+    description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
+  },
+};
+
+export default function Page() {
+  return (
+    <Docs content={content} />
+  );
+}
+`;

package/dist/templates/pictograms.d.ts

@@ -0,0 +1 @@
+export declare const pictogramsTemplate = "\n\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport React from \"react\";\nimport { useTheme } from \"styled-components\";\n\ninterface Props extends React.SVGProps<SVGSVGElement> {\n  className?: string;\n}\n\nfunction Logo({ ...props }: Props) {\n  const theme = useTheme() as Theme;\n  return (\n    <svg\n      width=\"164\"\n      height=\"30\"\n      viewBox=\"0 0 164 30\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M153.351 22.5766V7.4697H163.531V10.1031H156.545V13.7028H163.007V16.3362H156.545V19.9432H163.56V22.5766H153.351Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M150.712 7.4697V22.5766H147.954L141.381 13.0684H141.271V22.5766H138.077V7.4697H140.88L147.4 16.9705H147.533V7.4697H150.712Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M135.449 7.4697V22.5766H132.255V7.4697H135.449Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M118.806 22.5766V7.4697H124.766C125.912 7.4697 126.888 7.68853 127.694 8.1262C128.501 8.55895 129.115 9.16136 129.538 9.93342C129.966 10.7006 130.18 11.5857 130.18 12.5889C130.18 13.5921 129.964 14.4773 129.531 15.2444C129.098 16.0116 128.471 16.6091 127.65 17.0369C126.834 17.4647 125.845 17.6787 124.685 17.6787H120.886V15.119H124.168C124.783 15.119 125.29 15.0133 125.688 14.8019C126.091 14.5855 126.391 14.288 126.588 13.9093C126.789 13.5257 126.89 13.0856 126.89 12.5889C126.89 12.0873 126.789 11.6497 126.588 11.2759C126.391 10.8973 126.091 10.6047 125.688 10.3981C125.285 10.1867 124.773 10.0809 124.154 10.0809H122V22.5766H118.806Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M112.984 7.4697H116.178V17.2803C116.178 18.3819 115.915 19.3457 115.388 20.1719C114.867 20.9981 114.137 21.6423 113.198 22.1045C112.258 22.5619 111.164 22.7905 109.915 22.7905C108.661 22.7905 107.565 22.5619 106.625 22.1045C105.686 21.6423 104.956 20.9981 104.434 20.1719C103.913 19.3457 103.653 18.3819 103.653 17.2803V7.4697H106.847V17.0074C106.847 17.5828 106.972 18.0942 107.223 18.5417C107.478 18.9892 107.837 19.3408 108.3 19.5965C108.762 19.8523 109.3 19.9801 109.915 19.9801C110.535 19.9801 111.073 19.8523 111.531 19.5965C111.993 19.3408 112.349 18.9892 112.6 18.5417C112.856 18.0942 112.984 17.5828 112.984 17.0074V7.4697Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M101.362 12.7586H98.1313C98.0723 12.3406 97.9518 11.9693 97.7699 11.6448C97.5879 11.3153 97.3543 11.035 97.0691 10.8038C96.7839 10.5727 96.4544 10.3957 96.0807 10.2727C95.7119 10.1498 95.3111 10.0883 94.8783 10.0883C94.0964 10.0883 93.4153 10.2826 92.8351 10.6711C92.2548 11.0546 91.8048 11.6152 91.4852 12.3529C91.1655 13.0856 91.0057 13.9757 91.0057 15.0232C91.0057 16.1001 91.1655 17.005 91.4852 17.7377C91.8097 18.4704 92.2622 19.0236 92.8424 19.3974C93.4227 19.7711 94.094 19.958 94.8562 19.958C95.284 19.958 95.6799 19.9014 96.0438 19.7883C96.4126 19.6752 96.7396 19.5105 97.0249 19.2941C97.3101 19.0728 97.5461 18.8048 97.733 18.4901C97.9248 18.1753 98.0576 17.8164 98.1313 17.4131L101.362 17.4279C101.279 18.1213 101.07 18.79 100.735 19.4343C100.406 20.0735 99.9607 20.6464 99.4001 21.153C98.8444 21.6546 98.1805 22.0529 97.4084 22.3479C96.6413 22.6381 95.7733 22.7832 94.8046 22.7832C93.4571 22.7832 92.2523 22.4783 91.1901 21.8685C90.1328 21.2587 89.2968 20.376 88.6821 19.2203C88.0723 18.0647 87.7675 16.6656 87.7675 15.0232C87.7675 13.3758 88.0773 11.9742 88.6969 10.8186C89.3165 9.66296 90.1574 8.7827 91.2196 8.17784C92.2818 7.56805 93.4768 7.26316 94.8046 7.26316C95.6799 7.26316 96.4913 7.3861 97.2388 7.63198C97.9912 7.87786 98.6575 8.23685 99.2378 8.70894C99.8181 9.17611 100.29 9.74901 100.654 10.4276C101.023 11.1063 101.259 11.8833 101.362 12.7586Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M85.7427 12.7586H82.5118C82.4528 12.3406 82.3323 11.9693 82.1504 11.6448C81.9684 11.3153 81.7348 11.035 81.4496 10.8038C81.1644 10.5727 80.8349 10.3957 80.4612 10.2727C80.0924 10.1498 79.6916 10.0883 79.2588 10.0883C78.4769 10.0883 77.7958 10.2826 77.2156 10.6711C76.6353 11.0546 76.1853 11.6152 75.8657 12.3529C75.546 13.0856 75.3862 13.9757 75.3862 15.0232C75.3862 16.1001 75.546 17.005 75.8657 17.7377C76.1902 18.4704 76.6427 19.0236 77.2229 19.3974C77.8032 19.7711 78.4745 19.958 79.2367 19.958C79.6645 19.958 80.0604 19.9014 80.4243 19.7883C80.7931 19.6752 81.1201 19.5105 81.4054 19.2941C81.6906 19.0728 81.9266 18.8048 82.1135 18.4901C82.3053 18.1753 82.4381 17.8164 82.5118 17.4131L85.7427 17.4279C85.6591 18.1213 85.4501 18.79 85.1157 19.4343C84.7862 20.0735 84.3412 20.6464 83.7806 21.153C83.2249 21.6546 82.561 22.0529 81.7889 22.3479C81.0218 22.6381 80.1538 22.7832 79.1851 22.7832C77.8376 22.7832 76.6328 22.4783 75.5706 21.8685C74.5133 21.2587 73.6773 20.376 73.0626 19.2203C72.4528 18.0647 72.1479 16.6656 72.1479 15.0232C72.1479 13.3758 72.4578 11.9742 73.0774 10.8186C73.697 9.66296 74.5379 8.7827 75.6001 8.17784C76.6623 7.56805 77.8573 7.26316 79.1851 7.26316C80.0604 7.26316 80.8718 7.3861 81.6193 7.63198C82.3717 7.87786 83.038 8.23685 83.6183 8.70894C84.1986 9.17611 84.6707 9.74901 85.0346 10.4276C85.4034 11.1063 85.6394 11.8833 85.7427 12.7586Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M70.0475 15.0232C70.0475 16.6706 69.7352 18.0721 69.1107 19.2277C68.4911 20.3834 67.6453 21.2661 66.5732 21.8759C65.5061 22.4807 64.3062 22.7832 62.9735 22.7832C61.631 22.7832 60.4262 22.4783 59.3591 21.8685C58.292 21.2587 57.4486 20.376 56.829 19.2203C56.2093 18.0647 55.8995 16.6656 55.8995 15.0232C55.8995 13.3758 56.2093 11.9742 56.829 10.8186C57.4486 9.66296 58.292 8.7827 59.3591 8.17784C60.4262 7.56805 61.631 7.26316 62.9735 7.26316C64.3062 7.26316 65.5061 7.56805 66.5732 8.17784C67.6453 8.7827 68.4911 9.66296 69.1107 10.8186C69.7352 11.9742 70.0475 13.3758 70.0475 15.0232ZM66.8093 15.0232C66.8093 13.956 66.6494 13.0561 66.3298 12.3234C66.0151 11.5907 65.57 11.035 64.9947 10.6563C64.4193 10.2777 63.7456 10.0883 62.9735 10.0883C62.2015 10.0883 61.5277 10.2777 60.9524 10.6563C60.377 11.035 59.9295 11.5907 59.6099 12.3234C59.2951 13.0561 59.1378 13.956 59.1378 15.0232C59.1378 16.0903 59.2951 16.9902 59.6099 17.7229C59.9295 18.4557 60.377 19.0113 60.9524 19.39C61.5277 19.7687 62.2015 19.958 62.9735 19.958C63.7456 19.958 64.4193 19.7687 64.9947 19.39C65.57 19.0113 66.0151 18.4557 66.3298 17.7229C66.6494 16.9902 66.8093 16.0903 66.8093 15.0232Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M46.4079 22.5766H41.0526V7.4697H46.4522C47.9717 7.4697 49.2798 7.77213 50.3764 8.377C51.473 8.97694 52.3164 9.83999 52.9065 10.9661C53.5016 12.0923 53.7991 13.4397 53.7991 15.0084C53.7991 16.582 53.5016 17.9344 52.9065 19.0654C52.3164 20.1965 51.4681 21.0644 50.3617 21.6693C49.2601 22.2742 47.9422 22.5766 46.4079 22.5766ZM44.2466 19.84H46.2751C47.2193 19.84 48.0135 19.6728 48.6577 19.3384C49.3068 18.999 49.7937 18.4753 50.1182 17.7672C50.4477 17.0541 50.6125 16.1345 50.6125 15.0084C50.6125 13.8921 50.4477 12.9799 50.1182 12.2717C49.7937 11.5636 49.3093 11.0423 48.6651 10.7079C48.0209 10.3735 47.2267 10.2063 46.2825 10.2063H44.2466V19.84Z\"\n        fill=\"#3B82F6\"\n      />\n      <path\n        d=\"M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 5.1544e-07 15 0ZM17.46 6.63281C17.3329 6.6583 17.2664 6.76163 17.2344 6.86426C17.2026 6.96625 17.1945 7.09548 17.2002 7.23633C17.2118 7.52094 17.2808 7.89734 17.3779 8.30176C17.5178 8.88356 17.7201 9.53957 17.9082 10.0967C17.3504 9.47631 16.6424 8.72017 15.9775 8.0752C15.5538 7.66414 15.1444 7.29572 14.8018 7.03516C14.6307 6.9051 14.4724 6.79901 14.335 6.72852C14.2041 6.66146 14.0675 6.61313 13.9492 6.63281C13.8849 6.64355 13.8274 6.6734 13.7852 6.72461C13.7448 6.77375 13.7249 6.83378 13.7168 6.8916C13.7012 7.00406 13.7248 7.14351 13.7656 7.29199C13.8488 7.59395 14.0254 7.99367 14.2441 8.42383C14.588 9.09999 15.0456 9.87052 15.4395 10.4961C14.6276 9.98813 13.5693 9.37252 12.5928 8.90137C12.0015 8.6161 11.4342 8.38126 10.9678 8.25586C10.735 8.19331 10.521 8.15609 10.3389 8.15625C10.1589 8.15649 9.99165 8.19337 9.87109 8.29688C9.74997 8.40095 9.70176 8.53855 9.71289 8.68848C9.7235 8.83104 9.78668 8.98219 9.87793 9.13281C10.0612 9.4352 10.385 9.7802 10.7656 10.127C11.2592 10.5766 11.8635 11.0425 12.4219 11.4404C11.614 11.1521 10.6656 10.8394 9.79688 10.6074C9.17224 10.4406 8.58351 10.3143 8.11719 10.2676C7.88462 10.2443 7.67649 10.2402 7.50684 10.2637C7.34178 10.2865 7.1881 10.3389 7.09473 10.4512C6.99513 10.5711 6.99361 10.7136 7.04688 10.8467C7.09752 10.9731 7.20024 11.1014 7.3291 11.2275C7.58899 11.482 7.9953 11.7644 8.45996 12.0449C9.14977 12.4613 9.98572 12.884 10.7051 13.2207C9.89668 13.1479 8.93696 13.0925 8.1084 13.1074C7.55332 13.1174 7.0472 13.1597 6.68359 13.2529C6.50321 13.2992 6.34583 13.3613 6.23438 13.4473C6.11815 13.537 6.04297 13.6616 6.0625 13.8184C6.09513 14.079 6.30546 14.286 6.56738 14.4482C6.83507 14.614 7.18869 14.754 7.56836 14.8701C8.09797 15.032 8.692 15.1512 9.20312 15.2305C8.54341 15.4231 7.73337 15.6854 6.98828 15.9785C6.49407 16.173 6.02484 16.382 5.64648 16.5947C5.2741 16.8041 4.96906 17.0282 4.8252 17.2588C4.75164 17.3767 4.71767 17.5019 4.75879 17.6221C4.79906 17.739 4.8992 17.8159 5.00781 17.8672C5.22324 17.9688 5.56067 18.0105 5.93262 18.0205C6.52855 18.0364 7.26666 17.9713 7.88184 17.8916C7.33281 18.3337 6.65515 18.8997 6.08984 19.415C5.74179 19.7324 5.43264 20.0338 5.22266 20.2764C5.11838 20.3969 5.03364 20.5087 4.98145 20.6035C4.9556 20.6505 4.93442 20.7003 4.9248 20.749C4.91531 20.7976 4.91453 20.8611 4.95215 20.918C4.97838 20.9574 5.01587 20.9879 5.05176 21.0107C5.08893 21.0344 5.13311 21.0557 5.18066 21.0752C5.27578 21.1143 5.39716 21.1506 5.53516 21.1846C5.81212 21.2526 6.17221 21.3144 6.55859 21.3691C7.30406 21.4747 8.16195 21.5543 8.74902 21.5977C9.20157 22.3369 10.2013 23.3651 12.2119 23.3652C13.418 23.3652 14.1421 23.1765 14.5498 22.8857C14.7566 22.7382 14.8822 22.5635 14.9453 22.377C15.0079 22.1918 15.0062 22.0031 14.9717 21.8301C14.9394 21.6689 14.8413 21.534 14.7197 21.4238C14.5977 21.3133 14.4438 21.22 14.2842 21.1436C14.2181 21.1119 14.1494 21.0835 14.0811 21.0566L17.5273 20.8535C17.6778 21.2254 17.9076 21.6963 18.1963 22.0869C18.5019 22.5002 18.901 22.8611 19.3672 22.8613C19.8718 22.8613 20.3874 22.8306 20.7793 22.7324C20.9744 22.6835 21.1493 22.6145 21.2783 22.5176C21.411 22.4178 21.502 22.2817 21.502 22.1064C21.5018 21.9074 21.386 21.6903 21.2471 21.4824C21.1049 21.2697 20.9155 21.0353 20.7383 20.8037C20.5582 20.5682 20.3876 20.3316 20.2695 20.1025C20.1509 19.8723 20.0932 19.6646 20.1191 19.4824C20.143 19.3154 20.2566 19.1777 20.4639 19.0537C20.6723 18.9291 20.9568 18.8304 21.2852 18.7363C21.4483 18.6896 21.6195 18.644 21.7949 18.5977C21.9697 18.5515 22.149 18.5047 22.3252 18.4531C22.6769 18.3501 23.0255 18.2286 23.3203 18.0645C23.9018 17.7406 24.3856 17.288 24.7246 16.835C25.06 16.3867 25.2676 15.9185 25.2676 15.5635C25.2674 15.4487 25.2136 15.3274 25.1406 15.2109C25.0654 15.0908 24.9581 14.9587 24.8301 14.8174C24.5737 14.5343 24.2189 14.2013 23.8232 13.8408C23.0277 13.116 22.0623 12.2734 21.3447 11.4551C20.5698 10.5712 19.7593 9.35811 19.0732 8.36914C18.732 7.87727 18.4198 7.43917 18.1611 7.12988C18.0322 6.97574 17.9119 6.84807 17.8047 6.76172C17.7513 6.71875 17.6968 6.68283 17.6426 6.65918C17.5887 6.63571 17.5253 6.61978 17.46 6.63281ZM20.623 14.0547C21.0389 14.0548 21.376 14.3362 21.376 14.6836C21.3758 15.0309 21.0388 15.3124 20.623 15.3125C20.2072 15.3125 19.8703 15.0309 19.8701 14.6836C19.8701 14.3362 20.2071 14.0547 20.623 14.0547Z\"\n        fill=\"#3B82F6\"\n      />\n    </svg>\n  );\n}\n\nexport { Logo };\n";