Book Library

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_314":315,"_316":317},"routes/_app.x.$handle.$name",{"_105":104,"_37":50,"_114":95,"_32":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":-5,"_127":-5,"_128":30,"_129":130,"_131":64,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",19,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","303a626a-4060-438d-a55b-0a395be6a574","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","components/BookCard.tsx","latestPath","fileId","e2ca5ac0-8258-11f1-bd3f-1607ee4eb77e","name","BookCard.tsx","fileType","script","content","import React from \"npm:react@18\";\nimport type { Book } from \"../notion.ts\";\nimport { Cover } from \"./Cover.tsx\";\n\nexport function BookCard({ book }: { book: Book }) {\n return React.createElement(\"a\", {\n href: `/book/${book.id}`,\n className: \"book-card\",\n },\n React.createElement(Cover, {\n url: book.coverUrl,\n alt: book.title,\n className: \"book-cover\",\n placeholderClass: \"book-cover-placeholder\",\n }),\n React.createElement(\"div\", { className: \"book-info\" },\n React.createElement(\"div\", { className: \"book-title\" }, book.title),\n React.createElement(\"div\", { className: \"book-author\" }, book.author || \"Unknown author\"),\n React.createElement(\"span\", {\n className: `book-badge ${book.onHold ? \"badge-on-hold\" : \"badge-available\"}`,\n }, book.onHold ? \"On Hold\" : \"Available\"),\n ),\n );\n}\n","createdAt",["D",1784345369186],"branchVersion","branchId","e41194c2-6bd2-48cf-8cc0-c933b36c23b4","id","e61fb581-3c18-4a88-ba6b-e11b7b8d5073","biblio",["D",1784321400727],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Browse books from Notion with grid + hold status detail page","imageUrl","4ecf7957-2a7e-46fb-9d19-4cb1504777a1","pinnedFileId","ca23f746-822c-11f1-965a-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f71d5-e6da-75b8-94ec-21be655c8b61","tursoName","e61fb5813c184a88ba6be11b7b8d5073","tursoHostname","e61fb5813c184a88ba6be11b7b8d5073-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789473046147],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_19":60,"_110":111,"_112":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"isOwned",88,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","aleksrutins","handle","displayName","Aleks Rūtiņš","avatar","https://avatars.githubusercontent.com/u/24496030?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":309,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":310,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":311,"_89":312,"_91":313,"_93":30},"tree",[206,213,215,218,219,220,221],"files",[206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221],"counts",{"_196":68,"_197":165,"_198":68,"_199":200,"_201":202},"contents",[136,137,138,139,140,141,142],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":190,"_37":191,"_35":192,"_146":-5,"_46":47,"_45":193,"_148":64,"_43":194,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_32":195},{"_48":184,"_37":185,"_35":186,"_146":-5,"_46":47,"_45":187,"_148":64,"_43":188,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_32":189},{"_48":177,"_37":178,"_35":179,"_146":-5,"_46":47,"_45":180,"_148":64,"_43":181,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_32":183},{"_48":170,"_37":171,"_35":172,"_146":-5,"_46":47,"_45":173,"_148":30,"_43":174,"_13":68,"_39":26,"_41":175,"_29":30,"_151":-5,"_32":176},{"_48":161,"_37":162,"_35":62,"_146":-5,"_46":47,"_45":163,"_148":30,"_43":164,"_13":165,"_39":166,"_41":167,"_29":30,"_151":168,"_32":169},{"_48":153,"_37":154,"_35":155,"_146":-5,"_46":47,"_45":156,"_148":30,"_43":157,"_13":158,"_39":40,"_41":159,"_29":30,"_151":-5,"_32":160},{"_48":143,"_37":144,"_35":145,"_146":-5,"_46":47,"_45":147,"_148":30,"_43":149,"_13":68,"_39":40,"_41":150,"_29":30,"_151":-5,"_32":152},"d0d12f09-0d4b-48dc-bdf0-446a327c12cf","styles.ts","bffce0b6-822c-11f1-a334-1607ee4eb77e","parentId",2,"latest",["D",1784326413587],"// CSS styles for the book library site\n\nexport const STYLES = `\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: #f5f0eb;\n color: #2d2d2d;\n line-height: 1.6;\n}\nheader {\n background: #fff;\n border-bottom: 1px solid #e0dcd7;\n padding: 1.5rem 2rem;\n}\nheader h1 {\n font-size: 1.6rem;\n font-weight: 700;\n color: #1a1a1a;\n}\nheader h1 a {\n color: inherit;\n text-decoration: none;\n}\nheader p {\n color: #6b6b6b;\n font-size: 0.9rem;\n margin-top: 0.25rem;\n}\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n.book-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 1.5rem;\n}\n.book-card {\n background: #fff;\n border-radius: 10px;\n overflow: hidden;\n transition: transform 0.2s, box-shadow 0.2s;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n display: block;\n}\n.book-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n}\n.book-cover {\n width: 100%;\n aspect-ratio: 2/3;\n object-fit: cover;\n background: #e8e4df;\n display: block;\n}\n.book-cover-placeholder {\n width: 100%;\n aspect-ratio: 2/3;\n background: linear-gradient(135deg, #d4c9bd, #c0b4a7);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8a7d70;\n font-size: 0.8rem;\n text-align: center;\n padding: 1rem;\n}\n.book-info {\n padding: 0.85rem 1rem;\n}\n.book-title {\n font-size: 0.95rem;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 0.2rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.book-author {\n font-size: 0.82rem;\n color: #888;\n}\n.book-badge {\n display: inline-block;\n font-size: 0.7rem;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 20px;\n margin-top: 0.5rem;\n}\n.badge-on-hold {\n background: #fde8e8;\n color: #c53030;\n}\n.badge-available {\n background: #e6f9ec;\n color: #276749;\n}\n\n/* Detail page */\n.detail-wrap {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 2.5rem;\n max-width: 900px;\n margin: 0 auto;\n}\n.detail-cover {\n width: 100%;\n aspect-ratio: 2/3;\n border-radius: 10px;\n object-fit: cover;\n box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n}\n.detail-cover-placeholder {\n width: 100%;\n aspect-ratio: 2/3;\n border-radius: 10px;\n background: linear-gradient(135deg, #d4c9bd, #c0b4a7);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8a7d70;\n font-size: 1rem;\n text-align: center;\n padding: 2rem;\n}\n.detail-info h2 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n}\n.detail-info .author {\n font-size: 1.1rem;\n color: #666;\n margin-bottom: 1.5rem;\n}\n.hold-status {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 1.5rem;\n}\n.hold-status.on-hold {\n background: #fde8e8;\n color: #c53030;\n}\n.hold-status.available {\n background: #e6f9ec;\n color: #276749;\n}\n.detail-meta {\n margin-top: 1.5rem;\n}\n.meta-row {\n display: flex;\n padding: 0.6rem 0;\n border-bottom: 1px solid #eee;\n}\n.meta-label {\n font-weight: 600;\n width: 120px;\n color: #555;\n flex-shrink: 0;\n}\n.meta-value {\n color: #333;\n}\n.back-link {\n display: inline-block;\n margin-bottom: 1.5rem;\n color: #666;\n text-decoration: none;\n font-size: 0.9rem;\n}\n.back-link:hover {\n color: #333;\n}\n.notion-link {\n display: inline-block;\n margin-top: 1.5rem;\n color: #2d6cdf;\n text-decoration: none;\n font-size: 0.9rem;\n}\n.notion-link:hover {\n text-decoration: underline;\n}\n.error-box {\n text-align: center;\n padding: 3rem;\n color: #999;\n}\n.error-box h3 {\n margin-bottom: 0.5rem;\n color: #666;\n}\n@media (max-width: 640px) {\n .detail-wrap {\n grid-template-columns: 1fr;\n }\n .detail-cover, .detail-cover-placeholder {\n max-width: 250px;\n margin: 0 auto;\n }\n}\n`;\n","label",[144],"19c77bf3-2f29-40ec-858f-a2d35c6b3936","notion.ts","bff65fca-822c-11f1-bd23-1607ee4eb77e",9,["D",1784328087883],5,"// Notion API client for querying a book database\n\nconst NOTION_BASE = \"https://api.notion.com/v1\";\nconst NOTION_VERSION = \"2022-06-28\";\n\nexport interface Book {\n id: string;\n title: string;\n author: string;\n coverUrl: string | null;\n onHold: boolean;\n isbn: string | null;\n genre: string | null;\n description: string | null;\n notionUrl: string;\n rawProperties: Record;\n}\n\nfunction getText(prop: any): string {\n if (!prop) return \"\";\n if (prop.type === \"title\" && prop.title?.length) {\n return prop.title.map((t: any) => t.plain_text).join(\"\");\n }\n if (prop.type === \"rich_text\" && prop.rich_text?.length) {\n return prop.rich_text.map((t: any) => t.plain_text).join(\"\");\n }\n if (prop.type === \"select\" && prop.select) {\n return prop.select.name ?? \"\";\n }\n if (prop.type === \"url\" && prop.url) {\n return prop.url;\n }\n if (prop.type === \"number\" && prop.number !== null) {\n return String(prop.number);\n }\n if (prop.type === \"multi_select\" && prop.multi_select?.length) {\n return prop.multi_select.map((s: any) => s.name).join(\", \");\n }\n return \"\";\n}\n\nfunction getCheckbox(prop: any): boolean {\n if (!prop) return false;\n if (prop.type === \"checkbox\") return prop.checkbox ?? false;\n return false;\n}\n\nfunction getFileUrl(prop: any): string | null {\n if (!prop) return null;\n if (prop.type === \"files\" && prop.files?.length) {\n return prop.files[0]?.file?.url ?? prop.files[0]?.external?.url ?? null;\n }\n if (prop.type === \"url\" && prop.url) return prop.url;\n return null;\n}\n\n// Flexible property name lookup — tries common names\nfunction findProp(properties: Record, names: string[]): any {\n const lower = Object.keys(properties).reduce((acc, key) => {\n acc[key.toLowerCase()] = properties[key];\n return acc;\n }, {} as Record);\n for (const name of names) {\n const key = name.toLowerCase();\n if (lower[key]) return lower[key];\n }\n return null;\n}\n\nexport async function fetchBooks(): Promise {\n const token = Deno.env.get(\"NOTION_TOKEN\");\n const databaseId = Deno.env.get(\"NOTION_DATABASE_ID\");\n\n if (!token || !databaseId) {\n throw new Error(\n \"Missing NOTION_TOKEN or NOTION_DATABASE_ID env vars. Set them in the val settings.\",\n );\n }\n\n // Extract the 32-char hex database ID from either a raw ID, a full Notion URL,\n // or a Notion URL with a title slug (e.g. .../ID-Book-Database?v=xxx)\n let cleanDbId = databaseId.trim();\n // If it looks like a URL, extract the path first\n if (cleanDbId.startsWith(\"http\")) {\n try {\n const url = new URL(cleanDbId);\n cleanDbId = url.pathname;\n } catch {\n // ignore — fall through to regex extraction\n }\n }\n // Remove query params/fragments\n cleanDbId = cleanDbId.split(/[?&#]/)[0];\n // Match a 32-char hex string (optionally with dashes as a UUID)\n const idMatch = cleanDbId.match(/[a-f0-9]{8}-?[a-f0-9]{4}-?[a-f0-9]{4}-?[a-f0-9]{4}-?[a-f0-9]{12}/i);\n if (idMatch) {\n cleanDbId = idMatch[0];\n } else {\n // Fallback: strip leading/trailing slashes and take what's left\n cleanDbId = cleanDbId.replace(/^\\/+|\\/+$/g, \"\");\n }\n\n const results: any[] = [];\n let hasMore = true;\n let cursor: string | undefined;\n\n while (hasMore) {\n const body: any = { page_size: 100 };\n if (cursor) body.start_cursor = cursor;\n\n const res = await fetch(\n `${NOTION_BASE}/databases/${cleanDbId}/query`,\n {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(body),\n },\n );\n\n if (!res.ok) {\n const text = await res.text();\n if (res.status === 404) {\n throw new Error(\n \"Notion database not found. Make sure you've shared the database with your integration: open the database in Notion → click ⋯ → Connections → select your integration.\",\n );\n }\n throw new Error(`Notion API error ${res.status}: ${text}`);\n }\n\n const data = await res.json();\n results.push(...data.results);\n hasMore = data.has_more;\n cursor = data.next_cursor;\n }\n\n return results.map((page) => {\n const props = page.properties ?? {};\n\n const titleProp = findProp(props, [\n \"Title\", \"Name\", \"Book\", \"Book Title\", \"Nome\",\n ]);\n const authorProp = findProp(props, [\n \"Author\", \"Writer\", \"Autore\", \"By\",\n ]);\n const holdProp = findProp(props, [\n \"On Hold\", \"Hold\", \"Checked Out\", \"Reserved\", \"Prestato\",\n ]);\n const coverProp = findProp(props, [\n \"Cover\", \"Cover Image\", \"Image\", \"Image URL\", \"Copertina\",\n ]);\n const isbnProp = findProp(props, [\n \"ISBN\", \"ISBN-13\", \"ISBN-10\",\n ]);\n const genreProp = findProp(props, [\n \"Genre\", \"Category\", \"Tag\", \"Genere\", \"Tags\",\n ]);\n const descProp = findProp(props, [\n \"Description\", \"Summary\", \"Blurb\", \"Descrizione\", \"Notes\",\n ]);\n\n // Also check page-level cover\n const pageCover = page.cover?.external?.url ?? page.cover?.file?.url ?? null;\n\n return {\n id: page.id,\n title: getText(titleProp) || \"Untitled\",\n author: getText(authorProp),\n coverUrl: getFileUrl(coverProp) ?? pageCover,\n onHold: getCheckbox(holdProp),\n isbn: getText(isbnProp) || null,\n genre: getText(genreProp) || null,\n description: getText(descProp) || null,\n notionUrl: page.url ?? \"\",\n rawProperties: props,\n } as Book;\n });\n}\n\nexport async function fetchBook(id: string): Promise {\n const token = Deno.env.get(\"NOTION_TOKEN\");\n if (!token) throw new Error(\"Missing NOTION_TOKEN env var\");\n\n const res = await fetch(`${NOTION_BASE}/pages/${id}`, {\n headers: {\n \"Authorization\": `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n },\n });\n\n if (!res.ok) return null;\n\n const page = await res.json();\n const props = page.properties ?? {};\n\n const titleProp = findProp(props, [\n \"Title\", \"Name\", \"Book\", \"Book Title\", \"Nome\",\n ]);\n const authorProp = findProp(props, [\n \"Author\", \"Writer\", \"Autore\", \"By\",\n ]);\n const holdProp = findProp(props, [\n \"On Hold\", \"Hold\", \"Checked Out\", \"Reserved\", \"Prestato\",\n ]);\n const coverProp = findProp(props, [\n \"Cover\", \"Cover Image\", \"Image\", \"Image URL\", \"Copertina\",\n ]);\n const isbnProp = findProp(props, [\n \"ISBN\", \"ISBN-13\", \"ISBN-10\",\n ]);\n const genreProp = findProp(props, [\n \"Genre\", \"Category\", \"Tag\", \"Genere\", \"Tags\",\n ]);\n const descProp = findProp(props, [\n \"Description\", \"Summary\", \"Blurb\", \"Descrizione\", \"Notes\",\n ]);\n\n const pageCover = page.cover?.external?.url ?? page.cover?.file?.url ?? null;\n\n return {\n id: page.id,\n title: getText(titleProp) || \"Untitled\",\n author: getText(authorProp),\n coverUrl: getFileUrl(coverProp) ?? pageCover,\n onHold: getCheckbox(holdProp),\n isbn: getText(isbnProp) || null,\n genre: getText(genreProp) || null,\n description: getText(descProp) || null,\n notionUrl: page.url ?? \"\",\n rawProperties: props,\n } as Book;\n}\n",[154],"c8dd491d-8ff9-4910-ba08-e4f45e9269e3","main.tsx",10,["D",1784339553397],1,"http","import React from \"npm:react@18\";\nimport { renderToStaticMarkup } from \"npm:react-dom@18/server\";\nimport { fetchBooks, fetchBook, type Book } from \"./notion.ts\";\nimport { STYLES } from \"./styles.ts\";\n\n// ── Components ────────────────────────────────────────────\n\nfunction Cover({ url, alt, className, placeholderClass }: {\n url: string | null;\n alt: string;\n className: string;\n placeholderClass: string;\n}) {\n if (url) {\n return React.createElement(\"img\", { src: url, alt, className, loading: \"lazy\" });\n }\n return React.createElement(\"div\", { className: placeholderClass }, alt);\n}\n\nfunction BookCard({ book }: { book: Book }) {\n return React.createElement(\"a\", {\n href: `/book/${book.id}`,\n className: \"book-card\",\n },\n React.createElement(Cover, {\n url: book.coverUrl,\n alt: book.title,\n className: \"book-cover\",\n placeholderClass: \"book-cover-placeholder\",\n }),\n React.createElement(\"div\", { className: \"book-info\" },\n React.createElement(\"div\", { className: \"book-title\" }, book.title),\n React.createElement(\"div\", { className: \"book-author\" }, book.author || \"Unknown author\"),\n React.createElement(\"span\", {\n className: `book-badge ${book.onHold ? \"badge-on-hold\" : \"badge-available\"}`,\n }, book.onHold ? \"On Hold\" : \"Available\"),\n ),\n );\n}\n\nfunction BookGrid({ books }: { books: Book[] }) {\n return React.createElement(\"div\", { className: \"book-grid\" },\n books.map((book) =>\n React.createElement(BookCard, { key: book.id, book })\n ),\n );\n}\n\nfunction BookDetail({ book }: { book: Book }) {\n const metaRows: [string, string | null][] = [\n [\"Author\", book.author || null],\n [\"ISBN\", book.isbn],\n [\"Genre\", book.genre],\n [\"Description\", book.description],\n ];\n\n return React.createElement(React.Fragment, null,\n React.createElement(\"a\", { href: \"/\", className: \"back-link\" }, \"← Back to library\"),\n React.createElement(\"div\", { className: \"detail-wrap\" },\n React.createElement(Cover, {\n url: book.coverUrl,\n alt: book.title,\n className: \"detail-cover\",\n placeholderClass: \"detail-cover-placeholder\",\n }),\n React.createElement(\"div\", { className: \"detail-info\" },\n React.createElement(\"h2\", null, book.title),\n React.createElement(\"p\", { className: \"author\" }, book.author || \"Unknown author\"),\n React.createElement(\"div\", {\n className: `hold-status ${book.onHold ? \"on-hold\" : \"available\"}`,\n },\n book.onHold ? \"📕 On Hold\" : \"📗 Available\",\n ),\n React.createElement(\"div\", { className: \"detail-meta\" },\n ...metaRows\n .filter(([, v]) => v)\n .map(([label, value]) =>\n React.createElement(\"div\", { key: label, className: \"meta-row\" },\n React.createElement(\"span\", { className: \"meta-label\" }, label),\n React.createElement(\"span\", { className: \"meta-value\" }, value),\n )\n ),\n ),\n React.createElement(\"a\", {\n href: `https://bookshop.org/search?keywords=${encodeURIComponent(`${book.title}${book.author ? \" \" + book.author : \"\"}`)}`,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"notion-link\",\n }, \"View on Bookshop.org →\"),\n ),\n ),\n );\n}\n\nfunction ErrorPage({ message }: { message: string }) {\n return React.createElement(\"div\", { className: \"error-box\" },\n React.createElement(\"h3\", null, \"Something went wrong\"),\n React.createElement(\"p\", null, message),\n );\n}\n\nfunction Layout({ children }: { children: React.ReactNode }) {\n return React.createElement(React.Fragment, null,\n React.createElement(\"header\", null,\n React.createElement(\"h1\", null,\n React.createElement(\"a\", { href: \"/\" }, \"📚 Book Library\"),\n ),\n React.createElement(\"p\", null, \"Powered by Notion\"),\n ),\n React.createElement(\"div\", { className: \"container\" }, children),\n );\n}\n\nfunction renderPage(inner: React.ReactElement): string {\n const body = renderToStaticMarkup(\n React.createElement(Layout, null, inner)\n );\n return `\n\n\n \n \n Book Library\n \n\n\n${body}\n\n`;\n}\n\n// ── HTTP Handler ──────────────────────────────────────────\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n try {\n // Book detail: /book/:id\n const bookMatch = path.match(/^\\/book\\/([\\w-]+)$/);\n\n if (bookMatch) {\n const book = await fetchBook(bookMatch[1]);\n if (!book) {\n return new Response(\n renderPage(React.createElement(ErrorPage, { message: \"Book not found.\" })),\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" }, status: 404 },\n );\n }\n return new Response(\n renderPage(React.createElement(BookDetail, { book })),\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n // Book grid: /\n const books = await fetchBooks();\n\n if (books.length === 0) {\n return new Response(\n renderPage(React.createElement(ErrorPage, { message: \"No books found in the database.\" })),\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n return new Response(\n renderPage(React.createElement(BookGrid, { books })),\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n } catch (err) {\n const message = err instanceof Error ? err.message : \"Unknown error\";\n return new Response(\n renderPage(React.createElement(ErrorPage, { message })),\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" }, status: 500 },\n );\n }\n}\n","farthergate-biblio",[162],"f6b721c9-5787-4b98-ad7c-2bad92a3b59e","README.md","d00f3508-822c-11f1-b6c1-1607ee4eb77e",4,["D",1784326440592],"# 📚 Notion Book Library\n\nA web interface that pulls book data from a Notion database and displays it in a responsive grid with a detail page showing hold status.\n\n## Setup\n\n### 1. Notion Integration\n\n1. Go to [notion.so/my-integrations](https://www.notion.so/my-integrations) and create a new integration.\n2. Copy the **Internal Integration Secret** — this is your `NOTION_TOKEN`.\n3. Open your Notion book database, click `…` → `Connections` → add your integration.\n\n### 2. Notion Database\n\nYour database should have these properties (names are flexible — the code tries common variants):\n\n| Property | Type | Purpose |\n|---|---|---|\n| Title / Name | Title | Book title |\n| Author | Rich text or Select | Author name |\n| On Hold | Checkbox | Whether a hold has been placed |\n| Cover / Image | Files or URL | Book cover image |\n| ISBN | Rich text | ISBN number (optional) |\n| Genre | Select or Multi-select | Genre tags (optional) |\n| Description | Rich text | Book description (optional) |\n\n### 3. Environment Variables\n\nSet these in the val's Environment Variables settings:\n\n- `NOTION_TOKEN` — your Notion integration token\n- `NOTION_DATABASE_ID` — the database ID (found in the database URL: `notion.so/DATABASE_ID?v=...`)\n\n## Routes\n\n- `/` — Book grid with all books from the database\n- `/book/:id` — Book detail page with cover, metadata, and hold status\n",[171],"84b0ccc3-878c-41fb-813a-dd927db618e0","pages","0dba9982-68ef-4cdb-9d5a-3567938b9fb2",13,["D",1784345329302],"directory",[178],"bf4140e3-7712-4511-bfa9-930663399015","lib","0651e6fd-87db-4254-b8f0-9570af674854",12,["D",1784345329290],[185],"e6871aa7-ed79-47ad-b841-831b761d0f5d","components","2c9b01f1-9c0a-4d3a-a163-2d0acede0225",11,["D",1784345329286],[191],"pulls","branches","forks","envVars",{"_203":147,"_205":68},"connections",{"_203":68,"_204":68},"count","unfilledCount","emptyCount",{"_48":190,"_37":191,"_35":192,"_146":-5,"_46":47,"_45":193,"_148":64,"_43":306,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_223":307,"_32":308},{"_48":302,"_37":38,"_35":36,"_146":192,"_46":47,"_45":14,"_148":30,"_43":303,"_13":68,"_39":40,"_41":42,"_29":30,"_151":-5,"_223":304,"_32":305},{"_48":294,"_37":295,"_35":296,"_146":192,"_46":47,"_45":297,"_148":30,"_43":298,"_13":68,"_39":40,"_41":299,"_29":30,"_151":-5,"_223":300,"_32":301},{"_48":286,"_37":287,"_35":288,"_146":192,"_46":47,"_45":289,"_148":30,"_43":290,"_13":68,"_39":40,"_41":291,"_29":30,"_151":-5,"_223":292,"_32":293},{"_48":279,"_37":280,"_35":281,"_146":192,"_46":47,"_45":193,"_148":30,"_43":282,"_13":68,"_39":40,"_41":283,"_29":30,"_151":-5,"_223":284,"_32":285},{"_48":271,"_37":272,"_35":273,"_146":192,"_46":47,"_45":274,"_148":30,"_43":275,"_13":68,"_39":40,"_41":276,"_29":30,"_151":-5,"_223":277,"_32":278},{"_48":263,"_37":264,"_35":265,"_146":192,"_46":47,"_45":266,"_148":30,"_43":267,"_13":68,"_39":40,"_41":268,"_29":30,"_151":-5,"_223":269,"_32":270},{"_48":184,"_37":185,"_35":186,"_146":-5,"_46":47,"_45":187,"_148":64,"_43":260,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_223":261,"_32":262},{"_48":253,"_37":254,"_35":255,"_146":186,"_46":47,"_45":187,"_148":30,"_43":256,"_13":68,"_39":40,"_41":257,"_29":30,"_151":-5,"_223":258,"_32":259},{"_48":177,"_37":178,"_35":179,"_146":-5,"_46":47,"_45":180,"_148":64,"_43":250,"_13":68,"_39":182,"_41":-5,"_29":30,"_151":-5,"_223":251,"_32":252},{"_48":243,"_37":244,"_35":245,"_146":179,"_46":47,"_45":180,"_148":30,"_43":246,"_13":68,"_39":40,"_41":247,"_29":30,"_151":-5,"_223":248,"_32":249},{"_48":235,"_37":236,"_35":237,"_146":179,"_46":47,"_45":238,"_148":30,"_43":239,"_13":68,"_39":40,"_41":240,"_29":30,"_151":-5,"_223":241,"_32":242},{"_48":170,"_37":171,"_35":172,"_146":-5,"_46":47,"_45":173,"_148":30,"_43":232,"_13":68,"_39":26,"_41":175,"_29":30,"_151":-5,"_223":233,"_32":234},{"_48":161,"_37":162,"_35":62,"_146":-5,"_46":47,"_45":163,"_148":30,"_43":229,"_13":165,"_39":166,"_41":167,"_29":30,"_151":168,"_223":230,"_32":231},{"_48":153,"_37":154,"_35":155,"_146":-5,"_46":47,"_45":156,"_148":30,"_43":226,"_13":158,"_39":40,"_41":159,"_29":30,"_151":-5,"_223":227,"_32":228},{"_48":143,"_37":144,"_35":145,"_146":-5,"_46":47,"_45":147,"_148":30,"_43":222,"_13":68,"_39":40,"_41":150,"_29":30,"_151":-5,"_223":224,"_32":225},["D",1784326413587],"children",[],[144],["D",1784328087883],[],[154],["D",1784339553397],[],[162],["D",1784326440592],[],[171],"356e2624-31f9-412e-850d-bf514b79beac","GridPage.tsx","e27e8668-8258-11f1-98ba-1607ee4eb77e",17,["D",1784345369175],"import React from \"npm:react@18\";\nimport type { Book } from \"../notion.ts\";\nimport { BookGrid } from \"../components/BookGrid.tsx\";\n\nexport function GridPage({ books }: { books: Book[] }) {\n return React.createElement(BookGrid, { books });\n}\n",[],[178,236],"49b5b3e2-b7e0-4535-99c5-241bdf455683","DetailPage.tsx","cadb6dd2-8258-11f1-93e0-1607ee4eb77e",["D",1784345329302],"import React from \"npm:react@18\";\nimport type { Book } from \"../notion.ts\";\nimport { BookDetail } from \"../components/BookDetail.tsx\";\n\nexport function DetailPage({ book }: { book: Book }) {\n return React.createElement(BookDetail, { book });\n}\n",[],[178,244],["D",1784345329302],[216,217],[178],"2080fa7a-e8d0-4a8c-85b2-090ac6b02be3","render.ts","cabc506e-8258-11f1-b00f-1607ee4eb77e",["D",1784345329290],"import React from \"npm:react@18\";\nimport { renderToStaticMarkup } from \"npm:react-dom@18/server\";\nimport { STYLES } from \"../styles.ts\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport function renderPage(inner: React.ReactElement): string {\n const body = renderToStaticMarkup(\n React.createElement(Layout, null, inner)\n );\n return `\n\n\n \n \n Book Library\n \n\n\n${body}\n\n`;\n}\n\nexport function htmlResponse(inner: React.ReactElement, status = 200): Response {\n return new Response(renderPage(inner), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n status,\n });\n}\n",[],[185,254],["D",1784345329290],[214],[185],"f49adf76-5ac9-4df1-aab7-5871e9ced7a1","Layout.tsx","e2672dc4-8258-11f1-9cc3-1607ee4eb77e",15,["D",1784345369173],"import React from \"npm:react@18\";\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n return React.createElement(React.Fragment, null,\n React.createElement(\"header\", null,\n React.createElement(\"h1\", null,\n React.createElement(\"a\", { href: \"/\" }, \"📚 Book Library\"),\n ),\n React.createElement(\"p\", null, \"Powered by Notion\"),\n ),\n React.createElement(\"div\", { className: \"container\" }, children),\n );\n}\n",[],[191,264],"47f6c250-13e7-4054-9c8a-1e7cfc8a761d","ErrorPage.tsx","e297766e-8258-11f1-af03-1607ee4eb77e",18,["D",1784345369183],"import React from \"npm:react@18\";\n\nexport function ErrorPage({ message }: { message: string }) {\n return React.createElement(\"div\", { className: \"error-box\" },\n React.createElement(\"h3\", null, \"Something went wrong\"),\n React.createElement(\"p\", null, message),\n );\n}\n",[],[191,272],"fc3cda9b-e088-42ad-9b2d-b5825111ddcd","Cover.tsx","ca9bfcd8-8258-11f1-af03-1607ee4eb77e",["D",1784345329286],"import React from \"npm:react@18\";\n\nexport function Cover({ url, alt, className, placeholderClass }: {\n url: string | null;\n alt: string;\n className: string;\n placeholderClass: string;\n}) {\n if (url) {\n return React.createElement(\"img\", { src: url, alt, className, loading: \"lazy\" });\n }\n return React.createElement(\"div\", { className: placeholderClass }, alt);\n}\n",[],[191,280],"085aab4c-fc7b-451d-a542-70e8413fead0","BookGrid.tsx","e2609310-8258-11f1-a17f-1607ee4eb77e",14,["D",1784345369172],"import React from \"npm:react@18\";\nimport type { Book } from \"../notion.ts\";\nimport { BookCard } from \"./BookCard.tsx\";\n\nexport function BookGrid({ books }: { books: Book[] }) {\n return React.createElement(\"div\", { className: \"book-grid\" },\n books.map((book) =>\n React.createElement(BookCard, { key: book.id, book })\n ),\n );\n}\n",[],[191,287],"92c50cbd-4512-4483-9c9a-e13ee5b38929","BookDetail.tsx","e26e338a-8258-11f1-8b21-1607ee4eb77e",16,["D",1784345369174],"import React from \"npm:react@18\";\nimport type { Book } from \"../notion.ts\";\nimport { Cover } from \"./Cover.tsx\";\n\nexport function BookDetail({ book }: { book: Book }) {\n const metaRows: [string, string | null][] = [\n [\"Author\", book.author || null],\n [\"ISBN\", book.isbn],\n [\"Genre\", book.genre],\n [\"Description\", book.description],\n ];\n\n return React.createElement(React.Fragment, null,\n React.createElement(\"a\", { href: \"/\", className: \"back-link\" }, \"← Back to library\"),\n React.createElement(\"div\", { className: \"detail-wrap\" },\n React.createElement(Cover, {\n url: book.coverUrl,\n alt: book.title,\n className: \"detail-cover\",\n placeholderClass: \"detail-cover-placeholder\",\n }),\n React.createElement(\"div\", { className: \"detail-info\" },\n React.createElement(\"h2\", null, book.title),\n React.createElement(\"p\", { className: \"author\" }, book.author || \"Unknown author\"),\n React.createElement(\"div\", {\n className: `hold-status ${book.onHold ? \"on-hold\" : \"available\"}`,\n },\n book.onHold ? \"📕 On Hold\" : \"📗 Available\",\n ),\n React.createElement(\"div\", { className: \"detail-meta\" },\n ...metaRows\n .filter(([, v]) => v)\n .map(([label, value]) =>\n React.createElement(\"div\", { key: label, className: \"meta-row\" },\n React.createElement(\"span\", { className: \"meta-label\" }, label),\n React.createElement(\"span\", { className: \"meta-value\" }, value),\n )\n ),\n ),\n React.createElement(\"a\", {\n href: `https://bookshop.org/search?keywords=${encodeURIComponent(`${book.title}${book.author ? \" \" + book.author : \"\"}`)}`,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"notion-link\",\n }, \"View on Bookshop.org →\"),\n ),\n ),\n );\n}\n",[],[191,295],"87bad0b1-47ef-417e-8d30-e6ac9399733d",["D",1784345369186],[],[191,38],["D",1784345329286],[207,208,209,210,211,212],[191],["D",1784321400727],["D",1789473046147],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_19":60,"_110":111,"_112":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"ctx",{"_87":-5,"_133":347,"_348":349,"_350":351,"_352":30,"_353":30,"_354":30,"_355":64,"_356":-5,"_357":-7,"_358":-7,"_359":68,"_360":30,"_361":30,"_362":-5,"_363":30,"_364":30,"_365":30,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":95,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v19