toiljs 0.0.11 → 0.0.14

package/examples/basic/client/components/HoneycombBackground.tsx

@@ -1,230 +1,223 @@
-import { useRef, useEffect } from 'react';
-
-const HEX_R = 34;
-const GAP = 3;
-const DRAW_R = HEX_R - GAP;
-const GLOW_DIST = 140;
-const LOGO_SRC = '/images/logo.svg';
-
-function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-    ctx.beginPath();
-
-    for (let i = 0; i < 6; i++) {
-        const a = (Math.PI / 3) * i - Math.PI / 6;
-        const x = cx + r * Math.cos(a);
-        const y = cy + r * Math.sin(a);
-
-        if (i === 0) {
-            ctx.moveTo(x, y);
-        } else {
-            ctx.lineTo(x, y);
-        }
-    }
-
-    ctx.closePath();
-}
-
-function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
-    const colW = Math.sqrt(3) * HEX_R;
-
-    const rowH = HEX_R * 1.5;
-    const cols = Math.ceil(w / colW) + 2;
-    const rows = Math.ceil(h / rowH) + 2;
-    const hexes: Array<{ x: number; y: number }> = [];
-
-    for (let row = -1; row < rows; row++) {
-        for (let col = -1; col < cols; col++) {
-            hexes.push({
-                x: col * colW + (row % 2 !== 0 ? colW / 2 : 0),
-                y: row * rowH,
-            });
-        }
-    }
-
-    return hexes;
-}
-
-/** Samples logo colours per hex centre for use in border glow. */
-function buildLogoColors(
-    img: HTMLImageElement,
-    hexes: Array<{ x: number; y: number }>,
-    w: number,
-    h: number,
-): Array<[number, number, number]> | null {
-    const lc = document.createElement('canvas');
-
-    lc.width = w;
-    lc.height = h;
-
-    const lctx = lc.getContext('2d');
-
-    if (!lctx) return null;
-
-    // Draw logo large + blurred, roughly where the hero logo sits in the viewport
-    const size = 700;
-    const cx = w / 2;
-    const cy = h * 0.42;
-
-    lctx.filter = 'blur(90px)';
-    lctx.drawImage(img, cx - size / 2, cy - size / 2, size, size);
-    lctx.filter = 'none';
-
-    // Sample one pixel per hex centre so we can use logo colours for border glow
-    return hexes.map(({ x, y }) => {
-        const px = Math.round(Math.max(0, Math.min(w - 1, x)));
-        const py = Math.round(Math.max(0, Math.min(h - 1, y)));
-        const d = lctx.getImageData(px, py, 1, 1).data;
-
-        return [d[0], d[1], d[2]] as [number, number, number];
-    });
-}
-
-export default function HoneycombBackground() {
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const mouse = useRef({ x: -9999, y: -9999 });
-
-    useEffect(() => {
-        const canvas = canvasRef.current;
-
-        if (!canvas) return;
-
-        const ctx = canvas.getContext('2d');
-
-        if (!ctx) return;
-
-        const dpr = window.devicePixelRatio || 1;
-        let hexes: Array<{ x: number; y: number }> = [];
-        let hexColors: Array<[number, number, number]> = [];
-        let raf: number;
-
-        const img = new Image();
-
-        img.onload = () => {
-            const colors = buildLogoColors(img, hexes, window.innerWidth, window.innerHeight);
-
-            if (colors) {
-                hexColors = colors;
-            }
-        };
-
-        img.src = LOGO_SRC;
-
-        function resize() {
-            if (!canvas || !ctx) return;
-
-            const w = window.innerWidth;
-            const h = window.innerHeight;
-
-            canvas.width = w * dpr;
-            canvas.height = h * dpr;
-            canvas.style.width = `${w}px`;
-            canvas.style.height = `${h}px`;
-            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-            hexes = buildGrid(w, h);
-
-            // Rebuild logo colours if image is already loaded
-            if (img.complete && img.naturalWidth > 0) {
-                const colors = buildLogoColors(img, hexes, w, h);
-
-                if (colors) {
-                    hexColors = colors;
-                }
-            }
-        }
-
-        function draw() {
-            if (!ctx) return;
-
-            const w = window.innerWidth;
-            const h = window.innerHeight;
-
-            ctx.clearRect(0, 0, w, h);
-
-            const mx = mouse.current.x;
-            const my = mouse.current.y;
-
-            for (let i = 0; i < hexes.length; i++) {
-                const hex = hexes[i];
-
-                if (!hex) continue;
-
-                const { x, y } = hex;
-                const dist = Math.hypot(x - mx, y - my);
-                const t = Math.max(0, 1 - dist / GLOW_DIST);
-                const ease = t * t * (3 - 2 * t);
-
-                // Base fill
-                tracePath(ctx, x, y, DRAW_R);
-                ctx.fillStyle = 'rgba(255,255,255,0.018)';
-                ctx.fill();
-
-
-
-                // Base border
-                tracePath(ctx, x, y, DRAW_R);
-                ctx.strokeStyle = 'rgba(255,255,255,0.055)';
-                ctx.lineWidth = 1;
-                ctx.stroke();
-
-                // Glow border using logo-sampled colour
-                if (ease > 0) {
-                    const col = hexColors[i];
-                    const r = col ? col[0] : 120;
-                    const g = col ? col[1] : 180;
-                    const b = col ? col[2] : 255;
-
-                    // If the logo has colour here, use it; otherwise fall back to a soft white
-                    const bright = r + g + b;
-                    const fr = bright > 30 ? r : 120;
-                    const fg = bright > 30 ? g : 180;
-                    const fb = bright > 30 ? b : 255;
-
-                    ctx.save();
-                    ctx.shadowColor = `rgba(${fr},${fg},${fb},${ease * 0.25})`;
-                    ctx.shadowBlur = 8 * ease;
-                    ctx.strokeStyle = `rgba(${fr},${fg},${fb},${ease * 0.18})`;
-                    ctx.lineWidth = 1 + ease * 0.5;
-                    ctx.stroke();
-                    ctx.restore();
-                }
-            }
-
-            raf = requestAnimationFrame(draw);
-        }
-
-        resize();
-        draw();
-
-        const onResize = () => {
-            cancelAnimationFrame(raf);
-            resize();
-            draw();
-        };
-
-        const onMove = (e: MouseEvent) => {
-            mouse.current = { x: e.clientX, y: e.clientY };
-        };
-
-        const onLeave = () => {
-            mouse.current = { x: -9999, y: -9999 };
-        };
-
-        window.addEventListener('resize', onResize);
-        window.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseleave', onLeave);
-
-        return () => {
-            cancelAnimationFrame(raf);
-            window.removeEventListener('resize', onResize);
-            window.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseleave', onLeave);
-        };
-    }, []);
-
-    return (
-        <canvas
-            ref={canvasRef}
-            className="honeycomb-canvas"
-        />
-    );
-}
+import { useRef, useEffect } from 'react';
+
+const HEX_R = 34;
+const GAP = 3;
+const DRAW_R = HEX_R - GAP;
+const GLOW_DIST = 140;
+const LOGO_SRC = '/images/logo.svg';
+
+function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    ctx.beginPath();
+
+    for (let i = 0; i < 6; i++) {
+        const a = (Math.PI / 3) * i - Math.PI / 6;
+        const x = cx + r * Math.cos(a);
+        const y = cy + r * Math.sin(a);
+
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    ctx.closePath();
+}
+
+function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
+    const colW = Math.sqrt(3) * HEX_R;
+
+    const rowH = HEX_R * 1.5;
+    const cols = Math.ceil(w / colW) + 2;
+    const rows = Math.ceil(h / rowH) + 2;
+    const hexes: Array<{ x: number; y: number }> = [];
+
+    for (let row = -1; row < rows; row++) {
+        for (let col = -1; col < cols; col++) {
+            hexes.push({
+                x: col * colW + (row % 2 !== 0 ? colW / 2 : 0),
+                y: row * rowH
+            });
+        }
+    }
+
+    return hexes;
+}
+
+/** Samples logo colours per hex centre for use in border glow. */
+function buildLogoColors(
+    img: HTMLImageElement,
+    hexes: Array<{ x: number; y: number }>,
+    w: number,
+    h: number
+): Array<[number, number, number]> | null {
+    const lc = document.createElement('canvas');
+
+    lc.width = w;
+    lc.height = h;
+
+    const lctx = lc.getContext('2d');
+
+    if (!lctx) return null;
+
+    // Draw logo large + blurred, roughly where the hero logo sits in the viewport
+    const size = 700;
+    const cx = w / 2;
+    const cy = h * 0.42;
+
+    lctx.filter = 'blur(90px)';
+    lctx.drawImage(img, cx - size / 2, cy - size / 2, size, size);
+    lctx.filter = 'none';
+
+    // Sample one pixel per hex centre so we can use logo colours for border glow
+    return hexes.map(({ x, y }) => {
+        const px = Math.round(Math.max(0, Math.min(w - 1, x)));
+        const py = Math.round(Math.max(0, Math.min(h - 1, y)));
+        const d = lctx.getImageData(px, py, 1, 1).data;
+
+        return [d[0], d[1], d[2]] as [number, number, number];
+    });
+}
+
+export default function HoneycombBackground() {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const mouse = useRef({ x: -9999, y: -9999 });
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        let hexes: Array<{ x: number; y: number }> = [];
+        let hexColors: Array<[number, number, number]> = [];
+        let raf: number;
+
+        const img = new Image();
+
+        img.onload = () => {
+            const colors = buildLogoColors(img, hexes, window.innerWidth, window.innerHeight);
+
+            if (colors) {
+                hexColors = colors;
+            }
+        };
+
+        img.src = LOGO_SRC;
+
+        function resize() {
+            if (!canvas || !ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            hexes = buildGrid(w, h);
+
+            // Rebuild logo colours if image is already loaded
+            if (img.complete && img.naturalWidth > 0) {
+                const colors = buildLogoColors(img, hexes, w, h);
+
+                if (colors) {
+                    hexColors = colors;
+                }
+            }
+        }
+
+        function draw() {
+            if (!ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+
+            ctx.clearRect(0, 0, w, h);
+
+            const mx = mouse.current.x;
+            const my = mouse.current.y;
+
+            for (let i = 0; i < hexes.length; i++) {
+                const hex = hexes[i];
+
+                if (!hex) continue;
+
+                const { x, y } = hex;
+                const dist = Math.hypot(x - mx, y - my);
+                const t = Math.max(0, 1 - dist / GLOW_DIST);
+                const ease = t * t * (3 - 2 * t);
+
+                // Base fill
+                tracePath(ctx, x, y, DRAW_R);
+                ctx.fillStyle = 'rgba(255,255,255,0.018)';
+                ctx.fill();
+
+                // Base border
+                tracePath(ctx, x, y, DRAW_R);
+                ctx.strokeStyle = 'rgba(255,255,255,0.055)';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                // Glow border using logo-sampled colour
+                if (ease > 0) {
+                    const col = hexColors[i];
+                    const r = col ? col[0] : 120;
+                    const g = col ? col[1] : 180;
+                    const b = col ? col[2] : 255;
+
+                    // If the logo has colour here, use it; otherwise fall back to a soft white
+                    const bright = r + g + b;
+                    const fr = bright > 30 ? r : 120;
+                    const fg = bright > 30 ? g : 180;
+                    const fb = bright > 30 ? b : 255;
+
+                    ctx.save();
+                    ctx.shadowColor = `rgba(${fr},${fg},${fb},${ease * 0.25})`;
+                    ctx.shadowBlur = 8 * ease;
+                    ctx.strokeStyle = `rgba(${fr},${fg},${fb},${ease * 0.18})`;
+                    ctx.lineWidth = 1 + ease * 0.5;
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+
+            raf = requestAnimationFrame(draw);
+        }
+
+        resize();
+        draw();
+
+        const onResize = () => {
+            cancelAnimationFrame(raf);
+            resize();
+            draw();
+        };
+
+        const onMove = (e: MouseEvent) => {
+            mouse.current = { x: e.clientX, y: e.clientY };
+        };
+
+        const onLeave = () => {
+            mouse.current = { x: -9999, y: -9999 };
+        };
+
+        window.addEventListener('resize', onResize);
+        window.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseleave', onLeave);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseleave', onLeave);
+        };
+    }, []);
+
+    return <canvas ref={canvasRef} className="honeycomb-canvas" />;
+}

package/examples/basic/client/public/index.html

@@ -1,16 +1,18 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#080D11" />
-        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <title>ToilJS</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet" />
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#080D11" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <title>ToilJS</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap"
+            rel="stylesheet" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/examples/basic/client/routes/(legal)/privacy.tsx

@@ -1,19 +1,18 @@
-export const metadata: Toil.Metadata = { title: 'Privacy' };
-
-// Route group: the `(legal)` folder organizes files without adding a URL segment, so this route is
-// served at `/privacy`, not `/legal/privacy`. Groups can carry their own layout too.
-export default function Privacy() {
-    return (
-        <main>
-            <h1>Privacy</h1>
-            <p>
-                Served at <code>/privacy</code> from <code>routes/(legal)/privacy.tsx</code>. The
-                <code> (legal)</code> group adds no URL segment.
-            </p>
-            <p>
-                <Toil.Link href="/terms">Terms</Toil.Link>{' '}
-                <Toil.Link href="/features">Back to features</Toil.Link>
-            </p>
-        </main>
-    );
-}
+export const metadata: Toil.Metadata = { title: 'Privacy' };
+
+// Route group: the `(legal)` folder organizes files without adding a URL segment, so this route is
+// served at `/privacy`, not `/legal/privacy`. Groups can carry their own layout too.
+export default function Privacy() {
+    return (
+        <main>
+            <h1>Privacy</h1>
+            <p>
+                Served at <code>/privacy</code> from <code>routes/(legal)/privacy.tsx</code>. The
+                <code> (legal)</code> group adds no URL segment.
+            </p>
+            <p>
+                <Toil.Link href="/terms">Terms</Toil.Link> <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

package/examples/basic/client/routes/(legal)/terms.tsx

@@ -1,16 +1,15 @@
-export const metadata: Toil.Metadata = { title: 'Terms' };
-
-export default function Terms() {
-    return (
-        <main>
-            <h1>Terms</h1>
-            <p>
-                Also in the <code>(legal)</code> group, served at <code>/terms</code>.
-            </p>
-            <p>
-                <Toil.Link href="/privacy">Privacy</Toil.Link>{' '}
-                <Toil.Link href="/features">Back to features</Toil.Link>
-            </p>
-        </main>
-    );
-}
+export const metadata: Toil.Metadata = { title: 'Terms' };
+
+export default function Terms() {
+    return (
+        <main>
+            <h1>Terms</h1>
+            <p>
+                Also in the <code>(legal)</code> group, served at <code>/terms</code>.
+            </p>
+            <p>
+                <Toil.Link href="/privacy">Privacy</Toil.Link> <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

package/examples/basic/client/routes/about.tsx

@@ -1,22 +1,21 @@
-// Declarative per-route SEO, resolved by the router into <title> + <meta>/<link> tags, and baked
-// into static HTML at build (see build/client/about/index.html). The layout's titleTemplate wraps
-// this title, so the tab reads "About | ToilJS"; component-level useHead/<Head> can override.
-export const metadata: Toil.Metadata = {
-    title: 'About',
-    description: 'About the ToilJS example app.',
-    openGraph: { title: 'About, ToilJS', type: 'website' },
-};
-
-export default function About() {
-    return (
-        <main>
-            <h1>About</h1>
-            <p>
-                This page is served by <code>client/routes/about.tsx</code>. Its tab title comes from
-                the <code>metadata</code> export above, wrapped by the layout template into{' '}
-                <code>About | ToilJS</code>.
-            </p>
-            <Toil.Link href="/features">See every feature</Toil.Link>
-        </main>
-    );
-}
+// Declarative per-route SEO, resolved by the router into <title> + <meta>/<link> tags, and baked
+// into static HTML at build (see build/client/about/index.html). The layout's titleTemplate wraps
+// this title, so the tab reads "About | ToilJS"; component-level useHead/<Head> can override.
+export const metadata: Toil.Metadata = {
+    title: 'About',
+    description: 'About the ToilJS example app.',
+    openGraph: { title: 'About, ToilJS', type: 'website' }
+};
+
+export default function About() {
+    return (
+        <main>
+            <h1>About</h1>
+            <p>
+                This page is served by <code>client/routes/about.tsx</code>. Its tab title comes from the{' '}
+                <code>metadata</code> export above, wrapped by the layout template into <code>About | ToilJS</code>.
+            </p>
+            <Toil.Link href="/features">See every feature</Toil.Link>
+        </main>
+    );
+}

package/examples/basic/client/routes/blog/[id].tsx

@@ -1,18 +1,26 @@
-// Dynamic metadata from the route param, so the tab reads "Blog post 42 | ToilJS".
-export const generateMetadata: Toil.GenerateMetadata = ({ params }) => ({
-    title: `Blog post ${params.id}`,
-    description: `Reading blog post ${params.id}.`,
-});
-
-export default function BlogPost() {
-    const { id } = Toil.useParams();
-    return (
-        <main>
-            <h1>Blog post {id}</h1>
-            <p>
-                Dynamic route from <code>client/routes/blog/[id].tsx</code>.
-            </p>
-            <Toil.Link href="/features">See every feature</Toil.Link>
-        </main>
-    );
-}
+// Dynamic metadata from the route param, so the tab reads "Blog post 42 | ToilJS".
+export const generateMetadata: Toil.GenerateMetadata = ({ params }) => ({
+    title: `Blog post ${params.id}`,
+    description: `Reading blog post ${params.id}.`
+});
+
+// The per-post title above is dynamic, so it can't be statically indexed for site search. These
+// static hints make the blog discoverable from the /search page anyway (see usePageSearch).
+export const searchHints: Toil.SearchHints = {
+    title: 'Blog',
+    description: 'Articles and updates from the ToilJS example app.',
+    keywords: ['blog', 'posts', 'articles']
+};
+
+export default function BlogPost() {
+    const { id } = Toil.useParams();
+    return (
+        <main>
+            <h1>Blog post {id}</h1>
+            <p>
+                Dynamic route from <code>client/routes/blog/[id].tsx</code>.
+            </p>
+            <Toil.Link href="/features">See every feature</Toil.Link>
+        </main>
+    );
+}