doccupine 0.0.98 → 0.0.99

package/dist/templates/header.js

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

package/dist/templates/home.d.ts

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

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

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

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

package/dist/templates/home.mdx.js

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

package/dist/templates/homemdx.d.ts

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

package/dist/templates/homemdx.js

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

package/dist/templates/icon.d.ts

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

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

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

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

package/dist/templates/icons.mdx.js

@@ -1,44 +0,0 @@
-export const iconsMdxTemplate = `---
-title: "Icons"
-description: "This is my first Doccupine project"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 0
-order: 8
----
-# Icons
-
-Integrate visual icons from well-known libraries to enrich your documentation.
-
-Icons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.
-
-<Icon name="flag" size={32} />
-
-\`\`\`text
-<Icon name="flag" size={32} />
-\`\`\`
-
-## Inline icons
-You can use icons directly within text to highlight information or add visual context.
-
-<Icon name="flag" size={16} /> Build your documentation seamlessly.
-
-\`\`\`text
-<Icon name="flag" size={16} /> Build your documentation seamlessly.
-\`\`\`
-
-## Properties
-
-<Field value="name" type="string" required>
-  The icon to display.
-</Field>
-
-- [**Lucide icon**](https://lucide.dev/icons) name
-
-<Field value="size" type="number">
-  The size of the icon in pixels.
-</Field>
-
-<Field value="color" type="string">
-  The color of the icon as a hex code (for example, \`#FF5733\`).
-</Field>`;

package/dist/templates/image-embeds.mdx.d.ts

@@ -1 +0,0 @@
-export declare const imageEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 0\norder: 7\n---\n# Images and embeds\n\nEnrich your documentation with visuals, videos, and interactive embeds.\n\nDisplay images, embed video content, or add interactive frames via iframes to supplement your docs.\n\n![Demo Image](https://doccupine.com/demo.png)\n\n## Images\n\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\n\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://doccupine.com/demo.png)\n```\n\n<Callout type=\"note\">\n  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image\u2019s appearance or content.\n</Callout>\n\n### HTML image embeds\n\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n## Videos\n\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\n\nTo embed a YouTube video, use the following syntax:\n\n```html\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n```\n\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n\n### Self-hosted videos\n\nServe up your own video content using the `<video>` tag:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n```\n\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n\n\n#### Autoplay and Looping\n\nFor demonstration videos that loop or start automatically, add attributes as shown:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n  autoPlay\n  muted\n  loop\n  playsInline\n></video>\n```\n";

package/dist/templates/image-embeds.mdx.js

@@ -1,103 +0,0 @@
-export const imageEmbedsMdxTemplate = `---
-title: "Images and embeds"
-description: "This is my first Doccupine project"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 0
-order: 7
----
-# Images and embeds
-
-Enrich your documentation with visuals, videos, and interactive embeds.
-
-Display images, embed video content, or add interactive frames via iframes to supplement your docs.
-
-![Demo Image](https://doccupine.com/demo.png)
-
-## Images
-
-Images enhance documentation with context, illustration, or decorative visual cues.
-
-### Basic Image Syntax
-
-Include an image in Markdown using the syntax below:
-
-\`\`\`md
-![Alt text](https://doccupine.com/demo.png)
-\`\`\`
-
-<Callout type="note">
-  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image’s appearance or content.
-</Callout>
-
-### HTML image embeds
-
-Embed images in your Markdown content using HTML syntax.
-
-\`\`\`md
-<img src="https://doccupine.com/demo.png" alt="Alt text">
-\`\`\`
-
-## Videos
-
-Videos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.
-
-### YouTube Embed
-
-To embed a YouTube video, use the following syntax:
-
-\`\`\`html
-<iframe
-  className="aspect-video"
-  src="https://www.youtube.com/embed/ResP_eVPYQo"
-  title="YouTube video player"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-></iframe>
-\`\`\`
-
-<iframe
-  className="aspect-video"
-  src="https://www.youtube.com/embed/ResP_eVPYQo"
-  title="YouTube video player"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-></iframe>
-
-### Self-hosted videos
-
-Serve up your own video content using the \`<video>\` tag:
-
-\`\`\`html
-<video
-  controls
-  className="aspect-video"
-  src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4"
-></video>
-\`\`\`
-
-<video
-  controls
-  className="aspect-video"
-  src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4"
-></video>
-
-
-#### Autoplay and Looping
-
-For demonstration videos that loop or start automatically, add attributes as shown:
-
-\`\`\`html
-<video
-  controls
-  className="aspect-video"
-  src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4"
-  autoPlay
-  muted
-  loop
-  playsInline
-></video>
-\`\`\`
-`;

package/dist/templates/layout.d.ts

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