4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T37d4,"use client"; import { useEffect, useId, useMemo, useRef, useState, type CSSProperties, type ComponentProps, type PointerEvent, } from "react"; import { useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type BlogIndexEntry = { title: string; href: string; category: string; /** Display date inside its year group, e.g. "02 Oct". */ date: string; /** Machine-readable date, e.g. "2026-10-02". The year groups come from this. */ dateTime: string; /** Reading time in minutes. */ readingTime: number; /** Shown as a pointer-following preview on desktop. */ image: { src: string; alt: string }; }; export type BlogIndexProps = { eyebrow?: string; title?: string; description?: string; entries?: BlogIndexEntry[]; /** Ink for the active filter and the hovered row marker. */ accent?: string; } & ComponentProps<"section">; const unsplash = (id: string) => `https://images.unsplash.com/${id}?w=480&h=360&q=80&auto=format&fit=crop`; const DEFAULT_ENTRIES: BlogIndexEntry[] = [ { title: "We moved booking reminders to the night before. No-shows fell 31%", href: "#", category: "Field notes", date: "02 Oct", dateTime: "2026-10-02", readingTime: 9, image: { src: unsplash("photo-1501785888041-af3ef285b470"), alt: "An alpine lake with a small boat" }, }, { title: "Why the shops we love still hand-letter their opening hours", href: "#", category: "Owners", date: "24 Sep", dateTime: "2026-09-24", readingTime: 6, image: { src: unsplash("photo-1472851294608-062f824d29cc"), alt: "An “Open” sign on a shop door" }, }, { title: "Seasonal pricing is mostly a guess. Here is how to guess better", href: "#", category: "Operations", date: "11 Sep", dateTime: "2026-09-11", readingTime: 7, image: { src: unsplash("photo-1507525428034-b723cf961d3e"), alt: "A beach at sunset" }, }, { title: "Rebuilding the calendar view without breaking anyone’s bookmarks", href: "#", category: "Engineering", date: "19 Aug", dateTime: "2026-08-19", readingTime: 12, image: { src: unsplash("photo-1551288049-bebda4e38f71"), alt: "An analytics dashboard on a laptop" }, }, { title: "One person, forty rooms, and a front desk that closes at nine", href: "#", category: "Owners", date: "03 Jul", dateTime: "2026-07-03", readingTime: 8, image: { src: unsplash("photo-1583847268964-b28dc8f51f92"), alt: "A cosy living room interior" }, }, { title: "The case against a “Book now” button on every page", href: "#", category: "Design", date: "28 Nov", dateTime: "2025-11-28", readingTime: 5, image: { src: unsplash("photo-1493809842364-78817add7ffb"), alt: "A bright living room with a blue sofa" }, }, { title: "What a hostel in Zermatt taught us about overbooking on purpose", href: "#", category: "Field notes", date: "14 Oct", dateTime: "2025-10-14", readingTime: 10, image: { src: unsplash("photo-1483728642387-6c3bdd6c93e5"), alt: "Snowy alpine peaks" }, }, { title: "We deleted 40% of the settings screen. Nobody wrote in", href: "#", category: "Design", date: "02 Jun", dateTime: "2025-06-02", readingTime: 6, image: { src: unsplash("photo-1485955900006-10f4d324d411"), alt: "A succulent in a mint pot on a white surface" }, }, { title: "Moving nine million bookings to a new database on a Tuesday afternoon", href: "#", category: "Engineering", date: "17 Mar", dateTime: "2025-03-17", readingTime: 14, image: { src: unsplash("photo-1480714378408-67cf0d13bc1b"), alt: "A city skyline" }, }, { title: "Pricing the shoulder season: notes from sixty owners", href: "#", category: "Operations", date: "21 Nov", dateTime: "2024-11-21", readingTime: 9, image: { src: unsplash("photo-1506905925346-21bda4d32df4"), alt: "Mountains above the clouds at dawn" }, }, { title: "The guest who booked the same room for twenty-two summers", href: "#", category: "Owners", date: "08 Aug", dateTime: "2024-08-08", readingTime: 7, image: { src: unsplash("photo-1441974231531-c6227db76b6e"), alt: "A sunlit forest path" }, }, { title: "Why our invoices still fit on one printed page", href: "#", category: "Design", date: "15 Feb", dateTime: "2024-02-15", readingTime: 4, image: { src: unsplash("photo-1448375240586-882707db888b"), alt: "Tall forest trees seen from below" }, }, ]; const DEFAULTS = { eyebrow: "Saltbox Journal · Archive", title: "Everything we’ve written down", description: "Three years of notes on running small guesthouses and shops: what worked, what didn’t, and the numbers behind both.", accent: "#0A6EFF", }; const PREVIEW_W = 240; const PREVIEW_H = 180; const OFFSET = 24; const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"; export function BlogIndex({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, entries = DEFAULT_ENTRIES, accent = DEFAULTS.accent, className, style, ...props }: BlogIndexProps) { const headingId = useId(); const reduceMotion = useReducedMotion(); const [category, setCategory] = useState(null); const [active, setActive] = useState(null); const listRef = useRef(null); const previewRef = useRef(null); const frameRef = useRef(0); const pointRef = useRef({ x: 0, y: 0 }); useEffect(() => () => cancelAnimationFrame(frameRef.current), []); const categories = useMemo( () => Array.from(new Set(entries.map((entry) => entry.category))), [entries] ); const groups = useMemo(() => { const visible = category ? entries.filter((e) => e.category === category) : entries; const byYear = new Map(); for (const entry of visible) { const year = entry.dateTime.slice(0, 4); byYear.set(year, [...(byYear.get(year) ?? []), entry]); } return Array.from(byYear, ([year, items]) => ({ year, items })).sort((a, b) => b.year.localeCompare(a.year) ); }, [entries, category]); const visibleCount = groups.reduce((sum, group) => sum + group.items.length, 0); const place = (x: number, y: number) => { const preview = previewRef.current; if (preview) preview.style.transform = `translate3d(${x}px, ${y}px, 0)`; }; // Follow the pointer: write the transform straight to the DOM, once per frame. const handlePointerMove = (event: PointerEvent) => { if (event.pointerType !== "mouse" || reduceMotion || !listRef.current) return; const rect = listRef.current.getBoundingClientRect(); pointRef.current = { x: Math.min(event.clientX - rect.left + OFFSET, rect.width - PREVIEW_W), y: event.clientY - rect.top - PREVIEW_H / 2, }; if (frameRef.current) return; frameRef.current = requestAnimationFrame(() => { frameRef.current = 0; place(pointRef.current.x, pointRef.current.y); }); }; const handleRowEnter = (event: PointerEvent, key: string) => { if (event.pointerType !== "mouse" || !listRef.current) return; const list = listRef.current.getBoundingClientRect(); if (reduceMotion) { // No following: pin the preview to the right edge, level with the row. const row = event.currentTarget.getBoundingClientRect(); place(list.width - PREVIEW_W, row.top - list.top + row.height / 2 - PREVIEW_H / 2); } else { place( Math.min(event.clientX - list.left + OFFSET, list.width - PREVIEW_W), event.clientY - list.top - PREVIEW_H / 2 ); } setActive(key); }; return (

{eyebrow}

{title}

{description}

{[null, ...categories].map((item) => { const pressed = category === item; return ( ); })}

{visibleCount} {visibleCount === 1 ? "article" : "articles"}

setActive(null)} > {groups.map(({ year, items }) => (

{year}

handleRowEnter(event, key)} className={cn( "group grid grid-cols-[1fr_auto] gap-x-6 gap-y-1 py-5 md:grid-cols-[4.5rem_1fr_7.5rem_4.5rem] md:items-baseline", focusRing )} > {entry.date} {entry.title} {entry.category} {entry.readingTime} min

))} {visibleCount === 0 && (

Nothing filed here yet.

)} {/* Pointer-following preview. Fine pointers only; touch taps just follow the link. */}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/blog/blog-index.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]