Frontend

Client-side files that render in the browser.

The glimpse frontend provides a rich, interactive view of Notion page content with clean, semantic HTML structure.

• glimpse.html - HTML template with React mount point and custom CSS
• glimpse.tsx - React entry point that bootstraps the application
• components/GlimpseView.tsx - Main component that handles data fetching and layout
• components/NotionProperty.tsx - Renders Notion page properties with proper formatting
• components/NotionBlock.tsx - Recursively renders Notion blocks with semantic HTML
• components/NotionBlocks.tsx - Helper component for grouping blocks (especially lists)

• Content Negotiation: /glimpse/:id serves HTML for browsers, JSON for API calls
• Server-Side Data Injection: Initial data injected to avoid loading states
• Semantic HTML Structure: Clean HTML without unnecessary wrapper divs
• Smart List Handling: Proper <ul>/<ol> grouping for consecutive list items
• Rich Notion Rendering: Supports headings, paragraphs, lists, code blocks, callouts, etc.
• Property Display: Shows all page properties with type-specific formatting
• Error Handling: Graceful error states with retry functionality
• Responsive Design: Mobile-friendly layout using TailwindCSS
• Debug Mode: Raw data view in development environments

• No Wrappers: Simple elements like <p>, <h1>-<h6>, <blockquote> render directly
• Conditional Wrappers: Complex blocks like callouts, toggles get wrapper divs only when needed
• Semantic Lists: Consecutive list items are grouped into proper <ul>/<ol> containers
• Valid HTML: Maintains proper parent-child relationships (no <div> around <li>)

1. Simple Blocks (no wrapper): paragraphs, headings, quotes, dividers, code blocks
2. List Items (grouped): bulleted and numbered list items grouped into semantic lists
3. Complex Blocks (wrapper needed): callouts, toggles, file attachments, embeds
4. Media Blocks (conditional wrapper): images and videos get wrappers only if captions exist
5. Container Blocks: tables, columns maintain proper semantic structure

1. Browser Access: Visit /glimpse/:id in browser to see rich HTML view
2. API Access: Use /api/demo/:id endpoint for raw JSON data
3. Fallback: If HTML template fails to load, shows informative error page

• Text blocks: paragraph, headings (1-3), rich text formatting
• Lists: bulleted, numbered, to-do items (properly grouped)
• Interactive: toggle blocks, callouts, checkboxes
• Media: images, videos, files, bookmarks, embeds
• Structure: dividers, columns, tables
• Code: inline code and code blocks with syntax highlighting

Uses a combination of:

• TailwindCSS: Via CDN for utility classes
• Custom CSS: Notion-specific styling in glimpse.html
• Semantic Classes: Clean class names like notion-heading-1, notion-callout
• Responsive Design: Mobile-first approach

• Better Accessibility: Proper HTML semantics for screen readers
• Cleaner CSS: Simpler selectors without unnecessary wrapper divs
• Valid HTML: Maintains proper element relationships
• Performance: Fewer DOM nodes, better rendering performance
• SEO Friendly: Semantic HTML structure for search engines