FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
lightweight
lightweightglimpse2-runbook-view-glimpse-save-login-react
Remix of lightweight/glimpse2-runbook-view-glimpse-save-login
Public
Like
glimpse2-runbook-view-glimpse-save-login-react
Home
Code
8
_townie
13
backend
7
frontend
9
shared
3
.vtignore
README.md
deno.json
H
main.tsx
Branches
2
Pull requests
Remixes
History
Environment variables
6
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
frontend
/
utils
/
README.md
Code
/
frontend
/
utils
/
README.md
Search
…
Viewing readonly version of main branch: v19
View latest version
README.md

Frontend Utils

This directory contains pure utility functions that handle data transformation and validation logic.

Files

dataExtraction.ts

Utility functions for extracting and parsing data from Notion properties.

Functions:

  • extractUserEmail(properties) - Extract email from Notion properties (handles both email-type and rich_text-type)
  • extractUserName(properties) - Extract name/title from Notion properties
  • formatPageTitle(properties) - Format page title as "Name for Email" with graceful fallbacks

Note: Uses types from /frontend/types/notion.ts

validation.ts

Utility functions for validation and authorization logic.

Functions:

  • checkAuthorization(userEmail, pageProperties) - Check if user is authorized based on email matching
  • getUserEmailFromWindow() - Get user email from injected window data

notionFormatting.ts

Utility functions for formatting Notion property values.

Functions:

  • formatNotionDate(dateString) - Format date string to localized format
  • extractPlainText(textArray) - Extract plain text from rich text/title arrays
  • formatMultiSelect(items) - Format multi-select items as comma-separated string
  • formatBoolean(value, trueText?, falseText?) - Format boolean with emoji indicators

Usage

import { extractUserEmail, formatPageTitle } from "../utils/dataExtraction.ts"; import { checkAuthorization, getUserEmailFromWindow } from "../utils/validation.ts"; // Extract data const email = extractUserEmail(properties); const title = formatPageTitle(properties); // Check authorization const userEmail = getUserEmailFromWindow(); const isAuthorized = checkAuthorization(userEmail, properties);

Benefits

  • Pure functions: No side effects, easy to test
  • Reusable: Can be used across multiple components
  • Type-safe: Full TypeScript support with proper interfaces
  • Consistent: Centralized logic for data extraction and validation
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.