@baybreezy/docd 0.0.1

package/app/components/page/PageHeader.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="not-prose mb-10">
+    <p
+      v-if="headline && !hasFancyIcon"
+      class="mb-4 font-bold tracking-tight text-primary capitalize"
+    >
+      {{ headline }}
+    </p>
+    <div class="flex flex-col gap-4">
+      <UiFancyIcon
+        v-if="page?.fancyIcon && page.fancyIcon.icon"
+        :theme="page.fancyIcon.theme ?? 'modern-neue'"
+        :color="page.fancyIcon.color ?? 'primary'"
+        :size="page.fancyIcon.size ?? 'lg'"
+        class="shrink-0 text-foreground/70"
+        :icon="page.fancyIcon.icon"
+      />
+      <UiFancyIcon
+        v-else-if="page?.navigation && page.navigation.icon && typeof page.navigation === 'object'"
+        theme="modern-neue"
+        size="lg"
+        class="shrink-0 text-foreground/70"
+        :icon="page.navigation.icon"
+      />
+      <div class="w-full grow">
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <h1 class="text-4xl leading-none font-bold">{{ page?.title }}</h1>
+          <PageHeaderLinks />
+        </div>
+        <p v-if="page?.description" class="mt-2 mb-4 text-lg text-muted-foreground">
+          {{ page?.description }}
+        </p>
+        <div v-if="page?.links && page?.links?.length" class="not-prose mb-6 flex flex-wrap gap-2">
+          <template v-for="(link, i) in page?.links" :key="i">
+            <UiBadge
+              :href="link?.href"
+              target="_blank"
+              variant="outline"
+              size="md"
+              class="transition-colors duration-300"
+            >
+              <Icon
+                v-if="link?.icon"
+                :name="link.icon"
+                class="size-3.5 shrink-0 text-muted-foreground"
+              />{{ link?.title }}
+            </UiBadge>
+          </template>
+        </div>
+      </div>
+    </div>
+    <UiDivider :type="isDashed ? 'dashed' : 'solid'" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const { headline, page } = await useDocPage();
+  const { isDashed } = useDocd();
+
+  const hasFancyIcon = computed(() => {
+    return (
+      (page.value?.fancyIcon && page.value.fancyIcon.icon) ||
+      (page.value?.navigation &&
+        page.value.navigation.icon &&
+        typeof page.value.navigation === "object")
+    );
+  });
+</script>

package/app/components/page/PageHeaderLinks.vue

@@ -0,0 +1,138 @@
+<template>
+  <UiButtonGroup>
+    <UiTooltip>
+      <UiTooltipTrigger as-child>
+        <UiButton variant="secondary" size="sm" :disabled="copied" @click="copyPage()">
+          <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
+          <span class="sr-only">{{ copied ? "Copied!" : "Copy Page" }}</span>
+        </UiButton>
+      </UiTooltipTrigger>
+      <UiTooltipContent side="bottom">
+        <p class="text-center">
+          {{
+            copied
+              ? "Markdown link copied to clipboard!"
+              : "Copy the markdown link for this page to your clipboard."
+          }}
+        </p>
+      </UiTooltipContent>
+    </UiTooltip>
+    <UiButtonGroupSeparator />
+    <UiTooltip>
+      <UiDropdownMenu>
+        <UiTooltipTrigger as-child>
+          <UiDropdownMenuTrigger as-child>
+            <UiButton variant="secondary" size="icon-sm">
+              <Icon name="lucide:chevron-down" />
+              <span class="sr-only">More options for header links </span>
+            </UiButton>
+          </UiDropdownMenuTrigger>
+        </UiTooltipTrigger>
+        <UiTooltipContent side="bottom">
+          <p class="text-center">More options for this page</p>
+        </UiTooltipContent>
+        <UiDropdownMenuContent align="end" :collision-padding="10" class="w-60" translucent>
+          <UiDropdownMenuGroup class="flex flex-col gap-0.5">
+            <template v-for="(item, i) in items" :key="i">
+              <UiDropdownMenuItem
+                v-if="item.action"
+                :icon="item.icon"
+                :title="item.label"
+                @select="item.action()"
+              />
+              <UiDropdownMenuItem v-else-if="item.to" :text-value="item.label" as-child>
+                <NuxtLink
+                  :to="item.to"
+                  target="_blank"
+                  class="flex w-full cursor-pointer items-center gap-2"
+                >
+                  <Icon :name="item.icon" />
+                  <p v-html="item.label" />
+                  <Icon name="lucide:arrow-up-right" class="ml-auto text-muted-foreground" />
+                </NuxtLink>
+              </UiDropdownMenuItem>
+              <UiDropdownMenuSeparator v-else-if="item.separator" />
+            </template>
+          </UiDropdownMenuGroup>
+        </UiDropdownMenuContent>
+      </UiDropdownMenu>
+    </UiTooltip>
+  </UiButtonGroup>
+</template>
+
+<script lang="ts" setup>
+  const route = useRoute();
+  const appBaseURL = useRuntimeConfig().app?.baseURL || "/";
+
+  const { copy, copied } = useClipboard();
+  const markdownLink = computed(() => `${window?.location?.origin}/raw${route.path}.md`);
+  const mcpServerUrl = computed(() => `${window?.location?.origin}${appBaseURL}mcp`);
+
+  const copyPage = async () => {
+    try {
+      const response = await $fetch<string>(`/raw/${route.path}.md`);
+      if (response) {
+        copy(response);
+        useSonner.success("Markdown Link Copied", {
+          description: "The markdown link for this page has been copied to your clipboard.",
+        });
+      }
+    } catch {
+      useSonner.error("Link Unavailable", {
+        description: "This page does not have a markdown link available.",
+      });
+    }
+  };
+
+  const items = [
+    {
+      label: "Copy Markdown Link",
+      icon: "lucide:link",
+      action: () => {
+        copy(markdownLink.value);
+      },
+    },
+    {
+      label: "Copy MCP Server URL",
+      icon: "lucide:cpu",
+      action: () => {
+        copy(mcpServerUrl.value);
+        useSonner.success("MCP URL Copied", {
+          description: "The MCP server URL has been copied to your clipboard.",
+        });
+      },
+    },
+    { separator: true },
+    {
+      label: "View Markdown Page",
+      icon: "simple-icons:markdown",
+      to: `/raw${route.path}.md`,
+    },
+    {
+      label: "Open in ChatGPT",
+      icon: "simple-icons:openai",
+      to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+    },
+    {
+      label: "Open in Claude",
+      icon: "simple-icons:claude",
+      to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+    },
+    {
+      label: "Open in T3",
+      icon: "lucide:message-circle",
+      to: `https://t3.chat/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+    },
+    { separator: true },
+    {
+      label: `View llms.txt File`,
+      icon: "lucide:bot",
+      to: `/llms.txt`,
+    },
+    {
+      label: `View llms-full.txt File`,
+      icon: "lucide:bot",
+      to: `/llms-full.txt`,
+    },
+  ];
+</script>

package/app/components/page/PageMobileToc.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    v-if="hasToc"
+    class="sticky top-[calc(var(--header-height)*2)] z-40 tablet:top-[calc(var(--header-height))] xl:hidden"
+  >
+    <!-- Always-mounted hidden container — keeps scrollspy alive regardless of popover state -->
+    <div
+      ref="spyRoot"
+      aria-hidden="true"
+      class="pointer-events-none absolute size-0 overflow-hidden opacity-0"
+    >
+      <DocsToclink :links="toc!.links" />
+    </div>
+
+    <UiPopover v-model:open="isOpen">
+      <UiPopoverTrigger as-child>
+        <button
+          class="flex w-full cursor-pointer items-center gap-2.5 border-b bg-background/95 px-4 backdrop-blur-sm transition-colors hover:bg-muted/50"
+          :class="isDashed ? 'border-dashed' : ''"
+          style="height: 2.5rem"
+        >
+          <!-- Scroll progress ring -->
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            class="shrink-0 -rotate-90"
+            aria-hidden="true"
+          >
+            <circle
+              cx="9"
+              cy="9"
+              r="7"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="text-border"
+            />
+            <circle
+              cx="9"
+              cy="9"
+              r="7"
+              fill="none"
+              :stroke-dasharray="circumference"
+              :stroke-dashoffset="circumference - scrollProgress * circumference"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke="currentColor"
+              class="text-primary transition-[stroke-dashoffset] duration-150 ease-out"
+            />
+          </svg>
+
+          <span class="flex-1 truncate text-left text-sm">
+            <span v-if="activeHeadingText" class="font-medium text-foreground">
+              {{ activeHeadingText }}
+            </span>
+            <span v-else class="text-muted-foreground">On this page</span>
+          </span>
+
+          <Icon
+            name="lucide:chevron-down"
+            class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </button>
+      </UiPopoverTrigger>
+
+      <UiPopoverContent
+        align="start"
+        side="bottom"
+        :side-offset="0"
+        :collision-padding="0"
+        :avoid-collisions="false"
+        class="w-(--reka-popover-trigger-width) rounded-none border-x-0 border-t-0 p-0 shadow-sm"
+        translucent
+        :class="isDashed ? 'border-dashed' : ''"
+      >
+        <!-- Intercept link clicks to close the popover -->
+        <div @click.capture="onContentClick">
+          <UiScrollArea>
+            <div class="max-h-[50dvh] p-4">
+              <UiScrollspy smooth mode="multiple" :offset="120">
+                <DocsTocRail>
+                  <DocsToclink :links="toc!.links" />
+                </DocsTocRail>
+              </UiScrollspy>
+            </div>
+          </UiScrollArea>
+        </div>
+      </UiPopoverContent>
+    </UiPopover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  type TocLink = {
+    text: string;
+    id: string;
+    depth: number;
+    children?: TocLink[];
+  };
+
+  const { page } = await useDocPage();
+  const { isDashed } = useDocd();
+
+  const toc = computed(() => page.value?.body?.toc as { links: TocLink[] } | undefined);
+  const hasToc = computed(() => !!toc.value?.links?.length && !page.value?.hideToc);
+
+  // --- Hidden, always-mounted scrollspy root so activeId persists when popover is closed ---
+  const spyRoot = ref<HTMLElement | null>(null);
+  const { activeId } = useScrollspy({ root: spyRoot, offset: 120, history: false, mode: "single" });
+
+  // Flatten toc links for lookup
+  function flattenLinks(links: TocLink[]): TocLink[] {
+    return links.flatMap((l) => [l, ...(l.children ? flattenLinks(l.children) : [])]);
+  }
+
+  const activeHeadingText = computed(() => {
+    if (!toc.value?.links) return null;
+    const flat = flattenLinks(toc.value.links);
+    // Fall back to the first heading when the scrollspy hasn't fired yet
+    // (hard reload at top of page, or immediately after navigation).
+    const id = activeId.value ?? flat[0]?.id;
+    return flat.find((l) => l.id === id)?.text ?? null;
+  });
+
+  // --- Scroll progress ---
+  const scrollProgress = ref(0);
+  const circumference = 2 * Math.PI * 7;
+
+  if (import.meta.client) {
+    const updateProgress = () => {
+      const docH = document.documentElement.scrollHeight;
+      const winH = window.innerHeight;
+      const max = docH - winH;
+      scrollProgress.value = max > 0 ? Math.min(1, window.scrollY / max) : 0;
+    };
+
+    useEventListener(window, "scroll", updateProgress, { passive: true });
+    onMounted(updateProgress);
+  }
+
+  // --- Popover state ---
+  const isOpen = ref(false);
+
+  // Reset on navigation
+  const route = useRoute();
+  watch(
+    () => route.path,
+    () => {
+      isOpen.value = false;
+      scrollProgress.value = 0;
+    }
+  );
+
+  function onContentClick(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (target.closest("a")) {
+      isOpen.value = false;
+    }
+  }
+</script>

package/app/components/page/PageToc.vue

@@ -0,0 +1,33 @@
+<template>
+  <aside
+    v-if="toc && toc.links && toc.links.length && !page?.hideToc"
+    class="sticky top-14 z-20 hidden h-[calc(100dvh-calc(var(--header-height)+20px))] xl:block"
+  >
+    <UiScrollArea type="auto" class="h-full">
+      <div class="flex flex-col gap-5 p-5">
+        <div class="flex items-center gap-2.5 text-muted-foreground">
+          <Icon :name="tocIcon" class="size-4" />
+          <p class="text-sm font-semibold">{{ tocTitle }}</p>
+        </div>
+        <UiScrollspy smooth mode="multiple" :offset="80">
+          <DocsTocRail>
+            <DocsToclink :links="toc.links" />
+          </DocsTocRail>
+        </UiScrollspy>
+
+        <p class="text-sm font-semibold">Extra stuff</p>
+        <DocsExtraStuff />
+      </div>
+    </UiScrollArea>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+  const { page } = await useDocPage();
+  const { tocTitle, tocIcon } = useDocd();
+
+  const toc = computed(() => {
+    if (!page.value) return;
+    return page.value?.body?.toc;
+  });
+</script>

package/app/composables/useDefaultSlotItems.ts

@@ -0,0 +1,90 @@
+import { Comment, computed, Fragment, getCurrentInstance, isVNode } from "vue";
+import type { Slots, VNode, VNodeArrayChildren } from "vue";
+
+type SlotMetaContext = {
+  vnode: VNode;
+  index: number;
+  props: Record<string, any>;
+};
+
+export type SlotItem<TMeta = Record<string, any>> = {
+  vnode: VNode;
+  index: number;
+  key: VNode["key"];
+  props: Record<string, any>;
+  meta: TMeta;
+};
+
+export type UseDefaultSlotItemsOptions<TMeta> = {
+  slots?: Slots;
+  filter?: (ctx: SlotMetaContext) => boolean;
+  mapMeta?: (ctx: SlotMetaContext) => TMeta;
+};
+
+/**
+ * Composable to extract and manage items from the default slot
+ */
+export function useDefaultSlotItems<TMeta = Record<string, any>>(
+  options: UseDefaultSlotItemsOptions<TMeta> = {}
+) {
+  const instance = getCurrentInstance();
+  const slots = options.slots ?? instance?.slots;
+
+  const items = computed<SlotItem<TMeta>[]>(() => {
+    const rawChildren = slots?.default?.() ?? [];
+    const nodes = flattenVNodes(rawChildren);
+
+    return nodes
+      .map((vnode, index) => {
+        const props = (vnode.props ?? {}) as Record<string, any>;
+        const ctx: SlotMetaContext = { vnode, index, props };
+
+        if (options.filter && !options.filter(ctx)) {
+          return undefined;
+        }
+
+        return {
+          vnode,
+          index,
+          key: vnode.key ?? index,
+          props,
+          meta: options.mapMeta ? options.mapMeta(ctx) : (props as TMeta),
+        };
+      })
+      .filter(Boolean) as SlotItem<TMeta>[];
+  });
+
+  return {
+    items,
+    first: computed(() => items.value[0]),
+    find: (predicate: (item: SlotItem<TMeta>) => boolean) => items.value.find(predicate),
+  };
+}
+
+function flattenVNodes(children: VNodeArrayChildren, acc: VNode[] = []): VNode[] {
+  children.forEach((child) => {
+    if (!child) return;
+
+    if (Array.isArray(child)) {
+      flattenVNodes(child, acc);
+      return;
+    }
+
+    if (!isVNode(child)) {
+      return;
+    }
+
+    if (child.type === Comment) {
+      return;
+    }
+
+    if (child.type === Fragment && Array.isArray(child.children)) {
+      flattenVNodes(child.children as VNodeArrayChildren, acc);
+      return;
+    }
+
+    acc.push(child);
+  });
+
+  return acc;
+}

package/app/composables/useDocPage.ts

@@ -0,0 +1,66 @@
+import type { Collections, ContentNavigationItem } from "@nuxt/content";
+import { findPageHeadline } from "@nuxt/content/utils";
+import { kebabCase } from "lodash-es";
+
+export const useSearchModal = () => useState("docSearchModal", () => false);
+
+export const useDocPage = async () => {
+  const route = useRoute();
+  const isLandingRoute = route.path === "/";
+
+  const [{ data: page }, { data: surround }, { data: navigation }] = await Promise.all([
+    useAsyncData(
+      kebabCase(route.path),
+      () =>
+        isLandingRoute
+          ? queryCollection("landing" as keyof Collections)
+              .path(route.path)
+              .first()
+          : queryCollection("docs" as keyof Collections)
+              .path(route.path)
+              .first(),
+      { watch: [() => route.path] }
+    ),
+    useAsyncData(
+      `${kebabCase(route.path)}-surround`,
+      () => {
+        if (isLandingRoute) {
+          return Promise.resolve(null);
+        }
+
+        return queryCollectionItemSurroundings("docs" as keyof Collections, route.path, {
+          fields: ["title", "description", "path"],
+        }).where("path", "NOT LIKE", "%/.navigation");
+      },
+      { watch: [() => route.path] }
+    ),
+    useAsyncData(
+      () => `navigation_docs`,
+      () => queryCollectionNavigation("docs" as keyof Collections),
+      {
+        watch: [() => route.path],
+        transform: (data: ContentNavigationItem[]) =>
+          data.find((item) => item.path === "/docs")?.children || data,
+      }
+    ),
+  ]);
+
+  /**
+   * The headline for the current page, derived from the navigation structure.
+   */
+  const headline = ref(findPageHeadline(navigation?.value, page.value?.path));
+  /**
+   * The breadcrumbs for the current page, derived from the navigation structure.
+   */
+  const breadcrumbs = computed(() =>
+    findPageBreadcrumbs(navigation?.value, page.value?.path || "")
+  );
+  /**
+   * The previous and next pages in the collection, if available.
+   */
+  const prev = computed(() => surround.value?.[0]);
+  /** The next page in the collection, if available. */
+  const next = computed(() => surround.value?.[1]);
+
+  return { page, surround, navigation, headline, breadcrumbs, prev, next };
+};

package/app/composables/useDocSearch.ts

@@ -0,0 +1,23 @@
+export interface DocSearchSection {
+  id: string;
+  title: string;
+  titles: string[];
+  level: number;
+  content: string;
+}
+
+const SEARCH_SECTION_IGNORED_TAGS = ["code", "pre"];
+
+export function useDocSearchSections() {
+  return useLazyAsyncData(
+    "docd-search-sections",
+    () =>
+      queryCollectionSearchSections("docs" as never, {
+        ignoredTags: SEARCH_SECTION_IGNORED_TAGS,
+      }) as Promise<DocSearchSection[]>,
+    {
+      server: false,
+      default: () => [],
+    }
+  );
+}

package/app/composables/useDocd.ts

@@ -0,0 +1,107 @@
+import type { DocdConfig, DocdGithubConfig } from "../app.config";
+import {
+  ANIMATE_IDENTITY,
+  transitionPresets,
+  type DocdTransitionName,
+  type TransitionStates,
+} from "../transitions/presets";
+
+export function useDocd() {
+  const appConfig = useAppConfig();
+  const route = useRoute();
+  const direction = useState<"forward" | "back">("nav-direction", () => "forward");
+
+  /* =====================================
+  =               UI                     =
+  ===================================== */
+  const borderType = useUIConfig("borderType");
+  const isDashed = computed(() => borderType.value === "dashed");
+  const extraLinks = useUIConfig("extraLinks");
+  const github = computed(
+    () => ((appConfig.docd as DocdConfig | undefined)?.github ?? {}) as DocdGithubConfig
+  );
+
+  /* =====================================
+  =               Footer                 =
+  ===================================== */
+  const footer = useUIConfig("footer");
+  const hideThemeCustomizer = computed(() => footer.value?.hideThemeCustomizer ?? false);
+  const hideLightDarkToggle = computed(() => footer.value?.hideLightDarkToggle ?? false);
+
+  /* =====================================
+  =               Header                 =
+  ===================================== */
+  const header = useUIConfig("header");
+  const headerTitle = computed(() => header.value.title ?? "");
+  const hideSearch = computed(() => header.value.hideSearch ?? false);
+
+  /* =====================================
+  =               Logo                   =
+  ===================================== */
+  const logo = computed(() => header.value.logo);
+  const lightLogo = computed(() => logo.value?.light);
+  const darkLogo = computed(() => logo.value?.dark);
+  const logoAlt = computed(() => logo.value?.alt ?? "Logo");
+  const logoClasses = computed(() => logo.value?.classes ?? "");
+  const logoUrl = computed(() => logo.value?.url ?? "/");
+
+  /* =====================================
+  =               ToC                    =
+  ===================================== */
+  const toc = useUIConfig("toc");
+  const tocTitle = computed(() => toc.value.title ?? "On this page");
+  const tocIcon = computed(() => toc.value.icon ?? "lucide:list");
+
+  /* =====================================
+  =               Transition             =
+  ===================================== */
+  const transitionConfig = useUIConfig("transition");
+
+  const pageMeta = computed(() => route.meta?.pageTransition as DocdTransitionName | undefined);
+
+  const activeName = computed<DocdTransitionName>(
+    () => pageMeta.value ?? (transitionConfig.value.name as DocdTransitionName) ?? "fade"
+  );
+
+  const preset = computed<TransitionStates>(() => {
+    const base = transitionPresets[activeName.value] ?? transitionPresets.rightToLeft;
+    if (direction.value === "back") {
+      return { initial: base.exit, exit: base.initial };
+    }
+    return base;
+  });
+
+  const duration = computed(() => transitionConfig.value.duration ?? 0.35);
+  const easing = computed(() => transitionConfig.value.easing ?? "easeOut");
+
+  return {
+    // ui
+    header,
+    headerTitle,
+    borderType,
+    isDashed,
+    extraLinks,
+    github,
+    hideSearch,
+    // transition
+    activeName,
+    preset,
+    animate: ANIMATE_IDENTITY,
+    duration,
+    easing,
+    // logo
+    logo,
+    lightLogo,
+    darkLogo,
+    logoAlt,
+    logoClasses,
+    logoUrl,
+    // ToC
+    toc,
+    tocTitle,
+    tocIcon,
+    // footer
+    hideThemeCustomizer,
+    hideLightDarkToggle,
+  };
+}