doccupine 0.0.70 → 0.0.72

package/README.md

@@ -135,6 +135,7 @@ Place these JSON files in your project root (where you run `doccupine`). They ar
 | `links.json`      | Static header/footer links                                                                                |
 | `fonts.json`      | Font configuration (Google Fonts or local)                                                                |
 | `sections.json`   | Section definitions for tabbed doc groups (see [Sections](#sections))                                     |
+| `analytics.json`  | Analytics provider configuration (PostHog supported)                                                      |
 
 ## Public Directory
 

package/dist/index.js

@@ -26,6 +26,7 @@ class MDXToNextJSGenerator {
     configWatcher = null;
     fontWatcher = null;
     publicWatcher = null;
+    rootDirWatcher = null;
     analyticsWatcher = null;
     configFiles = [
         "theme.json",
@@ -552,27 +553,53 @@ class MDXToNextJSGenerator {
         });
         const publicDir = path.join(this.rootDir, "public");
         if (await fs.pathExists(publicDir)) {
-            this.publicWatcher = chokidar.watch(publicDir, {
-                persistent: true,
-                ignoreInitial: true,
-            });
-            this.publicWatcher
-                .on("add", (filePath) => {
-                console.log(chalk.cyan(`📁 Public file added: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileChange(filePath);
-            })
-                .on("change", (filePath) => {
-                console.log(chalk.cyan(`📁 Public file changed: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileChange(filePath);
-            })
-                .on("unlink", (filePath) => {
-                console.log(chalk.red(`🗑️ Public file deleted: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileDelete(filePath);
-            })
-                .on("error", (error) => {
-                console.error(chalk.red("❌ Public watcher error:"), error);
-            });
+            this.setupPublicWatcher();
         }
+        // Watch rootDir for public directory creation
+        this.rootDirWatcher = chokidar.watch(this.rootDir, {
+            persistent: true,
+            ignoreInitial: true,
+            depth: 0,
+        });
+        this.rootDirWatcher
+            .on("addDir", async (dirPath) => {
+            if (path.basename(dirPath) === "public" &&
+                path.dirname(dirPath) === this.rootDir &&
+                !this.publicWatcher) {
+                console.log(chalk.cyan("📁 Public directory created"));
+                await this.copyPublicFiles();
+                this.setupPublicWatcher();
+            }
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Root dir watcher error:"), error);
+        });
+    }
+    setupPublicWatcher() {
+        if (this.publicWatcher) {
+            return;
+        }
+        const publicDir = path.join(this.rootDir, "public");
+        this.publicWatcher = chokidar.watch(publicDir, {
+            persistent: true,
+            ignoreInitial: true,
+        });
+        this.publicWatcher
+            .on("add", (filePath) => {
+            console.log(chalk.cyan(`📁 Public file added: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileChange(filePath);
+        })
+            .on("change", (filePath) => {
+            console.log(chalk.cyan(`📁 Public file changed: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileChange(filePath);
+        })
+            .on("unlink", (filePath) => {
+            console.log(chalk.red(`🗑️ Public file deleted: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileDelete(filePath);
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Public watcher error:"), error);
+        });
     }
     async parseMDXFile(file) {
         const fullPath = path.join(this.watchDir, file);
@@ -839,6 +866,9 @@ export default function Page() {
             await this.publicWatcher.close();
             console.log(chalk.yellow("👋 Stopped watching for public directory changes"));
         }
+        if (this.rootDirWatcher) {
+            await this.rootDirWatcher.close();
+        }
     }
 }
 program

package/dist/lib/structures.js

@@ -96,6 +96,7 @@ import { platformThemeSettingsMdxTemplate } from "../templates/mdx/platform/them
 import { platformNavigationSettingsMdxTemplate } from "../templates/mdx/platform/navigation-settings.mdx.js";
 import { platformFontsSettingsMdxTemplate } from "../templates/mdx/platform/fonts-settings.mdx.js";
 import { platformExternalLinksMdxTemplate } from "../templates/mdx/platform/external-links.mdx.js";
+import { platformAnalyticsMdxTemplate } from "../templates/mdx/platform/analytics.mdx.js";
 import { platformAiAssistantMdxTemplate } from "../templates/mdx/platform/ai-assistant.mdx.js";
 import { platformCustomDomainsMdxTemplate } from "../templates/mdx/platform/custom-domains.mdx.js";
 import { platformBuildAndDeployMdxTemplate } from "../templates/mdx/platform/build-and-deploy.mdx.js";
@@ -203,6 +204,7 @@ export const startingDocsStructure = {
     "platform/navigation-settings.mdx": platformNavigationSettingsMdxTemplate,
     "platform/fonts-settings.mdx": platformFontsSettingsMdxTemplate,
     "platform/external-links.mdx": platformExternalLinksMdxTemplate,
+    "platform/analytics.mdx": platformAnalyticsMdxTemplate,
     "platform/ai-assistant.mdx": platformAiAssistantMdxTemplate,
     "platform/custom-domains.mdx": platformCustomDomainsMdxTemplate,
     "platform/build-and-deploy.mdx": platformBuildAndDeployMdxTemplate,

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

@@ -1 +1 @@
-export declare const postHogProviderTemplate = "\"use client\";\n\nimport posthog from \"posthog-js\";\nimport { PostHogProvider as PHProvider } from \"posthog-js/react\";\nimport { Suspense, useEffect, useRef, useState } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport rawAnalyticsConfig from \"@/analytics.json\";\n\ninterface AnalyticsConfig {\n  provider?: string;\n  posthog?: {\n    key?: string;\n    host?: string;\n  };\n}\n\nconst analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;\n\nconst posthogKey =\n  analyticsConfig?.provider === \"posthog\" ? analyticsConfig.posthog?.key : null;\n\nfunction PostHogInit({ onReady }: { onReady: () => void }) {\n  const initRef = useRef(false);\n\n  useEffect(() => {\n    if (initRef.current || !posthogKey) return;\n    initRef.current = true;\n\n    posthog.init(posthogKey, {\n      api_host: \"/ingest\",\n      ui_host: analyticsConfig.posthog?.host || \"https://us.posthog.com\",\n      capture_pageview: false,\n      capture_pageleave: true,\n      loaded: onReady,\n    });\n  }, [onReady]);\n\n  return null;\n}\n\nfunction PostHogPageviewTracker() {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n\n  useEffect(() => {\n    if (pathname) {\n      const url = searchParams?.size\n        ? `${pathname}?${searchParams.toString()}`\n        : pathname;\n      posthog.capture(\"$pageview\", { $current_url: url });\n    }\n  }, [pathname, searchParams]);\n\n  return null;\n}\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  const [ready, setReady] = useState(false);\n\n  if (!posthogKey) {\n    return <>{children}</>;\n  }\n\n  return (\n    <PHProvider client={posthog}>\n      <PostHogInit onReady={() => setReady(true)} />\n      <Suspense fallback={null}>{ready && <PostHogPageviewTracker />}</Suspense>\n      {children}\n    </PHProvider>\n  );\n}\n";
+export declare const postHogProviderTemplate = "\"use client\";\n\nimport posthog from \"posthog-js\";\nimport { PostHogProvider as PHProvider } from \"@posthog/react\";\nimport { Suspense, useEffect, useRef, useState } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport rawAnalyticsConfig from \"@/analytics.json\";\n\ninterface AnalyticsConfig {\n  provider?: string;\n  posthog?: {\n    key?: string;\n    host?: string;\n  };\n}\n\nconst analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;\n\nconst posthogKey =\n  analyticsConfig?.provider === \"posthog\" ? analyticsConfig.posthog?.key : null;\n\nfunction PostHogInit({ onReady }: { onReady: () => void }) {\n  const initRef = useRef(false);\n\n  useEffect(() => {\n    if (initRef.current || !posthogKey) return;\n    initRef.current = true;\n\n    posthog.init(posthogKey, {\n      api_host: \"/ingest\",\n      ui_host: analyticsConfig.posthog?.host || \"https://us.posthog.com\",\n      capture_pageview: false,\n      capture_pageleave: true,\n      loaded: onReady,\n    });\n  }, [onReady]);\n\n  return null;\n}\n\nfunction PostHogPageviewTracker() {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n\n  useEffect(() => {\n    if (pathname) {\n      const url = searchParams?.size\n        ? `${pathname}?${searchParams.toString()}`\n        : pathname;\n      posthog.capture(\"$pageview\", { $current_url: url });\n    }\n  }, [pathname, searchParams]);\n\n  return null;\n}\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  const [ready, setReady] = useState(false);\n\n  if (!posthogKey) {\n    return <>{children}</>;\n  }\n\n  return (\n    <PHProvider client={posthog}>\n      <PostHogInit onReady={() => setReady(true)} />\n      <Suspense fallback={null}>{ready && <PostHogPageviewTracker />}</Suspense>\n      {children}\n    </PHProvider>\n  );\n}\n";

package/dist/templates/components/PostHogProvider.js

@@ -1,7 +1,7 @@
 export const postHogProviderTemplate = `"use client";
 
 import posthog from "posthog-js";
-import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { PostHogProvider as PHProvider } from "@posthog/react";
 import { Suspense, useEffect, useRef, useState } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 import rawAnalyticsConfig from "@/analytics.json";

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

@@ -1 +1 @@
-export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";
+export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";

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

@@ -24,6 +24,10 @@ const StyledLinkButton = styled(Link)<LinkButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  & p {
+    color: inherit;
+  }
+
   & svg.lucide {
     margin: auto 0;
     min-width: min-content;
@@ -35,6 +39,10 @@ const ButtonBase = styled.button<ButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  & p {
+    color: inherit;
+  }
+
   & svg.lucide {
     margin: auto 0;
     min-width: min-content;

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

@@ -1 +1 @@
-export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}`;\n\nexport { GlobalStyles };\n";
+export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n.light-only {\n  ${({ theme }) => theme.isDark && \"display: none !important;\"}\n}\n\n.dark-only {\n  ${({ theme }) => !theme.isDark && \"display: none !important;\"}\n}`;\n\nexport { GlobalStyles };\n";

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

@@ -100,6 +100,14 @@ b {
 
 .full-width {
   width: 100%;
+}
+
+.light-only {
+  \${({ theme }) => theme.isDark && "display: none !important;"}
+}
+
+.dark-only {
+  \${({ theme }) => !theme.isDark && "display: none !important;"}
 }\`;
 
 export { GlobalStyles };

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

@@ -1 +1 @@
-export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\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://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.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\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\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\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\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";
+export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\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://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.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\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n### Theme-aware images\nShow different images depending on whether the user is in light or dark mode. Add the `light-only` or `dark-only` className to display an image exclusively in that theme.\n\n```md\n<img className=\"light-only\" src=\"/images/diagram-light.png\" alt=\"Diagram\">\n<img className=\"dark-only\" src=\"/images/diagram-dark.png\" alt=\"Diagram\">\n```\n\n<img className=\"light-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in light mode\">\n<img className=\"dark-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in dark mode\" style={{ filter: \"invert(1)\" }}>\n\n<Callout type=\"note\">\n  The `light-only` and `dark-only` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.\n</Callout>\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\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\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\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/mdx/image-and-embeds.mdx.js

@@ -34,6 +34,21 @@ Embed images in your Markdown content using HTML syntax.
 <img src="https://docs.doccupine.com/demo.png" alt="Alt text">
 \`\`\`
 
+### Theme-aware images
+Show different images depending on whether the user is in light or dark mode. Add the \`light-only\` or \`dark-only\` className to display an image exclusively in that theme.
+
+\`\`\`md
+<img className="light-only" src="/images/diagram-light.png" alt="Diagram">
+<img className="dark-only" src="/images/diagram-dark.png" alt="Diagram">
+\`\`\`
+
+<img className="light-only" src="https://docs.doccupine.com/demo.png" alt="This image is only visible in light mode">
+<img className="dark-only" src="https://docs.doccupine.com/demo.png" alt="This image is only visible in dark mode" style={{ filter: "invert(1)" }}>
+
+<Callout type="note">
+  The \`light-only\` and \`dark-only\` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.
+</Callout>
+
 ## Videos
 Videos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.
 

package/dist/templates/mdx/platform/analytics.mdx.d.ts

@@ -0,0 +1 @@
+export declare const platformAnalyticsMdxTemplate = "---\ntitle: \"Analytics\"\ndescription: \"Enable PostHog analytics to track page views on your documentation site.\"\ndate: \"2026-02-24\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 3\nsection: \"Platform\"\n---\n# Analytics\nThe Analytics settings page lets you add PostHog analytics to your documentation site. Page views are tracked client-side and proxied through your own domain for privacy - no data is sent directly to PostHog.\n\n## Enabling analytics\nUse the **Enable Analytics** toggle to turn tracking on or off. When disabled, no tracking code is added to your site.\n\n## Configuration\n\n### PostHog Project API Key\nYour project API key from PostHog (starts with `phc_`). This is a public identifier and is safe to commit to your repository.\n\nTo find your key:\n1. Log in to [PostHog](https://posthog.com).\n2. Open your project settings.\n3. Copy the **Project API Key**.\n\n### Region\nSelect the PostHog cloud region that matches your project:\n\n- **US Cloud** - `us.i.posthog.com`\n- **EU Cloud** - `eu.i.posthog.com`\n\n## How it works\nAnalytics settings are stored in `analytics.json` at the root of your repository. Here's an example:\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://us.i.posthog.com\"\n  }\n}\n```\n\nWhen enabled, Doccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through `/ingest` on your own domain and are proxied to PostHog.\n\n<Callout type=\"note\">\n  Changes to analytics settings are staged as pending changes. Click **Publish** to commit them to your repository and trigger a deploy.\n</Callout>\n\nSee the [Analytics](/analytics) page for the full configuration reference and additional details on the privacy proxy.";

package/dist/templates/mdx/platform/analytics.mdx.js

@@ -0,0 +1,51 @@
+export const platformAnalyticsMdxTemplate = `---
+title: "Analytics"
+description: "Enable PostHog analytics to track page views on your documentation site."
+date: "2026-02-24"
+category: "Configuration"
+categoryOrder: 2
+order: 3
+section: "Platform"
+---
+# Analytics
+The Analytics settings page lets you add PostHog analytics to your documentation site. Page views are tracked client-side and proxied through your own domain for privacy - no data is sent directly to PostHog.
+
+## Enabling analytics
+Use the **Enable Analytics** toggle to turn tracking on or off. When disabled, no tracking code is added to your site.
+
+## Configuration
+
+### PostHog Project API Key
+Your project API key from PostHog (starts with \`phc_\`). This is a public identifier and is safe to commit to your repository.
+
+To find your key:
+1. Log in to [PostHog](https://posthog.com).
+2. Open your project settings.
+3. Copy the **Project API Key**.
+
+### Region
+Select the PostHog cloud region that matches your project:
+
+- **US Cloud** - \`us.i.posthog.com\`
+- **EU Cloud** - \`eu.i.posthog.com\`
+
+## How it works
+Analytics settings are stored in \`analytics.json\` at the root of your repository. Here's an example:
+
+\`\`\`json
+{
+  "provider": "posthog",
+  "posthog": {
+    "key": "phc_your_project_api_key",
+    "host": "https://us.i.posthog.com"
+  }
+}
+\`\`\`
+
+When enabled, Doccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through \`/ingest\` on your own domain and are proxied to PostHog.
+
+<Callout type="note">
+  Changes to analytics settings are staged as pending changes. Click **Publish** to commit them to your repository and trigger a deploy.
+</Callout>
+
+See the [Analytics](/analytics) page for the full configuration reference and additional details on the privacy proxy.`;

package/dist/templates/package.js

@@ -10,20 +10,21 @@ export const packageJsonTemplate = JSON.stringify({
         format: "prettier --write .",
     },
     dependencies: {
-        "@langchain/anthropic": "^1.3.19",
-        "@langchain/core": "^1.1.27",
-        "@langchain/google-genai": "^2.1.20",
-        "@langchain/openai": "^1.2.9",
+        "@langchain/anthropic": "^1.3.23",
+        "@langchain/core": "^1.1.32",
+        "@langchain/google-genai": "^2.1.25",
+        "@langchain/openai": "^1.2.13",
         "@mdx-js/react": "^3.1.1",
-        "@modelcontextprotocol/sdk": "^1.26.0",
+        "@modelcontextprotocol/sdk": "^1.27.1",
+        "@posthog/react": "^1.8.2",
         "cherry-styled-components": "^0.1.13",
-        langchain: "^1.2.25",
-        "lucide-react": "^0.575.0",
+        langchain: "^1.2.31",
+        "lucide-react": "^0.577.0",
         next: "16.1.6",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
-        "posthog-js": "^1.353.0",
-        "posthog-node": "^5.25.0",
+        "posthog-js": "^1.360.1",
+        "posthog-node": "^5.28.1",
         react: "19.2.4",
         "react-dom": "19.2.4",
         "rehype-highlight": "^7.0.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {
@@ -37,7 +37,7 @@
     "chalk": "^5.6.2",
     "chokidar": "^5.0.0",
     "commander": "^14.0.3",
-    "fs-extra": "^11.3.3",
+    "fs-extra": "^11.3.4",
     "gray-matter": "^4.0.3",
     "next": "^16.1.6",
     "prompts": "^2.4.2",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.4.0",
     "@types/prompts": "^2.4.9",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",