An agent is standing by to help you.

Step 1: call your agent

{agent.name}: \n {agent.phone}\n {\n /*
\n {agent.email} */\n }\n

Step 2: cobrowse with your agent

\n \n \n Start Cobrowse Session\n \n

Co-browsing is disabled due to idle activity.

\n \n Ping your Glance agent to enable co-browing\n \n

\n Your agent has been contacted. Please standby.\n

\n \n );\n\n // Define the JavaScript separately with two functions\n const sessionScript = `\n // Main handler that calls both functions\n function handleSessionStart() {\n // Start the CoBrowse session\n startSession();\n \n // Record the click in a blob\n recordClick(\"cobrowse-start\");\n }\n \n // Original CoBrowse function\n function startSession() {\n GLANCE.Cobrowse.Visitor.startSession(\"GLANCE_KEYTYPE_RANDOM\");\n }\n \n // New function to record the click in a blob\n function recordClick(action) {\n // Create data to store\n const clickData = {\n id: \"${pageId}\",\n \"action\": action, // cobrowse_start || cobrowse_request\n }; \n fetch(\"https://glancer.val.run/glancer/action\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(clickData),\n });\n if(action == \"cobrowse_request\"){\n confirmationEl.style.display = \"\"\n // noThingEl.style.display = \"none\" // this gets undone by setInterval\n }\n }\n\n const thingEl = document.getElementById(\"cta-cobrowse\")\n const noThingEl = document.getElementById(\"cta-contact\")\n const confirmationEl = document.getElementById(\"cta-contact-confirmation\")\n\n setInterval(async () => {\n // check the boolean to see if a Glancer has enabled the link to trigger cobrowse\n console.log(\"Checking to see if this session has been enabled by a Glancer\");\n const resp = await fetch(\"https://glancer.val.run/glancer/${pageId}/cobrowse\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n }); \n const data = await resp.json()\n if (data.enabled) {\n thingEl.style.display = \"\"\n noThingEl.style.display = \"none\"\n } else {\n thingEl.style.display = \"none\"\n noThingEl.style.display = \"\"\n } \n }, 1000) \n `;\n\n const embed = (props.Sector?.select?.name.toLowerCase() === \"financial services\")\n ? await finance.financeForm()\n : await checkout.StripeCheckoutForm();\n\n return c.html(\n

\n \n \n

Hi, {props.Name.title[0].text.content}!

\n This is a quick demo of Glance co-browse in an {props.Sector?.select?.name.toLowerCase()}{\" \"}\n context, built just for you.\n

\n {embed}\n

Having trouble?

\n {cta}\n {/* Inject the script properly using dangerouslySetInnerHTML */}\n \n

\n This co-browse demo brought to you by Glance.cx | Made with 😅 outside Boston\n

,\n );\n});\n\n// visitor's page captures when a visitor clicks a cobrowse like\n// click stored in Notion\napp.post(\"/action\", async (c) => {\n const payload = await c.req.json();\n const pageId = payload?.id;\n const action = payload?.action;\n const date = new Date();\n\n console.log(\"record\");\n console.log(payload);\n\n // create a database page in my Notion metrics database\n // https://www.notion.so/bradnoble/1e0c200736c280d686b2f6d5dee15950?v=1e0c200736c28045aef4000c9d855817&pvs=4\n const record = await notion.pages.create({\n parent: {\n database_id: \"1e0c200736c280d686b2f6d5dee15950\",\n },\n properties: {\n \"Name\": {\n title: [\n {\n type: \"text\",\n text: {\n content: action,\n },\n },\n ],\n },\n \"Date\": {\n date: {\n start: date,\n },\n },\n \"Related page id\": {\n \"rich_text\": [\n {\n \"type\": \"text\",\n \"text\": {\n \"content\": pageId,\n },\n },\n ],\n },\n \"Glancer demo\": {\n // this is a Notion relation\n relation: [\n {\n id: pageId,\n },\n ],\n },\n // \"Action\": {\n // \"rich_text\": [\n // {\n // \"type\": \"text\",\n // \"text\": {\n // \"content\": action,\n // },\n // },\n // ],\n // },\n },\n });\n\n return c.json({\n ok: true,\n });\n});\n\n// Glancer admins hit this to create the visitor's cobrowse demo page\napp.post(\"/\", async (c) => {\n // Extract data from request\n const payload = await c.req.json();\n const pageId = await payload.data?.id;\n const url = c.req.url + \"/\" + pageId; // the GET at this endpoint will build the interface with data from tne Notion page at with id\n\n // Glancer admins will share this link with visitors\n await notion.pages.update({\n page_id: pageId,\n properties: {\n \"URL\": {\n \"url\": url, // set the unique URL for each client and save it to Notion\n },\n },\n });\n\n // option: save a blob for cache\n // to prevent val.town / Notion connectivity issues\n return c.json({\n ok: true,\n });\n});\n\n// does nothing\napp.get(\"/\", async (c) => {\n return c.html(``);\n});\n\nexport default app;",[],[153,208],{"_107":216,"_99":217,"_154":218,"_156":155,"_157":140,"_158":159,"_160":121,"_109":219,"_104":33,"_162":186,"_164":220,"_165":27,"_166":-5,"_167":221,"_102":222},"e4f1d942-214a-11f0-9237-569c3dd06744","property-injections.ts","247ac97a-408a-463a-a9f1-d297ea32841b",["D",1745526600042],"import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { Client } from \"npm:@notionhq/client\";\nimport { Hono } from \"npm:hono@3\";\nimport * as helpers from \"../utils/helpers.ts\";\nimport * as notionHelpers from \"../utils/notionHelpers.ts\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n // THIS MAY BE DEPRECATED IN V3\n\n // Extract data from request\n const slug = await c.req.url.replace(\"https://\", \"\");\n const copyLink = c.req.headers.get(\"x-copy-link\") || \"\"; // the URL of the block to update on the page\n const payload = await c.req.json();\n const pageId = payload?.data?.id;\n\n // extract the id of the block from the x-copy-link header\n const blockId = copyLink?.split(\"#\").pop();\n // console.log(\"blockId: \", blockId);\n\n // update Notion page block with JSON formatted as javascript\n const block = await notion.blocks.update({\n block_id: blockId,\n code: {\n rich_text: [\n {\n text: {\n content: JSON.stringify(payload?.data?.properties, null, 2),\n },\n },\n ],\n language: \"javascript\",\n },\n });\n console.log(block);\n\n return c.json({ ok: true });\n});\n\nexport default app;",[],[153,217],{"_107":224,"_99":225,"_154":226,"_156":155,"_157":140,"_158":227,"_160":121,"_109":228,"_104":229,"_162":186,"_164":230,"_165":27,"_166":-5,"_167":231,"_102":232},"c91528a2-21ed-11f0-aacf-569c3dd06744","root.ts","1f7ddec8-b436-4786-a28e-e16f750193e0",271,["D",1745596561298],11,"// import { liveReload } from \"https://esm.town/v/stevekrouse/live-reload@240-main/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const content = {\n headline: \"👋 Glancer\",\n message: \"Find more detail in the README.\",\n };\n\n return c.json(content);\n});\n\nexport default app;\n// export default liveReload(app, import.meta.url);",[],[153,225],{"_107":234,"_99":235,"_154":236,"_156":155,"_157":140,"_158":159,"_160":121,"_109":237,"_104":33,"_162":186,"_164":238,"_165":27,"_166":-5,"_167":239,"_102":240},"e4f1dcb2-214a-11f0-9237-569c3dd06744","test-routes.ts","27066704-49ee-4c99-a0fa-434e97633875",["D",1745526600042],"import { Hono } from \"npm:hono@3\";\n\nconst app = new Hono();\n\napp.post(\"/asdf\", async (c) => {\n const requestData = await c.req.json();\n console.log(requestData);\n return c.json({ ok: true });\n});\n\napp.post(\"/qwer/:id\", async (c) => {\n const action = c.req.param(\"id\");\n console.log({ action });\n return c.json({ action });\n});\n\napp.post(\"/test/:id\", async (c) => {\n const requestData = await c.req.json();\n const id = c.req.param(\"id\");\n\n // Make internal requests to other routes\n await app.request(\"/asdf\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestData),\n });\n\n await app.request(\"/qwer/\" + id, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestData),\n });\n \n return c.json({ ok: true, id });\n});\n\nexport default app;",[],[153,235],[153],{"_107":243,"_99":244,"_154":245,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":246,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":247,"_102":284},"e4f222bc-214a-11f0-9237-569c3dd06744","utils","a2383670-cb8f-4ee1-b18b-dfdc63877006",["D",1745526600042],[248,258,266,274],{"_107":249,"_99":250,"_154":251,"_156":245,"_157":140,"_158":252,"_160":121,"_109":253,"_104":254,"_162":186,"_164":255,"_165":27,"_166":-5,"_167":256,"_102":257},"5be90b1a-22ea-11f0-9e83-569c3dd06744","financeForm.tsx","1053b45e-22e8-11f0-81f3-569c3dd06744",505,["D",1745705040807],8,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\n\nexport async function financeForm() {\n // Hardcoded current step for display purposes\n const currentStep = 1;\n\n // Styles for the form\n const styles = {\n container: {\n fontFamily: \"\\\"Roboto\\\", \\\"Helvetica Neue\\\", Arial, sans-serif\",\n maxWidth: \"800px\",\n margin: \"0 auto\",\n padding: \"30px\",\n color: \"#333\",\n backgroundColor: \"#fff\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n logo: {\n fontSize: \"24px\",\n fontWeight: \"700\",\n color: \"#026666\", // finance-like teal color\n marginBottom: \"20px\",\n },\n tabs: {\n display: \"flex\",\n width: \"100%\",\n borderBottom: \"1px solid #e0e0e0\",\n marginBottom: \"30px\",\n },\n tab: {\n flex: \"1\",\n textAlign: \"center\",\n padding: \"12px 0\",\n position: \"relative\",\n cursor: \"default\",\n },\n activeTab: {\n borderBottom: \"3px solid #026666\",\n fontWeight: \"600\",\n },\n tabNumber: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"24px\",\n height: \"24px\",\n borderRadius: \"50%\",\n backgroundColor: \"#e0e0e0\",\n color: \"#666\",\n marginRight: \"8px\",\n fontSize: \"14px\",\n },\n activeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n completeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n formGroup: {\n marginBottom: \"20px\",\n },\n label: {\n display: \"block\",\n marginBottom: \"6px\",\n fontWeight: \"500\",\n fontSize: \"14px\",\n },\n input: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n boxSizing: \"border-box\",\n },\n select: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n backgroundColor: \"#fff\",\n boxSizing: \"border-box\",\n },\n flexRow: {\n display: \"flex\",\n gap: \"15px\",\n },\n buttonContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n marginTop: \"30px\",\n },\n button: {\n padding: \"12px 24px\",\n fontSize: \"16px\",\n fontWeight: \"600\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n },\n primaryButton: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n secondaryButton: {\n backgroundColor: \"#e0e0e0\",\n color: \"#333\",\n },\n checkboxLabel: {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n cursor: \"pointer\",\n },\n checkbox: {\n marginRight: \"8px\",\n },\n formSection: {\n marginBottom: \"30px\",\n },\n sectionTitle: {\n fontSize: \"18px\",\n fontWeight: \"600\",\n marginBottom: \"15px\",\n color: \"#026666\",\n },\n infoText: {\n fontSize: \"14px\",\n color: \"#666\",\n marginBottom: \"15px\",\n },\n disclaimer: {\n fontSize: \"12px\",\n color: \"#666\",\n marginTop: \"20px\",\n padding: \"15px\",\n backgroundColor: \"#f8f8f8\",\n borderRadius: \"4px\",\n },\n };\n\n // Tabs rendering\n const renderTabs = () => {\n const steps = [\n \"Personal Information\",\n \"Address\",\n \"Employment\",\n \"Investment Profile\",\n \"Account Setup\",\n ];\n\n return (\n

\n {steps.map((step, index) => {\n const stepNumber = index + 1;\n const isActive = currentStep === stepNumber;\n const isComplete = currentStep > stepNumber;\n\n return (\n \n \n {isComplete ? \"✓\" : stepNumber}\n \n {step}\n

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

FINANCIAL INVESTMENTS

\n {renderTabs()}\n

\n\n

\n {/* Personal Information */}\n

Personal Information

\n Please provide your personal details as they appear on your legal documents.\n

\n\n

\n First Name\n \n

\n\n

\n Middle Initial\n \n

\n\n

\n Last Name\n \n

\n\n

\n Date of Birth\n \n

\n\n

\n Social Security Number\n \n

\n\n

\n Email Address\n \n

\n\n

\n Phone Number\n \n

\n\n

\n Your personal information is protected by our security measures and privacy policy. We will never share your\n Social Security Number with third parties except as required by law.\n

\n\n {/* Sample of other tabs (normally would be conditionally rendered) */}\n

Residential Address

\n Street Address\n \n

\n\n

{/* Spacer for the first step */}\n \n Continue\n \n

\n\n {/* Additional elements that would be shown on other steps */}\n

Employment Information

\n Employment Status\n \n \n \n \n \n \n \n \n

\n\n

Investment Profile

\n Investment Goals (Select all that apply)\n

\n \n \n Retirement\n \n

\n\n

Account Setup

\n Account Type\n \n \n \n \n \n \n

\n\n

\n \n \n I agree to the Terms and Conditions, Privacy Policy, and confirm that I have reviewed the Account\n Agreement and Fee Schedule.\n \n

\n );\n}",[],[244,250],{"_107":259,"_99":260,"_154":261,"_156":245,"_157":140,"_158":159,"_160":121,"_109":262,"_104":33,"_162":186,"_164":263,"_165":27,"_166":-5,"_167":264,"_102":265},"e4f1e3ce-214a-11f0-9237-569c3dd06744","helpers.ts","30f05e08-8fe5-4006-a652-238401d8b490",["D",1745526600042],"export async function setBlobKey(object: any) {\n const { slug, clientPageId, containerId } = object;\n const blobKey = [ // key_legend: \"[subdomain]--[id of guest page]--[id of container to be reset]\",\n slug.split(\".\")[0], // subdomain name minus .val.run\n clientPageId.replaceAll(\"-\", \"\"), // remove hyphens from ids\n containerId,\n ].join(\"--\");\n\n // console.log(blobKey);\n return blobKey;\n}\n\nexport async function slugify(str: string) {\n // const containerTitleSlug = (await helpers.setContainerTitle(c.req.headers.get(\"x-container-title\"))).split(\" \").join(\"-\");\n return (str.replace(/[^\\w\\s]|_/g, \"\").replace(/\\s+/g, \" \").trim().toLowerCase()).split(\" \").join(\"-\");\n}\n\n// Function to scrape favicon URL from a website\nexport async function scrapeFaviconUrl(url: string) {\n try {\n // Ensure URL has protocol\n if (!url.startsWith(\"http://\") && !url.startsWith(\"https://\")) {\n url = \"https://\" + url;\n }\n\n // Parse the URL to get the origin\n const parsedUrl = new URL(url);\n const origin = parsedUrl.origin;\n\n // Fetch the HTML from the URL\n const response = await fetch(url);\n const html = await response.text();\n\n // Find favicon links in the HTML\n // Using regex patterns to find icon link tags\n let faviconUrl = null;\n\n // Look for link tags with rel=\"icon\" or similar\n const iconRegex = /]*rel=[\"'](?:icon|shortcut icon|apple-touch-icon)[^>]*href=[\"']([^\"']+)[\"'][^>]*>/gi;\n const matches = html.matchAll(iconRegex);\n\n for (const match of matches) {\n if (match && match[1]) {\n faviconUrl = match[1];\n break;\n }\n }\n\n // If we didn't find an icon in link tags, try the default location\n if (!faviconUrl) {\n faviconUrl = \"/favicon.ico\";\n }\n\n // Make sure the URL is absolute\n if (!faviconUrl.startsWith(\"http://\") && !faviconUrl.startsWith(\"https://\")) {\n if (faviconUrl.startsWith(\"/\")) {\n faviconUrl = origin + faviconUrl;\n } else {\n faviconUrl = origin + \"/\" + faviconUrl;\n }\n }\n\n // Verify the favicon exists\n const faviconResponse = await fetch(faviconUrl, { method: \"HEAD\" });\n\n if (!faviconResponse.ok) {\n return null; // Favicon not found\n }\n\n return faviconUrl;\n } catch (error) {\n console.error(\"Error scraping favicon:\", error);\n return null;\n }\n}\n\nexport async function extractCamelCaseWords(str: string) {\n if (!str) return [];\n\n // This regex looks for word boundaries:\n // - Start of string\n // - Transitions from lowercase to uppercase\n const words = str.split(/(?=[A-Z])/).map(word => word.toLowerCase());\n const watchWords = [\"favicon\", \"team\", \"invoice\", \"estimate\"];\n\n // Remove words that are not in the watchWords array\n words.forEach((word, index) => {\n if (!watchWords.includes(word)) {\n words.splice(index, 1);\n }\n });\n return words;\n}",[],[244,260],{"_107":267,"_99":268,"_154":269,"_156":245,"_157":140,"_158":159,"_160":121,"_109":270,"_104":33,"_162":186,"_164":271,"_165":27,"_166":-5,"_167":272,"_102":273},"e4f1eaf4-214a-11f0-9237-569c3dd06744","notionHelpers.ts","7b3ce20d-7292-40a8-ad28-c4b89dcf7c75",["D",1745526600042],"import { Client } from \"npm:@notionhq/client\";\nimport * as helpers from \"./helpers.ts\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nexport async function createDatabasePagesParallel(databaseId: string, pages: []) {\n const creations = pages.map((page) =>\n notion.pages.create({\n parent: { database_id: databaseId },\n properties: {\n \"Website\": {\n \"title\": [\n {\n \"text\": {\n \"content\": page.domain,\n },\n },\n ],\n },\n \"Description\": {\n \"rich_text\": [\n {\n \"text\": {\n \"content\": page.description,\n },\n },\n ],\n },\n Status: {\n \"select\": {\n \"name\": page.status,\n },\n },\n },\n })\n );\n const results = await Promise.allSettled(creations);\n return results;\n}\n\n// delete all database rows\nexport async function deleteAllDatabasePagesParallel(databaseId: string) {\n const pageIds = await notion.databases.query({\n database_id: databaseId,\n });\n // Step 2: Delete all pages in parallel\n const deletions = pageIds.results.map((page) =>\n notion.pages.update({\n page_id: page.id,\n archived: true,\n })\n );\n // Wait for all deletions to complete (even if some fail)\n const results = await Promise.allSettled(deletions);\n return results;\n}\n\nexport async function getDatabaseId(databaseTitle: string) {\n // getDatabaseId(databaseTitle)\n const database = await notion.databases\n .query({ filter: { property: \"title\", title: { equals: databaseTitle } } });\n return database.results[0].id;\n}\n\nexport async function getDatabaseTitle(databaseId: string) {\n // getDatabaseTitle(databaseId)\n const database = await notion.databases.retrieve({ database_id: databaseId });\n // console.log(database.title[0].plain_text);\n return database.title[0].plain_text;\n}\n\nexport async function getDatabaseParentPageId(databaseId: string) {\n let currentBlockId = databaseId;\n\n while (true) {\n const block = await notion.blocks.retrieve({ block_id: currentBlockId });\n\n if (!block.parent) {\n throw new Error(`No parent found for block ${currentBlockId}`);\n }\n\n const parent = block.parent;\n\n if (parent.type === \"page_id\") {\n return parent.page_id;\n }\n\n if (parent.type === \"block_id\") {\n // Climb to the next parent block\n currentBlockId = parent.block_id;\n } else {\n throw new Error(`Unsupported parent type: ${parent.type}`);\n }\n }\n}\n\nexport async function getCalloutProperties(askingFor: string) {\n const blockProperties = (askingFor != \"val.town\")\n ? {\n \"icon\": {\n type: \"external\",\n external: {\n url: \"https://www.notion.so/icons/notion_blue.svg\",\n },\n },\n \"color\": \"default_background\",\n }\n : {\n \"icon\": {\n type: \"external\",\n external: {\n url: \"https://static.esm.town/build/_assets/vt-whiteOnBlack-VOLODW64.svg\",\n },\n },\n \"color\": \"yellow_background\",\n };\n return blockProperties;\n}\n\nexport async function findChildDatabaseBlocks(rootBlockId: string, blockIdentifier: string) {\n const matchingBlocks = [];\n\n async function searchBlock(blockId) {\n const res = await notion.blocks.children.list({ block_id: blockId });\n\n for (const block of res.results) {\n // if (\n // block.type === \"callout\" && block.callout?.rich_text?.[0]?.plain_text && (!block.archived || !block.in_trash)\n // ) {\n // const calloutText = await helpers.slugify(block.callout?.rich_text?.[0]?.plain_text.toLowerCase()) || \"\";\n // const identifier = await helpers.slugify(blockIdentifier?.toLowerCase());\n\n // if (calloutText === identifier) {\n // console.log(calloutText, identifier);\n // matchingBlocks.push(block);\n // }\n // }\n if (\n block.type === \"child_database\" && block.child_database?.title && (!block.archived || !block.in_trash)\n ) {\n const databaseTitle = await helpers.slugify(block.child_database?.title.toLowerCase()) || \"\";\n const identifier = await helpers.slugify(blockIdentifier?.toLowerCase());\n\n if (databaseTitle === identifier) {\n console.log(databaseTitle, identifier);\n matchingBlocks.push(block);\n }\n // console.log(block);\n // matchingBlocks.push(block);\n }\n\n // If the block has children, recurse\n if (block.has_children && matchingBlocks.length === 0) {\n await searchBlock(block.id);\n }\n }\n }\n\n await searchBlock(rootBlockId);\n\n return matchingBlocks;\n}\n\nexport async function findCalloutBlocks(rootBlockId: string, blockIdentifier: string) {\n const matchingBlocks = [];\n\n async function searchBlock(blockId) {\n const res = await notion.blocks.children.list({ block_id: blockId });\n\n for (const block of res.results) {\n // get callouts that are flagged with the val.town icon in this workspace\n // archived: false,\n // in_trash: false,\n if (\n block.type === \"callout\" && block.callout?.rich_text?.[0]?.plain_text && (!block.archived || !block.in_trash)\n ) {\n const calloutText = await helpers.slugify(block.callout?.rich_text?.[0]?.plain_text.toLowerCase()) || \"\";\n const identifier = await helpers.slugify(blockIdentifier?.toLowerCase());\n\n if (calloutText === identifier) {\n console.log(calloutText, identifier);\n matchingBlocks.push(block);\n }\n }\n\n // If the block has children, recurse\n // limit return to one item\n if (block.has_children && matchingBlocks.length === 0) {\n await searchBlock(block.id);\n }\n }\n }\n\n await searchBlock(rootBlockId);\n\n return matchingBlocks;\n}\n\nexport async function getBostonTime() {\n const now = new Date();\n\n const formattedDate = now.toLocaleString(\"en-US\", {\n timeZone: \"America/New_York\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\",\n });\n\n return `val.town says, \"It's ${formattedDate} in Boston.\"`;\n}\n\nexport async function listChildrenChildPages(blockId: string) {\n try {\n const response = await notion.blocks.children.list({\n block_id: blockId,\n });\n\n if (!response) {\n throw new Error(\"Failed to retrieve pages from Notion\");\n }\n const pages = response.results.filter((page) => page.type === \"child_page\");\n return pages;\n } catch (error) {\n console.error(`Error getting Notion pages that are children of ${blockId}:`, error);\n }\n}\n\nexport async function addFavicon(data?: any) {\n const pageId = data?.id;\n // use notion if nothing if the URL property is empty\n const url = await getWebhookPropertyValue(data, \"Website\") || \"notion.com\";\n // send the URL value to the function that will get the site's favicon location\n const faviconURL = await helpers.scrapeFaviconUrl(url);\n console.log({ \"Verified favicon URL\": faviconURL });\n // update the page icon\n await updatePageIcon(pageId, faviconURL);\n\n return pageId;\n}\n\nexport async function setPageStatus(object: any) {\n const { data, section, step } = object;\n const pageId = data?.id;\n // statuses are passed to val.town from Notion in the payload\n const statuses = await getWebhookPropertyValue(data, \"Statuses\");\n // loop through statuses to find items that have the section in their value\n const sectionStatuses = await statuses.split(\",\").filter(status => status.toLowerCase().includes(section));\n // console.log(sectionStatuses);\n const status = (() => {\n switch (step) {\n case \"first\":\n return sectionStatuses[0];\n case \"last\":\n return sectionStatuses[sectionStatuses.length - 1];\n default:\n return sectionStatuses[0];\n }\n })();\n console.log(status);\n\n try {\n const response = await notion.pages.update({\n page_id: pageId,\n properties: {\n Status: {\n select: {\n name: status,\n },\n },\n },\n });\n if (!response) {\n throw new Error(\"Failed to update page in Notion\");\n }\n return response;\n } catch (error) {\n console.error(`Error updating Notion page ${pageId}:`, error);\n }\n}\n\nexport async function updatePageIcon(pageId: string, faviconURL?: string) {\n try {\n const response = await notion.pages.update({\n page_id: pageId,\n icon: {\n type: \"external\",\n external: {\n url: faviconURL,\n },\n },\n });\n if (!response) {\n throw new Error(\"Failed to update page in Notion\");\n }\n return response;\n } catch (error) {\n console.error(`Error updating Notion page ${pageId}:`, error);\n }\n}\n\nexport async function listChildren(pageId: string) {\n // get page properties\n try {\n const response = await notion.blocks.children.list({\n block_id: pageId,\n });\n\n if (!response) {\n throw new Error(\"Failed to retrieve pages from Notion\");\n }\n return response;\n } catch (error) {\n console.error(`Error getting Notion pages that are children of ${pageId}:`, error);\n }\n}\n\n// Helper function to get property value from webhook payload\nexport async function getWebhookPropertyValue(payload: any, propertyName: any) {\n let result = null;\n // check to see if the whole payload was sent, or just the data object\n const properties = payload.data?.properties || payload.properties;\n\n if (properties) {\n const property = properties[propertyName];\n\n if (property) {\n // Different property types have different value structures\n switch (property.type) {\n case \"select\":\n result = property.select?.name;\n break;\n case \"formula\":\n result = property.formula?.string;\n break;\n case \"rich_text\":\n result = property.rich_text?.[0]?.plain_text;\n break;\n case \"title\":\n result = property.title?.[0]?.plain_text;\n break;\n case \"url\":\n result = property.url;\n break;\n case \"text\":\n result = property.text?.content;\n break;\n default:\n result = property.value;\n }\n }\n }\n\n return result;\n}\n\nexport async function getNotionPage(pageId: string) {\n // get page properties\n try {\n const response = await notion.pages.retrieve({\n page_id: pageId,\n });\n if (!response) {\n throw new Error(\"Failed to retrieve page from Notion\");\n }\n return response;\n } catch (error) {\n console.error(`Error getting Notion page ${pageId}:`, error);\n }\n}",[],[244,268],{"_107":275,"_99":276,"_154":277,"_156":245,"_157":140,"_158":278,"_160":121,"_109":279,"_104":280,"_162":186,"_164":281,"_165":27,"_166":-5,"_167":282,"_102":283},"68205b32-22e4-11f0-9422-569c3dd06744","stripeLikeCheckoutForm.tsx","1874ff28-22e1-11f0-9ee6-569c3dd06744",485,["D",1745702484322],9,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\n\nexport async function StripeCheckoutForm() {\n const [cardNumber, setCardNumber] = \"\";\n const [expiry, setExpiry] = \"\";\n const [cvc, setCvc] = \"\";\n const [name, setName] = \"\";\n const [email, setEmail] = \"\";\n const [address, setAddress] = \"\";\n const [city, setCity] = \"\";\n const [state, setState] = \"\";\n const [zip, setZip] = \"\";\n const [country, setCountry] = \"US\";\n\n const handleSubmit = (e) => {\n e.preventDefault();\n console.log(\"Payment submitted\");\n };\n\n const formatCardNumber = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n // Add space after every 4 digits\n const formatted = digits.replace(/(\\d{4})(?=\\d)/g, \"$1 \");\n return formatted.slice(0, 19); // Limit to 16 digits + 3 spaces\n };\n\n const formatExpiry = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n if (digits.length > 2) {\n return `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;\n }\n return digits;\n };\n\n return (\n \n \n \n Checkout\n \n \n $25.00\n \n \n\n

\n \n \n Email\n \n \n \n\n \n \n Card information\n \n \n \n \n \n \n setCvc(e.target.value.replace(/\\D/g, \"\").slice(0, 3))}\n placeholder=\"CVC\"\n required\n style={{\n width: \"50%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"0 0 4px 0\",\n border: \"1px solid #e4e4e7\",\n borderLeft: \"none\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n \n Name on card\n \n \n \n\n \n \n Billing address\n \n \n \n \n \n \n \n \n setCity(e.target.value)}\n placeholder=\"City\"\n required\n style={{\n flex: \"1 1 auto\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n setZip(e.target.value)}\n placeholder=\"ZIP\"\n required\n style={{\n width: \"80px\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n Pay $25.00\n \n\n \n \n \n \n Your payment information is secure\n \n \n \n );\n}",[],[244,276],[244],{"_107":286,"_99":171,"_154":287,"_156":-5,"_157":140,"_158":288,"_160":121,"_109":289,"_104":159,"_162":175,"_164":290,"_165":27,"_166":-5,"_167":291,"_102":292},"279f9560-214e-11f0-ae7f-569c3dd06744","6fc7b82d-7183-4b9b-9412-15b42390ffe8",13,["D",1745528000427],"# Glancer",[],[171],{"_107":294,"_99":295,"_154":119,"_156":-5,"_157":140,"_158":123,"_160":121,"_109":296,"_104":297,"_162":298,"_164":299,"_165":27,"_166":300,"_167":301,"_102":302},"091853de-21f8-11f0-898b-569c3dd06744","index.tsx",["D",1745600963659],25,"http","// import { liveReload } from \"https://esm.town/v/stevekrouse/live-reload@240-main/main.ts\";\nimport { Hono } from \"npm:hono@3\";\n\n// import { cors } from \"npm:hono@3/cors\";\n\n// Import route modules\nimport auth from \"./routes/auth.ts\";\nimport exampleDatabasePage from \"./routes/example-database-page.ts\";\nimport exampleGuestWelcome from \"./routes/example-guest-welcome.ts\";\nimport glancer from \"./routes/glancer.tsx\";\nimport propertyInjections from \"./routes/property-injections.ts\";\nimport root from \"./routes/root.ts\";\nimport testRoutes from \"./routes/test-routes.ts\";\n\n// Create main app\nconst app = new Hono();\n\n// Apply CORS middleware\n// app.use(\n// \"/*\",\n// cors({\n// origin: [\n// \"https://glancer.val.run\",\n// \"https://esm.town\",\n// \"https://notion.so\",\n// \"https://notion.com\",\n// ],\n// allowMethods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n// allowHeaders: [\"Content-Type\", \"Authorization\"],\n// exposeHeaders: [\"Content-Length\", \"X-Kuma-Revision\"],\n// maxAge: 600,\n// credentials: true,\n// }),\n// );\n\n// Mount root route\napp.route(\"/\", root);\n\n// Apply authentication middleware to all routes\napp.use(\"*\", auth);\n\n// Mount route modules\napp.route(\"/example/database/page\", exampleDatabasePage);\napp.route(\"/example/guest/welcome\", exampleGuestWelcome);\napp.route(\"/property/injections\", propertyInjections);\napp.route(\"/glancer\", glancer);\n\n// Mount test routes - these include /asdf, /qwer/:id, and /test/:id\napp.route(\"/\", testRoutes);\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Use this line if you want live-reload functionality\n// export default liveReload(app.fetch, import.meta.url);\n\n// If live-reload is causing issues, comment out the line above and uncomment this line instead:\nexport default app.fetch;","glancer",[],[295],{"_107":304,"_99":305,"_154":306,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":307,"_104":33,"_162":308,"_164":309,"_165":27,"_166":-5,"_167":310,"_102":311},"e4f226b8-214a-11f0-9237-569c3dd06744","resets","6d15d8e4-69cc-4d50-a7b0-3338f22e3d35",["D",1745526600042],"interval","import { blob } from \"https://esm.town/v/std/blob?v=12\";\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\nexport default async function(interval: Interval) {\n const subdomain = \"valtownfornotion\";\n const items = await blob.list(subdomain);\n\n for (const item of items) {\n // get data from last run in the blob\n const lastRun = await blob.getJSON(item.key);\n const lastRunAt = new Date(lastRun?.date);\n const content = lastRun?.content;\n const fetchURL = [\n \"https://\" + subdomain + \".val.run\",\n lastRun?.path,\n ].join(\"\");\n\n // make sure that the lastRunAt isn't recent\n // so that you don't end up switching page content underneath a user\n const now = new Date();\n const diffInMs = Math.abs(now - lastRunAt);\n const diffInMinutes = diffInMs / 1000 / 60;\n // console.log({ diffInMinutes });\n\n // if the block associated to this blob no longer exists in notion\n // the blob should be deleted; the block id is in lastRun.id\n // and can be either a callout block or a child_database\n const block = await notion.blocks.retrieve({ block_id: lastRun?.id });\n // console.log(block);\n if (!block.archived) { // ie, archived: false in the json\n // console.log(block.type, \" exists!\", block.id, block.archived);\n // the block exists, so you can do the reset\n\n // reset via the API\n // this way we keep the notion data and the blob data (our cache) in sync\n // the API resets the blocks on notion pages, and also knows what to do with the blob\n // (note the x-blob-key header)\n if (content != \"default\" && diffInMinutes > .5) {\n const response = await fetch(fetchURL, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-asking-for\": \"default\",\n \"x-blob-key\": item.key,\n \"x-api-key\": Deno.env.get(\"X_API_KEY\"),\n },\n body: JSON.stringify({\n data: {\n id: lastRun?.user?.page_id,\n },\n }),\n });\n }\n } else { // if the block is not archived (ie, archived: true), clean up the blob\n console.log(block.id, block.type, \" is gone!\", \"archived:\" + block.archived);\n // delete the blob\n await blob.delete(item.key);\n console.log(\"deleted: \", item.key);\n console.log(await blob.getJSON(item.key));\n }\n }\n}",[],[305],"files",[151,169,179,190,198,206,215,223,233,242,248,258,266,274,285,293,303],"counts",{"_316":33,"_317":318,"_319":33,"_320":94},"pulls","branches",3,"forks","envVars","contents",[],{"_107":259,"_99":260,"_154":261,"_156":245,"_157":140,"_158":159,"_160":121,"_109":324,"_104":33,"_162":186,"_164":263,"_165":27,"_166":-5,"_102":325},["D",1745526600042],[244,260],"upstream",{"_107":328,"_99":329,"_115":330,"_116":331,"_113":147,"_21":332},"d814c30c-1613-11f0-91f5-569c3dd06744","ValTownForNotion","Augmenting Notion with webhooks and val.town.","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f25cb5fe-2b5b-4f08-5492-f088b3195400/square512",{"_97":98,"_135":136},"screenshots",{"_335":336,"_337":338},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=274&url=https%3A%2F%2Fbradnoble--3b84a1733fad46bdafd44aeadaf75a95.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=274&url=https%3A%2F%2Fbradnoble--3b84a1733fad46bdafd44aeadaf75a95.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":342,"_149":346,"_312":398,"_175":399,"_321":401,"_326":402,"_410":121,"_411":-5},{"_107":108,"_99":100,"_109":343,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":344,"_137":345},["D",1745526600042],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":143,"_144":145,"_146":147,"_148":117},[347,374,389,392,395],{"_107":152,"_99":153,"_154":155,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":161,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":348,"_102":373},[349,352,355,358,361,364,367,370],{"_107":170,"_99":171,"_154":172,"_156":155,"_157":140,"_158":173,"_160":121,"_109":174,"_104":94,"_162":175,"_164":176,"_165":27,"_166":-5,"_167":350,"_102":351},[],[153,171],{"_107":180,"_99":181,"_154":182,"_156":155,"_157":140,"_158":183,"_160":121,"_109":184,"_104":185,"_162":186,"_164":187,"_165":27,"_166":-5,"_167":353,"_102":354},[],[153,181],{"_107":191,"_99":192,"_154":193,"_156":155,"_157":140,"_158":159,"_160":121,"_109":194,"_104":33,"_162":186,"_164":195,"_165":27,"_166":-5,"_167":356,"_102":357},[],[153,192],{"_107":199,"_99":200,"_154":201,"_156":155,"_157":140,"_158":159,"_160":121,"_109":202,"_104":33,"_162":186,"_164":203,"_165":27,"_166":-5,"_167":359,"_102":360},[],[153,200],{"_107":207,"_99":208,"_154":209,"_156":155,"_157":140,"_158":139,"_160":121,"_109":210,"_104":211,"_162":186,"_164":212,"_165":27,"_166":-5,"_167":362,"_102":363},[],[153,208],{"_107":216,"_99":217,"_154":218,"_156":155,"_157":140,"_158":159,"_160":121,"_109":219,"_104":33,"_162":186,"_164":220,"_165":27,"_166":-5,"_167":365,"_102":366},[],[153,217],{"_107":224,"_99":225,"_154":226,"_156":155,"_157":140,"_158":227,"_160":121,"_109":228,"_104":229,"_162":186,"_164":230,"_165":27,"_166":-5,"_167":368,"_102":369},[],[153,225],{"_107":234,"_99":235,"_154":236,"_156":155,"_157":140,"_158":159,"_160":121,"_109":237,"_104":33,"_162":186,"_164":238,"_165":27,"_166":-5,"_167":371,"_102":372},[],[153,235],[153],{"_107":243,"_99":244,"_154":245,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":246,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":375,"_102":388},[376,379,382,385],{"_107":249,"_99":250,"_154":251,"_156":245,"_157":140,"_158":252,"_160":121,"_109":253,"_104":254,"_162":186,"_164":255,"_165":27,"_166":-5,"_167":377,"_102":378},[],[244,250],{"_107":259,"_99":260,"_154":261,"_156":245,"_157":140,"_158":159,"_160":121,"_109":262,"_104":33,"_162":186,"_164":263,"_165":27,"_166":-5,"_167":380,"_102":381},[],[244,260],{"_107":267,"_99":268,"_154":269,"_156":245,"_157":140,"_158":159,"_160":121,"_109":270,"_104":33,"_162":186,"_164":271,"_165":27,"_166":-5,"_167":383,"_102":384},[],[244,268],{"_107":275,"_99":276,"_154":277,"_156":245,"_157":140,"_158":278,"_160":121,"_109":279,"_104":280,"_162":186,"_164":281,"_165":27,"_166":-5,"_167":386,"_102":387},[],[244,276],[244],{"_107":286,"_99":171,"_154":287,"_156":-5,"_157":140,"_158":288,"_160":121,"_109":289,"_104":159,"_162":175,"_164":290,"_165":27,"_166":-5,"_167":390,"_102":391},[],[171],{"_107":294,"_99":295,"_154":119,"_156":-5,"_157":140,"_158":123,"_160":121,"_109":296,"_104":297,"_162":298,"_164":299,"_165":27,"_166":300,"_167":393,"_102":394},[],[295],{"_107":304,"_99":305,"_154":306,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":307,"_104":33,"_162":308,"_164":309,"_165":27,"_166":-5,"_167":396,"_102":397},[],[305],[347,349,352,355,358,361,364,367,370,374,376,379,382,385,389,392,395],{"_107":259,"_99":260,"_154":261,"_156":245,"_157":140,"_158":159,"_160":121,"_109":324,"_104":33,"_162":186,"_164":263,"_165":27,"_166":-5,"_102":400},[244,260],[],{"_107":143,"_109":403,"_404":405,"_99":43,"_141":328,"_104":145,"_142":-5,"_144":-5,"_406":407,"_133":27,"_113":147,"_408":98,"_409":329},["D",1744293493384],"updatedAt",["D",1745504421946],"lockfileKey","1745504426655-esm.town_v_bradnoble_ValTownForNotion@1127-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]