@baybreezy/docd 0.0.1

package/app/components/docs/DocsThemeToggler.vue

@@ -0,0 +1,98 @@
+<template>
+  <UiTooltip>
+    <UiTooltipTrigger as-child>
+      <button
+        ref="toggler"
+        :class="
+          buttonStyles({
+            variant: 'ghost',
+            size: 'icon-sm',
+          })
+        "
+        @click="toggleTheme"
+      >
+        <ClientOnly>
+          <template #fallback>
+            <Icon name="svg-spinners:180-ring-with-bg" />
+          </template>
+          <Icon :name="iconName" />
+        </ClientOnly>
+      </button>
+    </UiTooltipTrigger>
+    <UiTooltipContent> Toggle theme </UiTooltipContent>
+  </UiTooltip>
+</template>
+<script lang="ts" setup>
+  import { buttonStyles } from "../Ui/Button.vue";
+
+  const colorMode = useColorMode();
+  const buttonRef = useTemplateRef("toggler");
+  const iconName = computed(() => {
+    switch (colorMode.value) {
+      case "light":
+        return "lucide:sun-medium";
+      case "dark":
+        return "lucide:moon";
+      default:
+        return "lucide:sun-medium";
+    }
+  });
+
+  const props = withDefaults(
+    defineProps<{
+      duration?: number;
+    }>(),
+    {
+      duration: 400,
+    }
+  );
+
+  const toggleTheme = () => {
+    const button = buttonRef.value;
+    if (!button) return;
+    const { top, left, width, height } = button.getBoundingClientRect();
+    const x = left + width / 2;
+    const y = top + height / 2;
+    const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+    const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+    const maxRadius = Math.hypot(Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y));
+    const newTheme = colorMode.value === "light" ? "dark" : "light";
+    const applyTheme = () => {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+      colorMode.preference = newTheme;
+    };
+    if (typeof document.startViewTransition !== "function") {
+      applyTheme();
+      return;
+    }
+    const transition = document.startViewTransition(applyTheme);
+    const ready = transition?.ready;
+    if (ready && typeof ready.then === "function") {
+      ready.then(() => {
+        document.documentElement.animate(
+          {
+            clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`],
+          },
+          {
+            duration: props.duration,
+            easing: "ease-in-out",
+            pseudoElement: "::view-transition-new(root)",
+          }
+        );
+      });
+    }
+  };
+</script>
+<style>
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+  }
+  ::view-transition-new(root) {
+    z-index: 9999;
+  }
+  ::view-transition-old(root) {
+    z-index: 1;
+  }
+</style>

package/app/components/docs/DocsTocRail.vue

@@ -0,0 +1,162 @@
+<template>
+  <div ref="wrap" class="relative pl-7">
+    <DocsZigZagRail
+      v-if="railHeight > 0 && pathD"
+      :height="railHeight"
+      :path-d="pathD"
+      :segments="segments"
+      :width="WIDTH"
+      :dashed="isDashed"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  type RailSegment = {
+    top: number;
+    height: number;
+  };
+
+  const { isDashed } = useDocd();
+  const wrap = ref<HTMLElement | null>(null);
+
+  const railHeight = ref(0);
+  const segments = ref<RailSegment[]>([]);
+  const pathD = ref("");
+
+  const WIDTH = 20;
+  const X_OUTER = 1;
+  const X_INNER_MAX = WIDTH - 1;
+
+  const rafMeasure = () => requestAnimationFrame(measure);
+
+  const measure = () => {
+    const el = wrap.value;
+    if (!el) return;
+
+    const links = Array.from(el.querySelectorAll<HTMLElement>('[data-toc-link="true"]'));
+    if (!links.length) {
+      railHeight.value = 0;
+      segments.value = [];
+      pathD.value = "";
+      return;
+    }
+
+    const last = links[links.length - 1]!;
+    railHeight.value = Math.ceil(last.offsetTop + last.offsetHeight);
+    pathD.value = buildDepthPath(links, railHeight.value);
+    segments.value = buildSegments(links);
+  };
+
+  function buildSegments(links: HTMLElement[]) {
+    const nextSegments: RailSegment[] = [];
+
+    let rangeStart = -1;
+    let rangeEnd = -1;
+
+    const pushRange = () => {
+      if (rangeStart === -1 || rangeEnd === -1) return;
+
+      const startEl = links[rangeStart]!;
+      const endEl = links[rangeEnd]!;
+      const top = Math.max(0, startEl.offsetTop);
+      const bottom = endEl.offsetTop + endEl.offsetHeight;
+
+      nextSegments.push({
+        top,
+        height: Math.max(0, bottom - top),
+      });
+
+      rangeStart = -1;
+      rangeEnd = -1;
+    };
+
+    links.forEach((link, index) => {
+      const isActive = link.getAttribute("data-active") === "true";
+      if (!isActive) {
+        pushRange();
+        return;
+      }
+
+      if (rangeStart === -1) {
+        rangeStart = index;
+      }
+
+      rangeEnd = index;
+    });
+
+    pushRange();
+
+    return nextSegments;
+  }
+
+  function buildDepthPath(els: HTMLElement[], height: number) {
+    const items = els.map((node) => {
+      const top = Math.round(node.offsetTop);
+      const h = Math.round(node.offsetHeight || 0);
+      const y = top + Math.round(h / 2);
+      return { y, depth: Number(node.dataset.depth ?? "0") };
+    });
+
+    const depths = items.map((i) => i.depth);
+    const baseDepth = Math.min(...depths);
+    const maxDepth = Math.max(...depths);
+    const levels = Math.max(1, maxDepth - baseDepth);
+
+    const indentStep = (X_INNER_MAX - X_OUTER) / levels;
+
+    const xForDepth = (depth: number) => {
+      const idx = Math.max(0, depth - baseDepth);
+      const x = X_OUTER + idx * indentStep;
+      return Math.round(Math.min(X_INNER_MAX, Math.max(X_OUTER, x)));
+    };
+
+    const CURVE_SPAN = 8;
+
+    const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+
+    let x = xForDepth(items[0]?.depth ?? baseDepth);
+    let yPrev = 0;
+
+    let d = `M ${x} 0`;
+
+    for (let i = 0; i < items.length; i++) {
+      const y = clamp(items[i]!.y, 0, height);
+      const xNext = xForDepth(items[i]!.depth);
+
+      if (xNext === x) {
+        if (y > yPrev) d += ` L ${x} ${y}`;
+        yPrev = Math.max(yPrev, y);
+        continue;
+      }
+
+      const y0 = clamp(y - CURVE_SPAN, yPrev, height);
+      const midY = (y0 + y) / 2;
+
+      if (y0 > yPrev) d += ` L ${x} ${y0}`;
+      d += ` C ${x} ${midY} ${xNext} ${midY} ${xNext} ${y}`;
+
+      x = xNext;
+      yPrev = y;
+    }
+
+    if (height > yPrev) d += ` L ${x} ${height}`;
+    return d;
+  }
+
+  onMounted(async () => {
+    await nextTick();
+    measure();
+  });
+
+  useMutationObserver(wrap, () => rafMeasure(), {
+    subtree: true,
+    attributes: true,
+    childList: true,
+    attributeFilter: ["data-active", "class", "style"],
+  });
+
+  useResizeObserver(wrap, () => rafMeasure());
+  useEventListener(window, "resize", () => rafMeasure());
+</script>

package/app/components/docs/DocsToclink.vue

@@ -0,0 +1,52 @@
+<template>
+  <ClientOnly>
+    <nav class="flex flex-col gap-2 text-sm">
+      <template v-for="(l, i) in links" :key="i">
+        <NuxtLink
+          v-if="!l.children"
+          data-toc-link="true"
+          :data-depth="l.depth"
+          class="data-[active=true]:decoration-muted-primary line-clamp-1 text-muted-foreground transition-all hover:text-primary data-[active=true]:text-primary"
+          :title="l.text"
+          :style="{ marginLeft: `${l.depth > 2 ? l.depth * 2 : 0}${isMobile ? 'px' : '%'}` }"
+          :to="`#${l.id}`"
+          :data-scrollspy-anchor="l.id"
+        >
+          {{ l.text }}
+        </NuxtLink>
+
+        <div v-else class="flex flex-col gap-2 text-sm">
+          <NuxtLink
+            data-toc-link="true"
+            :data-depth="l.depth"
+            class="data-[active=true]:decoration-muted-primary line-clamp-1 text-muted-foreground transition-all hover:text-primary data-[active=true]:text-primary"
+            :title="l.text"
+            :to="`#${l.id}`"
+            :data-scrollspy-anchor="l.id"
+          >
+            {{ l.text }}
+          </NuxtLink>
+
+          <DocsToclink :links="l.children" />
+        </div>
+      </template>
+    </nav>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+  import { breakpointsTailwind } from "@vueuse/core";
+  type Toclink = {
+    text: string;
+    id: string;
+    depth: number;
+    children?: Toclink[];
+  };
+
+  defineProps<{
+    links: Toclink[];
+  }>();
+
+  const bp = useBreakpoints(breakpointsTailwind);
+  const isMobile = bp.smaller("xl");
+</script>

package/app/components/docs/DocsZigZagRail.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="absolute inset-s-0 top-0 rtl:-scale-x-100" :style="containerStyle">
+    <div class="absolute inset-0 bg-foreground/20" :style="trackMaskStyle" />
+
+    <div class="absolute inset-0" :style="segmentMaskStyle">
+      <div
+        v-for="(segment, index) in props.segments"
+        :key="index"
+        class="absolute w-full bg-primary transition-[top,height] duration-200 ease-out"
+        :style="{ top: `${segment.top}px`, height: `${segment.height}px` }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+
+  type RailSegment = {
+    top: number;
+    height: number;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      height: number;
+      pathD: string;
+      segments: RailSegment[];
+      width?: number;
+      dashed?: boolean;
+    }>(),
+    { width: 12, dashed: false }
+  );
+
+  function buildMaskUrl(dashed: boolean) {
+    const h = Math.max(1, Math.round(props.height));
+    const dashAttr = dashed ? ` stroke-dasharray="3 3"` : "";
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${props.width} ${h}">
+    <path d="${props.pathD}" stroke="black" stroke-width="1" fill="none"${dashAttr}/>
+  </svg>`;
+
+    const encoded = encodeURIComponent(svg)
+      .replace(/%20/g, " ")
+      .replace(/%3D/g, "=")
+      .replace(/%3A/g, ":")
+      .replace(/%2F/g, "/")
+      .replace(/%2C/g, ",");
+
+    return `url("data:image/svg+xml,${encoded}")`;
+  }
+
+  function maskStyle(dashed: boolean) {
+    return {
+      WebkitMaskImage: buildMaskUrl(dashed),
+      maskImage: buildMaskUrl(dashed),
+      WebkitMaskRepeat: "no-repeat",
+      maskRepeat: "no-repeat",
+      WebkitMaskSize: "100% 100%",
+      maskSize: "100% 100%",
+    };
+  }
+
+  const containerStyle = computed(() => ({
+    width: `${props.width}px`,
+    height: `${props.height}px`,
+  }));
+
+  const trackMaskStyle = computed(() => maskStyle(props.dashed));
+  const segmentMaskStyle = computed(() => maskStyle(false));
+</script>

package/app/components/landing/Hero.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="relative bg-background">
+    <!-- Navbar — outside overflow-hidden so sticky works -->
+    <nav
+      class="sticky top-4 isolate z-50 container mx-auto rounded-md border border-border/60 bg-background/80 shadow-xs backdrop-blur-md"
+    >
+      <div class="flex h-14 items-center gap-4">
+        <!-- Logo -->
+        <slot name="logo">
+          <NuxtLink :to="logoHref" class="flex shrink-0 items-center gap-2">
+            <slot name="logo-icon">
+              <template v-if="logoLight || logoDark">
+                <img
+                  v-if="logoLight"
+                  :src="logoLight"
+                  alt="Light Logo"
+                  class="h-6 w-auto rounded border border-border/50 dark:hidden"
+                />
+                <img
+                  v-if="logoDark"
+                  :src="logoDark"
+                  alt="Dark Logo"
+                  class="hidden h-6 w-auto rounded border border-border/50 dark:block"
+                />
+              </template>
+            </slot>
+            <span v-if="siteName" class="text-sm font-semibold">{{ siteName }}</span>
+          </NuxtLink>
+        </slot>
+
+        <!-- Nav links (desktop) -->
+        <div
+          v-if="navLinks?.length"
+          class="hidden flex-1 items-center justify-center gap-0.5 md:flex"
+        >
+          <template v-for="link in navLinks" :key="link.label">
+            <UiButton
+              variant="ghost"
+              size="sm"
+              :to="link.href"
+              class="gap-1 text-sm text-muted-foreground hover:text-foreground"
+            >
+              {{ link.label }}
+              <Icon
+                v-if="link.children?.length"
+                name="lucide:chevron-down"
+                class="size-3.5 opacity-60"
+              />
+            </UiButton>
+          </template>
+        </div>
+        <div v-else class="flex-1" />
+
+        <!-- Auth CTAs (desktop) -->
+        <div class="hidden shrink-0 items-center gap-2 md:flex">
+          <slot name="nav-actions">
+            <DocsThemeCustomizer />
+            <DocsSearchButton />
+            <UiButton v-if="logInHref" variant="ghost" size="sm" :to="logInHref">
+              {{ logInLabel }}
+            </UiButton>
+            <UiButton v-if="signUpHref" size="sm" :to="signUpHref">
+              {{ signUpLabel }}
+            </UiButton>
+          </slot>
+        </div>
+
+        <!-- Mobile actions -->
+        <slot name="nav-mobile-trigger">
+          <div class="ml-auto flex items-center gap-1 md:hidden">
+            <DocsThemeCustomizer />
+            <DocsSearchButton />
+            <UiButton
+              variant="ghost"
+              size="icon-sm"
+              class="size-7"
+              aria-label="Open navigation"
+              @click="mobileNavOpen = true"
+            >
+              <Icon name="lucide:menu" class="size-4" />
+            </UiButton>
+          </div>
+        </slot>
+      </div>
+    </nav>
+
+    <DocsMobileNav v-model:open="mobileNavOpen" />
+
+    <!-- Hero body — overflow-hidden scoped here so it doesn't trap sticky nav -->
+    <section class="relative overflow-hidden">
+      <UiBgPatternGrid
+        size="lg"
+        class="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2"
+      />
+
+      <!-- Hero content -->
+      <UiContainer class="isolate pt-20 pb-12 text-center sm:pt-24">
+        <!-- Badge -->
+        <slot name="badge">
+          <div v-if="badge" class="mb-8 flex justify-center">
+            <NuxtLink :to="badge.href ?? '#'">
+              <UiBadgeGroup size="lg" :addon-text="badge.label" theme="modern" pulse>
+                {{ badge.text }}
+              </UiBadgeGroup>
+            </NuxtLink>
+          </div>
+        </slot>
+
+        <!-- Headline -->
+        <h1
+          class="mx-auto max-w-3xl text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl"
+        >
+          <slot name="headline">{{ headline }}</slot>
+        </h1>
+
+        <!-- Description -->
+        <p
+          v-if="description"
+          class="mx-auto mt-5 max-w-3xl text-lg text-balance text-muted-foreground"
+        >
+          <slot name="description">{{ description }}</slot>
+        </p>
+
+        <!-- CTAs -->
+        <slot name="ctas">
+          <div
+            v-if="primaryCta || secondaryCta"
+            class="mt-10 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-center"
+          >
+            <UiButton
+              v-if="primaryCta"
+              size="lg"
+              :to="primaryCta.href"
+              class="order-1 w-full sm:order-2 sm:w-auto"
+            >
+              <Icon v-if="primaryCta.icon" :name="primaryCta.icon" class="size-4" />
+              {{ primaryCta.label }}
+            </UiButton>
+            <UiButton
+              v-if="secondaryCta"
+              variant="secondary"
+              size="lg"
+              :to="secondaryCta.href"
+              class="order-2 w-full sm:order-1 sm:w-auto"
+            >
+              <Icon v-if="secondaryCta.icon" :name="secondaryCta.icon" class="size-4" />
+              {{ secondaryCta.label }}
+            </UiButton>
+          </div>
+        </slot>
+      </UiContainer>
+
+      <!-- Mockup frame -->
+      <div v-if="iframe" class="isolate pb-24">
+        <UiContainer class="bg-background">
+          <UiIframeLazy v-bind="iframe" />
+        </UiContainer>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { HTMLAttributes } from "vue";
+
+  export type HeroNavLink = {
+    label: string;
+    href?: string;
+    children?: HeroNavLink[];
+  };
+
+  export type HeroBadge = {
+    label: string;
+    text: string;
+    href?: string;
+  };
+
+  export type HeroCta = {
+    label: string;
+    href?: string;
+    icon?: string;
+  };
+
+  export type HeroIframeProps = {
+    src?: string;
+    class?: HTMLAttributes["class"];
+    iframeClass?: HTMLAttributes["class"];
+    loading?: "lazy" | "eager";
+    placeholder?: boolean;
+    rootMargin?: string;
+    threshold?: number | number[];
+    disableScroll?: boolean;
+  };
+
+  const mobileNavOpen = ref(false);
+
+  withDefaults(
+    defineProps<{
+      siteName?: string;
+      logoHref?: string;
+      logoLight?: string;
+      logoDark?: string;
+      navLinks?: HeroNavLink[];
+      logInHref?: string;
+      logInLabel?: string;
+      signUpHref?: string;
+      signUpLabel?: string;
+      badge?: HeroBadge;
+      headline?: string;
+      description?: string;
+      primaryCta?: HeroCta;
+      secondaryCta?: HeroCta;
+      iframe?: HeroIframeProps;
+    }>(),
+    {
+      logoHref: "/",
+      logInLabel: "Log in",
+      signUpLabel: "Sign up",
+      navLinks: () => [],
+    }
+  );
+</script>

package/app/components/page/PageFooter.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="not-prose @container mt-10 py-10">
+    <div class="grid grid-cols-1 gap-5 @min-[600px]:grid-cols-2">
+      <NuxtLink
+        v-if="prev"
+        :to="prev.path"
+        class="flex gap-4 rounded-md border p-5 transition hover:border-primary"
+        :class="isDashed ? 'border-dashed' : ''"
+      >
+        <UiFancyIcon
+          theme="modern-neue"
+          icon="lucide:arrow-left"
+          size="md"
+          class="text-foreground/80"
+        />
+        <div class="flex flex-col gap-1">
+          <p class="font-semibold lg:text-sm">{{ prev.title }}</p>
+          <p class="line-clamp-2 text-[15px] text-ellipsis text-muted-foreground lg:text-sm">
+            {{ prev.description }}
+          </p>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        v-if="next"
+        :to="next.path"
+        class="flex justify-between gap-4 rounded-md border p-5 transition hover:border-primary"
+        :class="isDashed ? 'border-dashed' : ''"
+      >
+        <div class="flex flex-col gap-1">
+          <p class="font-semibold lg:text-sm">{{ next.title }}</p>
+          <p class="line-clamp-2 text-[15px] text-ellipsis text-muted-foreground lg:text-sm">
+            {{ next.description }}
+          </p>
+        </div>
+        <UiFancyIcon
+          theme="modern-neue"
+          icon="lucide:arrow-right"
+          size="md"
+          class="text-foreground/80"
+        />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const { prev, next } = await useDocPage();
+  const { isDashed } = useDocd();
+</script>