doccupine 0.0.98 → 0.0.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +0 -0
- package/dist/templates/components/MDXComponents.d.ts +1 -1
- package/dist/templates/components/MDXComponents.js +3 -1
- package/dist/templates/components/layout/Code.d.ts +1 -1
- package/dist/templates/components/layout/Code.js +228 -3
- package/dist/templates/mdx/code.mdx.d.ts +1 -1
- package/dist/templates/mdx/code.mdx.js +43 -1
- package/dist/templates/package.js +2 -2
- package/package.json +1 -1
- package/dist/index.test.d.ts +0 -1
- package/dist/index.test.js +0 -48
- package/dist/metadata.d.ts +0 -11
- package/dist/metadata.js +0 -52
- package/dist/templates/accordion.mdx.d.ts +0 -1
- package/dist/templates/accordion.mdx.js +0 -41
- package/dist/templates/api/theme/routes.d.ts +0 -1
- package/dist/templates/api/theme/routes.js +0 -28
- package/dist/templates/app/api/theme/routes.d.ts +0 -1
- package/dist/templates/app/api/theme/routes.js +0 -29
- package/dist/templates/app/error.d.ts +0 -1
- package/dist/templates/app/error.js +0 -45
- package/dist/templates/app/layout.d.ts +0 -34
- package/dist/templates/app/layout.js +0 -184
- package/dist/templates/callouts.mdx.d.ts +0 -1
- package/dist/templates/callouts.mdx.js +0 -57
- package/dist/templates/cards.mdx.d.ts +0 -1
- package/dist/templates/cards.mdx.js +0 -25
- package/dist/templates/click-outside.d.ts +0 -1
- package/dist/templates/click-outside.js +0 -28
- package/dist/templates/code.d.ts +0 -1
- package/dist/templates/code.js +0 -202
- package/dist/templates/code.mdx.d.ts +0 -1
- package/dist/templates/code.mdx.js +0 -46
- package/dist/templates/commands.mdx.d.ts +0 -1
- package/dist/templates/commands.mdx.js +0 -48
- package/dist/templates/components/ClickOutside.d.ts +0 -1
- package/dist/templates/components/ClickOutside.js +0 -29
- package/dist/templates/components/layout/ClientThemeProvider.d.ts +0 -1
- package/dist/templates/components/layout/ClientThemeProvider.js +0 -85
- package/dist/templates/components/layout/CopyButton.d.ts +0 -1
- package/dist/templates/components/layout/CopyButton.js +0 -85
- package/dist/templates/components/layout/RenderMarkdown.d.ts +0 -1
- package/dist/templates/components/layout/RenderMarkdown.js +0 -61
- package/dist/templates/components/layout/Stepts.d.ts +0 -1
- package/dist/templates/components/layout/Stepts.js +0 -114
- package/dist/templates/components/layout/ThemeToggle.d.ts +0 -1
- package/dist/templates/components/layout/ThemeToggle.js +0 -107
- package/dist/templates/constants.d.ts +0 -5
- package/dist/templates/constants.js +0 -5
- package/dist/templates/docs-components.d.ts +0 -1
- package/dist/templates/docs-components.js +0 -441
- package/dist/templates/docs.d.ts +0 -1
- package/dist/templates/docs.js +0 -48
- package/dist/templates/fields.mdx.d.ts +0 -1
- package/dist/templates/fields.mdx.js +0 -42
- package/dist/templates/footer.d.ts +0 -1
- package/dist/templates/footer.js +0 -9
- package/dist/templates/header.d.ts +0 -1
- package/dist/templates/header.js +0 -275
- package/dist/templates/home.d.ts +0 -1
- package/dist/templates/home.js +0 -74
- package/dist/templates/home.mdx.d.ts +0 -1
- package/dist/templates/home.mdx.js +0 -44
- package/dist/templates/homemdx.d.ts +0 -1
- package/dist/templates/homemdx.js +0 -59
- package/dist/templates/icon.d.ts +0 -1
- package/dist/templates/icon.js +0 -20
- package/dist/templates/icons.mdx.d.ts +0 -1
- package/dist/templates/icons.mdx.js +0 -44
- package/dist/templates/image-embeds.mdx.d.ts +0 -1
- package/dist/templates/image-embeds.mdx.js +0 -103
- package/dist/templates/layout.d.ts +0 -1
- package/dist/templates/layout.js +0 -69
- package/dist/templates/list-table.mdx.d.ts +0 -1
- package/dist/templates/list-table.mdx.js +0 -85
- package/dist/templates/mdx/config.mdx.d.ts +0 -1
- package/dist/templates/mdx/config.mdx.js +0 -47
- package/dist/templates/mdx/deployment.mdx.d.ts +0 -1
- package/dist/templates/mdx/deployment.mdx.js +0 -61
- package/dist/templates/mdx/image-embeds.mdx.d.ts +0 -1
- package/dist/templates/mdx/image-embeds.mdx.js +0 -95
- package/dist/templates/mdx/links.mdx.d.ts +0 -1
- package/dist/templates/mdx/links.mdx.js +0 -45
- package/dist/templates/mdx/list-and-tables.mdx.d.ts +0 -1
- package/dist/templates/mdx/list-and-tables.mdx.js +0 -78
- package/dist/templates/mdx/list-table.mdx.d.ts +0 -1
- package/dist/templates/mdx/list-table.mdx.js +0 -78
- package/dist/templates/mdx/platform/deployments.mdx.d.ts +0 -1
- package/dist/templates/mdx/platform/deployments.mdx.js +0 -36
- package/dist/templates/mdx/platform/sections-settings.mdx.d.ts +0 -1
- package/dist/templates/mdx/platform/sections-settings.mdx.js +0 -46
- package/dist/templates/mdx/stepts.mdx.d.ts +0 -1
- package/dist/templates/mdx/stepts.mdx.js +0 -60
- package/dist/templates/mdx/text.mdx.d.ts +0 -1
- package/dist/templates/mdx/text.mdx.js +0 -139
- package/dist/templates/middleware.d.ts +0 -1
- package/dist/templates/middleware.js +0 -28
- package/dist/templates/not-found.d.ts +0 -1
- package/dist/templates/not-found.js +0 -22
- package/dist/templates/pictograms.d.ts +0 -1
- package/dist/templates/pictograms.js +0 -67
- package/dist/templates/shared-styles.d.ts +0 -1
- package/dist/templates/shared-styles.js +0 -792
- package/dist/templates/structures.d.ts +0 -2
- package/dist/templates/structures.js +0 -208
- package/dist/templates/tabs.mdx.d.ts +0 -1
- package/dist/templates/tabs.mdx.js +0 -59
- package/dist/templates/text.mdx.d.ts +0 -1
- package/dist/templates/text.mdx.js +0 -142
- package/dist/templates/theme-toggle.d.ts +0 -1
- package/dist/templates/theme-toggle.js +0 -111
- package/dist/templates/theme.d.ts +0 -1
- package/dist/templates/theme.js +0 -307
- package/dist/templates/typography.d.ts +0 -1
- package/dist/templates/typography.js +0 -52
- package/dist/templates/update.mdx.d.ts +0 -1
- package/dist/templates/update.mdx.js +0 -58
package/dist/templates/docs.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const docsTemplate = "\n\"use client\";\nimport { useState } from \"react\";\nimport Link from 'next/link';\nimport { usePathname } from \"next/navigation\";\nimport { Container, Flex, Space } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/app/components/layout/Code\";\nimport { \n DocsWrapper,\n DocsSidebar,\n DocsContainer,\n StyledMarkdownContainer,\n StyledSidebar,\n StyledSidebarList,\n StyledSidebarListItem,\n StyledStrong,\n StyledSidebarListItemLink,\n StyleMobileBar,\n StyledMobileBurger\n} from \"@/app/components/layout/DocsComponents\";\n \nfunction Docs({content, result}) {\n const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n const pathname = usePathname();\n console.log(result, \"-\".repeat(100));\n return (\n <Container $padding={20}>\n <DocsWrapper>\n <DocsSidebar>\n <StyleMobileBar\n onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n $isActive={isMobileMenuOpen}\n >\n <StyledMobileBurger $isActive={isMobileMenuOpen} />\n </StyleMobileBar>\n\n <StyledSidebar $isActive={isMobileMenuOpen}>\n <StyledSidebarList>\n {result && result.map((item: any, index: number) => {\n return (\n <div key={index}>\n <StyledSidebarListItem>\n <StyledStrong>{item.label}</StyledStrong>{\" \"}\n </StyledSidebarListItem>\n <Space $size={20} />\n {item.links &&\n item.links.map((link: any, indexChild: number) => {\n return (\n <StyledSidebarListItem key={indexChild}>\n <StyledSidebarListItemLink\n href={`/${link.slug}`}\n $isActive={\n pathname ===\n `/${link.slug}`\n }\n onClick={() => setIsMobileMenuOpen(false)}\n >\n {link.title}\n </StyledSidebarListItemLink>\n </StyledSidebarListItem>\n );\n })}\n <Space $size={20} />\n </div>\n );\n })}\n </StyledSidebarList>\n </StyledSidebar>\n </DocsSidebar>\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 />\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 </DocsWrapper>\n </Container>\n );\n}\n\nexport { Docs };\n";
|
package/dist/templates/docs.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
export const docsTemplate = `"use client";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Flex } from "cherry-styled-components/src/lib";
|
|
4
|
-
import Markdown from "react-markdown";
|
|
5
|
-
import remarkGfm from "remark-gfm";
|
|
6
|
-
import { Code } from "@/app/components/layout/Code";
|
|
7
|
-
import {
|
|
8
|
-
DocsContainer,
|
|
9
|
-
StyledMarkdownContainer,
|
|
10
|
-
} from "@/app/components/layout/DocsComponents";
|
|
11
|
-
|
|
12
|
-
function Docs({content, result}) {
|
|
13
|
-
return (
|
|
14
|
-
<DocsContainer>
|
|
15
|
-
<Flex $gap={20}>
|
|
16
|
-
<StyledMarkdownContainer>
|
|
17
|
-
{content && (
|
|
18
|
-
<Markdown
|
|
19
|
-
remarkPlugins={[remarkGfm]}
|
|
20
|
-
components={{
|
|
21
|
-
code(props) {
|
|
22
|
-
const { children, className, node, ...rest } = props;
|
|
23
|
-
const match = /language-(\\w+)/.exec(className || "");
|
|
24
|
-
return match ? (
|
|
25
|
-
<Code
|
|
26
|
-
{...rest}
|
|
27
|
-
className={className}
|
|
28
|
-
code={String(children).replace(/\\n\$/, "")}
|
|
29
|
-
/>
|
|
30
|
-
) : (
|
|
31
|
-
<code {...rest} className={className}>
|
|
32
|
-
{children}
|
|
33
|
-
</code>
|
|
34
|
-
);
|
|
35
|
-
},
|
|
36
|
-
}}
|
|
37
|
-
>
|
|
38
|
-
{content}
|
|
39
|
-
</Markdown>
|
|
40
|
-
)}
|
|
41
|
-
</StyledMarkdownContainer>
|
|
42
|
-
</Flex>
|
|
43
|
-
</DocsContainer>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export { Docs };
|
|
48
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 0\norder: 9\n---\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n Example definition of a parameter field.\n</Field>\n\n\n```text\n<Field value=\"param\" type=\"string\" required>\n Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n Whether the field is required.\n</Field>";
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export const fieldsMdxTemplate = `---
|
|
2
|
-
title: "Fields"
|
|
3
|
-
description: "This is my first Doccupine project"
|
|
4
|
-
date: "2025-01-15"
|
|
5
|
-
category: "Components"
|
|
6
|
-
categoryOrder: 0
|
|
7
|
-
order: 9
|
|
8
|
-
---
|
|
9
|
-
# Fields
|
|
10
|
-
|
|
11
|
-
Configure parameters for your API or SDK documentation.
|
|
12
|
-
|
|
13
|
-
Fields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: \`Field\` for parameters and for responses.
|
|
14
|
-
|
|
15
|
-
## Fields Usage
|
|
16
|
-
|
|
17
|
-
Use the \`<Field>\` component to declare API or SDK parameters, or define the return values of an API.
|
|
18
|
-
|
|
19
|
-
<Field value="param" type="string" required>
|
|
20
|
-
Example definition of a parameter field.
|
|
21
|
-
</Field>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
\`\`\`text
|
|
25
|
-
<Field value="param" type="string" required>
|
|
26
|
-
Example definition of a parameter field.
|
|
27
|
-
</Field>
|
|
28
|
-
\`\`\`
|
|
29
|
-
|
|
30
|
-
## Properties
|
|
31
|
-
|
|
32
|
-
<Field value="value" type="string" required>
|
|
33
|
-
The name of the field.
|
|
34
|
-
</Field>
|
|
35
|
-
|
|
36
|
-
<Field value="type" type="string" required>
|
|
37
|
-
The type of the field.
|
|
38
|
-
</Field>
|
|
39
|
-
|
|
40
|
-
<Field value="required" type="boolean">
|
|
41
|
-
Whether the field is required.
|
|
42
|
-
</Field>`;
|
|
@@ -1 +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
DELETED
|
@@ -1 +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
DELETED
|
@@ -1,275 +0,0 @@
|
|
|
1
|
-
export const headerTemplate = `
|
|
2
|
-
"use client";
|
|
3
|
-
import Image from "next/image";
|
|
4
|
-
import {
|
|
5
|
-
Flex,
|
|
6
|
-
MaxWidth,
|
|
7
|
-
resetButton,
|
|
8
|
-
styledText,
|
|
9
|
-
} from "cherry-styled-components/src/lib";
|
|
10
|
-
import React, { useCallback, useContext, useRef, useState } from "react";
|
|
11
|
-
import styled, { css } from "styled-components";
|
|
12
|
-
import Link from "next/link";
|
|
13
|
-
import { mq, Theme } from "@/app/theme";
|
|
14
|
-
import { ToggleTheme } from "@/app/components/layout/ThemeToggle";
|
|
15
|
-
import {
|
|
16
|
-
StyledDataArrowButton,
|
|
17
|
-
StyledDataDropdown,
|
|
18
|
-
StyledDataDropdownItem,
|
|
19
|
-
StyledDataDropdownWrapper,
|
|
20
|
-
StyledDataUserAvatar,
|
|
21
|
-
StyledDesktopOnly,
|
|
22
|
-
StyledMobileOnly,
|
|
23
|
-
StyledTinyDesktopOnly,
|
|
24
|
-
StyledTinyMobileOnly,
|
|
25
|
-
} from "@/app/components/layout/SharedStyled";
|
|
26
|
-
import { Icon } from "@/app/components/layout/Icon";
|
|
27
|
-
import { useOnClickOutside } from "@/app/components/ClickOutside";
|
|
28
|
-
import { LinkButton } from "@/app/components/layout/LinkButton";
|
|
29
|
-
import { Logo } from "@/app/components/layout/Pictograms";
|
|
30
|
-
import { rgba } from "polished";
|
|
31
|
-
|
|
32
|
-
const StyledHeader = styled.header<{ theme: Theme }>\`
|
|
33
|
-
position: sticky;
|
|
34
|
-
top: 0;
|
|
35
|
-
padding: 20px;
|
|
36
|
-
margin: 0;
|
|
37
|
-
z-index: 1000;
|
|
38
|
-
|
|
39
|
-
&::before,
|
|
40
|
-
&::after {
|
|
41
|
-
display: block;
|
|
42
|
-
content: "";
|
|
43
|
-
position: absolute;
|
|
44
|
-
top: 0;
|
|
45
|
-
left: 0;
|
|
46
|
-
width: 100%;
|
|
47
|
-
height: 100%;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
background: \${({ theme }) => theme.colors.light};
|
|
50
|
-
z-index: -2;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&::after {
|
|
54
|
-
background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
|
|
55
|
-
z-index: -1;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
& .logo {
|
|
59
|
-
display: flex;
|
|
60
|
-
|
|
61
|
-
& svg {
|
|
62
|
-
margin: auto;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
\`;
|
|
66
|
-
|
|
67
|
-
const StyledLink = styled(Link)<{ theme: Theme }>\`
|
|
68
|
-
text-decoration: none;
|
|
69
|
-
margin: auto 0;
|
|
70
|
-
color: \${({ theme }) => theme.colors.primary};
|
|
71
|
-
font-weight: 500;
|
|
72
|
-
|
|
73
|
-
@media (hover: hover) {
|
|
74
|
-
&:hover {
|
|
75
|
-
color: \${({ theme }) => theme.colors.primaryDark};
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
\`;
|
|
79
|
-
|
|
80
|
-
export const StyledMobileBurger = styled.button<{
|
|
81
|
-
theme: Theme;
|
|
82
|
-
$isActive: boolean;
|
|
83
|
-
}>\`
|
|
84
|
-
\${resetButton};
|
|
85
|
-
display: block;
|
|
86
|
-
margin: auto 0;
|
|
87
|
-
width: 18px;
|
|
88
|
-
height: 18px;
|
|
89
|
-
position: relative;
|
|
90
|
-
overflow: hidden;
|
|
91
|
-
background: transparent;
|
|
92
|
-
position: relative;
|
|
93
|
-
|
|
94
|
-
\${mq("lg")} {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&::before,
|
|
99
|
-
&::after {
|
|
100
|
-
content: "";
|
|
101
|
-
display: block;
|
|
102
|
-
position: absolute;
|
|
103
|
-
width: 18px;
|
|
104
|
-
height: 2px;
|
|
105
|
-
border-radius: 3px;
|
|
106
|
-
background: \${({ theme }) => theme.colors.primary};
|
|
107
|
-
transition: all 0.3s ease;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&::before {
|
|
111
|
-
top: 4px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
&::after {
|
|
115
|
-
bottom: 4px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
\${({ $isActive }) =>
|
|
119
|
-
$isActive &&
|
|
120
|
-
css\`
|
|
121
|
-
&::before {
|
|
122
|
-
transform: translateY(4px) rotate(45deg);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
&::after {
|
|
126
|
-
transform: translateY(-4px) rotate(-45deg);
|
|
127
|
-
}
|
|
128
|
-
\`};
|
|
129
|
-
\`;
|
|
130
|
-
|
|
131
|
-
const StyledMobileMenu = styled.ul<{ theme: Theme; $isActive: boolean }>\`
|
|
132
|
-
list-style: none;
|
|
133
|
-
padding: 70px 0 0 0;
|
|
134
|
-
margin: 0;
|
|
135
|
-
position: fixed;
|
|
136
|
-
top: 0;
|
|
137
|
-
left: 0;
|
|
138
|
-
background: \${({ theme }) => theme.colors.light};
|
|
139
|
-
pointer-events: none;
|
|
140
|
-
opacity: 0;
|
|
141
|
-
width: 100%;
|
|
142
|
-
height: 100dvh;
|
|
143
|
-
transition: all 0.3s ease;
|
|
144
|
-
z-index: 800;
|
|
145
|
-
transform: translateY(40px) scale(1.2);
|
|
146
|
-
display: block;
|
|
147
|
-
|
|
148
|
-
\${({ $isActive }) =>
|
|
149
|
-
$isActive &&
|
|
150
|
-
css\`
|
|
151
|
-
pointer-events: all;
|
|
152
|
-
opacity: 1;
|
|
153
|
-
transform: translateY(0) scale(1);
|
|
154
|
-
\`};
|
|
155
|
-
|
|
156
|
-
& li {
|
|
157
|
-
display: block;
|
|
158
|
-
width: 100%;
|
|
159
|
-
padding: 0;
|
|
160
|
-
margin: 0;
|
|
161
|
-
border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
|
|
162
|
-
|
|
163
|
-
&.languages {
|
|
164
|
-
display: flex;
|
|
165
|
-
justify-content: center;
|
|
166
|
-
gap: 10px;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
& a,
|
|
170
|
-
& button {
|
|
171
|
-
\${({ theme }) => styledText(theme)};
|
|
172
|
-
font-family: \${({ theme }) => theme.fonts.text};
|
|
173
|
-
font-weight: 500;
|
|
174
|
-
appearance: none;
|
|
175
|
-
background: transparent;
|
|
176
|
-
border: none;
|
|
177
|
-
color: \${({ theme }) => theme.colors.dark};
|
|
178
|
-
display: flex;
|
|
179
|
-
margin: 0;
|
|
180
|
-
padding: 20px;
|
|
181
|
-
font-weight: 500;
|
|
182
|
-
text-decoration: none;
|
|
183
|
-
cursor: pointer;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
& button {
|
|
187
|
-
flex: 1;
|
|
188
|
-
border-right: solid 1px \${({ theme }) => theme.colors.grayLight};
|
|
189
|
-
text-align: center;
|
|
190
|
-
justify-content: center;
|
|
191
|
-
|
|
192
|
-
&:last-of-type {
|
|
193
|
-
border-right: none;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
\`;
|
|
198
|
-
|
|
199
|
-
const StyledMenu = styled.div<{ theme: Theme }>\`
|
|
200
|
-
display: none;
|
|
201
|
-
|
|
202
|
-
\${mq("lg")} {
|
|
203
|
-
display: flex;
|
|
204
|
-
gap: 20px;
|
|
205
|
-
}
|
|
206
|
-
\`;
|
|
207
|
-
|
|
208
|
-
const StyledDivider = styled.div<{ theme: Theme }>\`
|
|
209
|
-
width: 1px;
|
|
210
|
-
height: calc(100% - 10px);
|
|
211
|
-
margin: auto 0;
|
|
212
|
-
background: \${({ theme }) => theme.colors.grayLight};
|
|
213
|
-
\`;
|
|
214
|
-
|
|
215
|
-
function Header() {
|
|
216
|
-
const [isOptionActive, setIsOptionActive] = useState(false);
|
|
217
|
-
const [isLangActive, setIsLangActive] = useState(false);
|
|
218
|
-
const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);
|
|
219
|
-
|
|
220
|
-
const wrapperRef = useRef<HTMLSpanElement>(null);
|
|
221
|
-
const elmRef = useRef<HTMLDivElement>(null);
|
|
222
|
-
const langRef = useRef<HTMLSpanElement>(null);
|
|
223
|
-
const closeMenu = useCallback(() => {
|
|
224
|
-
setIsOptionActive(false);
|
|
225
|
-
setIsLangActive(false);
|
|
226
|
-
}, []);
|
|
227
|
-
|
|
228
|
-
useOnClickOutside(
|
|
229
|
-
[elmRef, wrapperRef],
|
|
230
|
-
isOptionActive ? closeMenu : () => {},
|
|
231
|
-
);
|
|
232
|
-
useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});
|
|
233
|
-
|
|
234
|
-
return (
|
|
235
|
-
<>
|
|
236
|
-
<StyledHeader>
|
|
237
|
-
<MaxWidth $size={1000}>
|
|
238
|
-
<Flex $justifyContent="space-between" $wrap="nowrap">
|
|
239
|
-
<Link href="/" className="logo" aria-label="Logo">
|
|
240
|
-
<StyledTinyDesktopOnly>
|
|
241
|
-
<Logo />
|
|
242
|
-
</StyledTinyDesktopOnly>
|
|
243
|
-
<StyledTinyMobileOnly>
|
|
244
|
-
<Logo />
|
|
245
|
-
</StyledTinyMobileOnly>
|
|
246
|
-
</Link>
|
|
247
|
-
<span ref={wrapperRef}>
|
|
248
|
-
<Flex $gap={20} $wrap="wrap">
|
|
249
|
-
<StyledMenu>
|
|
250
|
-
<StyledLink href="/">
|
|
251
|
-
Doccupine
|
|
252
|
-
</StyledLink>
|
|
253
|
-
</StyledMenu>
|
|
254
|
-
<ToggleTheme />
|
|
255
|
-
<StyledMobileBurger
|
|
256
|
-
$isActive={isMobileMenuActive}
|
|
257
|
-
onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}
|
|
258
|
-
aria-label="Burger Menu"
|
|
259
|
-
/>
|
|
260
|
-
</Flex>
|
|
261
|
-
</span>
|
|
262
|
-
</Flex>
|
|
263
|
-
</MaxWidth>
|
|
264
|
-
</StyledHeader>
|
|
265
|
-
<StyledMobileMenu $isActive={isMobileMenuActive}>
|
|
266
|
-
<li onClick={() => setIsMobileMenuActive(false)}>
|
|
267
|
-
<Link href="/">Doccupine</Link>
|
|
268
|
-
</li>
|
|
269
|
-
</StyledMobileMenu>
|
|
270
|
-
</>
|
|
271
|
-
);
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
export { Header };
|
|
275
|
-
`;
|
package/dist/templates/home.d.ts
DELETED
|
@@ -1 +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- **Run Doccupine CLI:**\n\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\nnpx doccupine\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\nnpx doccupine 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.\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
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
export const homeTemplate = `import { Metadata } from "next";
|
|
2
|
-
import { Docs } from "@/components/Docs";
|
|
3
|
-
|
|
4
|
-
const content = \`# Welcome to Doccupine
|
|
5
|
-
|
|
6
|
-
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.
|
|
7
|
-
|
|
8
|
-
## Open Source and Extensible
|
|
9
|
-
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.
|
|
10
|
-
|
|
11
|
-
## Getting Started
|
|
12
|
-
|
|
13
|
-
To get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:
|
|
14
|
-
|
|
15
|
-
- **Run Doccupine CLI:**
|
|
16
|
-
|
|
17
|
-
Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
|
|
18
|
-
|
|
19
|
-
~~~bash
|
|
20
|
-
npx doccupine
|
|
21
|
-
~~~
|
|
22
|
-
|
|
23
|
-
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.
|
|
24
|
-
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.
|
|
25
|
-
|
|
26
|
-
This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
|
|
27
|
-
|
|
28
|
-
- **Generate the website:**
|
|
29
|
-
|
|
30
|
-
~~~bash
|
|
31
|
-
npx doccupine build
|
|
32
|
-
~~~
|
|
33
|
-
|
|
34
|
-
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.
|
|
35
|
-
|
|
36
|
-
## Features
|
|
37
|
-
|
|
38
|
-
- 📝 Markdown-based content
|
|
39
|
-
- 📦 Built-in file structure
|
|
40
|
-
- ⚡ Live Preview & Auto-Update
|
|
41
|
-
- 🚀 Easy Deployment
|
|
42
|
-
|
|
43
|
-
## Start documenting
|
|
44
|
-
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:
|
|
45
|
-
|
|
46
|
-
~~~text
|
|
47
|
-
---
|
|
48
|
-
title: "Home"
|
|
49
|
-
description: "This is my first Doccupine project"
|
|
50
|
-
date: "2025-01-15"
|
|
51
|
-
category: "General"
|
|
52
|
-
categoryOrder: 0
|
|
53
|
-
order: 0
|
|
54
|
-
---
|
|
55
|
-
|
|
56
|
-
# Home
|
|
57
|
-
|
|
58
|
-
This is some **markdown** content with MDX support.
|
|
59
|
-
~~~
|
|
60
|
-
|
|
61
|
-
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.
|
|
62
|
-
\`;
|
|
63
|
-
|
|
64
|
-
export const metadata: Metadata = {
|
|
65
|
-
title: 'Welcome to Doccupine',
|
|
66
|
-
description: 'Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.',
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export default function Page() {
|
|
70
|
-
return (
|
|
71
|
-
<Docs content={content} />
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const homeMdxTemplate = "---\ntitle: \"Getting Started\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# 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## 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## 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- **Run Doccupine CLI:**\n\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\nnpx doccupine\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## Start documenting\nStart documenting your project by editing the **index.mdx** file in the choosen MDX directory.\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.\n";
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const homeMdxTemplate = `---
|
|
2
|
-
title: "Getting Started"
|
|
3
|
-
description: "This is my first Doccupine project"
|
|
4
|
-
date: "2025-01-15"
|
|
5
|
-
category: "General"
|
|
6
|
-
categoryOrder: 0
|
|
7
|
-
order: 0
|
|
8
|
-
---
|
|
9
|
-
# Welcome to Doccupine
|
|
10
|
-
|
|
11
|
-
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.
|
|
12
|
-
|
|
13
|
-
## Open Source and Extensible
|
|
14
|
-
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.
|
|
15
|
-
|
|
16
|
-
## Features
|
|
17
|
-
|
|
18
|
-
- 📝 Markdown-based content
|
|
19
|
-
- 📦 Built-in file structure
|
|
20
|
-
- ⚡ Live Preview & Auto-Update
|
|
21
|
-
- 🚀 Easy Deployment
|
|
22
|
-
|
|
23
|
-
## Getting Started
|
|
24
|
-
|
|
25
|
-
To get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:
|
|
26
|
-
|
|
27
|
-
- **Run Doccupine CLI:**
|
|
28
|
-
|
|
29
|
-
Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
|
|
30
|
-
|
|
31
|
-
~~~bash
|
|
32
|
-
npx doccupine
|
|
33
|
-
~~~
|
|
34
|
-
|
|
35
|
-
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.
|
|
36
|
-
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.
|
|
37
|
-
|
|
38
|
-
This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
|
|
39
|
-
|
|
40
|
-
## Start documenting
|
|
41
|
-
Start documenting your project by editing the **index.mdx** file in the choosen MDX directory.
|
|
42
|
-
|
|
43
|
-
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.
|
|
44
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const homeMdxTemplate = "---\ntitle: \"Home\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# 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- **Run Doccupine CLI:**\n\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\nnpx doccupine\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\nnpx doccupine 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\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.\n";
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
export const homeMdxTemplate = `---
|
|
2
|
-
title: "Home"
|
|
3
|
-
description: "This is my first Doccupine project"
|
|
4
|
-
date: "2025-01-15"
|
|
5
|
-
category: "General"
|
|
6
|
-
categoryOrder: 0
|
|
7
|
-
order: 0
|
|
8
|
-
---
|
|
9
|
-
# Welcome to Doccupine
|
|
10
|
-
|
|
11
|
-
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.
|
|
12
|
-
|
|
13
|
-
## Open Source and Extensible
|
|
14
|
-
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.
|
|
15
|
-
|
|
16
|
-
## Getting Started
|
|
17
|
-
|
|
18
|
-
To get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:
|
|
19
|
-
|
|
20
|
-
- **Run Doccupine CLI:**
|
|
21
|
-
|
|
22
|
-
Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
|
|
23
|
-
|
|
24
|
-
~~~bash
|
|
25
|
-
npx doccupine
|
|
26
|
-
~~~
|
|
27
|
-
|
|
28
|
-
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.
|
|
29
|
-
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.
|
|
30
|
-
|
|
31
|
-
This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
|
|
32
|
-
|
|
33
|
-
- **Generate the website:**
|
|
34
|
-
|
|
35
|
-
~~~bash
|
|
36
|
-
npx doccupine build
|
|
37
|
-
~~~
|
|
38
|
-
|
|
39
|
-
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.
|
|
40
|
-
|
|
41
|
-
## Features
|
|
42
|
-
|
|
43
|
-
- 📝 Markdown-based content
|
|
44
|
-
- 📦 Built-in file structure
|
|
45
|
-
- ⚡ Live Preview & Auto-Update
|
|
46
|
-
- 🚀 Easy Deployment
|
|
47
|
-
|
|
48
|
-
## Start documenting
|
|
49
|
-
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:
|
|
50
|
-
|
|
51
|
-
~~~text
|
|
52
|
-
|
|
53
|
-
# Home
|
|
54
|
-
|
|
55
|
-
This is some **markdown** content with MDX support.
|
|
56
|
-
~~~
|
|
57
|
-
|
|
58
|
-
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.
|
|
59
|
-
`;
|
package/dist/templates/icon.d.ts
DELETED
|
@@ -1 +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
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export const iconTemplate = `
|
|
2
|
-
import { icons } from "lucide-react";
|
|
3
|
-
|
|
4
|
-
export type IconProps = keyof typeof icons;
|
|
5
|
-
|
|
6
|
-
interface Props {
|
|
7
|
-
name: IconProps;
|
|
8
|
-
color?: string;
|
|
9
|
-
size?: number;
|
|
10
|
-
className?: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const Icon = ({ name, color, size, className }: Props) => {
|
|
14
|
-
const LucideIcon = icons[name];
|
|
15
|
-
|
|
16
|
-
return <LucideIcon color={color} size={size} className={className} />;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export { Icon };
|
|
20
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 0\norder: 8\n---\n# Icons\n\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```text\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```text\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";
|