86```typescript
87// Client-side event recording
88window.recordClick = function (action) {
89 fetch(`/api/setAction`, {
90 method: "POST",
116│ └── index.tsx # Frontend JavaScript entry point
117└── shared/ # Utilities used by both frontend and backend
118 └── utils/ # Shared helper functions
119```
120
129### Shared (`/shared`)
130
131Contains utilities and functions that work in both browser and server environments, ensuring code reusability across the application.
132
133## Framework and Technology Stack
189### Shared Utilities (`/shared`)
190
191Contains helper functions that work in both frontend and backend environments:
192
193```typescript
220
221```typescript
222export default async function (interval: Interval) {
223 const pages = await notion.databases.query({
224 database_id: Deno.env.get("GLANCE_DEMOS_DB_ID"),
280| Aspect | Controller | Utility |
281| ------------ | --------------------------------------------- | ------------------------------------------------- |
282| Purpose | Orchestrates business logic and workflows | Provides small, stateless helper functions |
283| Scope | High-level, involves services or side effects | Low-level, narrow focus (string, date operations) |
284| State | Works with application or user-specific data | Stateless - input in, output out |
6| Aspect | **Controller** | **Util** |
7| ----------------- | --------------------------------------------------- | --------------------------------------------------- |
8| **Purpose** | Orchestrates business logic and workflows | Provides small, stateless helper functions |
9| **Scope** | High-level, often involves services or side effects | Low-level, narrow in focus (e.g., string, date ops) |
10| **State** | Works with application or user-specific data | Stateless – input in, output out |
7### Task endpoints use /controllers to get and save data
8
9In 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.
10
11### Naming convention for routes and controllers
25 Note that the export in the controller follows the same convention; it's also called `setDemoURL`.
26
271. Once the controller is imported, pass data to the exported function so that it can do its thing:
28
29 ```
31 ```
32
33 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:
34
35 ```
36 // /controllers/setDemoURL.ts
37 export async function setDemoURL(data: any) {
38 try {
39 ...
1This directory has crons that extract data from Notion and save that data to blob storage in val.town. Blob storage functions like a cache.
2
3## Caching keeps customer-facing /demos snappy
1The files in this directory export functions that get data from and save data to Notion. Most of these functions are used by /tasks.
2
3Every controller in this directory includes the Notion client:
20| Aspect | **Controller** | **Util** |
21| ----------------- | --------------------------------------------------- | --------------------------------------------------- |
22| **Purpose** | Orchestrates business logic and workflows | Provides small, stateless helper functions |
23| **Scope** | High-level, often involves services or side effects | Low-level, narrow in focus (e.g., string, date ops) |
24| **State** | Works with application or user-specific data | Stateless – input in, output out |
1export async function pollEnabledStatus() {
2 // this shouldn't run forever just b/c someone forgot to close their browser tab with the demo in it
3 const interval = 1000; // 10000;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function PdfContent({ data, content }) {
4 // const { content, contentURL, docsURL } = config;
5 // console.log("content: ", content);
21
22// Type guards
23export function isApiError(data: DemoData): data is ApiErrorResponse {
24 return 'message' in data && 'status' in data;
25}
26
27export function isNotionPage(data: DemoData): data is NotionPage {
28 return 'object' in data && data.object === 'page';
29}
44
45// Prepare initial data
46async function prepareInitialData(): Promise<{
47 demoData: DemoData | null;
48 loading: boolean;
91
92// Initialize the app
93async function initializeApp() {
94 const root = document.getElementById("root");
95 if (!root) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function IframeContent({ data, content }) {
4 // const { content, contentURL, docsURL } = config;
5 // console.log("content: ", content);
8});
9
10function buildData(response) {
11 return {
12 status: "connected",
23// we present that at root and embed that into Notion
24// to show everyone that the connection is healthy btw Notion and val.town
25export default async function (interval: Interval) {
26 const blobKey = await blobKeyForDemoCache(import.meta.url, "healthCheck");
27 try {
