doccupine 0.0.6 → 0.0.8

package/README.md

@@ -1,6 +1,6 @@
 # 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.
+[Doccupine](https://doccupine.com) 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
 

package/dist/index.js

@@ -469,7 +469,7 @@ export default function Home() {
 program
     .name("doccupine")
     .description("Watch MDX files and generate Next.js documentation pages automatically")
-    .version("0.0.6");
+    .version("0.0.8");
 program
     .command("watch", { isDefault: true })
     .description("Watch a directory for MDX changes and generate Next.js app")

package/dist/templates/components/Docs.d.ts

@@ -1 +1 @@
-export declare const docsTemplate = "\"use client\";\nimport { Flex } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/components/layout/Code\";\nimport { \n  DocsContainer,\n  StyledMarkdownContainer,\n} from \"@/components/layout/DocsComponents\";\n\ninterface DocsProps {\n  content: string;\n}\n  \nfunction Docs({ content }: DocsProps) {\n  return (\n    <DocsContainer>\n      <Flex $gap={20}>\n        <StyledMarkdownContainer>\n        {content && (\n          <Markdown\n            remarkPlugins={[remarkGfm]}\n            components={{\n              code(props) {\n                const { children, className, node, ...rest } = props;\n                const match = /language-(\\w+)/.exec(className || \"\");\n                return match ? (\n                <Code\n                    {...rest}\n                    className={className}\n                    code={String(children).replace(/\\n$/, \"\")}\n                    language={match[1]}\n                  />\n                ) : (\n                  <code {...rest} className={className}>\n                    {children}\n                  </code>\n                );\n              },\n            }}\n          >\n            {content}\n          </Markdown>\n         )}\n        </StyledMarkdownContainer>\n      </Flex>\n    </DocsContainer>\n  );\n}\n\nexport { Docs };\n";
+export declare const docsTemplate = "\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { Flex, Space } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/components/layout/Code\";\nimport { \n  DocsContainer,\n  StyledMarkdownContainer,\n  StyledIndexSidebar,\n} from \"@/components/layout/DocsComponents\";\nimport { StyledText } from \"@/components/layout/Typography\";\n\ninterface DocsProps {\n  content: string;\n}\n\n\ninterface Heading {\n  id: string;\n  text: string;\n  level: number;\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\nfunction extractHeadings(content: string): Heading[] {\n  const headingRegex = /^(#{1,6})\\s+(.+)$/gm;\n  const headings: Heading[] = [];\n  let match;\n\n  while ((match = headingRegex.exec(content)) !== null) {\n    const level = match[1].length;\n    const text = match[2].trim();\n    const id = generateId(text);\n    headings.push({ id, text, level });\n  }\n\n  return headings;\n}\n  \nfunction Docs({ content }: DocsProps) {\n  const [headings, setHeadings] = useState<Heading[]>([]);\n\n  useEffect(() => {\n    if (content) {\n      const extractedHeadings = extractHeadings(content);\n      setHeadings(extractedHeadings);\n    }\n  }, [content]);\n\n  return (\n    <>\n      <DocsContainer>\n        <Flex $gap={20}>\n          <StyledMarkdownContainer>\n          {content && (\n            <Markdown\n              remarkPlugins={[remarkGfm]}\n              components={{\n                code(props) {\n                  const { children, className, node, ...rest } = props;\n                  const match = /language-(\\w+)/.exec(className || \"\");\n                  return match ? (\n                  <Code\n                      {...rest}\n                      className={className}\n                      code={String(children).replace(/\\n$/, \"\")}\n                      language={match[1]}\n                    />\n                  ) : (\n                    <code {...rest} className={className}>\n                      {children}\n                    </code>\n                  );\n                },\n                h1: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h1 id={id} {...props}>\n                      {children}\n                    </h1>\n                  );\n                },\n                h2: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h2 id={id} {...props}>\n                      {children}\n                    </h2>\n                  );\n                },\n                h3: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h3 id={id} {...props}>\n                      {children}\n                    </h3>\n                  );\n                },\n                h4: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h4 id={id} {...props}>\n                      {children}\n                    </h4>\n                  );\n                },\n                h5: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h5 id={id} {...props}>\n                      {children}\n                    </h5>\n                  );\n                },\n                h6: ({ children, ...props }) => {\n                  const id = generateId(String(children));\n                  return (\n                    <h6 id={id} {...props}>\n                      {children}\n                    </h6>\n                  );\n                },\n              }}\n            >\n              {content}\n            </Markdown>\n           )}\n          </StyledMarkdownContainer>\n        </Flex>\n      </DocsContainer>\n      <StyledIndexSidebar>\n        {headings?.length > 0 && (\n          <>\n            <StyledText>On this page</StyledText>\n            <Space $size={20} />\n          </>\n        )}\n        {headings.map((heading, index) => (\n          <li\n            key={index}\n            style={\n              {\n                // paddingLeft: `${(heading.level - 1) * 16}px`,\n              }\n            }\n          >\n            <a href={`#${heading.id}`}>{heading.text}</a>\n          </li>\n        ))}\n      </StyledIndexSidebar>\n    </>\n  );\n}\n\nexport { Docs };\n";

package/dist/templates/components/Docs.js

@@ -1,50 +1,162 @@
 export const docsTemplate = `"use client";
-import { Flex } from "cherry-styled-components/src/lib";
+import { useEffect, useState } from "react";
+import { Flex, Space } from "cherry-styled-components/src/lib";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Code } from "@/components/layout/Code";
 import { 
   DocsContainer,
   StyledMarkdownContainer,
+  StyledIndexSidebar,
 } from "@/components/layout/DocsComponents";
+import { StyledText } from "@/components/layout/Typography";
 
 interface DocsProps {
   content: string;
 }
+
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+function generateId(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\\w\\s-]/g, "")
+    .replace(/\\s+/g, "-")
+    .trim();
+}
+
+function extractHeadings(content: string): Heading[] {
+  const headingRegex = /^(#{1,6})\\s+(.+)$/gm;
+  const headings: Heading[] = [];
+  let match;
+
+  while ((match = headingRegex.exec(content)) !== null) {
+    const level = match[1].length;
+    const text = match[2].trim();
+    const id = generateId(text);
+    headings.push({ id, text, level });
+  }
+
+  return headings;
+}
   
 function Docs({ content }: DocsProps) {
+  const [headings, setHeadings] = useState<Heading[]>([]);
+
+  useEffect(() => {
+    if (content) {
+      const extractedHeadings = extractHeadings(content);
+      setHeadings(extractedHeadings);
+    }
+  }, [content]);
+
   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\$/, "")}
-                    language={match[1]}
-                  />
-                ) : (
-                  <code {...rest} className={className}>
-                    {children}
-                  </code>
-                );
-              },
-            }}
+    <>
+      <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\$/, "")}
+                      language={match[1]}
+                    />
+                  ) : (
+                    <code {...rest} className={className}>
+                      {children}
+                    </code>
+                  );
+                },
+                h1: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h1 id={id} {...props}>
+                      {children}
+                    </h1>
+                  );
+                },
+                h2: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h2 id={id} {...props}>
+                      {children}
+                    </h2>
+                  );
+                },
+                h3: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h3 id={id} {...props}>
+                      {children}
+                    </h3>
+                  );
+                },
+                h4: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h4 id={id} {...props}>
+                      {children}
+                    </h4>
+                  );
+                },
+                h5: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h5 id={id} {...props}>
+                      {children}
+                    </h5>
+                  );
+                },
+                h6: ({ children, ...props }) => {
+                  const id = generateId(String(children));
+                  return (
+                    <h6 id={id} {...props}>
+                      {children}
+                    </h6>
+                  );
+                },
+              }}
+            >
+              {content}
+            </Markdown>
+           )}
+          </StyledMarkdownContainer>
+        </Flex>
+      </DocsContainer>
+      <StyledIndexSidebar>
+        {headings?.length > 0 && (
+          <>
+            <StyledText>On this page</StyledText>
+            <Space $size={20} />
+          </>
+        )}
+        {headings.map((heading, index) => (
+          <li
+            key={index}
+            style={
+              {
+                // paddingLeft: \`\${(heading.level - 1) * 16}px\`,
+              }
+            }
           >
-            {content}
-          </Markdown>
-         )}
-        </StyledMarkdownContainer>
-      </Flex>
-    </DocsContainer>
+            <a href={\`#\${heading.id}\`}>{heading.text}</a>
+          </li>
+        ))}
+      </StyledIndexSidebar>
+    </>
   );
 }
 

package/dist/templates/components/layout/DocsComponents.d.ts

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { interactiveStyles } from \"./SharedStyled\";\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  position: sticky;\n  top: 90px;\n  min-width: 200px;\n  float: left;\n  z-index: 999;\n\n  ${mq(\"lg\")} {\n    z-index: 2;\n  }\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0;\n  width: 100%;\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${mq(\"lg\")} {\n    padding-left: 230px;\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      $mq: \"lg\" {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      padding: 0;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(100svh - 70px);\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n\n  ${mq(\"lg\")} {\n    width: 220px;\n    left: 20px;\n    background: transparent;\n    padding: 20px 20px 20px 0;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n  }\n\n  ${mq(\"xl\")} {\n    width: 220px;\n    left: calc(50% - 610px);\n  }\n\n  ${mq(\"xxl\")} {\n    width: 220px;\n    left: calc(50% - 690px);\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.strong.xs};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.info};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.colors.dark};\n\t\t\tborder-color: ${theme.colors.info};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 1000;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) =>\n    theme.isDark\n      ? rgba(theme.colors.grayLight, 0.7)\n      : rgba(theme.colors.light, 0.7)};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.primary};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 30px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed; `};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\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  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) =>\n      theme.isDark ? theme.colors.dark : theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledInlineButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  ${interactiveStyles};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n      background: ${({ theme }) => theme.colors.primary};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 12px;\n    height: 12px;\n    margin: auto;\n  }\n`;\n\nexport const StyledPlusButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  padding: 0;\n  width: 100%;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n  position: relative;\n  margin: 20px 0 0 0;\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 100%;\n    height: 1px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.grayLight};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    height: 18px;\n    border: solid 1px ${({ theme }) => theme.colors.grayLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    background: ${({ theme }) => theme.colors.light};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  @media (hover: hover) {\n    &:hover {\n      &::after {\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  &:focus {\n    &::after {\n      border-color: ${({ theme }) => theme.colors.primary};\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  &:active {\n    &::after {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n\n      &::after {\n        background: ${({ theme }) => theme.colors.primary};\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 14px;\n    height: 14px;\n    margin: auto;\n  }\n`;\n\nexport const StyledFullHeightInput = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex: 1;\n\n  & > span {\n    height: 100%;\n    width: 100%;\n  }\n\n  & textarea {\n    height: 100%;\n  }\n`;\n\nexport const StyledEditorWrapper = styled.div`\n  flex: 1;\n\n  &:empty {\n    display: none;\n  }\n`;\n\nfunction DocsWrapper({ children }: DocsProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  return <StyledDocsContainer>{children}</StyledDocsContainer>;\n}\n\nexport { DocsWrapper, DocsSidebar, DocsContainer };\n";
+export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { interactiveStyles } from \"./SharedStyled\";\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n\n  ${mq(\"lg\")} {\n    padding-left: 320px;\n    padding-right: 320px;\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      $mq: \"lg\" {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n  max-width: 640px;\n  margin: auto;\n\n  ${mq(\"lg\")} {\n    padding-bottom: 110px;\n  }\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(100svh - 70px);\n  width: 100%;\n  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n\n  ${mq(\"lg\")} {\n    max-height: 100svh;\n    width: 220px;\n    background: transparent;\n    padding: 90px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    top: 0;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100vh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 40px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n\n    & a {\n      ${({ theme }) => styledText(theme)};\n      color: ${({ theme }) => theme.colors.primary};\n      font-weight: 600;\n      text-decoration: none;\n      transition: all 0.3s ease;\n\n      &:hover {\n        color: ${({ theme }) => theme.colors.primaryDark};\n      }\n    }\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.strong.xs};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.info};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.colors.dark};\n\t\t\tborder-color: ${theme.colors.info};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 1000;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) =>\n    theme.isDark\n      ? rgba(theme.colors.grayLight, 0.7)\n      : rgba(theme.colors.light, 0.7)};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.primary};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 30px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed; `};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\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  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) =>\n      theme.isDark ? theme.colors.dark : theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledInlineButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  ${interactiveStyles};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n      background: ${({ theme }) => theme.colors.primary};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 12px;\n    height: 12px;\n    margin: auto;\n  }\n`;\n\nexport const StyledPlusButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  padding: 0;\n  width: 100%;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n  position: relative;\n  margin: 20px 0 0 0;\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 100%;\n    height: 1px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.grayLight};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    height: 18px;\n    border: solid 1px ${({ theme }) => theme.colors.grayLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    background: ${({ theme }) => theme.colors.light};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  @media (hover: hover) {\n    &:hover {\n      &::after {\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  &:focus {\n    &::after {\n      border-color: ${({ theme }) => theme.colors.primary};\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  &:active {\n    &::after {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n\n      &::after {\n        background: ${({ theme }) => theme.colors.primary};\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 14px;\n    height: 14px;\n    margin: auto;\n  }\n`;\n\nexport const StyledFullHeightInput = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex: 1;\n\n  & > span {\n    height: 100%;\n    width: 100%;\n  }\n\n  & textarea {\n    height: 100%;\n  }\n`;\n\nexport const StyledEditorWrapper = styled.div`\n  flex: 1;\n\n  &:empty {\n    display: none;\n  }\n`;\n\nfunction DocsWrapper({ children }: DocsProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  return <StyledDocsContainer>{children}</StyledDocsContainer>;\n}\n\nexport { DocsWrapper, DocsSidebar, DocsContainer };\n";

package/dist/templates/components/layout/DocsComponents.js

@@ -20,28 +20,26 @@ const StyledDocsWrapper = styled.div<{ theme: Theme }>\`
 \`;
 
 const StyledDocsSidebar = styled.div<{ theme: Theme }>\`
-  position: sticky;
-  top: 90px;
-  min-width: 200px;
-  float: left;
-  z-index: 999;
-
-  \${mq("lg")} {
-    z-index: 2;
-  }
+  clear: both;
 \`;
 
 const StyledDocsContainer = styled.div<{ theme: Theme }>\`
   position: relative;
   padding: 0;
   width: 100%;
+  \${({ theme }) => styledText(theme)};
 
-  & pre {
-    max-width: 100%;
+  \${mq("lg")} {
+    padding-left: 320px;
+    padding-right: 320px;
   }
 
-  \${mq("lg")} {
-    padding-left: 230px;
+  & p {
+    color: \${({ theme }) => theme.colors.grayDark};
+  }
+
+  & pre {
+    max-width: 100%;
   }
 
   & ul {
@@ -88,7 +86,6 @@ const StyledDocsContainer = styled.div<{ theme: Theme }>\`
       position: relative;
       padding: 0;
       counter-increment: item;
-      padding: 0;
       margin: 0;
       \${({ theme }) => styledText(theme)};
 
@@ -110,6 +107,12 @@ export const StyledMarkdownContainer = styled.div\`
   gap: 20px;
   flex-wrap: wrap;
   flex: 1;
+  max-width: 640px;
+  margin: auto;
+
+  \${mq("lg")} {
+    padding-bottom: 110px;
+  }
 \`;
 
 interface Props {
@@ -122,7 +125,6 @@ export const StyledSidebar = styled.nav<Props>\`
   overflow-y: auto;
   max-height: calc(100svh - 70px);
   width: 100%;
-  background: \${({ theme }) => theme.colors.light};
   z-index: 99;
   top: 70px;
   height: 100%;
@@ -132,25 +134,19 @@ export const StyledSidebar = styled.nav<Props>\`
   transition: all 0.3s ease;
   transform: translateY(30px);
   left: 0;
+  background: \${({ theme }) => theme.colors.light};
 
   \${mq("lg")} {
+    max-height: 100svh;
     width: 220px;
-    left: 20px;
     background: transparent;
-    padding: 20px 20px 20px 0;
+    padding: 90px 40px 40px;
     opacity: 1;
     pointer-events: all;
     transform: translateY(0);
-  }
-
-  \${mq("xl")} {
-    width: 220px;
-    left: calc(50% - 610px);
-  }
-
-  \${mq("xxl")} {
-    width: 220px;
-    left: calc(50% - 690px);
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
+    top: 0;
+    width: 320px;
   }
 
   \${({ $isActive }) =>
@@ -162,6 +158,43 @@ export const StyledSidebar = styled.nav<Props>\`
     \`}
 \`;
 
+export const StyledIndexSidebar = styled.ul<{ theme: Theme }>\`
+  display: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 320px;
+  height: 100vh;
+  overflow-y: auto;
+  z-index: 1;
+  padding: 40px;
+  background: \${({ theme }) => theme.colors.light};
+  border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
+
+  \${mq("lg")} {
+    display: block;
+  }
+
+  & li {
+    padding: 5px 0;
+
+    & a {
+      \${({ theme }) => styledText(theme)};
+      color: \${({ theme }) => theme.colors.primary};
+      font-weight: 600;
+      text-decoration: none;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: \${({ theme }) => theme.colors.primaryDark};
+      }
+    }
+  }
+\`;
+
 export const StyledSidebarList = styled.ul\`
   list-style: none;
   margin: 0;

package/dist/templates/components/layout/Header.d.ts

@@ -1 +1 @@
-export declare const headerTemplate = "\"use client\";\nimport {\n  Flex,\n  MaxWidth,\n  resetButton,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport React, { \n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  Suspense\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { ToggleTheme, ToggleThemeLoading } from \"@/components/layout/ThemeToggle\";\nimport {\n  StyledTinyDesktopOnly,\n  StyledTinyMobileOnly,\n} from \"@/components/layout/SharedStyled\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\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\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  margin: auto 0;\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            <StyledWrapper>\n              <span ref={wrapperRef}>\n                <Flex $gap={20} $wrap=\"wrap\">\n                  <StyledMenu>\n                  <StyledLink href=\"https://doccupine.com\" target=\"_blank\">\n                    Doccupine\n                  </StyledLink>\n                  </StyledMenu>\n                  <Suspense fallback={<ToggleThemeLoading />}>\n                    <ToggleTheme />\n                  </Suspense>\n                  <StyledMobileBurger\n                    $isActive={isMobileMenuActive}\n                    onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}\n                    aria-label=\"Burger Menu\"\n                  />\n                </Flex>\n              </span>\n            </StyledWrapper>\n          </Flex>\n        </MaxWidth>\n      </StyledHeader>\n      <StyledMobileMenu $isActive={isMobileMenuActive}>\n        <li onClick={() => setIsMobileMenuActive(false)}>\n          <a href=\"https://doccupine.com\" target=\"_blank\">\n            Doccupine\n          </a>\n        </li>\n      </StyledMobileMenu>\n    </>\n  );\n}\n\nexport { Header };\n";
+export declare const headerTemplate = "\"use client\";\nimport { Flex, MaxWidth, resetButton } from \"cherry-styled-components/src/lib\";\nimport React, { useCallback, useRef, useState, Suspense } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { \n  ToggleTheme,\n  ToggleThemeLoading\n} from \"@/components/layout/ThemeToggle\";\nimport {\n  StyledTinyDesktopOnly,\n  StyledTinyMobileOnly,\n} from \"@/components/layout/SharedStyled\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\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  ${mq(\"lg\")} {\n    width: 320px;\n  }\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\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            <Suspense fallback={<ToggleThemeLoading />}>\n              <ToggleTheme />\n            </Suspense>\n          </Flex>\n        </MaxWidth>\n      </StyledHeader>\n    </>\n  );\n}\n\nexport { Header };\n";

package/dist/templates/components/layout/Header.js

@@ -1,22 +1,14 @@
 export const headerTemplate = `"use client";
-import {
-  Flex,
-  MaxWidth,
-  resetButton,
-  styledText,
-} from "cherry-styled-components/src/lib";
-import React, { 
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-  Suspense
-} from "react";
+import { Flex, MaxWidth, resetButton } from "cherry-styled-components/src/lib";
+import React, { useCallback, useRef, useState, Suspense } from "react";
 import styled, { css } from "styled-components";
 import Link from "next/link";
 import { rgba } from "polished";
 import { mq, Theme } from "@/app/theme";
-import { ToggleTheme, ToggleThemeLoading } from "@/components/layout/ThemeToggle";
+import { 
+  ToggleTheme,
+  ToggleThemeLoading
+} from "@/components/layout/ThemeToggle";
 import {
   StyledTinyDesktopOnly,
   StyledTinyMobileOnly,
@@ -31,6 +23,10 @@ const StyledHeader = styled.header<{ theme: Theme }>\`
   margin: 0;
   z-index: 1000;
 
+  \${mq("lg")} {
+    width: 320px;
+  }
+
   &::before,
   &::after {
     display: block;
@@ -59,158 +55,6 @@ const StyledHeader = styled.header<{ theme: Theme }>\`
   }
 \`;
 
-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};
-\`;
-
-const StyledWrapper = styled.div<{ theme: Theme }>\`
-  margin: auto 0;
-\`;
-
 function Header() {
   const [isOptionActive, setIsOptionActive] = useState(false);
   const [isLangActive, setIsLangActive] = useState(false);
@@ -243,35 +87,12 @@ function Header() {
                 <Logo />
               </StyledTinyMobileOnly>
             </Link>
-            <StyledWrapper>
-              <span ref={wrapperRef}>
-                <Flex $gap={20} $wrap="wrap">
-                  <StyledMenu>
-                  <StyledLink href="https://doccupine.com" target="_blank">
-                    Doccupine
-                  </StyledLink>
-                  </StyledMenu>
-                  <Suspense fallback={<ToggleThemeLoading />}>
-                    <ToggleTheme />
-                  </Suspense>
-                  <StyledMobileBurger
-                    $isActive={isMobileMenuActive}
-                    onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}
-                    aria-label="Burger Menu"
-                  />
-                </Flex>
-              </span>
-            </StyledWrapper>
+            <Suspense fallback={<ToggleThemeLoading />}>
+              <ToggleTheme />
+            </Suspense>
           </Flex>
         </MaxWidth>
       </StyledHeader>
-      <StyledMobileMenu $isActive={isMobileMenuActive}>
-        <li onClick={() => setIsMobileMenuActive(false)}>
-          <a href="https://doccupine.com" target="_blank">
-            Doccupine
-          </a>
-        </li>
-      </StyledMobileMenu>
     </>
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "doccupine",
-  "version": "0.0.6",
-  "description": "CLI tool to watch MDX files and generate Next.js beautiful documentation pages automatically",
+  "version": "0.0.8",
+  "description": "Generate beautiful, ready-to-use documentation with just one CLI command – fast, simple, and open source.",
   "main": "dist/index.js",
   "bin": {
     "doccupine": "dist/index.js"
@@ -16,18 +16,22 @@
   "keywords": [
     "doccupine",
     "documentation",
+    "docs",
     "mdx",
     "nextjs",
     "cli",
+    "generator",
     "file-watcher",
     "static-site-generator"
   ],
+  "homepage": "https://doccupine.com",
+  "repository": "https://github.com/thethemefoundry/doccupine-cli",
   "author": "Luan Gjokaj",
   "license": "MIT",
   "dependencies": {
-    "chalk": "^5.6.0",
+    "chalk": "^5.6.2",
     "chokidar": "^4.0.3",
-    "commander": "^14.0.0",
+    "commander": "^14.0.1",
     "fs-extra": "^11.3.1",
     "gray-matter": "^4.0.3",
     "prompts": "^2.4.2"
@@ -35,7 +39,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.4.0",
     "@types/prompts": "^2.4.9",
     "typescript": "^5.9.2"
   },