feat(web): floating navbar and code copy buttons

- Float the navbar as a rounded blurred island on landing and docs
- Match docs code block radius and padding to the landing blocks
- Add copy buttons to landing and docs code blocks

Author: kacigaya

web/src/app/(site)/page.tsx

@@ -76,8 +76,8 @@ export default function Home() {
   return (
     <main className="flex flex-1 flex-col">
       {/* Nav */}
-      <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
-        <div className="mx-auto flex w-full max-w-5xl items-center justify-between px-6 py-4">
+      <header className="sticky top-0 z-20 px-4 pt-4">
+        <div className="mx-auto flex w-full max-w-6xl items-center justify-between rounded-2xl border bg-background/70 px-5 py-3 shadow-sm backdrop-blur-md">
           <div className="flex items-center gap-2.5">
             <Image src={asset("/webskrap-logo.png")} alt="WebSkrap" width={28} height={28} />
             <span className="font-semibold tracking-tight">WebSkrap</span>

web/src/app/docs/[[...slug]]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { getDoc, getDocSlugs } from "@/lib/docs";
+import { CodeCopy } from "@/components/code-copy";
 
 export const dynamicParams = false;
 
@@ -24,9 +25,12 @@ export default async function DocPage(props: DocPageProps) {
   if (!doc) notFound();
 
   return (
-    <article
-      className="prose prose-neutral max-w-none dark:prose-invert prose-headings:scroll-mt-24 prose-pre:border prose-pre:bg-card prose-a:text-primary"
-      dangerouslySetInnerHTML={{ __html: doc.html }}
-    />
+    <>
+      <article
+        className="prose prose-neutral max-w-none dark:prose-invert prose-headings:scroll-mt-24 prose-pre:rounded-2xl prose-pre:border prose-pre:bg-card prose-pre:p-6 prose-a:text-primary"
+        dangerouslySetInnerHTML={{ __html: doc.html }}
+      />
+      <CodeCopy />
+    </>
   );
 }

web/src/app/docs/layout.tsx

@@ -14,8 +14,8 @@ export default function DocsLayout({
 }) {
   return (
     <div className="flex min-h-full flex-col">
-      <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
-        <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
+      <header className="sticky top-0 z-20 px-4 pt-4">
+        <div className="mx-auto flex w-full max-w-6xl items-center justify-between rounded-2xl border bg-background/70 px-5 py-3 shadow-sm backdrop-blur-md">
           <Link href="/" className="flex items-center gap-2.5">
             <Image src={asset("/webskrap-logo.png")} alt="WebSkrap" width={28} height={28} />
             <span className="font-semibold tracking-tight">WebSkrap</span>

web/src/components/code-block.tsx

@@ -1,4 +1,5 @@
 import { codeToHtml } from "shiki";
+import { CopyButton } from "@/components/copy-button";
 
 interface CodeBlockProps {
   code: string;
@@ -13,10 +14,13 @@ export async function CodeBlock({ code, lang }: CodeBlockProps) {
   });
 
   return (
-    <div
-      className="overflow-x-auto rounded-2xl border bg-card p-6 text-sm leading-relaxed [&_pre]:bg-transparent [&_pre]:font-mono [&_code]:font-mono"
-      // shiki output is trusted, build-time generated from static strings
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <div className="relative">
+      <CopyButton text={code} />
+      <div
+        className="overflow-x-auto rounded-2xl border bg-card p-6 text-sm leading-relaxed [&_pre]:bg-transparent [&_pre]:font-mono [&_code]:font-mono"
+        // shiki output is trusted, build-time generated from static strings
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
   );
 }

web/src/components/code-copy.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+
+const COPY_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
+
+// Docs HTML is server-rendered (dangerouslySetInnerHTML), so attach copy
+// buttons to each <pre> on the client after mount.
+export function CodeCopy() {
+  useEffect(() => {
+    const pres = document.querySelectorAll<HTMLPreElement>("article pre");
+    pres.forEach((pre) => {
+      if (pre.dataset.copyReady) return;
+      pre.dataset.copyReady = "1";
+      pre.classList.add("relative");
+      const text = pre.innerText;
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("aria-label", "Copy code");
+      btn.innerHTML = COPY_SVG;
+      btn.className =
+        "absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-md border bg-background/80 text-muted-foreground backdrop-blur transition-colors hover:text-foreground";
+      btn.addEventListener("click", async () => {
+        await navigator.clipboard.writeText(text);
+        btn.innerHTML = CHECK_SVG;
+        setTimeout(() => {
+          btn.innerHTML = COPY_SVG;
+        }, 1500);
+      });
+      pre.appendChild(btn);
+    });
+  }, []);
+
+  return null;
+}

web/src/components/copy-button.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { Check, Copy } from "lucide-react";
+
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = React.useState(false);
+
+  return (
+    <button
+      type="button"
+      aria-label="Copy code"
+      onClick={async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      className="absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-md border bg-background/80 text-muted-foreground backdrop-blur transition-colors hover:text-foreground [&_svg]:size-3.5"
+    >
+      {copied ? <Check /> : <Copy />}
+    </button>
+  );
+}