shipd 0.1.0

package/docs-template/components/docs/docs-code-card.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import { Copy, Check } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+
+export type DocsCodeVariant = "terminal" | "env" | "code";
+
+export type DocsCodeCardProps = {
+  title: string;
+  description?: string;
+  variant: DocsCodeVariant;
+  code: string;
+};
+
+function TokenizedTerminalLine({ line }: { line: string }) {
+  if (!line.startsWith("$")) {
+    return <span className="text-white/80">{line}</span>;
+  }
+
+  const rest = line.replace(/^\$\s?/, "");
+  const [cmd, ...args] = rest.split(" ");
+  const cmdColor =
+    cmd === "npx" || cmd === "npm" || cmd === "pnpm" || cmd === "yarn"
+      ? "text-[#ff7043]"
+      : "text-white/80";
+
+  return (
+    <>
+      <span className="text-emerald-400">$</span>
+      <span className="text-white/80"> </span>
+      <span className={cmdColor}>{cmd}</span>
+      {args.length ? <span className="text-white/80"> {args.join(" ")}</span> : null}
+    </>
+  );
+}
+
+function TokenizedEnvLine({ line }: { line: string }) {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith("#")) {
+    return <span className="text-white/45">{line}</span>;
+  }
+  const idx = line.indexOf("=");
+  if (idx === -1) return <span className="text-white/80">{line}</span>;
+  const key = line.slice(0, idx);
+  const value = line.slice(idx + 1);
+  return (
+    <>
+      <span className="text-white/80">{key}</span>
+      <span className="text-white/50">=</span>
+      <span className="text-emerald-200">{value}</span>
+    </>
+  );
+}
+
+function CodeBody({ variant, code }: { variant: DocsCodeVariant; code: string }) {
+  const lines = code.replace(/\n$/, "").split("\n");
+
+  return (
+    <pre className="overflow-x-auto rounded-lg border border-white/10 bg-black/40 p-3 text-[13px] leading-6">
+      <code className="font-mono">
+        {lines.map((line, i) => (
+          <div key={i}>
+            {variant === "terminal" ? (
+              <TokenizedTerminalLine line={line} />
+            ) : variant === "env" ? (
+              <TokenizedEnvLine line={line} />
+            ) : (
+              <span className="text-white/80">{line}</span>
+            )}
+          </div>
+        ))}
+      </code>
+    </pre>
+  );
+}
+
+export default function DocsCodeCard({ title, description, variant, code }: DocsCodeCardProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+      return;
+    } catch {
+      // Fallback for older browsers / permission issues
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = code;
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        document.body.removeChild(ta);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1200);
+      } catch {
+        // If copy fails silently, we just don't show "Copied"
+      }
+    }
+  }
+
+  return (
+    <Card className="bg-white/5 border-white/10 shadow-none">
+      <CardContent className="px-6">
+        <div className="pt-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="text-sm font-semibold text-white">{title}</div>
+              {description ? <p className="mt-1.5 text-sm text-white/60 leading-relaxed">{description}</p> : null}
+            </div>
+
+            <button
+              type="button"
+              onClick={copyToClipboard}
+              className="shrink-0 inline-flex items-center gap-2 rounded-md border border-white/10 bg-black/30 px-3 py-1.5 text-xs font-medium text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+              aria-label={copied ? "Copied" : "Copy snippet"}
+            >
+              {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+          <div className="mt-4">
+            <CodeBody variant={variant} code={code} />
+          </div>
+        </div>
+        <div className="pb-4" />
+      </CardContent>
+    </Card>
+  );
+}
+

package/docs-template/components/docs/docs-header.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import DocsSidebar from "./docs-sidebar";
+
+export default function DocsHeader() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/80 backdrop-blur">
+      <div className="mx-auto max-w-[1400px] px-4 sm:px-6">
+        <div className="flex h-14 items-center gap-3">
+          <div className="flex items-center gap-2">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="sm" className="md:hidden text-white/80 hover:text-white">
+                  Menu
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="p-0">
+                <DocsSidebar />
+              </SheetContent>
+            </Sheet>
+
+            <Link href="/docs" className="flex items-center gap-2">
+              <div className="h-7 w-7 rounded-md bg-white/10 ring-1 ring-white/15 flex items-center justify-center">
+                <span className="text-sm font-semibold text-white">S</span>
+              </div>
+              <span className="font-medium text-white">shipd</span>
+            </Link>
+          </div>
+
+          <div className="hidden lg:flex items-center gap-5 ml-6 text-sm text-white/70">
+            <button type="button" className="hover:text-white transition-colors">
+              Products
+            </button>
+            <button type="button" className="hover:text-white transition-colors">
+              Resources
+            </button>
+            <button type="button" className="hover:text-white transition-colors">
+              Solutions
+            </button>
+            <button type="button" className="hover:text-white transition-colors">
+              Enterprise
+            </button>
+            <button type="button" className="hover:text-white transition-colors">
+              Pricing
+            </button>
+          </div>
+
+          <div className="ml-auto flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/70">
+              <Search className="h-4 w-4" />
+              <span className="whitespace-nowrap">Search Documentation</span>
+              <span className="ml-2 rounded border border-white/10 bg-black/40 px-1.5 py-0.5 text-[11px] text-white/60">
+                ⌘ K
+              </span>
+            </div>
+            <Button variant="ghost" size="sm" className="text-white/80 hover:text-white">
+              Ask AI
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+

package/docs-template/components/docs/docs-nav.ts

@@ -0,0 +1,95 @@
+export type DocsNavItem = {
+  title: string;
+  href?: string;
+  items?: DocsNavItem[];
+};
+
+export const docsNav: DocsNavItem[] = [
+  {
+    title: "Docs",
+    items: [
+      { title: "Introduction", href: "/docs" },
+      { title: "Documentation", href: "/docs/documentation" },
+      { title: "Production Checklist", href: "/docs/production-checklist" },
+      { title: "Knowledge Base", href: "/docs/knowledge-base" },
+    ],
+  },
+  {
+    title: "Packages",
+    items: [
+      {
+        title: "Authentication",
+        href: "/docs/authentication",
+        items: [
+          { title: "Better Auth", href: "/docs/authentication/better-auth" },
+          { title: "Supabase Auth", href: "/docs/authentication/supabase-auth" },
+          { title: "NextAuth", href: "/docs/authentication/nextauth" },
+        ],
+      },
+      {
+        title: "Payments",
+        href: "/docs/payments",
+        items: [
+          { title: "Stripe", href: "/docs/payments/stripe" },
+          { title: "Lemon Squeezy", href: "/docs/payments/lemon-squeezy" },
+          { title: "Polar", href: "/docs/payments/polar" },
+        ],
+      },
+      {
+        title: "Emails",
+        href: "/docs/emails",
+        items: [
+          { title: "Resend", href: "/docs/emails/resend" },
+          { title: "Mailgun", href: "/docs/emails/mailgun" },
+          { title: "Inbound webhooks", href: "/docs/emails/inbound-webhooks" },
+          { title: "DNS (DKIM/DMARC/SPF)", href: "/docs/emails/dns" },
+        ],
+      },
+      {
+        title: "Database",
+        href: "/docs/database",
+        items: [
+          { title: "Supabase Postgres", href: "/docs/database/supabase-postgres" },
+          { title: "Neon Postgres", href: "/docs/database/neon-postgres" },
+          { title: "MongoDB", href: "/docs/database/mongodb" },
+          { title: "Schema & migrations", href: "/docs/database/schema-migrations" },
+        ],
+      },
+      {
+        title: "SEO",
+        href: "/docs/seo",
+        items: [
+          { title: "Blog starter", href: "/docs/seo/blog" },
+          { title: "Meta tags", href: "/docs/seo/meta-tags" },
+          { title: "OpenGraph", href: "/docs/seo/opengraph" },
+          { title: "Sitemap", href: "/docs/seo/sitemap" },
+          { title: "Structured data", href: "/docs/seo/structured-data" },
+        ],
+      },
+      {
+        title: "Style",
+        href: "/docs/style",
+        items: [
+          { title: "Tailwind CSS", href: "/docs/style/tailwind" },
+          { title: "daisyUI themes", href: "/docs/style/daisyui" },
+          { title: "Automatic dark mode", href: "/docs/style/dark-mode" },
+          { title: "UI components", href: "/docs/style/ui-components" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Build & Deploy",
+    items: [
+      { title: "Build your applications", href: "/docs/build-your-applications" },
+      { title: "Deploy and scale", href: "/docs/deploy-and-scale" },
+    ],
+  },
+  {
+    title: "Security",
+    items: [
+      { title: "Secure your applications", href: "/docs/secure" },
+    ],
+  },
+];
+

package/docs-template/components/docs/docs-sidebar.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { docsNav } from "./docs-nav";
+
+function SidebarLink({ href, title, indent = 0 }: { href: string; title: string; indent?: number }) {
+  const pathname = usePathname();
+  const active = pathname === href;
+  return (
+    <Link
+      href={href}
+      className={[
+        "block rounded-md px-2 py-1.5 text-sm transition-colors",
+        active ? "bg-white/10 text-white" : "text-white/60 hover:text-white hover:bg-white/5",
+      ].join(" ")}
+      style={indent ? { paddingLeft: `${8 + indent * 12}px` } : undefined}
+    >
+      {title}
+    </Link>
+  );
+}
+
+function ExpandableItem({
+  title,
+  href,
+  items,
+}: {
+  title: string;
+  href: string;
+  items: { title: string; href: string }[];
+}) {
+  const pathname = usePathname();
+  const isInSection = pathname === href || pathname.startsWith(href + "/");
+  const [open, setOpen] = React.useState(isInSection);
+
+  React.useEffect(() => {
+    if (isInSection) setOpen(true);
+  }, [isInSection]);
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center">
+        <button
+          type="button"
+          aria-label={open ? `Collapse ${title}` : `Expand ${title}`}
+          onClick={() => setOpen((v) => !v)}
+          className="mr-1 rounded-md p-1 text-white/50 hover:text-white/80 hover:bg-white/5 transition-colors"
+        >
+          {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        </button>
+        <Link
+          href={href}
+          className={[
+            "flex-1 rounded-md px-2 py-1.5 text-sm transition-colors",
+            pathname === href ? "bg-white/10 text-white" : "text-white/60 hover:text-white hover:bg-white/5",
+          ].join(" ")}
+        >
+          {title}
+        </Link>
+      </div>
+
+      {open ? (
+        <div className="space-y-1">
+          {items.map((child) => (
+            <SidebarLink key={child.href} href={child.href} title={child.title} indent={1} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default function DocsSidebar() {
+  return (
+    <div className="h-full bg-black">
+      <div className="h-14 border-b border-white/10 flex items-center px-4">
+        <span className="text-sm font-medium text-white/80">Docs</span>
+      </div>
+
+      <div className="px-3 py-4 space-y-6 overflow-auto h-[calc(100vh-3.5rem)]">
+        {docsNav.map((section) => (
+          <div key={section.title} className="space-y-2">
+            <div className="px-2 text-xs font-semibold tracking-wide text-white/50">
+              {section.title}
+            </div>
+            <div className="space-y-1">
+              {(section.items || []).map((item) => {
+                if (!item.href) return null;
+                if (item.items && item.items.length > 0) {
+                  const children = item.items.filter((c) => !!c.href) as { title: string; href: string }[];
+                  return (
+                    <ExpandableItem
+                      key={item.href}
+                      title={item.title}
+                      href={item.href}
+                      items={children}
+                    />
+                  );
+                }
+                return <SidebarLink key={item.href} href={item.href} title={item.title} />;
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/docs-template/components/docs/docs-toc.tsx

@@ -0,0 +1,38 @@
+export type TocItem = {
+  id: string;
+  title: string;
+};
+
+export default function DocsToc({ items }: { items: TocItem[] }) {
+  if (!items.length) return null;
+
+  return (
+    <div className="pt-10">
+      <div className="text-xs font-semibold tracking-wide text-white/60 mb-3">On this page</div>
+      <nav className="space-y-2">
+        {items.map((item) => (
+          <a
+            key={item.id}
+            href={`#${item.id}`}
+            className="block text-sm text-white/60 hover:text-white transition-colors"
+          >
+            {item.title}
+          </a>
+        ))}
+      </nav>
+
+      <div className="mt-8 space-y-2 text-sm text-white/60">
+        <button type="button" className="flex items-center gap-2 hover:text-white transition-colors">
+          Copy page
+        </button>
+        <button type="button" className="flex items-center gap-2 hover:text-white transition-colors">
+          Give feedback
+        </button>
+        <button type="button" className="flex items-center gap-2 hover:text-white transition-colors">
+          Ask AI about this page
+        </button>
+      </div>
+    </div>
+  );
+}
+

package/docs-template/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
+

package/docs-template/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
+

package/docs-template/components/ui/card.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
+