${user.username}

\n $\"${user.username}\"$ \n

${user.bio || \"\"}

\n \n

Vals

${val.name}

\n `;\n }).join(\"\");\n return c.html(`\n

Glance on val.town

If you're a Glance team member and you have a val.town account, add your username to the Team sandbox on Notion and your val.town profile will appear here.

If you don't yet have a val.town account, sign up!

\n ${html}\n

\n `);\n});\n\napp.get(\"/team/showcase/json\", async (c) => {\n // get all pages from the team database\n const team = await getTeam();\n // console.log(team);\n return c.html(`\n

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

\n `);\n});\n\napp.get(\"/:username\", async (c) => {\n const username = c.req.param(\"username\");\n try {\n // in this example endpoint, we use the vt methods\n const user = await vt.alias.username.retrieve(username);\n return c.json(\n user,\n );\n } catch (error) {\n console.log(error);\n return c.json(error, 400);\n }\n});\n\napp.get(\"/:username/html\", async (c) => {\n const username = c.req.param(\"username\");\n try {\n // in this example endpoint, we use the controller that uses the vt methods\n const user = await getValTownUser(username);\n return c.html(`\n

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

\n `);\n } catch (error) {\n console.log(error);\n return c.json(error, 400);\n }\n});\n\napp.get(\"/\", async (c) => {\n return c.json({ message: \"/api is for GETs\" });\n});\n\nexport default app;",[],[182,189],{"_102":197,"_95":198,"_151":199,"_153":183,"_154":136,"_155":200,"_157":158,"_104":201,"_99":202,"_161":175,"_163":203,"_164":22,"_165":-5,"_166":204,"_98":205},"aabaece0-42e3-11f0-99cd-76b3cceeab13","tasks.ts","929a8622-4250-11f0-966c-76b3cceeab13",216,["D",1749220603779],51,"import { Hono } from \"npm:hono\";\nimport { getNotionPage, getValTownUser, setNotionPage } from \"../controllers/controllers.ts\";\n\n// Initialize Hono\nconst app = new Hono();\n\n// get the user object and save it to Notion\n// note that this is a POST, which is the only type of request Notion sends\napp.post(\"/\", async (c) => {\n try {\n // get the Notion webhook payload\n const { data } = await c.req.json();\n // we can't be sure what data we'll get from the Notion payload\n // so we need to call Notion and get all the data from the page that sent the POST\n const page = await getNotionPage(data.id);\n // depending on what's in the Notion data, find the username\n const username = (page.properties?.URL?.url)\n ? page.properties?.URL?.url.split(\"/\").pop()\n : page.properties?.Username?.title?.[0]?.plain_text;\n // hit val.town for the the user object with that username\n const user = await getValTownUser(username);\n // fill in Notion with the data from the val.town user object\n await setNotionPage(data.id, user);\n // return a simple success message (Notion discards details anyway)\n return c.json({ ok: true });\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\nexport default app;",[],[182,198],[182],{"_102":208,"_95":209,"_151":210,"_153":-5,"_154":136,"_155":211,"_157":158,"_104":212,"_99":213,"_161":214,"_163":215,"_164":22,"_165":-5,"_166":216,"_98":217},"0184ebac-4285-11f0-a952-76b3cceeab13","README.md","75ed7e84-4283-11f0-aafc-76b3cceeab13",202,["D",1749179947196],6,"file","# Team - Notion & Val Town Integration\n\nA simple integration that automatically enriches a Notion database of team members with their Val Town account information. When a new team member is added to your Notion database, this Val automatically fetches their Val Town profile data and populates the relevant fields.\n\n## Features\n\n- **Automatic Profile Enrichment**: Fetches Val Town user data when triggered by Notion webhooks\n- **Flexible Username Detection**: Supports both URL-based and direct username input\n- **RESTful API**: Provides endpoints to manually query Val Town user information\n- **Error Handling**: Graceful handling of missing users or API failures\n\n## Project Structure\n\n```\n├── main.tsx # Main Hono app with route mounting\n├── routes/\n│ ├── api.ts # API endpoints for manual user queries\n│ └── tasks.ts # Webhook handler for Notion integration\n├── controllers/\n│ └── controllers.ts # Business logic for Notion and Val Town operations\n└── README.md\n```\n\n## API Endpoints\n\n### Webhook Endpoint\n- **POST** `/tasks` - Notion webhook handler that enriches team member data\n\n### Manual API Endpoints\nNote: these are not used in this demo but are included for demonstration purposes later.\n- **GET** `/api/:username` - Returns JSON data for a Val Town user\n- **GET** `/api/:username/html` - Returns HTML-formatted user data\n- **GET** `/api` - API information endpoint\n\n## Setup Instructions\n\n### 1. Environment Variables\n\nSet the following environment variable in your Val Town settings:\n\n```\nNOTION_API_KEY=your_notion_integration_token\nGLANCE_TEAM_DB_ID=your_database_id\n```\n\n### 2. Notion Database Schema\n\nYour Notion database should have the following properties:\n\n| Property Name | Type | Description |\n|---------------|------|-------------|\n| `Username` | Title | Val Town username (auto-populated) |\n| `URL` | URL | Val Town profile URL (can be input or auto-populated) |\n| `Id` | Rich Text | Val Town user ID (auto-populated) |\n| `Bio` | Rich Text | User bio from Val Town (auto-populated) |\n\n### 3. Notion Integration Setup\n\n1. Create a new integration in your Notion workspace\n2. Add the integration to your team database\n3. Create a webhook that points to `https://your-val-url.web.val.run/tasks`\n4. Configure the webhook to trigger on database item creation/updates\n\n## How It Works\n\n1. **Trigger**: When a team member is added/updated in Notion, a webhook is sent to `/tasks`\n2. **Data Retrieval**: The system fetches the full page data from Notion to get the username\n3. **Username Extraction**: Extracts username from either:\n - The `URL` field (extracts from `https://val.town/u/username`)\n - The `Username` field directly\n4. **Profile Fetch**: Queries the Val Town API for user profile data\n5. **Database Update**: Updates the Notion page with the retrieved information\n\n## Usage Examples\n\n### Notion Workflow\n\n1. Add a new team member to your Notion database\n2. Fill in either the `Username` field or paste their Val Town profile URL in the `URL` field\n3. The webhook will automatically trigger and populate the remaining fields\n\n## Val Town Profile Data\n\nThe integration fetches and stores the following data from Val Town:\n\n- **Username**: Val Town handle\n- **ID**: Unique user identifier\n- **Bio**: User's profile bio (if available)\n- **URL**: Direct link to their Val Town profile\n- **Profile Image URL**: Link to their profile picture\n\n## Error Handling\n\n- **Missing Users**: If a Val Town user doesn't exist, the system gracefully handles the error\n- **API Failures**: Network issues or API errors are logged and return appropriate error responses\n- **Invalid Data**: Malformed webhook data is handled with proper error messages\n\n## Development\n\nThe project uses:\n- **Hono**: Fast web framework for the API\n- **Val Town SDK**: Official SDK for Val Town API interactions\n- **Notion SDK**: Official SDK for Notion API operations\n- **TypeScript**: For type safety and better development experience\n\n## Contributing\n\nWhen modifying the Notion database schema, ensure you update the `setPage` function in `controllers/controllers.ts` to match your new property structure.",[],[209],{"_102":219,"_95":220,"_151":221,"_153":-5,"_154":136,"_155":222,"_157":158,"_104":223,"_99":224,"_161":225,"_163":226,"_164":22,"_165":-5,"_166":227,"_98":228},"702ca0da-431c-11f0-952b-76b3cceeab13","cron.ts","1a62e1fc-4315-11f0-a37e-76b3cceeab13",274,["D",1749244986850],53,"interval","import { getDatabasePageIds, getValTownUser, setNotionPage } from \"./controllers/controllers.ts\";\n\nexport default async function(interval: Interval) {\n const pages = await getDatabasePageIds();\n // loop through the database\n pages.results.map(async (page) => {\n // get username from Notion page data\n const username = page.properties.Username.title[0].plain_text;\n // get fresh user info from val.town with that username\n const user = await getValTownUser(username);\n // if the val.town profileImageUrl is the same as the notion url, do nothing\n if (user.profileImageUrl === page.properties.Avatar.files[0].external.url) {\n console.log(\"Skipping \" + username + \" because the profile pic isn't updated.\");\n return;\n } else {\n // update the page with fresh user info\n await setNotionPage(page.id, user);\n console.log(username + \" has been updated\");\n }\n });\n}",[],[220],{"_102":230,"_95":231,"_151":232,"_153":-5,"_154":136,"_155":233,"_157":158,"_104":234,"_99":235,"_161":236,"_163":237,"_164":22,"_165":238,"_166":239,"_98":240},"e2dcaf6a-430f-11f0-9e5e-76b3cceeab13","main.tsx","a9c7a33c-4243-11f0-a40a-76b3cceeab13",217,["D",1749239595807],86,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { Hono } from \"npm:hono\";\n\n// import routes\nimport api from \"./routes/api.ts\";\nimport views from \"./routes/api.ts\";\nimport tasks from \"./routes/tasks.ts\";\n\n// initialize Hono API\nconst app = new Hono();\n\n// Mount routes\napp.route(\"/tasks\", tasks);\napp.route(\"/api\", api);\napp.route(\"/team\", views);\n\napp.get(\"/\", (c) => {\n return c.text(\"Hello, Team!\");\n});\n\nexport default app.fetch;","glance-team",[],[231],"files",[148,168,180,187,196,207,218,229],"counts",{"_245":32,"_246":247,"_248":160,"_249":250},"pulls","branches",3,"forks","envVars",{"_251":252,"_253":32},"count",2,"emptyCount","contents",[256,259,262,265,268],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":257,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":258},["D",1749158048852],[150],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":184,"_157":158,"_104":260,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":261},["D",1749158035551],[182],{"_102":208,"_95":209,"_151":210,"_153":-5,"_154":136,"_155":211,"_157":158,"_104":263,"_99":213,"_161":214,"_163":215,"_164":22,"_165":-5,"_98":264},["D",1749179947196],[209],{"_102":219,"_95":220,"_151":221,"_153":-5,"_154":136,"_155":222,"_157":158,"_104":266,"_99":224,"_161":225,"_163":226,"_164":22,"_165":-5,"_98":267},["D",1749244986850],[220],{"_102":230,"_95":231,"_151":232,"_153":-5,"_154":136,"_155":233,"_157":158,"_104":269,"_99":235,"_161":236,"_163":237,"_164":22,"_165":238,"_98":270},["D",1749239595807],[231],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branches",{"_93":94,"_95":96,"_100":279,"_246":284},{"_102":103,"_95":96,"_104":280,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":281,"_130":282,"_133":283,"_145":22},["D",1749151882696],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[285,291,298],{"_102":136,"_104":286,"_287":288,"_95":43,"_137":103,"_99":135,"_138":-5,"_139":-5,"_289":290,"_106":-5},["D",1749151882696],"updatedAt",["D",1749734630656],"lockfileKey","1756210824665-esm.town_v_glance_Team@280-main",{"_102":292,"_104":293,"_287":294,"_95":295,"_137":103,"_99":296,"_138":136,"_139":200,"_289":297,"_106":-5},"ce238886-42e3-11f0-99cd-76b3cceeab13",["D",1749220663192],["D",1749239455934],"team-json",154,"1756442756851-esm.town_v_glance_Team@154-team-json",{"_102":299,"_104":300,"_287":301,"_95":132,"_137":103,"_99":247,"_138":136,"_139":302,"_289":303,"_106":-5},"9b02648e-4286-11f0-b97e-76b3cceeab13",["D",1749180634215],["D",1749180797690],206,"1757629093424-esm.town_v_glance_Team@3-avatar","actionData","errors"]

glance

Team

Branches3

Branches
3