@heyo-sh/create-heyo-docs 0.2.3 → 0.4.0

package/templates/astro/src/layouts/docs-layout.astro

@@ -1,6 +1,66 @@
 ---
 import config from "../../heyo-docs.config";
+import { adobeAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/adobe";
+import { amplitudeAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/amplitude";
+import { clarityBootstrapScript } from "@heyo-sh/heyo-docs/integrations/analytics/clarity";
+import { clearbitAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/clearbit";
+import { fathomAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/fathom";
+import {
+  googleAnalyticsBootstrapScript,
+  googleAnalyticsScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/google-analytics";
+import {
+  googleTagManagerBootstrapScript,
+  googleTagManagerNoScriptUrl,
+} from "@heyo-sh/heyo-docs/integrations/analytics/google-tag-manager";
+import { heapBootstrapScript } from "@heyo-sh/heyo-docs/integrations/analytics/heap";
+import { hotjarBootstrapScript } from "@heyo-sh/heyo-docs/integrations/analytics/hotjar";
+import {
+  logRocketBootstrapScript,
+  logRocketScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/logrocket";
+import {
+  mixpanelBootstrapScript,
+  mixpanelScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/mixpanel";
+import {
+  openpanelBootstrapScript,
+  openpanelScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/openpanel";
+import { openReplayBootstrapScript } from "@heyo-sh/heyo-docs/integrations/analytics/openreplay";
+import { osanoConsentScript } from "@heyo-sh/heyo-docs/integrations/consent/osano";
+import {
+  transcendConsentScript,
+  transcendGoogleConsentModeDefaultsScript,
+} from "@heyo-sh/heyo-docs/integrations/consent/transcend";
+import { pirschAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/pirsch";
+import { plausibleAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/plausible";
+import {
+  posthogApiHost,
+  posthogBootstrapScript,
+  posthogScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/posthog";
+import { rybbitAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/rybbit";
+import {
+  swetrixBootstrapScript,
+  swetrixScript,
+} from "@heyo-sh/heyo-docs/integrations/analytics/swetrix";
+import { chaskiqBootstrapScript } from "@heyo-sh/heyo-docs/integrations/support/chaskiq";
+import { chatwootBootstrapScript } from "@heyo-sh/heyo-docs/integrations/support/chatwoot";
+import {
+  frontChatBootstrapScript,
+  frontChatScript,
+} from "@heyo-sh/heyo-docs/integrations/support/front";
+import { intercomBootstrapScript } from "@heyo-sh/heyo-docs/integrations/support/intercom";
+import { papercupsBootstrapScript } from "@heyo-sh/heyo-docs/integrations/support/papercups";
+import { typebotBootstrapScript } from "@heyo-sh/heyo-docs/integrations/support/typebot";
+import { umamiAnalyticsScript } from "@heyo-sh/heyo-docs/integrations/analytics/umami";
+import {
+  zammadBootstrapScript,
+  zammadChatScript,
+} from "@heyo-sh/heyo-docs/integrations/support/zammad";
 import "../styles/app.css";
+import "virtual:heyo-docs-theme.css";
 import { getThemeScript, THEME_STORAGE_KEY } from "../lib/theme";
 
 interface Props {
@@ -20,11 +80,128 @@ const {
 } = Astro.props;
 const jsonLd = JSON.stringify(structuredData).replace(/</g, "\\u003c");
 const hasChangelog = config.groups.some((group) => group.type === "changelog");
+const osano = config.integrations.consent.osano
+  ? osanoConsentScript(config.integrations.consent.osano)
+  : undefined;
+const transcend = config.integrations.consent.transcend
+  ? transcendConsentScript(config.integrations.consent.transcend)
+  : undefined;
+const transcendGoogleConsentDefaults =
+  transcend &&
+  (config.integrations.analytics.ga4 || config.integrations.analytics.gtm)
+    ? transcendGoogleConsentModeDefaultsScript()
+    : undefined;
+const adobe = config.integrations.analytics.adobe
+  ? adobeAnalyticsScript(config.integrations.analytics.adobe)
+  : undefined;
+const amplitude = config.integrations.analytics.amplitude
+  ? amplitudeAnalyticsScript(config.integrations.analytics.amplitude)
+  : undefined;
+const clarity = config.integrations.analytics.clarity
+  ? clarityBootstrapScript()
+  : undefined;
+const clearbit = config.integrations.analytics.clearbit
+  ? clearbitAnalyticsScript(config.integrations.analytics.clearbit)
+  : undefined;
+const fathom = config.integrations.analytics.fathom
+  ? fathomAnalyticsScript(config.integrations.analytics.fathom)
+  : undefined;
+const googleAnalytics = config.integrations.analytics.ga4
+  ? googleAnalyticsScript(config.integrations.analytics.ga4)
+  : undefined;
+const googleAnalyticsBootstrap = googleAnalytics
+  ? googleAnalyticsBootstrapScript()
+  : undefined;
+const googleTagManager = config.integrations.analytics.gtm
+  ? googleTagManagerBootstrapScript()
+  : undefined;
+const googleTagManagerNoScript = config.integrations.analytics.gtm
+  ? googleTagManagerNoScriptUrl(config.integrations.analytics.gtm)
+  : undefined;
+const heap = config.integrations.analytics.heap
+  ? heapBootstrapScript()
+  : undefined;
+const hotjar = config.integrations.analytics.hotjar
+  ? hotjarBootstrapScript()
+  : undefined;
+const logRocket = config.integrations.analytics.logrocket
+  ? logRocketScript()
+  : undefined;
+const logRocketBootstrap = logRocket ? logRocketBootstrapScript() : undefined;
+const mixpanel = config.integrations.analytics.mixpanel
+  ? mixpanelScript()
+  : undefined;
+const mixpanelBootstrap = mixpanel ? mixpanelBootstrapScript() : undefined;
+const openpanel = config.integrations.analytics.openpanel
+  ? openpanelScript()
+  : undefined;
+const openpanelBootstrap = openpanel ? openpanelBootstrapScript() : undefined;
+const openReplay = config.integrations.analytics.openreplay
+  ? openReplayBootstrapScript()
+  : undefined;
+const pirsch = config.integrations.analytics.pirsch
+  ? pirschAnalyticsScript(config.integrations.analytics.pirsch)
+  : undefined;
+const plausible = config.integrations.analytics.plausible
+  ? plausibleAnalyticsScript(config.integrations.analytics.plausible)
+  : undefined;
+const posthog = config.integrations.analytics.posthog
+  ? posthogScript(config.integrations.analytics.posthog)
+  : undefined;
+const posthogBootstrap = posthog ? posthogBootstrapScript() : undefined;
+const posthogHost = config.integrations.analytics.posthog
+  ? posthogApiHost(config.integrations.analytics.posthog)
+  : undefined;
+const rybbit = config.integrations.analytics.rybbit
+  ? rybbitAnalyticsScript(config.integrations.analytics.rybbit)
+  : undefined;
+const swetrix = config.integrations.analytics.swetrix
+  ? swetrixScript()
+  : undefined;
+const swetrixBootstrap = swetrix ? swetrixBootstrapScript() : undefined;
+const umami = config.integrations.analytics.umami
+  ? umamiAnalyticsScript(config.integrations.analytics.umami)
+  : undefined;
+const intercom = config.integrations.support.intercom
+  ? intercomBootstrapScript()
+  : undefined;
+const front = config.integrations.support.front ? frontChatScript() : undefined;
+const frontBootstrap = front ? frontChatBootstrapScript() : undefined;
+const chatwoot = config.integrations.support.chatwoot
+  ? chatwootBootstrapScript()
+  : undefined;
+const chaskiq = config.integrations.support.chaskiq
+  ? chaskiqBootstrapScript()
+  : undefined;
+const papercups = config.integrations.support.papercups
+  ? papercupsBootstrapScript()
+  : undefined;
+const typebot = config.integrations.support.typebot
+  ? typebotBootstrapScript()
+  : undefined;
+const zammad = config.integrations.support.zammad
+  ? zammadChatScript(config.integrations.support.zammad)
+  : undefined;
+const zammadBootstrap = zammad ? zammadBootstrapScript() : undefined;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
+    {
+      transcendGoogleConsentDefaults && (
+        <script is:inline set:html={transcendGoogleConsentDefaults} />
+      )
+    }
+    {
+      transcend && (
+        <script
+          is:inline
+          data-cfasync={transcend.dataCfasync}
+          src={transcend.src}
+        />
+      )
+    }
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light dark" />
@@ -43,12 +220,7 @@ const hasChangelog = config.groups.some((group) => group.type === "changelog");
     {canonical && <meta property="og:url" content={canonical} />}
     <link rel="icon" href="/favicon.ico" sizes="any" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link
-      rel="icon"
-      href="/favicon-96x96.png"
-      sizes="96x96"
-      type="image/png"
-    />
+    <link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
     <link rel="manifest" href="/site.webmanifest" />
     {
@@ -61,10 +233,324 @@ const hasChangelog = config.groups.some((group) => group.type === "changelog");
         />
       )
     }
-    <script is:inline set:html={getThemeScript(THEME_STORAGE_KEY, config.mode)}></script>
-    <script is:inline type="application/ld+json" set:html={jsonLd}></script>
+    {osano && <script is:inline src={osano.src} />}
+    {
+      googleTagManager && (
+        <script
+          is:inline
+          data-google-tag-manager-container-id={
+            config.integrations.analytics.gtm?.containerId
+          }
+          set:html={googleTagManager}
+        />
+      )
+    }
+    <script
+      is:inline
+      set:html={getThemeScript(THEME_STORAGE_KEY, config.mode)}
+    />
+    {adobe && <script is:inline async src={adobe.src} />}
+    {amplitude && <script is:inline src={amplitude.src} />}
+    {
+      clarity && (
+        <script
+          is:inline
+          data-clarity-project-id={
+            config.integrations.analytics.clarity?.projectId
+          }
+          set:html={clarity}
+        />
+      )
+    }
+    {clearbit && <script is:inline src={clearbit.src} />}
+    {
+      fathom && (
+        <script
+          is:inline
+          data-site={fathom.siteId}
+          data-spa={fathom.spa}
+          defer={fathom.defer}
+          src={fathom.src}
+        />
+      )
+    }
+    {
+      googleAnalytics && googleAnalyticsBootstrap && (
+        <>
+          <script
+            is:inline
+            async={googleAnalytics.async}
+            src={googleAnalytics.src}
+          />
+          <script
+            is:inline
+            data-google-analytics-measurement-id={
+              config.integrations.analytics.ga4?.measurementId
+            }
+            set:html={googleAnalyticsBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      heap && (
+        <script
+          is:inline
+          data-heap-environment-id={
+            config.integrations.analytics.heap?.environmentId
+          }
+          set:html={heap}
+        />
+      )
+    }
+    {
+      hotjar && (
+        <script
+          is:inline
+          data-hotjar-site-id={config.integrations.analytics.hotjar?.siteId}
+          data-hotjar-snippet-version={
+            config.integrations.analytics.hotjar?.snippetVersion
+          }
+          set:html={hotjar}
+        />
+      )
+    }
+    {
+      logRocket && logRocketBootstrap && (
+        <>
+          <script
+            is:inline
+            crossorigin={logRocket.crossOrigin}
+            src={logRocket.src}
+          />
+          <script
+            is:inline
+            data-logrocket-app-id={
+              config.integrations.analytics.logrocket?.appId
+            }
+            set:html={logRocketBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      mixpanel && mixpanelBootstrap && (
+        <>
+          <script is:inline src={mixpanel.src} />
+          <script
+            is:inline
+            data-mixpanel-project-token={
+              config.integrations.analytics.mixpanel?.projectToken
+            }
+            set:html={mixpanelBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      openpanel && openpanelBootstrap && (
+        <>
+          <script
+            is:inline
+            data-openpanel-api-url={
+              config.integrations.analytics.openpanel?.apiUrl
+            }
+            data-openpanel-client-id={
+              config.integrations.analytics.openpanel?.clientId
+            }
+            set:html={openpanelBootstrap}
+          />
+          <script
+            is:inline
+            async={openpanel.async}
+            defer={openpanel.defer}
+            src={openpanel.src}
+          />
+        </>
+      )
+    }
+    {
+      openReplay && (
+        <script
+          is:inline
+          data-openreplay-ingest-point={
+            config.integrations.analytics.openreplay?.ingestPoint
+          }
+          data-openreplay-project-key={
+            config.integrations.analytics.openreplay?.projectKey
+          }
+          set:html={openReplay}
+        />
+      )
+    }
+    {
+      pirsch && (
+        <script
+          is:inline
+          data-code={pirsch.code}
+          defer={pirsch.defer}
+          src={pirsch.src}
+        />
+      )
+    }
+    {
+      plausible && (
+        <script
+          is:inline
+          data-domain={plausible.domain}
+          defer={plausible.defer}
+          src={plausible.src}
+        />
+      )
+    }
+    {
+      posthog && posthogBootstrap && posthogHost && (
+        <>
+          <script is:inline src={posthog.src} />
+          <script
+            is:inline
+            data-posthog-api-host={posthogHost}
+            data-posthog-project-api-key={
+              config.integrations.analytics.posthog?.projectApiKey
+            }
+            set:html={posthogBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      rybbit && (
+        <script
+          is:inline
+          data-site-id={rybbit.siteId}
+          defer={rybbit.defer}
+          src={rybbit.src}
+        />
+      )
+    }
+    {
+      umami && (
+        <script
+          is:inline
+          data-website-id={umami.websiteId}
+          defer={umami.defer}
+          src={umami.src}
+        />
+      )
+    }
+    {
+      chaskiq && (
+        <script
+          is:inline
+          data-chaskiq-app-id={config.integrations.support.chaskiq?.appId}
+          data-chaskiq-base-url={config.integrations.support.chaskiq?.baseUrl}
+          data-chaskiq-ws-url={config.integrations.support.chaskiq?.wsUrl}
+          set:html={chaskiq}
+        />
+      )
+    }
+    {
+      papercups && (
+        <script
+          is:inline
+          data-papercups-base-url={
+            config.integrations.support.papercups?.baseUrl
+          }
+          data-papercups-inbox={config.integrations.support.papercups?.inbox}
+          data-papercups-token={config.integrations.support.papercups?.token}
+          set:html={papercups}
+        />
+      )
+    }
+    {
+      typebot && (
+        <script
+          is:inline
+          data-heyo-typebot
+          data-typebot-api-host={config.integrations.support.typebot?.apiHost}
+          data-typebot-id={config.integrations.support.typebot?.typebot}
+          set:html={typebot}
+          type="module"
+        />
+      )
+    }
+    <script is:inline type="application/ld+json" set:html={jsonLd} />
   </head>
   <body>
+    {
+      googleTagManagerNoScript && (
+        <noscript>
+          <iframe
+            height="0"
+            src={googleTagManagerNoScript}
+            style="display:none;visibility:hidden"
+            title="Google Tag Manager"
+            width="0"
+          />
+        </noscript>
+      )
+    }
     <slot />
+    {
+      swetrix && swetrixBootstrap && (
+        <>
+          <script is:inline defer={swetrix.defer} src={swetrix.src} />
+          <script
+            is:inline
+            data-swetrix-api-url={config.integrations.analytics.swetrix?.apiUrl}
+            data-swetrix-project-id={
+              config.integrations.analytics.swetrix?.projectId
+            }
+            set:html={swetrixBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      intercom && (
+        <script
+          is:inline
+          data-intercom-app-id={config.integrations.support.intercom?.appId}
+          data-intercom-api-base={config.integrations.support.intercom?.apiBase}
+          set:html={intercom}
+        />
+      )
+    }
+    {
+      front && frontBootstrap && (
+        <>
+          <script is:inline src={front.src} />
+          <script
+            is:inline
+            data-front-chat-id={config.integrations.support.front?.chatId}
+            set:html={frontBootstrap}
+          />
+        </>
+      )
+    }
+    {
+      chatwoot && (
+        <script
+          is:inline
+          data-chatwoot-base-url={config.integrations.support.chatwoot?.baseUrl}
+          data-chatwoot-website-token={
+            config.integrations.support.chatwoot?.websiteToken
+          }
+          set:html={chatwoot}
+        />
+      )
+    }
+    {
+      zammad && zammadBootstrap && (
+        <>
+          <script is:inline src={zammad.src} />
+          <script
+            is:inline
+            data-zammad-chat-id={config.integrations.support.zammad?.chatId}
+            set:html={zammadBootstrap}
+          />
+        </>
+      )
+    }
   </body>
 </html>

package/templates/astro/src/pages/[...slug].astro

@@ -38,10 +38,7 @@ const seo = exists
     };
 ---
 
-<DocsLayout
-  {...seo}
-  robots={exists ? "index, follow" : "noindex"}
->
+<DocsLayout {...seo} robots={exists ? "index, follow" : "noindex"}>
   <AstroDocsApp
     client:load
     currentOpenApiEndpoint={currentOpenApiEndpoint}

package/templates/astro/src/pages/heyo-docs-internal/ai-chat.ts

@@ -0,0 +1,20 @@
+import { createAiChatResponse } from "@heyo-sh/heyo-docs/ai";
+import type { APIRoute } from "astro";
+
+import config from "../../../heyo-docs.config";
+import { pages as markdownPages } from "virtual:heyo-docs-content/server";
+
+export const prerender = false;
+
+export const POST: APIRoute = ({ request }) =>
+  createAiChatResponse(request, {
+    ai: config.ai,
+    markdownPages,
+    pages: markdownPages.map((page) => ({
+      description: page.description,
+      searchContent: page.raw,
+      slug: page.slug,
+      title: page.title,
+    })),
+    title: config.title,
+  });

package/templates/astro/src/pages/index.astro

@@ -0,0 +1,13 @@
+---
+import { navigationPages } from "@heyo-sh/heyo-docs";
+
+import { docsContext } from "../lib/docs";
+
+const firstPage = docsContext("/")
+  .model.navigation.flatMap((group) => navigationPages(group.sections))
+  .at(0);
+
+if (!firstPage) throw new Error("No local documentation page is configured.");
+
+return Astro.redirect(firstPage.slug);
+---

package/templates/astro/src/styles/app.css

@@ -1,8 +1,18 @@
 @import "@fontsource-variable/figtree";
-@import "@heyo-sh/heyo-docs/theme/{{THEME}}.css";
 
 :root {
   --heyo-docs-font-family: "Figtree Variable", sans-serif;
 }
 
-/* Add project-specific token overrides and theme styles below this import. */
+/* Add project-specific token overrides and theme styles here. */
+@media (min-width: 1024px) {
+  header > a[aria-label] > img[src="/logo.svg"] {
+    height: 32px;
+    max-height: none;
+    width: auto;
+  }
+}
+
+.dark header > a[aria-label] > img[src="/logo.svg"] {
+  filter: invert(1);
+}

package/templates/astro/src/virtual.d.ts

@@ -3,6 +3,13 @@ declare module "virtual:heyo-docs-content" {
   export const pages: DocsPage[];
 }
 
+declare module "virtual:heyo-docs-config" {
+  import type { HeyoDocsConfig } from "@heyo-sh/heyo-docs";
+  export const config: HeyoDocsConfig;
+}
+
+declare module "virtual:heyo-docs-theme.css";
+
 declare module "virtual:heyo-docs-content/server" {
   import type { MarkdownPage } from "@heyo-sh/heyo-docs";
   export const pages: MarkdownPage[];

package/templates/next/app/[[...slug]]/page.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { openApiEndpointDetail } from "@heyo-sh/heyo-docs/node";
+import { notFound, redirect } from "next/navigation";
+import {
+  navigationPages,
+  openApiEndpointDetail,
+} from "@heyo-sh/heyo-docs/node";
 
 import { NextDocsApp } from "../components/docs-app";
 import { docsContext, docsModel, pathnameForSegments } from "../lib/docs";
@@ -14,9 +17,12 @@ interface PageProps {
 export const dynamic = "force-static";
 
 export async function generateStaticParams() {
-  return [...docsModel.pages, ...docsModel.endpoints].map(({ slug }) => ({
-    slug: slug === "/" ? [] : slug.slice(1).split("/"),
-  }));
+  return [
+    { slug: [] },
+    ...[...docsModel.pages, ...docsModel.endpoints].map(({ slug }) => ({
+      slug: slug.slice(1).split("/"),
+    })),
+  ];
 }
 
 export async function generateMetadata({
@@ -25,6 +31,11 @@ export async function generateMetadata({
   const { slug } = await params;
   const pathname = pathnameForSegments(slug);
   const context = docsContext(pathname);
+  if (pathname === "/")
+    return {
+      title: context.config.title,
+      robots: { index: false, follow: false },
+    };
   if (!context.page && !context.endpoint)
     return {
       title: `Not found | ${context.config.title}`,
@@ -36,6 +47,16 @@ export async function generateMetadata({
 export default async function DocsPage({ params }: PageProps) {
   const { slug } = await params;
   const pathname = pathnameForSegments(slug);
+  if (pathname === "/") {
+    const firstPage = docsModel.navigation
+      .flatMap((group) => navigationPages(group.sections))
+      .at(0);
+
+    if (!firstPage)
+      throw new Error("No local documentation page is configured.");
+
+    redirect(firstPage.slug);
+  }
   const context = docsContext(pathname);
   if (!context.page && !context.endpoint) notFound();
   const { structuredData } = docsSeo({ ...context, pathname });

package/templates/next/app/app.css

@@ -1,8 +1,18 @@
 @import "@fontsource-variable/figtree";
-@import "@heyo-sh/heyo-docs/theme/{{THEME}}.css";
 
 :root {
   --heyo-docs-font-family: "Figtree Variable", sans-serif;
 }
 
-/* Add project-specific token overrides and theme styles below this import. */
+/* Add project-specific token overrides and theme styles here. */
+@media (min-width: 1024px) {
+  header > a[aria-label] > img[src="/logo.svg"] {
+    height: 32px;
+    max-height: none;
+    width: auto;
+  }
+}
+
+.dark header > a[aria-label] > img[src="/logo.svg"] {
+  filter: invert(1);
+}