Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[292],"c871a2b8-3c82-11f0-9c08-9e149126039e","startSession.ts","c871a326-3c82-11f0-9c08-9e149126039e",11,["D",1748519285454],"script","export async function startSession() {\n GLANCE.Cobrowse.Visitor.startSession(\"GLANCE_KEYTYPE_RANDOM\");\n}\n// If you forget to add functions called by events\n// to the global scope (e.g., `onclick=\"startSession();\"`),\n// then those functions won't be in the global scope,\n// and the onclick will fail with Uncaught ReferenceError.\nwindow.startSession = startSession;\n",[],[18,68,299],"d6ee6e70-4c72-11f0-83c4-76b3cceeab13","slugify.ts","d6ee6ee8-4c72-11f0-83c4-76b3cceeab13",23,["D",1750271656420],"export default function slugify(str: string) {\n return str\n .toString()\n .toLowerCase()\n .trim()\n .replace(/[\\s\\W-]+/g, \"-\"); // Replace spaces and non-word chars with dashes\n}\nwindow.slugify = slugify;\n",[],[18,68,308],"c871a132-3c82-11f0-9c08-9e149126039e","recordClick.ts","c871a1a0-3c82-11f0-9c08-9e149126039e",["D",1748519285454],"export async function recordClick(action: string) {\n // Create data to store\n const clickData = {\n id: window.__DEMO_ID__,\n action: action, // cobrowse_start, cobrowse_request, content iframe...\n };\n console.log(\"click: \", JSON.stringify(clickData));\n\n fetch(\"/api/action\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(clickData),\n });\n\n if (action == \"cobrowse_request\") {\n document.getElementById(\"cta-cobrowse-request-confirmation\").style.display =\n \"block\";\n // document.getElementById(\"cta-contact\").style.display = \"none\";\n }\n}\nwindow.recordClick = recordClick;\n",[],[18,68,316],"cf165108-51f5-11f0-844a-f69ea79377d9","pollEnabledStatus.ts","c871a024-3c82-11f0-9c08-9e149126039e",["D",1750877663141],4,"export async function pollEnabledStatus() {\n // this shouldn't run forever just b/c someone forgot to close their browser tab with the demo in it\n const interval = 1000; // 10000;\n let count = 1;\n const maxCount = 500;\n\n const pinger = setInterval(async () => {\n // only run this if the /demo is visible in the browser\n if (document.visibilityState === \"visible\") {\n // startInterval();\n console.log(\"demo is visible\");\n\n // check the boolean to see if a Glimpse has enabled the link to start a cobrowsing session\n const resp = await fetch(\"/api/cobrowse/\" + window.__DEMO_ID__, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n const data = (await resp.json()) as any;\n console.log(\"Cobrowse status: \", JSON.stringify(data));\n\n // find all the elements with the className \"enabled\" and switch them to \"disabled\"\n const cobrowseOnEls = document.querySelectorAll(\".cobrowse-on\");\n\n // find all the elements with the className \"disabled\" and switch them to \"enabled\"\n const cobrowseOffEls = document.querySelectorAll(\".cobrowse-off\");\n\n if (data.cobrowse) {\n Array.from(cobrowseOnEls).forEach((el) => {\n el.style.display = \"block\";\n });\n Array.from(cobrowseOffEls).forEach((el) => {\n el.style.display = \"none\";\n });\n } else {\n Array.from(cobrowseOnEls).forEach((el) => {\n el.style.display = \"none\";\n });\n Array.from(cobrowseOffEls).forEach((el) => {\n el.style.display = \"block\";\n });\n }\n\n count++;\n if (count >= maxCount) {\n clearInterval(pinger);\n // could also show a message in the page telling the user to refresh; page is stale\n }\n } else {\n console.log(\"demo is NOT visible; it's invisible\");\n }\n }, interval);\n}\nawait pollEnabledStatus();\n",[],[18,68,323],"cf164c58-51f5-11f0-844a-f69ea79377d9","blobKeyForHealthCheck.ts","d6ee6cc2-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"export async function blobKeyForHealthCheck() {\n // get the url of this file\n // we'll use this to get values for the blob key\n const url = import.meta.url;\n // convert url param to a URL object so we can get the path\n const newURL = new URL(url);\n const path = newURL.pathname;\n console.log(path);\n\n // split the path on the @ symbol, which separates account and app info from version and path info\n const str = path.split(\"@\");\n\n // get app and account stuff\n const metaString = str[0].replace(\"/v/\", \"\");\n const metaArray = metaString.split(\"/\");\n\n // get file from path\n const fileString = str[1].replace(\".ts\", \"\");\n const fileName = fileString.split(\"/\").pop();\n\n const blobKey = [\n metaArray[1], // app name; e.g., Glimpse\n fileName, // this file's filename; correponds to the cron that builds the blob; see /backend/crons/\n \"healthCheck\", // this blobKey util can explicitly name itself vs using a dynamic value (e.g., :id) like the others\n ].join(\"--\");\n\n return blobKey;\n}\n",[],[18,68,331],"cf1648f2-51f5-11f0-844a-f69ea79377d9","blobKeyForDemoCobrowseStatus.ts","d6ee6a42-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"export async function blobKeyForDemoCobrowseStatus(id: string) {\n // get the url of this file\n // we'll use this to get values for the blob key\n const url = import.meta.url;\n // convert url param to a URL object so we can get the path\n const newURL = new URL(url);\n const path = newURL.pathname;\n console.log(path);\n\n // split the path on the @ symbol, which separates account and app info from version and path info\n const str = path.split(\"@\");\n\n // get app and account stuff\n const metaString = str[0].replace(\"/v/\", \"\");\n const metaArray = metaString.split(\"/\");\n\n // get file from path\n const fileString = str[1].replace(\".ts\", \"\");\n const fileName = fileString.split(\"/\").pop();\n\n const blobKey = [\n metaArray[1], // app name; e.g., Glimpse\n fileName, // this file's filename; correponds to the cron that builds the blob; see /backend/crons/\n id, // the page id; the blob holds all the data for this page\n ].join(\"--\");\n\n return blobKey;\n}\n",[],[18,68,338],"cf164668-51f5-11f0-844a-f69ea79377d9","blobKeyForDemoCache.ts","c8719e94-3c82-11f0-9c08-9e149126039e",["D",1750877663141],2,"export async function blobKeyForDemoCache(id: string) {\n // get the url of this file\n // we'll use this to get values for the blob key\n const url = import.meta.url;\n // convert url param to a URL object so we can get the path\n const newURL = new URL(url);\n const path = newURL.pathname;\n // console.log(path);\n\n // split the path on the @ symbol, which separates account and app info from version and path info\n const str = path.split(\"@\");\n\n // get app and account stuff\n const metaString = str[0].replace(\"/v/\", \"\");\n const metaArray = metaString.split(\"/\");\n\n // get file from path\n const fileString = str[1].replace(\".ts\", \"\");\n const fileName = fileString.split(\"/\").pop();\n\n const blobKey = [\n metaArray[1], // app name; e.g., Glimpse\n fileName, // this file's filename; correponds to the cron that builds the blob; see /backend/crons/\n id, // the page id; the blob holds all the data for this page\n ].join(\"--\");\n\n return blobKey;\n}\n",[],[18,68,345],"8440c87e-3a9f-11f0-9baa-9e149126039e","52a3a213-80ce-4684-acd8-58bab96d39c7",["D",1748311724047],"This directory is for scripts that are either front-end scripts called by HTML interfaces, or are simple string manipulators called by the backend. \n\n## Re: /controllers and /utils\nIn this application, we have different directories for /controllers and /utils:\n\n| Aspect | **Controller** | **Util** |\n| ----------------- | --------------------------------------------------- | --------------------------------------------------- |\n| **Purpose** | Orchestrates business logic and workflows | Provides small, stateless helper functions |\n| **Scope** | High-level, often involves services or side effects | Low-level, narrow in focus (e.g., string, date ops) |\n| **State** | Works with application or user-specific data | Stateless – input in, output out |\n| **Output** | Often returns domain-specific result objects | Returns generic, context-agnostic values |\n| **Example Names** | `syncDataToNotion`, `generateUserReport` | `formatDate`, `slugify`, `chunkArray`, `debounce` |\n| **Depends On** | Services, repositories, other controllers | Pure logic, no external dependencies (ideally) |",[],[18,68,268],["D",1748311724047],[246,247,248,249,250,251,252,253],[18,68],["D",1748311724047],[245],[18],"58d30704-507c-11f0-8529-f69ea79377d9","style.css","60ff8cf5-5eb6-4614-8f64-189e0e4a5f09","5247222b-1829-414f-b141-314d28f54422",24,["D",1750715544464],"body {\n font-family: \"Inter\", sans-serif;\n}\n/* Layout */\n#app {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n.layout {\n display: flex;\n flex: 1;\n}\n\n/* Header */\nheader {\n height: 48px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n background: white;\n}\nheader h1 {\n font-size: 16px;\n font-weight: 600;\n}\nheader h1 img {\n display: inline;\n margin-right: 12px;\n max-width: 24px;\n}\nheader nav {\n display: flex;\n gap: 8px;\n}\nheader button {\n padding: 4px 12px;\n border-radius: 4px;\n font-size: 14px;\n border: none;\n background: transparent;\n color: #787774;\n cursor: pointer;\n transition: all 0.2s;\n}\nheader button:hover {\n background: #f1f1f0;\n}\nheader button.primary {\n background: #0084ff;\n color: white;\n}\nheader button.primary:hover {\n background: #0073e6;\n}\n.menu-toggle {\n display: none;\n}\n\n/* Sidebar */\n.sidebar {\n width: 240px;\n background: #fbfbfa;\n border-right: 1px solid #e5e5e5;\n display: flex;\n flex-direction: column;\n padding: 8px 0;\n}\n.sidebar nav {\n flex: 1;\n}\n.sidebar a {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n margin: 6px 8px;\n border-radius: 4px;\n font-size: 16px;\n color: #333;\n text-decoration: none;\n transition: all 0.2s;\n}\n.sidebar a:hover {\n background: #ebebea;\n}\n.sidebar a.active {\n background: #ebebea;\n color: #171717;\n font-weight: 500;\n}\n.sidebar a.primary {\n background: #0084ff;\n color: white;\n text-align: center;\n}\n.sidebar a.secondary {\n background: #fed8b1;\n color: #333333;\n text-align: center;\n}\n.sidebar hr {\n margin: 16px 0;\n}\n/* User section */\n.user {\n /* display: flex; */\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n margin: 8px;\n border-top: 1px solid #e5e5e5;\n font-size: 14px;\n cursor: pointer;\n border-radius: 4px;\n}\n.user:hover {\n background: #ebebea;\n}\n.avatar {\n width: 24px;\n height: 24px;\n background: #0084ff;\n color: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n}\n\n/* Main content */\nmain {\n flex: 1;\n background: white;\n overflow-y: auto;\n}\narticle {\n max-width: 720px;\n margin: 0 auto;\n padding: 0px 20px;\n}\narticle h1 {\n font-size: 32px;\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 8px;\n color: #171717;\n}\narticle > p {\n font-size: 16px;\n color: #787774;\n margin-bottom: 32px;\n}\narticle section {\n margin: 48px 0;\n}\narticle h2 {\n font-size: 24px;\n font-weight: 600;\n margin: 48px 0 12px 0;\n color: #171717;\n}\narticle p {\n color: #505050;\n line-height: 1.6;\n margin-bottom: 16px;\n}\narticle ul {\n list-style: disc;\n padding-left: 24px;\n color: #505050;\n line-height: 1.8;\n}\narticle blockquote {\n border-left: 5px solid #cccccc;\n margin-top: 24px;\n padding: 24px 24px;\n background: #efefef;\n}\narticle blockquote h3 {\n margin-bottom: 12px;\n}\narticle blockquote a {\n text-decoration: underline;\n}\nmain button,\nmain a.btn {\n padding: 4px 12px;\n border-radius: 4px;\n font-size: 14px;\n border: none;\n background: transparent;\n color: #787774;\n cursor: pointer;\n transition: all 0.2s;\n}\nmain button:hover,\nmain a.btn:hover {\n background: #f1f1f0;\n}\nmain button.primary,\nmain a.btn.primary {\n background: #0084ff;\n color: white;\n}\nmain button.primary:hover,\nmain a.btn.primary:hover {\n background: #0073e6;\n}\nmain button.secondary,\nmain a.btn.secondary {\n background: #fed8b1;\n color: #333333;\n}\nmain button.secondary:hover,\nmain a.btn.secondary:hover {\n background: orange;\n}\n\n/* for the gallery */\nmain ul.features li a {\n background-position: 8px 8px;\n background-repeat: no-repeat;\n background-size: 24px 24px;\n border-radius: 4px;\n color: inherit;\n display: block;\n margin: 6px 0;\n min-height: 60px;\n padding: 6px 6px 6px 42px;\n text-decoration: none;\n}\n\n/* for the masking form embed */\nmain form {\n background: #fbfbfa;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin: 20px 0;\n padding: 20px;\n}\n\n/* Footer */\nfooter {\n border-top: 1px solid #e5e5e5;\n padding: 16px;\n text-align: center;\n font-size: 13px;\n color: #787774;\n background: white;\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n }\n .sidebar {\n position: fixed;\n left: -240px;\n top: 48px;\n height: calc(100vh - 48px);\n transition: left 0.2s;\n z-index: 100;\n }\n .sidebar.open {\n left: 0;\n }\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 99;\n display: none;\n }\n .overlay.show {\n display: block;\n }\n}\n.hidden {\n display: none;\n}\n\n/* Notion-like content styles */\n.notion-content {\n font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n Helvetica, \"Apple Color Emoji\", Arial, sans-serif, \"Segoe UI Emoji\",\n \"Segoe UI Symbol\";\n line-height: 1.5;\n color: rgb(55, 53, 47);\n max-width: 100%;\n font-size: 16px;\n}\n\n/* Typography */\n.notion-content h1 {\n font-size: 2.25rem;\n font-weight: 700;\n line-height: 1.2;\n margin: 2rem 0 0.5rem 0;\n color: rgb(55, 53, 47);\n}\n\n.notion-content h2 {\n font-size: 1.875rem;\n font-weight: 600;\n line-height: 1.3;\n margin: 1.5rem 0 0.5rem 0;\n color: rgb(55, 53, 47);\n}\n\n.notion-content h3 {\n font-size: 1.5rem;\n font-weight: 600;\n line-height: 1.3;\n margin: 1.25rem 0 0.5rem 0;\n color: rgb(55, 53, 47);\n}\n\n.notion-content p {\n font-size: 16px;\n line-height: 1.5;\n margin: 0.5rem 0;\n color: rgb(55, 53, 47);\n}\n\n.notion-content p:empty {\n margin: 0.5rem 0;\n min-height: 1.5rem;\n}\n\n/* Text formatting */\n.notion-content strong {\n font-weight: 600;\n}\n\n.notion-content em {\n font-style: italic;\n}\n\n.notion-content u {\n text-decoration: underline;\n}\n\n.notion-content s {\n text-decoration: line-through;\n}\n\n.notion-content code {\n background: rgba(135, 131, 120, 0.15);\n color: #eb5757;\n border-radius: 3px;\n font-size: 14px;\n padding: 0.2em 0.4em;\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier,\n monospace;\n}\n\n.notion-content a {\n color: rgb(55, 53, 47);\n text-decoration: underline;\n text-decoration-color: rgba(55, 53, 47, 0.4);\n transition: text-decoration-color 0.2s ease;\n}\n/* .notion-content a.pdf {\n display: block;\n margin: 20px 0;\n padding: 20px 40px;\n text-align: center;\n width: 100%;\n} */\n\n.notion-content a:hover {\n text-decoration-color: rgba(55, 53, 47, 0.8);\n}\n\n/* Lists */\n.notion-content ul,\n.notion-content ol {\n margin: 0.5rem 0;\n padding-left: 1.5rem;\n}\n\n.notion-content li {\n margin: 0.25rem 0;\n line-height: 1.5;\n font-size: 16px;\n}\n\n.notion-content ul {\n list-style-type: disc;\n}\n\n.notion-content ol {\n list-style-type: decimal;\n}\n\n/* Code blocks */\n.notion-content pre {\n background: rgb(247, 246, 243);\n border-radius: 3px;\n padding: 1rem;\n margin: 1rem 0;\n overflow-x: auto;\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier,\n monospace;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.notion-content pre code {\n background: none;\n color: rgb(55, 53, 47);\n padding: 0;\n font-size: 14px;\n font-family: inherit;\n}\n\n/* Prism.js integration for syntax highlighting */\n.notion-content pre[class*=\"language-\"] {\n background: rgb(247, 246, 243);\n border: none;\n font-size: 14px;\n}\n\n.notion-content code[class*=\"language-\"] {\n background: none;\n color: inherit;\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier,\n monospace;\n font-size: 14px;\n}\n\n/* Quotes */\n.notion-content blockquote {\n border-left: 3px solid rgb(55, 53, 47);\n padding-left: 1rem;\n margin: 1rem 0;\n font-size: 16px;\n color: rgb(55, 53, 47);\n background: none;\n}\n\n/* Callouts */\n.notion-content .callout {\n background: rgb(241, 240, 236);\n border-radius: 3px;\n padding: 1rem;\n margin: 1rem 0;\n display: flex;\n gap: 0.75rem;\n align-items: flex-start;\n border-left: 3px solid rgba(55, 53, 47, 0.16);\n}\n\n.notion-content .callout-icon {\n font-size: 1.25rem;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n.notion-content .callout-icon img {\n height: 24px;\n margin: 0;\n width: 24px;\n}\n\n.notion-content .callout-content {\n flex: 1;\n min-width: 0;\n}\n\n.notion-content .callout-content p {\n margin: 0;\n}\n\n.notion-content .callout-content p:not(:last-child) {\n margin-bottom: 0.5rem;\n}\n\n.notion-content .callout-content h1,\n.notion-content .callout-content h2,\n.notion-content .callout-content h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n\n.notion-content .callout-content ul,\n.notion-content .callout-content ol {\n margin: 0.5rem 0;\n}\n\n/* Todo items */\n.notion-content .todo-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n margin: 0.25rem 0;\n line-height: 1.5;\n}\n\n.notion-content .todo-item input[type=\"checkbox\"] {\n margin-top: 0.125rem;\n flex-shrink: 0;\n}\n\n/* Toggle/Details */\n.notion-content details {\n margin: 0.5rem 0;\n}\n\n.notion-content summary {\n cursor: pointer;\n font-weight: 500;\n padding: 0.25rem 0;\n list-style: none;\n position: relative;\n padding-left: 1.5rem;\n}\n\n.notion-content summary::-webkit-details-marker {\n display: none;\n}\n\n.notion-content summary::before {\n content: \"▶\";\n position: absolute;\n left: 0;\n top: 0.25rem;\n font-size: 0.75rem;\n transition: transform 0.2s ease;\n}\n\n.notion-content details[open] summary::before {\n transform: rotate(90deg);\n}\n\n.notion-content .toggle-content {\n padding-left: 1.5rem;\n margin-top: 0.5rem;\n}\n\n/* Dividers */\n.notion-content hr {\n border: none;\n border-top: 1px solid rgba(55, 53, 47, 0.16);\n margin: 2rem 0;\n}\n\n/* Images */\n.notion-content img {\n max-width: 100%;\n height: auto;\n border-radius: 3px;\n margin: 1rem 0;\n display: block;\n}\n\n/* Video embeds */\n.notion-content .video-embed {\n margin: 1rem 0;\n border-radius: 3px;\n overflow: hidden;\n}\n\n/* File links */\n.notion-content .file-link {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n background: rgb(247, 246, 243);\n border-radius: 3px;\n text-decoration: none;\n color: rgb(55, 53, 47);\n font-size: 0.875rem;\n margin: 0.5rem 0;\n transition: background-color 0.2s ease;\n}\n\n.notion-content .file-link:hover {\n background: rgb(235, 234, 230);\n}\n\n/* Bookmarks and link previews */\n.notion-content .bookmark,\n.notion-content .link-preview {\n border: 1px solid rgba(55, 53, 47, 0.16);\n border-radius: 3px;\n padding: 0.75rem;\n margin: 1rem 0;\n background: rgb(255, 255, 255);\n transition: background-color 0.2s ease;\n}\n\n.notion-content .bookmark:hover,\n.notion-content .link-preview:hover {\n background: rgb(247, 246, 243);\n}\n\n/* Embeds */\n.notion-content .val-embed,\n.notion-content .embed-container,\n.notion-content .generic-embed {\n border: 1px solid rgba(55, 53, 47, 0.16);\n border-radius: 3px;\n overflow: hidden;\n margin: 1rem 0;\n}\n\n.notion-content .val-embed iframe,\n.notion-content .codepen-embed iframe,\n.notion-content .figma-embed iframe,\n.notion-content .spotify-embed iframe {\n border-radius: 3px;\n}\n\n/* Tables */\n.notion-content .notion-table {\n width: 100%;\n border-collapse: collapse;\n margin: 1rem 0;\n font-size: 0.875rem;\n}\n\n.notion-content .notion-table td {\n border: 1px solid rgba(55, 53, 47, 0.16);\n padding: 0.5rem 0.75rem;\n vertical-align: top;\n}\n\n.notion-content .notion-table tr:first-child td {\n background: rgb(247, 246, 243);\n font-weight: 500;\n}\n\n/* Columns */\n.notion-content .column-list {\n display: flex;\n gap: 1rem;\n margin: 1rem 0;\n}\n\n.notion-content .column {\n flex: 1;\n min-width: 0;\n}\n\n/* Unsupported blocks */\n.notion-content .unsupported-block {\n background: rgba(255, 212, 0, 0.14);\n border: 1px solid rgba(255, 212, 0, 0.4);\n border-radius: 3px;\n padding: 0.75rem;\n margin: 1rem 0;\n font-size: 0.875rem;\n color: rgb(68, 68, 68);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .notion-content {\n font-size: 0.9rem;\n }\n\n .notion-content h1 {\n font-size: 1.875rem;\n }\n\n .notion-content h2 {\n font-size: 1.5rem;\n }\n\n .notion-content h3 {\n font-size: 1.25rem;\n }\n\n .notion-content .column-list {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .notion-content .callout {\n padding: 0.75rem;\n }\n}\n\n/* Claude-Style PDF Download Button */\n.notion-content a.pdf-download-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n /* background-color: #1a1a1a; */\n background: #0084ff;\n color: #ffffff;\n font-size: 0.875rem;\n font-weight: 400;\n border-radius: 4px;\n text-decoration: none;\n /* border: 1px solid #333333; */\n transition: all 150ms ease-in-out;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.notion-content a.pdf-download-btn:hover {\n background-color: #262626;\n /* border-color: #404040; */\n color: #ffffff;\n text-decoration: none;\n}\n\n.notion-content a.pdf-download-btn::before {\n content: \"\";\n width: 14px;\n height: 14px;\n background-color: currentColor;\n flex-shrink: 0;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E\");\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 14px 14px;\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E\");\n -webkit-mask-repeat: no-repeat;\n -webkit-mask-position: center;\n -webkit-mask-size: 14px 14px;\n}\n\n.notion-content a.pdf-download-btn:focus {\n outline: 2px solid #0ea5e9;\n outline-offset: 2px;\n}\n\n.notion-content a.pdf-download-btn:active {\n background-color: #171717;\n border-color: #262626;\n}\n",[],[373,365],"frontend","8440bf14-3a9f-11f0-9baa-9e149126039e","index.tsx","0713aec8-68a9-4f34-9317-2d0883c0344b",["D",1748311724047],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\n// Type definitions\ninterface NotionPage {\n object: \"page\";\n id: string;\n created_time: string;\n last_edited_time: string;\n properties: Record;\n url: string;\n}\n\ninterface ApiErrorResponse {\n message: string;\n status: string | number;\n}\n\nexport type DemoData = NotionPage | ApiErrorResponse;\n\n// Type guards\nexport function isApiError(data: DemoData): data is ApiErrorResponse {\n return 'message' in data && 'status' in data;\n}\n\nexport function isNotionPage(data: DemoData): data is NotionPage {\n return 'object' in data && data.object === 'page';\n}\n\n// Extend window to include our injected data\ndeclare global {\n interface Window {\n __INITIAL_DATA__?: DemoData;\n __DEMO_ID__?: string;\n }\n}\n\n// Extract demo ID from URL path\nconst getDemoIdFromPath = () => {\n const pathParts = location.pathname.split('/');\n return pathParts[pathParts.length - 1];\n};\n\n// Prepare initial data\nasync function prepareInitialData(): Promise<{\n demoData: DemoData | null;\n loading: boolean;\n error: string | null;\n demoId: string | null;\n}> {\n // First, try to use initial data injected by the server\n if (window.__INITIAL_DATA__) {\n return {\n demoData: window.__INITIAL_DATA__,\n loading: false,\n error: null,\n demoId: window.__DEMO_ID__ || getDemoIdFromPath()\n };\n }\n\n // If no initial data, fetch it from the API\n const demoId = window.__DEMO_ID__ || getDemoIdFromPath();\n if (demoId && demoId !== 'demo') {\n try {\n const response = await fetch(`/api/demo/${demoId}`);\n const data = await response.json();\n return {\n demoData: data,\n loading: false,\n error: null,\n demoId\n };\n } catch (err) {\n return {\n demoData: null,\n loading: false,\n error: err instanceof Error ? err.message : 'Unknown error',\n demoId\n };\n }\n }\n\n return {\n demoData: null,\n loading: false,\n error: null,\n demoId\n };\n}\n\n// Initialize the app\nasync function initializeApp() {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n\n const initialData = await prepareInitialData();\n \n createRoot(root).render();\n}\n\n// Start the app\ninitializeApp().catch(console.error);",[],[373,375],"58d30402-507c-11f0-8529-f69ea79377d9","index.html","af2b21b3-228b-4fad-b126-58b1780ebf52",["D",1750715544464],"\n\n \n \n \n Glance cobrowse demo\n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n\n",[],[373,382],"5f2540a2-4c46-11f0-8604-76b3cceeab13","images.md","803921e2-4222-11f0-853a-76b3cceeab13",22,["D",1750252557606],"# Glance brand\n\n- ![glance-mark-blue-gray-RGB-SMALL.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2acc4e87-f597-4733-3698-2ee3dcffb900/public)",[],[373,389],"8440ada8-3a9f-11f0-9baa-9e149126039e","favicon.svg","282a4f37-cbc6-4864-8937-5ea2b658df88",["D",1748311724047],"\n",[],[373,397],"58d2eb52-507c-11f0-8529-f69ea79377d9","App.tsx","18d44f9f-87a6-4db6-bc9d-4a81fade48ee","4e07aebb-2dcb-4ed1-867a-88465cc24665",["D",1750715544464],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DemoData, isApiError, isNotionPage } from \"../index.tsx\";\nimport { GenerateHTML } from \"./content/generateHTML.tsx\";\nimport { TOC } from \"./content/demoTableOfContents.tsx\";\n\ninterface AppProps {\n initialData: {\n demoData: DemoData | null;\n loading: boolean;\n error: string | null;\n demoId: string | null;\n };\n}\n// Simple hook for mobile menu toggle\nfunction useMobileMenu() {\n const [isOpen, setIsOpen] = useState(false);\n const toggleMenu = () => setIsOpen(!isOpen);\n const closeMenu = () => setIsOpen(false);\n return { isOpen, toggleMenu, closeMenu };\n}\n\n// Simple hook for tracking current hash for active nav styling\nfunction useCurrentHash() {\n const [currentHash, setCurrentHash] = useState(() =>\n window.location.hash.slice(1)\n );\n\n useEffect(() => {\n const handleHashChange = () => {\n setCurrentHash(window.location.hash.slice(1));\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n return () => window.removeEventListener(\"hashchange\", handleHashChange);\n }, []);\n\n return currentHash;\n}\n\nexport function App({ initialData }: AppProps) {\n // initialData\n const { demoData, loading, error } = initialData;\n // mobile menu\n const { isOpen, toggleMenu, closeMenu } = useMobileMenu();\n // current hash for nav styling\n const currentHash = useCurrentHash();\n // a little light logging so we can see that React is connecting the /frontend and the /backend\n console.log(\"Current path:\", location.pathname);\n console.log(\"Demo data:\", demoData);\n\n // renderDemoData puts the page elements together\n const renderDemoData = () => {\n if (loading) return

Loading demo data...

;\n if (error) return

Error loading data: {error}

;\n if (!demoData) return

No demo data available

;\n\n // Handle error responses from the API\n if (isApiError(demoData)) {\n return (\n

API Response:

\n Status: {demoData.status}\n

\n Message: {demoData.message}\n

\n );\n }\n\n // Render successful Notion page data\n if (isNotionPage(demoData)) {\n // extract values from demoData\n // use Name if present, otherwise use email\n const getDemoTitle = () => {\n return (\n demoData.properties?.Name?.title?.[0]?.plain_text ||\n demoData.properties?.Email?.email ||\n \"no Name or Email address provided\"\n );\n };\n const demoTitle = getDemoTitle();\n\n const agent = {\n name: demoData.properties?.[\"Agent name\"]?.formula?.string || \"\",\n email: demoData.properties?.[\"Agent email\"]?.formula?.string || \"\",\n };\n\n const cobrowsingEnabled =\n demoData.properties?.Cobrowse?.checkbox || false;\n\n // const demoUrl = demoData.properties?.URL?.url;\n\n return (\n

\n \n

\n \n Glance cobrowse demo\n

\n \n

\n\n

\n {demoData.related_pages.map((page, index) => (\n {\n closeMenu();\n recordClick(\n `content ${page.properties.Name.title[0].plain_text}`\n );\n }}\n >\n {page.properties.Name?.title?.[0]?.plain_text ||\n \"Untitled\"}\n \n ))}\n \n\n

\n {/* 🙂 */}\n

\n Connect with your agent to cobrowse\n

{agent.name}

{agent.email}

\n \n 🟢 Cobrowsing is on\n \n

\n \n ⚪️ Cobrowsing is off\n {\n recordClick(\"cobrowse_request\");\n }}\n className=\"primary\"\n >\n Contact Glance\n \n \n

\n Thanks, an agent has been contacted and cobrowsing will\n be enabled shortly. Stay here.\n

\n \n\n

\n {demoData.related_pages.map((page, index) => (\n \n

\n {page.properties.Name?.title?.[0]?.plain_text ||\n \"Untitled\"}\n

\n\n {/* format Notion page content */}\n \n\n {/* show the demo table of contents navigation\n if this is the first page of demo content */}\n

\n \n

\n \n ))}\n

\n \n\n \n {/* Overlay only renders when menu is open */}\n {isOpen &&

}\n

\n \n );\n }\n\n return

Unknown data format

;\n };\n\n // this last return puts the page elements from renderDemoData into a div, which React likes\n return (\n

{renderDemoData()}

\n );\n}\n",[],[373,412,404],"components","fc6f91f4-537c-11f0-ac25-f69ea79377d9","generateHTML.tsx","d6ee59b2-4c72-11f0-83c4-76b3cceeab13","17bc3df7-2399-4601-8d37-7b8e8a713634",["D",1751045672451],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, ReactNode } from \"https://esm.sh/react@18.2.0\";\n\n/*\n * For val.run pages to automatically adjust iframe height, add this script to your val.run page:\n \n * The parent will receive the height message once and adjust the iframe accordingly.\n */\n\ninterface NotionRichText {\n type: string;\n text?: {\n content: string;\n link?: { url: string };\n };\n annotations?: {\n bold?: boolean;\n italic?: boolean;\n strikethrough?: boolean;\n underline?: boolean;\n code?: boolean;\n color?: string;\n };\n href?: string;\n}\n\ninterface NotionBlock {\n id: string;\n type: string;\n has_children?: boolean;\n children?: NotionBlock[];\n [key: string]: any;\n}\n\n// No longer needed since we're using JSX instead of HTML strings\n\nfunction extractYouTubeId(url: string): string | null {\n const patterns = [\n /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([^&\\n?#]+)/,\n /youtube\\.com\\/watch\\?.*v=([^&\\n?#]+)/,\n ];\n\n for (const pattern of patterns) {\n const match = url.match(pattern);\n if (match) return match[1];\n }\n return null;\n}\n\nfunction extractVimeoId(url: string): string | null {\n const match = url.match(/vimeo\\.com\\/(?:video\\/)?(\\d+)/);\n return match ? match[1] : null;\n}\n\nfunction extractLoomId(url: string): string | null {\n const match = url.match(/loom\\.com\\/share\\/([a-zA-Z0-9]+)/);\n return match ? match[1] : null;\n}\n\nfunction extractDomain(url: string): string {\n try {\n const urlObj = new URL(url);\n return urlObj.hostname.replace(/^www\\./, \"\");\n } catch {\n return url;\n }\n}\n\nexport function GenerateHTML({ data }: any) {\n if (!data || !data.results) {\n return

No content available

;\n }\n\n const blocks = data.results;\n\n useEffect(() => {\n // Trigger Prism.js syntax highlighting after content is rendered\n const highlightCode = () => {\n if (typeof window !== \"undefined\" && (window as any).Prism) {\n (window as any).Prism.highlightAll();\n }\n };\n\n // Message listener for val.run iframe height updates\n const handleMessage = (event: MessageEvent) => {\n // Only accept messages from val.run domains\n if (!event.origin.includes(\".val.run\")) return;\n\n if (event.data.type === \"iframe-height\") {\n const iframe = document.querySelector(\n `iframe[src*=\"${event.origin}\"]`\n ) as HTMLIFrameElement;\n if (iframe && event.data.height) {\n iframe.style.height = `${event.data.height}px`;\n console.log(\n `Set iframe height to ${event.data.height}px from postMessage`\n );\n }\n }\n };\n\n // Set up message listener\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"message\", handleMessage);\n }\n\n // Small delay to ensure DOM is updated and Prism is loaded\n const timer = setTimeout(highlightCode, 100);\n\n return () => {\n clearTimeout(timer);\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"message\", handleMessage);\n }\n };\n }, [blocks]);\n\n return (\n

\n {blocks.map((block: NotionBlock) => (\n

{renderBlock(block)}

\n ))}\n

\n );\n}\n\nfunction renderChildBlocks(children: NotionBlock[]): ReactNode {\n if (!children || !Array.isArray(children) || children.length === 0) {\n return null;\n }\n\n return children.map((child) => (\n

{renderBlock(child)}

\n ));\n}\n\nfunction renderBlock(block: NotionBlock): ReactNode {\n const { type } = block;\n\n switch (type) {\n case \"paragraph\":\n return renderParagraph(block);\n case \"heading_1\":\n return renderHeading(block, 1);\n case \"heading_2\":\n return renderHeading(block, 2);\n case \"heading_3\":\n return renderHeading(block, 3);\n case \"bulleted_list_item\":\n return renderListItem(block, \"ul\");\n case \"numbered_list_item\":\n return renderListItem(block, \"ol\");\n case \"to_do\":\n return renderTodo(block);\n case \"toggle\":\n return renderToggle(block);\n case \"code\":\n return renderCode(block);\n case \"quote\":\n return renderQuote(block);\n case \"callout\":\n return renderCallout(block);\n case \"divider\":\n return

;\n case \"image\":\n return renderImage(block);\n case \"video\":\n return renderVideo(block);\n case \"file\":\n return renderFile(block);\n case \"bookmark\":\n return renderBookmark(block);\n case \"link_preview\":\n return renderLinkPreview(block);\n case \"embed\":\n return renderEmbed(block);\n case \"table\":\n return renderTable(block);\n case \"table_row\":\n return renderTableRow(block);\n case \"column_list\":\n return renderColumnList(block);\n case \"column\":\n return renderColumn(block);\n default:\n return (\n

Unsupported block type: {type}

\n );\n }\n}\n\nfunction renderRichText(richTextArray: NotionRichText[]): ReactNode {\n if (!richTextArray || !Array.isArray(richTextArray)) {\n return null;\n }\n\n return richTextArray.map((richText, index) => {\n let content: ReactNode = richText.text?.content || \"\";\n const annotations = richText.annotations || {};\n\n // Apply text formatting\n if (annotations.bold) content = {content};\n if (annotations.italic) content = {content};\n if (annotations.strikethrough) content = ~~{content}~~;\n if (annotations.underline) content = {content};\n if (annotations.code) content = {content};\n\n // Apply links\n if (richText.text?.link?.url || richText.href) {\n const url = richText.text?.link?.url || richText.href;\n content = (\n \n {content}\n \n );\n }\n\n // Apply color (basic implementation)\n if (annotations.color && annotations.color !== \"default\") {\n content = {content};\n }\n\n return {content};\n });\n}\n\nfunction renderParagraph(block: NotionBlock): ReactNode {\n const content = renderRichText(block.paragraph?.rich_text || []);\n return

{content}

;\n}\n\nfunction renderHeading(block: NotionBlock, level: number): ReactNode {\n const headingData = block[`heading_${level}`];\n const content = renderRichText(headingData?.rich_text || []);\n\n switch (level) {\n case 1:\n return

{content}

;\n case 2:\n return

{content}

;\n case 3:\n return

{content}

;\n default:\n return

{content}

;\n }\n}\n\nfunction renderListItem(block: NotionBlock, listType: \"ul\" | \"ol\"): ReactNode {\n const itemData =\n block[listType === \"ul\" ? \"bulleted_list_item\" : \"numbered_list_item\"];\n const content = renderRichText(itemData?.rich_text || []);\n\n // Render child blocks if they exist (for nested lists)\n const childContent = block.children\n ? renderChildBlocks(block.children)\n : null;\n\n return (\n

\n {content}\n {childContent}\n

\n );\n}\n\nfunction renderTodo(block: NotionBlock): ReactNode {\n const todoData = block.to_do;\n const content = renderRichText(todoData?.rich_text || []);\n const checked = todoData?.checked || false;\n\n // Render child blocks if they exist\n const childContent = block.children\n ? renderChildBlocks(block.children)\n : null;\n\n return (\n

\n {content}\n {childContent}\n

\n );\n}\n\nfunction renderToggle(block: NotionBlock): ReactNode {\n const toggleData = block.toggle;\n const content = renderRichText(toggleData?.rich_text || []);\n\n // Render child blocks if they exist\n const childContent = block.children\n ? renderChildBlocks(block.children)\n : null;\n\n return (\n

{content}

{childContent}

\n );\n}\n\nfunction renderCode(block: NotionBlock): ReactNode {\n const codeData = block.code;\n const content = renderRichText(codeData?.rich_text || []);\n const language = codeData?.language || \"\";\n\n // Extract text content for code blocks\n const textContent =\n codeData?.rich_text?.map((rt) => rt.text?.content || \"\").join(\"\") || \"\";\n\n return (\n

\n      {textContent}\n

\n );\n}\n\nfunction renderQuote(block: NotionBlock): ReactNode {\n const quoteData = block.quote;\n const content = renderRichText(quoteData?.rich_text || []);\n\n // Render child blocks if they exist\n const childContent = block.children\n ? renderChildBlocks(block.children)\n : null;\n\n return (\n

\n {content}\n {childContent}\n

\n );\n}\n\nfunction renderCallout(block: NotionBlock): ReactNode {\n const calloutData = block.callout;\n const content = renderRichText(calloutData?.rich_text || []);\n const isEmoji = calloutData?.icon?.emoji ? true : false;\n const icon = isEmoji\n ? calloutData?.icon?.emoji\n : calloutData?.icon?.external?.url;\n\n // Render child blocks if they exist\n const childContent = block.children\n ? renderChildBlocks(block.children)\n : null;\n\n return (\n

\n \n {isEmoji ? icon : $\"callout$ }\n \n

\n {content}\n {childContent}\n

\n );\n}\n\nfunction renderImage(block: NotionBlock): ReactNode {\n const imageData = block.image;\n let imageUrl = \"\";\n let alt = \"\";\n\n if (imageData?.file?.url) {\n imageUrl = imageData.file.url;\n } else if (imageData?.external?.url) {\n imageUrl = imageData.external.url;\n }\n\n if (imageData?.caption) {\n // Extract text content from rich text for alt attribute\n alt = imageData.caption\n .map((rt: NotionRichText) => rt.text?.content || \"\")\n .join(\"\");\n }\n\n // console.log(\"image html:\", imageUrl);\n // image proxy -- calls the /images route\n // see /backend/index.ts\n // maybe move this to index.ts as a serveFile rewrite?\n return imageUrl ? (\n {alt}

\n ) : null;\n}\n\nfunction renderVideo(block: NotionBlock): ReactNode {\n const videoData = block.video;\n let videoUrl = \"\";\n\n if (videoData?.file?.url) {\n videoUrl = videoData.file.url;\n } else if (videoData?.external?.url) {\n videoUrl = videoData.external.url;\n }\n\n if (!videoUrl) return null;\n\n // Handle YouTube embeds\n if (videoUrl.includes(\"youtube.com\") || videoUrl.includes(\"youtu.be\")) {\n const videoId = extractYouTubeId(videoUrl);\n if (videoId) {\n return (\n \n \n \n );\n }\n }\n\n // Handle Vimeo embeds\n if (videoUrl.includes(\"vimeo.com\")) {\n const videoId = extractVimeoId(videoUrl);\n if (videoId) {\n return (\n \n \n \n );\n }\n }\n\n // Handle Loom embeds\n if (videoUrl.includes(\"loom.com\")) {\n const videoId = extractLoomId(videoUrl);\n if (videoId) {\n return (\n \n \n \n );\n }\n }\n\n // Fallback to regular video tag for direct video files\n return (\n

\n );\n}\n\nfunction renderFile(block: NotionBlock): ReactNode {\n const fileData = block.file;\n let fileUrl = \"\";\n let fileName = \"Download File\";\n\n if (fileData?.file?.url) {\n fileUrl = fileData.file.url;\n } else if (fileData?.external?.url) {\n fileUrl = fileData.external.url;\n }\n\n if (fileData?.name) {\n fileName = fileData.name;\n }\n\n return fileUrl ? (\n \n 📎 {fileName}\n \n ) : null;\n}\n\nfunction renderBookmark(block: NotionBlock): ReactNode {\n const bookmarkData = block.bookmark;\n const url = bookmarkData?.url || \"\";\n const caption = bookmarkData?.caption\n ? bookmarkData.caption\n .map((rt: NotionRichText) => rt.text?.content || \"\")\n .join(\"\")\n : \"\";\n\n if (!url) return null;\n\n // Extract domain for display\n const domain = extractDomain(url);\n const title = caption || url;\n\n return (\n \n \n 🔗\n {title}\n \n \n {domain}\n \n \n Visit Link →\n \n \n );\n}\n\nfunction renderLinkPreview(block: NotionBlock): ReactNode {\n const linkData = block.link_preview;\n const url = linkData?.url || \"\";\n\n if (!url) return null;\n\n const domain = extractDomain(url);\n\n return (\n \n \n 🌐\n Link Preview\n \n \n {domain}\n \n \n {url}\n \n \n );\n}\n\nfunction renderEmbed(block: NotionBlock): ReactNode {\n const embedData = block.embed;\n const url = embedData?.url || \"\";\n\n if (!url) return null;\n\n // Handle val.run embeds - these return HTML content that should be embedded directly\n if (url.includes(\".val.run\")) {\n // handle the special case of the PDF embed, which rewrites the placeholder embed as a PDF link\n // note that the slug below builds a link to the PDF at /demo/:id/pdf\n // and has the Glance className to render it in the Glance PDF viewer: a.pdf\n if (url.includes(\"glance-pdf-embed.val.run\")) {\n const slug = [location.pathname, \"pdf\"].join(\"/\");\n return (\n

\n \n Try the PDF viewer\n \n

\n );\n }\n\n const iframeId = `val-iframe-${Math.random().toString(36).substr(2, 9)}`;\n return (\n \n \n \n );\n }\n\n // Handle common embed types\n if (url.includes(\"twitter.com\") || url.includes(\"x.com\")) {\n return (\n \n

🐦 Twitter/X Post

\n \n View Tweet →\n \n \n );\n }\n\n if (url.includes(\"codepen.io\")) {\n const penId = url.split(\"/pen/\")[1]?.split(\"/\")[0];\n if (penId) {\n return (\n

\n \n

\n );\n }\n }\n\n if (url.includes(\"figma.com\")) {\n return (\n

\n \n

\n );\n }\n\n if (url.includes(\"spotify.com\")) {\n return (\n

\n \n

\n );\n }\n\n // Generic embed fallback\n const domain = extractDomain(url);\n return (\n \n \n 🔗\n Embedded Content\n \n \n {domain}\n \n \n View Content →\n \n \n );\n}\n\nfunction renderTable(block: NotionBlock): ReactNode {\n // Tables in Notion are complex and would need child blocks to be fully rendered\n return (\n \n {/* Table rows would be rendered here */}\n

\n );\n}\n\nfunction renderTableRow(block: NotionBlock): ReactNode {\n const rowData = block.table_row;\n const cells = rowData?.cells || [];\n\n return (\n \n {cells.map((cell: NotionRichText[], index: number) => {\n const content = renderRichText(cell);\n return {content};\n })}\n \n );\n}\n\nfunction renderColumnList(block: NotionBlock): ReactNode {\n return (\n

{/* Columns would be rendered here */}

\n );\n}\n\nfunction renderColumn(block: NotionBlock): ReactNode {\n return (\n

{/* Column content would be rendered here */}

\n );\n}\n",[],[373,412,152,414],"fc6f9014-537c-11f0-ac25-f69ea79377d9","demoTableOfContents.tsx","d6ee57b4-4c72-11f0-83c4-76b3cceeab13",["D",1751045672451],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function TOC({ data }): any {\n return (\n

\n \n

\n {item?.properties?.Name?.title?.[0]?.plain_text}\n

\n {item.page_content?.results?.[0]?.paragraph?.rich_text.map(\n (item) => item.plain_text\n )}\n

\n \n \n ))}\n

\n );\n}\n",[],[373,412,152,422],"803934d4-4222-11f0-853a-76b3cceeab13","pdf","2b49a0c0-d31e-4903-8d93-889d55ffa85c",["D",1749137639580],[],[373,412,152,429],"803931d2-4222-11f0-853a-76b3cceeab13","iframe","0c868f35-94d5-44fe-b91a-4ae04e3b447c",["D",1749137639580],[],[373,412,152,435],"80392dae-4222-11f0-853a-76b3cceeab13","form","5f876a07-c42c-46a4-b8c4-f18decfe8f45",["D",1749137639580],[],[373,412,152,441],"80392ba6-4222-11f0-853a-76b3cceeab13","checkout","6b054999-f314-47e7-8c6e-3a352d9f2628",["D",1749137639580],[],[373,412,152,447],"8039296c-4222-11f0-853a-76b3cceeab13",["D",1749137639580],[232,233,234,235,236,237],[373,412,152],"8440ab96-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[231,238],[373,412],"8440c644-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[230,239,240,241,242,243],[373],"fc6f81b4-537c-11f0-ac25-f69ea79377d9","index.ts","8604307c-0e47-4109-b15a-8e2e0f62c817",["D",1751045672451],"http","import {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\n// Import route modules\nimport api from \"./routes/api/api.routes.ts\";\nimport auth from \"./routes/auth.ts\";\nimport root from \"./routes/root.routes.ts\";\nimport tasks from \"./routes/tasks/tasks.routes.ts\";\nimport demo from \"./routes/views/demo/demo.views.routes.ts\";\n\n// Create main app\nconst app = new Hono();\n\n// Apply authentication middleware to all routes\napp.use(\"*\", auth);\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve all /utils files\napp.get(\"/utils/**/*\", async (c) => {\n // console.log(c.req.path);\n // console.log(import.meta.url);\n return await serveFile(\"/shared\" + c.req.path, import.meta.url);\n});\n\n// Mount route modules\napp.route(\"/\", root);\napp.route(\"/api\", api);\napp.route(\"/tasks\", tasks);\napp.route(\"/demo\", demo);\napp.route(\"/glimpse\", demo); // /demo and /glimpse mount the same route modules\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[],[472,465],"backend","1d344e98-527e-11f0-aed9-f69ea79377d9","root.routes.ts","d6ee42d8-4c72-11f0-83c4-76b3cceeab13","78ee288e-baa6-4df7-b4ed-bf7b290ac260",30,["D",1750936205762],"import { Hono } from \"npm:hono@3\";\nimport { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { blobKeyForHealthCheck } from \"../../shared/utils/blobKeyForHealthCheck.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n try {\n const blobKey = await blobKeyForHealthCheck();\n const data = await blob.getJSON(blobKey);\n return c.html(`

${JSON.stringify(data, null, 2)}

`);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: \"Failed to connect to Notion API\",\n error: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,474],"routes","c87183b4-3c82-11f0-9c08-9e149126039e","auth.ts","c8718422-3c82-11f0-9c08-9e149126039e",["D",1748519285454],"export default async (c, next) => {\n const method = c.req.method;\n const secret = c.req.header(\"x-api-key\"); // sent by Notion webhooks via POST\n const fetchSite = c.req.header(\"sec-fetch-site\");\n\n // POSTs from Notion are automation webhooks that carry the x-api-key custom header\n // that header needs to match the X_API_KEY environment variable in this project\n // or this auth check won't pass\n // for now we can just let GETs through without any auth shim\n if (\n (secret && secret !== Deno.env.get(\"X_API_KEY\") || fetchSite && fetchSite !== \"same-origin\") && method !== \"GET\"\n ) {\n console.log(fetchSite);\n return c.text(\"Unauthorized\", 401);\n }\n await next();\n};",[],[472,482,484],"d6ee31c6-4c72-11f0-83c4-76b3cceeab13","_README.md","d6ee3234-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"# Routes Directory\n\nThis directory contains all the route handlers for the Notion application. Each file exports a Hono app that handles a specific route or group of related routes.\n",[],[472,482,491],"cf16311e-51f5-11f0-844a-f69ea79377d9","images.views.routes.ts","904e2252-517d-11f0-b943-f69ea79377d9","5391475c-a97a-42ab-bfc7-6d84ca0278f6",["D",1750877663141],"import { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// this route is a proxy for images added to Notion pages\n// it is called from /frontend/components/content/generateHTML.tsx -> renderImage()\n// without it, Notion images will time out due to an expiration from their CDN\n\napp.get(\"/\", async (c) => {\n const url = c.req.query(\"url\");\n if (!url) {\n return c.text(\"Missing URL\", 400);\n }\n\n // console.log(\"image: \", url);\n\n try {\n const response = await fetch(url);\n if (!response.ok) {\n return c.text(\"Failed to fetch image\", response.status);\n }\n\n const contentType =\n response.headers.get(\"content-type\") ?? \"application/octet-stream\";\n const imageBuffer = await response.arrayBuffer();\n\n return new Response(imageBuffer, {\n status: 200,\n headers: {\n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // optional caching\n },\n });\n } catch (err) {\n return c.text(\"Error fetching image\", 500);\n }\n});\n\nexport default app;\n",[],[472,482,505,498],"views","d6ee5598-4c72-11f0-83c4-76b3cceeab13","d6ee5606-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"This directory holds endpoints that render data in the browser, notably the /demo endpoint and the /demo/pdf endpoint.\n",[],[472,482,505,491],"904e1a64-517d-11f0-b943-f69ea79377d9","pdf.views.routes.ts","904e1ae6-517d-11f0-b943-f69ea79377d9","b6c097e2-34b3-48fe-9bc1-58d5a15abb24",25,["D",1750826018217],"// Convert image URL to base64\nasync function getImageBase64(url: string): Promise {\n const res = await fetch(url);\n const buffer = await res.arrayBuffer();\n const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));\n const contentType = res.headers.get(\"content-type\") || \"image/png\";\n return `data:${contentType};base64,${base64}`;\n}\n\nexport const generatePDF = async (options: {\n pageId: string;\n date: string;\n customerName: string;\n customerEmail: string;\n agentName: string;\n agentEmail: string;\n items: [];\n}): Promise => {\n const { jsPDF } = await import(\"npm:jspdf\");\n const { applyPlugin } = await import(\"npm:jspdf-autotable\");\n\n const logoDataUrl = await getImageBase64(\n \"https://www.glance.cx/hs-fs/hubfs/raw_assets/public/Glance/images/gradientLogo.png\"\n );\n\n applyPlugin(jsPDF);\n\n const doc = new jsPDF();\n const {\n pageId,\n date,\n customerName,\n customerEmail,\n agentName,\n agentEmail,\n items,\n } = options;\n // variables for tabular content\n const keys = Object.keys(items[0]); // get column names\n const head = [keys];\n const tableBody = items.map((row) => keys.map((k) => row[k]));\n\n // Set initial y position for content\n let y = 20;\n\n // Add image: (imageData, format, x, y, width, height)\n doc.addImage(logoDataUrl, \"PNG\", 20, y, 30, 10);\n y += 30;\n\n // Set invoice header\n doc.setFontSize(18).setFont(undefined, \"bold\");\n doc.text(\"Glance cobrowse demo receipt\", 20, y);\n y += 7;\n doc.setFontSize(12).setFont(undefined, \"normal\");\n doc.text(`${date}`, 20, y);\n y += 14;\n doc.setFontSize(12).setFont(undefined, \"bold\");\n doc.text(`For`, 20, y);\n doc.text(`From`, 100, y);\n y += 5;\n doc.setFontSize(12).setFont(undefined, \"normal\");\n doc.text(`${customerName}`, 20, y);\n doc.text(`${agentName}`, 100, y);\n y += 5;\n doc.text(`${customerEmail}`, 20, y);\n doc.text(`${agentEmail}`, 100, y);\n // Set customer information\n y += 20;\n doc.autoTable({\n startY: y,\n head: head,\n body: tableBody,\n });\n y = doc.lastAutoTable.finalY + 20; // add some spacing\n\n // doc.line(20, y, 180, y);\n // y += 10;\n doc.text(\"Notes:\", 20, y);\n y += 10;\n doc.text(\"Thanks for cobrowsing with me!\", 20, y);\n y += 10;\n doc.text(\n \"If you want to learn more about cobrowsing and PDFs, check out our Docs:\",\n 20,\n y\n );\n y += 5;\n doc.text(\n \"https://help.glance.cx/glance-cobrowse/features/pdf_cobrowse/\",\n 20,\n y\n );\n\n y += 10;\n doc.text(`- ${agentName}`, 20, y);\n y += 20;\n doc.text(`${pageId}`, 20, y);\n\n return doc.output();\n};\n\nexport const examplePDF = async (page: any, interactions: any) => {\n // console.log(\"page.id for examplePDF: \", page.id);\n // console.log(\"interactions: \", interactions);\n const actionsObjects = interactions.pages.map((event) => {\n return {\n event: event.properties?.Name?.title?.[0]?.plain_text,\n \"date & time\": event.properties?.Date?.date?.start,\n };\n });\n const actions = actionsObjects;\n\n // use the data to generate the PDF\n const invoicePDF = await generatePDF({\n pageId: page.id || \"001\",\n date: new Date().toDateString(),\n customerName: page.properties.Name?.title?.[0]?.plain_text || \" \",\n customerEmail: page.properties.Email?.email || \" \",\n agentName: page.properties[\"Agent name\"]?.formula?.string || \" \",\n agentEmail: page.properties[\"Agent email\"]?.formula?.string || \" \",\n items: actions,\n });\n // Convert the PDF output to a proper binary response\n const pdfBuffer = new Uint8Array(invoicePDF.length);\n for (let i = 0; i < invoicePDF.length; i++) {\n pdfBuffer[i] = invoicePDF.charCodeAt(i);\n }\n\n // headers make it possible to view the PDF in the browser, and download it with a nice filename\n return new Response(pdfBuffer, {\n headers: {\n \"Content-Type\": \"application/pdf\",\n \"Content-Disposition\": \"inline; filename=glance-receipt.pdf\",\n },\n });\n};\n\nexport default async function (req: Request): Promise {\n try {\n // Test data - modify this directly in the code to test different scenarios\n const testData = {\n pageId: \"PAGE-12345\",\n date: \"2024-01-15\",\n customerName: \"John Doe\",\n customerEmail: \"john.doe@example.com\",\n agentName: \"Jane Smith\",\n agentEmail: \"jane.smith@glance.cx\",\n items: [\n { Product: \"Cobrowse Session\", Quantity: \"1\", Price: \"$50.00\" },\n { Product: \"Screen Share\", Quantity: \"2\", Price: \"$25.00\" },\n { Product: \"Support Call\", Quantity: \"1\", Price: \"$75.00\" },\n ],\n };\n\n // Generate PDF using your exact code\n const pdfOutput = await generatePDF(testData);\n\n // // Convert the PDF output to a proper binary response\n // const pdfBuffer = new Uint8Array(pdfOutput.length);\n // for (let i = 0; i < pdfOutput.length; i++) {\n // pdfBuffer[i] = pdfOutput.charCodeAt(i);\n // }\n\n // return new Response(pdfBuffer, {\n // headers: {\n // \"Content-Type\": \"application/pdf\",\n // \"Content-Disposition\": \"inline; filename=glance-receipt.pdf\",\n // },\n // });\n } catch (error) {\n console.error(\"PDF generation error:\", error);\n return new Response(`Error generating PDF: ${error.message}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" },\n });\n }\n}\n",[],[472,482,505,521,513],"demo","1d345276-527e-11f0-aed9-f69ea79377d9","demo.views.routes.ts","904e138e-517d-11f0-b943-f69ea79377d9",["D",1750936205762],"import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getPage } from \"../../../controllers/page.controller.ts\";\nimport { examplePDF } from \"./pdf.views.routes.ts\";\nimport { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { blobKeyForDemoCache } from \"../../../../shared/utils/blobKeyForDemoCache.ts\";\nimport { getDemoInteractions } from \"../../../controllers/actions.controller.ts\";\n\nconst app = new Hono();\n\napp.get(\"/:id/pdf\", async (c) => {\n // get id from params\n const id = c.req.param(\"id\");\n // get notion page with that id\n const page = await getPage(id);\n // get Glimpse interactions related to that page\n const interactions = await getDemoInteractions(id);\n // console.log(interactions);\n return await examplePDF(page, interactions);\n});\n\n// Serve demo page with initial data injection\napp.get(\"/:id\", async (c) => {\n const id = c.req.param(\"id\");\n\n try {\n // Get the HTML template\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // get demo data from blob storage, which we use as a cache for demos\n // all the data (i.e., Notion content) is in the demo's blob\n // /backend/crons/demoCache.ts runs every minute to refresh the blob\n const blobKey = await blobKeyForDemoCache(id);\n console.log(\"blobKey: \", blobKey);\n\n const initialData = await blob.getJSON(blobKey);\n // console.log(\"initialData:\", await initialData);\n\n // Inject data into the HTML template to avoid extra round-trips\n // and escape HTML that would break the layout\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n } catch (error) {\n console.error(\"Error loading demo data:\", error);\n // Fallback to serving HTML without initial data\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n});\n\napp.get(\"/\", async (c) => {\n try {\n const response = {\n ok: true,\n \"import.meta.url\": import.meta.url,\n \"c.req.url\": c.req.url,\n };\n return c.json(await response);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,505,521,523],"844060c8-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[221,222],[472,482,505,521],"8039266a-4222-11f0-853a-76b3cceeab13","6ad438b9-7deb-4534-8f00-4c5cdc654abe","697e3468-5da7-4239-bcb7-f55224d8b128",["D",1749137639580],[],[472,482,505,152,429],"803924f8-4222-11f0-853a-76b3cceeab13","b7debc23-3527-4ffb-a027-13e1a81a5c0a",["D",1749137639580],[],[472,482,505,152,435],"803922f0-4222-11f0-853a-76b3cceeab13",["D",1749137639580],[218,219],[472,482,505,152],"8440650a-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[217,220,223,224],[472,482,505],"fc6f8ea2-537c-11f0-ac25-f69ea79377d9","tasks.routes.ts","d6ee53e0-4c72-11f0-83c4-76b3cceeab13","0428d0a7-58f5-42a3-af2b-d3ac063a7943",["D",1751045672451],"import { Client } from \"npm:@notionhq/client\";\nimport { Hono } from \"npm:hono\";\n\n// Import route modules\nimport agent from \"./enrichAgent.tasks.routes.ts\";\nimport cobrowse from \"./cobrowse.tasks.routes.ts\";\nimport demoURL from \"./demoURL.tasks.routes.ts\";\nimport icon from \"./pageIcon.tasks.routes.ts\";\nimport pageID from \"./pageId.tasks.routes.ts\";\n\n// Initialize Notion client\nexport const notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nconst app = new Hono();\n\n// Mount route modules\napp.route(\"/cobrowse\", cobrowse);\napp.route(\"/demoURL\", demoURL);\napp.route(\"/pageID\", pageID);\napp.route(\"/agent\", agent);\napp.route(\"/icon\", icon);\n\napp.get(\"/\", async (c) => {\n try {\n const response = {\n ok: true,\n \"import.meta.url\": import.meta.url,\n \"c.req.url\": c.req.url,\n };\n return c.json(response);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,560,553],"tasks","d6ee5098-4c72-11f0-83c4-76b3cceeab13","pageId.tasks.routes.ts","d6ee5106-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { setPageID } from \"../../controllers/pageID.controller.ts\";\n\nconst app = new Hono();\n\n// get the page id and save it to Notion\n// this is only for our reference and to prevent issues\napp.post(\"/\", async (c) => {\n try {\n const { data } = await c.req.json();\n\n // save page ID with hyphens back to Notion\n const page = await setPageID(data);\n\n return c.json({\n ok: true,\n });\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,562],"d6ee4e40-4c72-11f0-83c4-76b3cceeab13","pageIcon.tasks.routes.ts","d6ee4eae-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\nimport { setPageIcon } from \"../../controllers/pageIcon.controller.ts\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const { data } = await c.req.json();\n try {\n const page = await getPage(data.id);\n // console.log(page);\n\n // update the page's icon to correlate to the cobrowse status\n const iconURL = page.properties.Cobrowse.checkbox\n ? \"https://www.notion.so/icons/computer_purple.svg\"\n : \"https://www.notion.so/icons/computer_lightgray.svg\";\n\n console.log(page.properties.Cobrowse.checkbox, iconURL);\n\n const pageIcon = await setPageIcon(data.id, iconURL);\n\n console.log(pageIcon);\n return c.json(data);\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,569],"d6ee4cba-4c72-11f0-83c4-76b3cceeab13","enrichAgent.tasks.routes.ts","d6ee4d32-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { enrichAgent } from \"../../controllers/agent.controller.ts\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n try {\n const { data } = await c.req.json();\n\n // save page ID with hyphens back to Notion\n const page = await getPage(data.id);\n // console.log(page);\n // console.log(page.properties?.Person?.people);\n const person = await enrichAgent(data.id, page.properties?.Person?.people);\n // console.log(person);\n\n return c.json({\n ok: true,\n });\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,576],"1d3450c8-527e-11f0-aed9-f69ea79377d9","demoURL.tasks.routes.ts","d6ee4b3e-4c72-11f0-83c4-76b3cceeab13",["D",1750936205762],"import { Hono } from \"npm:hono\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\nimport { setDemoURL } from \"../../controllers/demoURL.controller.ts\";\n\nconst app = new Hono();\n\n// build the demo URL and save it to Notion\napp.post(\"/\", async (c) => {\n try {\n const { data } = await c.req.json();\n\n // build URL so that when it's saved to Notion, it maps to /demo\n const demoURL = [\n new URL(c.req.url).hostname, // 1. the host (aka, the domain), which may be on staging\n \"glimpse\", // 2. we know that all demos will be at /glimpse, so hard-code that in (this used to be /demo)\n data.id, // // 3. the page id that is unique to this demo\n ].join(\"/\");\n console.log(demoURL);\n\n // save new demoURL to this Notion page\n const page = await setDemoURL(data.id, demoURL);\n console.log(page);\n return c.json({\n ok: true,\n });\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,583],"d6ee4954-4c72-11f0-83c4-76b3cceeab13","cobrowse.tasks.routes.ts","d6ee49c2-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\nimport { setCobrowse } from \"../../controllers/cobrowse.controller.ts\";\n\nconst app = new Hono();\n\n// enable or disable the cobrowse link at the demo URL\napp.post(\"/\", async (c) => {\n try {\n const { data } = await c.req.json();\n // get all the page data\n const page = await getPage(data.id);\n console.log(page.id);\n // get the cobrowse value from the payload\n // warning: properties in Notion are capitalized as a convention (see Cobrowse)\n const cobrowse = page.properties.Cobrowse.checkbox ? false : true;\n // save new cobrowse boolean to Notion page\n const newPage = await setCobrowse(page.id, cobrowse);\n console.log(newPage);\n return c.json({\n ok: true,\n });\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,590],"fc6f8c4a-537c-11f0-ac25-f69ea79377d9","cache.tasks.routes.ts","904e1172-517d-11f0-b943-f69ea79377d9",["D",1751045672451],"import { Hono } from \"npm:hono\";\nimport { setDemoCache } from \"../../controllers/demoCache.controller.ts\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n try {\n const { data } = await c.req.json();\n\n const page = await setDemoCache(data.id);\n // console.log(page);\n return c.json({\n ok: true,\n });\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,560,597],"d6ee445e-4c72-11f0-83c4-76b3cceeab13","d6ee44d6-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"This /tasks directory holds endpoints that get data from Notion, refactor it, and then save it back to Notion.\n\n## Routing in /tasks\n\n`tasks.ts` handles routing in this directory.\n\n### Task endpoints use /controllers to get and save data\n\nIn order to keep the API easy to look and work with, the routes in /tasks handle routing but do not get data from or save data to Notion. The functions that connect to Notion live in the /controllers directory, and are _called_ from the endpoints in /tasks.\n\n### Naming convention for routes and controllers\n\nBy convention, /controllers have the same file names as the /tasks routes that call them.\n\nFor example, the endpoint at the route in `/tasks/setDemoURL.ts` calls the controller in `/controllers/setDemoURL.ts`. (Both have `setDemoURL.ts` as their filename.)\n\nTo use the controller in the route:\n\n1. import the controller at the top of the `/tasks/setDemoURL.ts` route:\n\n ```\n import { setDemoURL } from \"../../controllers/setDemoURL.ts\";\n ```\n\n Note that the export in the controller follows the same convention; it's also called `setDemoURL`.\n\n1. Once the controller is imported, pass data to the exported function so that it can do its thing:\n\n ```\n const page = await setDemoURL(data);\n ```\n\n Note the function call is the exported function in the import object at the top of the route; i.e., `{ setDemoURL }`. The `setDemoURL.ts` controller exports it like this:\n\n ```\n // /controllers/setDemoURL.ts\n export async function setDemoURL(data: any) {\n try {\n ...\n }\n };\n ```\n\n**Note:** with this separation of routes from controllers, we also keep Notion out of the routes. This means that we don't need to initialize the Notion client in the routes in this directory. All of that happens in the /controllers. If you see the Notion client in the routes in this directory, it's probably a mistake.\n\n# On HTTP errors and logging\n\nAll webhooks from Notion are POSTs. Notion will tell you when a webhook fails, but only if you're looking at Notion, and only with a generic and terse message. Also, Notion doesn't log errors.\n\nEach POST in this /tasks directory logs and returns errors. Val.town logging is great and easy to access—view logs right here in the val.town UI.\n\nError handling and logging is a key benefit of integrating val.town into Notion. Wherever possible and reasonable, we should do the bulk of our automation work in val.town and leave the simpler and smaller automation bits to Notion.\n",[],[472,482,560,491],"84403486-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[208,209,210,211,212,213,214,215],[472,482,560],"d6ee404e-4c72-11f0-83c4-76b3cceeab13","page.api.routes.ts","d6ee40c6-4c72-11f0-83c4-76b3cceeab13","6ad28346-52bc-49e6-ae22-4b754a659b6c",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\n\nconst app = new Hono();\n\napp.get(\"/:id\", async (c) => {\n // get id from url\n const id = c.req.param(\"id\");\n // hit the controller to return data\n try {\n const data = await getPage(id);\n console.log(data);\n return c.json(data);\n } catch (error: any) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,621,614],"api","d6ee3ebe-4c72-11f0-83c4-76b3cceeab13","demo.api.routes.ts","d6ee3f2c-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { getPage } from \"../../controllers/page.controller.ts\";\n\nconst app = new Hono();\n\n// get page data for /demo\napp.get(\"/:id\", async (c) => {\n // get id from url\n const id = c.req.param(\"id\");\n // hit the controller to return data\n try {\n const data = await getPage(id);\n console.log(data);\n return c.json(data);\n } catch (error: any) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({\n message: \"Hello, World!\",\n });\n});\n\nexport default app;\n",[],[472,482,621,623],"904e338c-517d-11f0-b943-f69ea79377d9","database.api.routes.ts","d6ee3dba-4c72-11f0-83c4-76b3cceeab13",["D",1750826018217],"import { Hono } from \"npm:hono\";\nimport { getDatabase } from \"../../controllers/database.controller.ts\";\n\nconst app = new Hono();\n\napp.get(\"/:id\", async (c) => {\n // get id from url\n const id = c.req.param(\"id\");\n // hit the controller to return data\n try {\n const data = await getDatabase(id);\n // console.log(data);\n return c.json(data);\n } catch (error: any) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,621,630],"cf1628c2-51f5-11f0-844a-f69ea79377d9","cobrowse.api.routes.ts","d6ee3aea-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { Hono } from \"npm:hono\";\nimport { blobKeyForDemoCobrowseStatus } from \"../../../shared/utils/blobKeyForDemoCobrowseStatus.ts\";\n\nconst app = new Hono();\n\n// this endpoint checks to see that the visitor's cobrowsing session is enabled\n// if this does not return results, it likely means that an admin hasn't enabled or disabled cobrowing yet\n// for the visitor (ie, the Glimpse admin hasn't checked the cobrowse box for this pageId in Notion)\napp.get(\"/:id\", async (c) => {\n try {\n const blobKey = await blobKeyForDemoCobrowseStatus(c.req.param(\"id\"));\n\n const blobject = await blob.getJSON(blobKey);\n if (!blobject) {\n throw new Error(`No blob object with key ${blobKey}`);\n }\n console.log(blobject);\n\n return c.json(blobject);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: \"Failed to connect to blob storage\",\n error: error.message,\n },\n 500\n );\n }\n});\nexport default app;\n",[],[472,482,621,637],"d6ee37f2-4c72-11f0-83c4-76b3cceeab13","api.routes.ts","d6ee386a-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\n\n// Import route modules\nimport cobrowse from \"./cobrowse.api.routes.ts\";\nimport database from \"./database.api.routes.ts\";\nimport demo from \"./demo.api.routes.ts\";\nimport page from \"./page.api.routes.ts\";\nimport action from \"./action.api.routes.ts\";\nimport actions from \"./actions.api.routes.ts\";\n\nconst app = new Hono();\n\n// mount routes\napp.route(\"/db\", database);\napp.route(\"/page\", page);\napp.route(\"/cobrowse\", cobrowse);\napp.route(\"/demo\", demo);\napp.route(\"/action\", action);\napp.route(\"/actions\", actions);\n\napp.get(\"/\", async (c) => {\n try {\n const response = {\n ok: true,\n \"import.meta.url\": import.meta.url,\n \"c.req.url\": c.req.url,\n };\n\n return c.json(await response);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,621,644],"cf162638-51f5-11f0-844a-f69ea79377d9","actions.api.routes.ts","d6ee36e4-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"import { Hono } from \"npm:hono\";\nimport {\n getDemoInteractions,\n getAllInteractionsPages,\n} from \"../../controllers/actions.controller.ts\";\n\nconst app = new Hono();\n\napp.get(\"/:id\", async (c) => {\n // get id from url\n const id = c.req.param(\"id\");\n // hit the controller to return data\n try {\n const results = await getDemoInteractions(id);\n console.log(\"pages: \", results.pages.length, results);\n return c.json({\n ok: true,\n count: results.pages.length,\n results: results.pages,\n });\n } catch (error: any) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n // get id from url\n // const id = c.req.param(\"id\");\n // hit the controller to return data\n try {\n const data = await getAllInteractionsPages();\n // iterate through the data object and return per page only the Name, Date, and Glimpse demo properties\n\n if (data.success && data.pages) {\n const trimmedPages = data.pages.map((page: any) => {\n const properties = page.properties || {};\n console.log(properties[\"Glimpse demos\"]);\n return {\n id: page.id,\n Name: properties.Name?.title?.[0]?.plain_text || null,\n Date: properties.Date?.date?.start || null,\n \"Glimpse demos\":\n properties[\"Glimpse demos\"]?.relation?.[0]?.id || null,\n };\n });\n\n return c.json({\n success: true,\n pages: trimmedPages,\n hasMore: data.hasMore,\n nextCursor: data.nextCursor,\n });\n }\n\n return c.json(data);\n } catch (error: any) {\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[472,482,621,651],"d6ee34d2-4c72-11f0-83c4-76b3cceeab13","action.api.routes.ts","d6ee3540-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Hono } from \"npm:hono\";\nimport { setAction } from \"../../controllers/action.controller.ts\";\n\nconst app = new Hono();\n\n// captures when a visitors do things in the /demo, including:\n// clicking the Glance cobrowse button\n// toggling content\n// signing up for a demo\napp.post(\"/\", async (c) => {\n const data = await c.req.json();\n console.log(data);\n try {\n // create a database page in the interactions database\n const page = await setAction(data);\n // console.log(page);\n return c.json(page);\n } catch (error: any) {\n console.log(error.body);\n return c.json(\n {\n status: \"error\",\n message: error.message,\n },\n 500\n );\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ ok: true });\n});\n\nexport default app;\n",[],[472,482,621,658],"d6ee3356-4c72-11f0-83c4-76b3cceeab13","d6ee33ba-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"## /api\n\nThis directory holds the endpoints that serve JSON for the /demo, and a few other endpoints that handle POSTS and GETs from the /frontend.\n\n## Conventions\n\nIf you're wondering why the file that handles routing in this directory isn't an `index.ts` file... The reason is that when you have a bunch of files open in your IDE called `index.ts`, it's impossible to know without clicking in to each file which one is which. Similar issue when debugging server logs.\n",[],[472,482,621,491],"843fe9cc-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[199,200,201,202,203,204,205,206],[472,482,621],"84406e6a-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[198,207,216,225,226,227],[472,482],"d6eeb6b4-4c72-11f0-83c4-76b3cceeab13","healthCheck.ts","888b9888-3c8d-11f0-9b83-9e149126039e","f10941a9-bf03-4897-b184-7eee20ac4b17",["D",1750271656420],"interval","import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { Client } from \"npm:@notionhq/client\";\nimport { blobKeyForHealthCheck } from \"../../shared/utils/blobKeyForHealthCheck.ts\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nfunction buildData(response) {\n return {\n status: \"connected\",\n message: \"Successfully connected to Notion API\",\n databases: response.results.map((db) => ({\n title: db.title?.[0]?.plain_text || \"Untitled\",\n id: db.id,\n })),\n };\n}\n\n// update the cache\n// this cron updates a blob that stores the JSON that shows the databases that val.town is connected to\n// we present that at root and embed that into Notion\n// to show everyone that the connection is healthy btw Notion and val.town\nexport default async function (interval: Interval) {\n const blobKey = await blobKeyForHealthCheck();\n try {\n const response = await notion.search({\n filter: {\n property: \"object\",\n value: \"database\",\n },\n });\n const data = await buildData(response);\n\n // store only what we need in the cache\n blob.setJSON(blobKey, {\n data,\n });\n console.log(await blob.getJSON(blobKey));\n } catch (error) {\n blob.setJSON(blobKey, {\n error,\n });\n console.log(await blob.getJSON(blobKey));\n\n console.log(error);\n }\n}\n",[],[472,687,679],"crons","cf162426-51f5-11f0-844a-f69ea79377d9","demoCobrowseStatus.ts","d6ee3054-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { Client } from \"npm:@notionhq/client\";\nimport { blobKeyForDemoCobrowseStatus } from \"../../shared/utils/blobKeyForDemoCobrowseStatus.ts\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\n// update the blob cache\n// this cron updates a blob that the ../../shared/utils/pollEnabledStatus.ts hits during demos\n// that blob determines whether or not the cobrowsing button is ON or OFF\nexport default async function (interval: Interval) {\n // every page in the \"Glimpse demos\" database should have it's own blob, so we have a cache for each demo\n // this cron saves a blob for every page in the Demos DB\n try {\n // get notion pages with the databaseId\n const pages = await notion.databases.query({\n database_id: Deno.env.get(\"GLANCE_DEMOS_DB_ID\"),\n });\n // for each page in the demo database, save a blob\n for (const page of pages.results) {\n const blobKey = await blobKeyForDemoCobrowseStatus(page.id);\n // console.log(blobKey);\n\n // store only what we need in the cache\n // in this case, it's the cobrowse property value\n blob.setJSON(blobKey, {\n id: page.id,\n cobrowse: page.properties.Cobrowse.checkbox,\n });\n console.log(await blob.getJSON(blobKey));\n }\n } catch (error) {\n console.log(error);\n }\n}\n",[],[472,687,689],"b6070b30-51fa-11f0-bcf6-f69ea79377d9","demoCache.ts","c8713896-3c82-11f0-9c08-9e149126039e",27,["D",1750879768592],6,"import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { blobKeyForDemoCache } from \"../../shared/utils/blobKeyForDemoCache.ts\";\nimport { setDemoCache } from \"../controllers/demoCache.controller.ts\";\nimport { getDemosToCache } from \"../controllers/demosToCache.controller.ts\";\n\nfunction isWithinImageExpiry(date1: Date, date2: Date): boolean {\n const diffMs = Math.abs(date1.getTime() - date2.getTime());\n const diffMinutes = diffMs / (1000 * 60);\n return diffMinutes < 50;\n}\n\nconst compareNotionToBlobStorage = async (blobKey: string, page: any) => {\n // get the last edited time of the demo in Notion\n const lastEditedTimeInNotion = new Date(\n page.properties?.[\"Last edited time, all\"]?.formula?.date?.start,\n );\n // if we use blob.list rather than blob.getJSON(blobKey) we get an array of blobs with metadata like lastModified\n const blobs = (await blob.list(blobKey)) || [];\n // and if we do that with the full blob key, the blob array will only have one value at the zero-th index\n const lastEditedTimeInBlob = blobs.length\n ? new Date(blobs[0].lastModified)\n : \"\";\n const now = new Date();\n\n // determine if the cache should run, assume not at first\n let cacheShouldRun = false;\n if (\n !lastEditedTimeInBlob\n || lastEditedTimeInNotion > lastEditedTimeInBlob // if the Notion data is fresher (greater) than the blob, or\n || !isWithinImageExpiry(now, lastEditedTimeInBlob) // if the blob is nearing the Notion image expiry (60 minutes)\n ) {\n cacheShouldRun = true;\n }\n return cacheShouldRun;\n};\n\nexport default async function(interval: Interval) {\n // this cron runs every minute\n // it saves a blob for every page in the \"Glimpse demos\" database that is active\n // active demos are those where the \"Cobrowse\" property is true\n // each blob holds the Notion data needed for each demo (from the Notion databases)\n // this way, to build a demo in the browser (ie., when /demo/:id is called),\n // the app makes one request to the blob to get the demo data, rather than loop through a bunch of Notion requests\n // this keeps the demo UX snappy\n try {\n const pagesArrayForLogging = [];\n // pages that may need to be cached\n const pages = await getDemosToCache();\n\n for (const page of pages.results) {\n const blobKey = await blobKeyForDemoCache(page.id);\n const cacheIsStale = await compareNotionToBlobStorage(blobKey, page);\n\n pagesArrayForLogging.push({\n id: page.id,\n blobKey: blobKey,\n cacheIsStale: cacheIsStale,\n });\n\n if (cacheIsStale) {\n await setDemoCache(page.id, page);\n }\n }\n console.log([\n { file: new URL(import.meta.url).pathname.split(\"/\").pop() },\n { count: pagesArrayForLogging.length },\n { pages: pagesArrayForLogging },\n ]);\n } catch (error) {\n console.log(error);\n }\n}",[],[472,687,696],"cf161d6e-51f5-11f0-844a-f69ea79377d9","d6ee2d7a-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"This directory has crons that extract data from Notion and save that data to blob storage in val.town. Blob storage functions like a cache.\n\n# demoCache.ts\n\nEach /demo is a composite of many Notion calls. This cron hit Notion every minute to rebuild the /demo and store the results. When a user hits the /demo, Glimpse has one query to make to build the demo, rather than having to loop through myriad queries to Notion. This keeps the /demo UX snappy.\n\n# demoCobrowseStatus.ts\n\nThis cron queries Notion to check the cobrowse status of a /demo. It stores the results as a blob.\n\nWhen a /demo is loaded in the browser, an interval script (/shared/utils/pollEnabledStatus.ts) runs every second to poll the /cobrowse endpoint, which hits that blob, to check whether or not cobrowsing has been enabled for that demo. (If it's enabled, the cobrowse button is live and blue. If cobrowsing is disabled, the user sees a call-to-action to contact Glance.)\n\nHitting Notion every second would put excessive load on Notion and sometimes Notion is under load from other users at peak times. With this caching strategy, we don't have to hit Notion to check the status of cobrowing, because we hit the cache instead.\n\n# healthCheck.ts\n\nThis cron runs through all of the databases listed in the Glimpse Val's environment variables, queries them, and stores the results in blob storage. The output is JSON rendered as HTML, in an HTTP Val.\n\nWe embed that HTTP Val into the Glimpse app in Notion. This way, we can see the health of the integration between Notion and val.town from Notion, and it loads instantly, without having to query Notion.\n",[],[472,687,491],"843fca96-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[193,194,195,196],[472,687],"cf161a6c-51f5-11f0-844a-f69ea79377d9","relatedPages.controller.ts","d6ee2a3c-4c72-11f0-83c4-76b3cceeab13","11396d28-133e-4a0b-a0cd-c6e36d9fd60c",["D",1750877663141],"import { Client } from \"npm:@notionhq/client\";\nimport { getPageContents } from \"./pageContents.controller.ts\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function getRelatedPagesFromDatabase(pageId: string) {\n try {\n const response = await notion.databases.query({\n database_id: Deno.env.get(\"GLANCE_CONTENT_DB_ID\"),\n filter: {\n property: \"Glimpse demos\", // the property in the Glimpse content database that connects to the /demo\n relation: {\n contains: pageId, // the /demo page id to which the content is related\n },\n },\n sorts: [\n {\n property: \"Order\", // we sort on the order in the content database, not on the order of the relation in the demo database\n direction: \"ascending\", // it will never be the case that someone wants the intro last, or next steps first\n },\n ],\n });\n // loop through the response and attach a \"page_contents\" object to each page\n // page_content is the markdown in Notion in each \"Glimpse content\" database page\n for (const page of response.results) {\n // console.log(page.id, page.properties?.Name?.title?.[0]?.plain_text);\n page.page_content = await getPageContents(page.id);\n }\n return response;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,715],"controllers","d6ee269a-4c72-11f0-83c4-76b3cceeab13","pageIcon.controller.ts","d6ee2708-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function setPageIcon(pageId: string, iconURL: string) {\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n icon: {\n type: \"external\",\n external: {\n url: iconURL,\n },\n },\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,724],"d6ee2816-4c72-11f0-83c4-76b3cceeab13","pageID.controller.ts","d6ee2884-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function setPageID(data: any) {\n try {\n const page = await notion.pages.update({\n page_id: data.id,\n properties: {\n \"id\": {\n \"rich_text\": [\n {\n \"text\": {\n \"content\": data.id,\n },\n },\n ],\n },\n },\n });\n return page;\n } catch (error: any) {\n return {\n \"message\": error.message,\n \"status\": error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}",[],[472,722,731],"d6ee2460-4c72-11f0-83c4-76b3cceeab13","pageContents.controller.ts","d6ee24ce-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nasync function fetchBlockChildren(blockId: string): Promise {\n try {\n const response = await notion.blocks.children.list({\n block_id: blockId,\n });\n\n const blocks = response.results;\n\n // Recursively fetch children for blocks that have them\n for (const block of blocks) {\n if (block.has_children) {\n block.children = await fetchBlockChildren(block.id);\n }\n }\n\n return blocks;\n } catch (error) {\n console.error(`Error fetching children for block ${blockId}:`, error);\n return [];\n }\n}\n\nexport async function getPageContents(pageId: string) {\n try {\n const response = await notion.blocks.children.list({\n block_id: pageId,\n });\n\n const blocks = response.results;\n\n // Recursively fetch children for blocks that have them\n for (const block of blocks) {\n if (block.has_children) {\n block.children = await fetchBlockChildren(block.id);\n }\n }\n\n return {\n ...response,\n results: blocks,\n };\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,738],"d6ee22f8-4c72-11f0-83c4-76b3cceeab13","page.controller.ts","d6ee235c-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\n// generic controller for a Notion database page\nexport async function getPage(pageId: string) {\n try {\n const page = await notion.pages.retrieve({\n page_id: pageId,\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,745],"904e0ee8-517d-11f0-b943-f69ea79377d9","demosToCache.controller.ts","904e0f56-517d-11f0-b943-f69ea79377d9",["D",1750826018217],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function getDemosToCache() {\n try {\n const pages = await notion.databases.query({\n database_id: Deno.env.get(\"GLANCE_DEMOS_DB_ID\"),\n filter: {\n // only get active demos; we don't need to hit Notion for stale demos\n // and we don't need to store stale demos in the cache\n property: \"Cobrowse\",\n checkbox: {\n equals: true,\n },\n },\n });\n return pages;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,752],"d6ee2172-4c72-11f0-83c4-76b3cceeab13","demoURL.controller.ts","d6ee21ea-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function setDemoURL(pageId: string, url: string) {\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n properties: {\n URL: {\n url: url,\n },\n },\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,759],"cf1616e8-51f5-11f0-844a-f69ea79377d9","demoCache.controller.ts","904e08e4-517d-11f0-b943-f69ea79377d9",["D",1750877663141],"import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { blobKeyForDemoCache } from \"../../shared/utils/blobKeyForDemoCache.ts\";\nimport { getPage } from \"./page.controller.ts\";\nimport { getRelatedPagesFromDatabase } from \"./relatedPages.controller.ts\";\n\nconst removeUnnecessaryProperties = async (page: any) => {\n // remove properties that are not used in the demo and don't need to be saved to the blob\n const scrubbed = Object.entries(page.properties || {}).reduce(\n (acc, [key, prop]) => {\n if (\n prop.type !== \"button\" && // button proerties are for Notion's front end, not our /demo\n key !== \"Glimpse interactions\" && // relation; we use it on the backend but don't use it to _show_ interactions\n key !== \"Glimpse agents\" && // relation; we use it on the backend but don't use it to _show_ agent info\n key !== \"Glimpse content\" // relation; we use it on the backend but don't use it to _show_ content\n ) {\n acc[key] = prop;\n }\n return acc;\n },\n {}\n );\n return scrubbed;\n};\n\nexport async function setDemoCache(pageId: string, data?: any) {\n const blobKey = await blobKeyForDemoCache(pageId);\n try {\n const page = data || (await getPage(pageId));\n // update page properties to scrub out unnecessary values\n page.properties = await removeUnnecessaryProperties(page);\n // get \"Glimpse content\" database pages added to the demo page\n const relatedPages = await getRelatedPagesFromDatabase(page.id);\n // store the data that the demo needs in the blob\n blob.setJSON(blobKey, {\n ...page,\n related_pages: relatedPages?.results ?? [],\n });\n\n console.log({\n file: new URL(import.meta.url).pathname.split(\"/\").pop(),\n id: page.id,\n blobKey: blobKey,\n });\n\n return { ok: true };\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,766],"904e2ad6-517d-11f0-b943-f69ea79377d9","database.controller.ts","d6ee206e-4c72-11f0-83c4-76b3cceeab13",["D",1750826018217],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function getDatabase(databaseId: string) {\n try {\n const database = await notion.databases.retrieve({\n database_id: databaseId,\n });\n return database;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,773],"d6ee1df8-4c72-11f0-83c4-76b3cceeab13","cobrowse.controller.ts","d6ee1e66-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function setCobrowse(pageId: string, cobrowse: boolean) {\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n properties: {\n Cobrowse: {\n checkbox: cobrowse,\n },\n },\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,780],"d6ee1c7c-4c72-11f0-83c4-76b3cceeab13","agent.controller.ts","d6ee1cea-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function enrichAgent(pageId: string, data: any) {\n // console.log(data);\n const properties =\n data.length === 0\n ? {\n Name: {\n title: [],\n },\n \"Agent email\": {\n email: null,\n },\n }\n : {\n Name: {\n title: [\n {\n text: {\n content: data[0].name,\n },\n },\n ],\n },\n \"Agent email\": {\n email: data[0].person.email,\n },\n };\n\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n properties: properties,\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,787],"cf1613be-51f5-11f0-844a-f69ea79377d9","actions.controller.ts","d6ee1a1a-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function getDemoInteractions(pageId: string) {\n const databaseId = Deno.env.get(\"GLANCE_INTERACTIONS_DB_ID\");\n\n if (!databaseId) {\n throw new Error(\n \"GLANCE_INTERACTIONS_DB_ID environment variable is not set\"\n );\n }\n\n try {\n const response = await notion.databases.query({\n database_id: databaseId,\n filter: {\n property: \"Glimpse demos\", // the property in the Glimpse interactions database related to the \"Glimpse demos\" database\n relation: {\n contains: pageId, // the \"Glimpse demos\" property holds the page id of the \"Glimpse demo\" to which it is related\n },\n },\n });\n\n return {\n pages: response.results,\n };\n } catch (error: any) {\n return {\n success: false,\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n\nexport async function getAllInteractionsPages() {\n const databaseId = Deno.env.get(\"GLANCE_INTERACTIONS_DB_ID\");\n\n if (!databaseId) {\n throw new Error(\n \"GLANCE_INTERACTIONS_DB_ID environment variable is not set\"\n );\n }\n\n try {\n const response = await notion.databases.query({\n database_id: databaseId,\n });\n\n return {\n success: true,\n pages: response.results,\n hasMore: response.has_more,\n nextCursor: response.next_cursor,\n };\n } catch (error: any) {\n return {\n success: false,\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n\nexport async function getAllInteractionsPagesWithPagination() {\n const databaseId = Deno.env.get(\"GLANCE_INTERACTIONS_DB_ID\");\n\n if (!databaseId) {\n throw new Error(\n \"GLANCE_INTERACTIONS_DB_ID environment variable is not set\"\n );\n }\n\n try {\n let allPages: any[] = [];\n let hasMore = true;\n let startCursor: string | undefined = undefined;\n\n while (hasMore) {\n const response = await notion.databases.query({\n database_id: databaseId,\n start_cursor: startCursor,\n });\n\n allPages = allPages.concat(response.results);\n hasMore = response.has_more;\n startCursor = response.next_cursor || undefined;\n }\n\n return {\n success: true,\n pages: allPages,\n totalCount: allPages.length,\n };\n } catch (error: any) {\n return {\n success: false,\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,794],"cf1610f8-51f5-11f0-844a-f69ea79377d9","action.controller.ts","d6ee1880-4c72-11f0-83c4-76b3cceeab13",["D",1750877663141],"import { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function setAction(data: any) {\n try {\n const page = await notion.pages.create({\n parent: {\n database_id: Deno.env.get(\"GLANCE_INTERACTIONS_DB_ID\"),\n },\n properties: {\n Name: {\n title: [\n {\n type: \"text\",\n text: {\n content: data.action,\n },\n },\n ],\n },\n Date: {\n date: {\n start: new Date(),\n },\n },\n \"Glimpse demos\": {\n // this is a Notion relation and assigns this action\n // to a demo\n relation: [\n {\n id: data.id,\n },\n ],\n },\n },\n });\n return page;\n } catch (error: any) {\n return {\n message: error.message,\n status: error.status,\n \"import.meta.url\": new URL(import.meta.url).pathname,\n };\n }\n}\n",[],[472,722,801],"d6ee1150-4c72-11f0-83c4-76b3cceeab13","d6ee11f0-4c72-11f0-83c4-76b3cceeab13",["D",1750271656420],"The files in this directory export functions that get data from and save data to Notion. Most of these functions are used by /tasks.\n\nEvery controller in this directory includes the Notion client:\n\n```\nimport { Client } from \"npm:@notionhq/client\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n```\n\nKeeping controllers in this directory and importing them into our routes keeps our API endpoints thin and easier to work with. (See the /tasks directory as an example.)\n\n## Re: /controllers and /utils\n\nIn this application, we have different directories for /controllers and /utils:\n\n| Aspect | **Controller** | **Util** |\n| ----------------- | --------------------------------------------------- | --------------------------------------------------- |\n| **Purpose** | Orchestrates business logic and workflows | Provides small, stateless helper functions |\n| **Scope** | High-level, often involves services or side effects | Low-level, narrow in focus (e.g., string, date ops) |\n| **State** | Works with application or user-specific data | Stateless – input in, output out |\n| **Output** | Often returns domain-specific result objects | Returns generic, context-agnostic values |\n| **Example Names** | `syncDataToNotion`, `generateUserReport` | `formatDate`, `slugify`, `chunkArray`, `debounce` |\n| **Depends On** | Services, repositories, other controllers | Pure logic, no external dependencies (ideally) |\n",[],[472,722,491],"843fc154-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[178,179,180,181,182,183,184,185,186,187,188,189,190,191],[472,722],"8440728e-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[177,192,197,228],[472],"843f7cd0-3a9f-11f0-9baa-9e149126039e","extensions.json","0bdbf8dc-cf0a-4538-ad66-c83e928b4f43","32f57b95-72e5-43de-bc28-088951712cc3",["D",1748311724047],"{\n \"recommendations\": [\n \"denoland.vscode-deno\"\n ]\n}",[],[829,822],".vscode","843f9f76-3a9f-11f0-9baa-9e149126039e",["D",1748311724047],[175],[829],["D",1748311724047],["D",1789516910456],{"_11":12,"_129":74},{"_11":12,"_125":-5,"_73":74,"_31":72,"_126":127,"_128":30},{"_39":113,"_13":16,"_33":36,"_114":77,"_115":-5,"_116":-5,"_117":118,"_119":120,"_121":122,"_123":14,"_124":12},"ctx",{"_52":-5,"_148":872,"_873":874,"_875":876,"_877":30,"_878":30,"_879":30,"_880":24,"_881":-5,"_882":-7,"_883":-7,"_884":26,"_885":30,"_886":30,"_887":-5,"_888":30,"_889":30,"_890":30,"_891":-5},"ENV",{"_843":844,"_845":846,"_847":16,"_848":849,"_850":851,"_852":853,"_854":855,"_856":857,"_858":859,"_860":861,"_862":863,"_864":865,"_866":867,"_868":869,"_870":871},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · shared