108 </label>
109 <input type="text" id="customSubNiche" name="customSubNiche"
110 placeholder="e.g., React tutorials, Vegan recipes..."
111 class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
112 </div>
268 gaming: ['Game Reviews', 'Let\'s Play', 'Gaming News', 'Esports', 'Game Development', 'Mobile Gaming', 'Retro Gaming', 'Gaming Hardware'],
269 education: ['Online Courses', 'Language Learning', 'Math Tutorials', 'Science Experiments', 'History Lessons', 'Study Tips', 'Test Preparation', 'Educational Kids Content'],
270 entertainment: ['Movie Reviews', 'Comedy Skits', 'Reaction Videos', 'Celebrity News', 'TV Show Recaps', 'Stand-up Comedy', 'Viral Challenges', 'Pop Culture'],
271 lifestyle: ['Home Decor', 'Organization Tips', 'Minimalism', 'Self Improvement', 'Productivity', 'Morning Routines', 'Life Hacks', 'Personal Development'],
272 fitness: ['Workout Routines', 'Nutrition Tips', 'Weight Loss', 'Yoga', 'Bodybuilding', 'Running', 'Mental Health', 'Healthy Recipes'],
85 </label>
86 <input type="text" id="customSubNiche" name="customSubNiche"
87 placeholder="e.g., React tutorials, Vegan recipes..."
88 class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
89 </div>
173 gaming: ['Game Reviews', 'Let\'s Play', 'Gaming News', 'Esports', 'Game Development', 'Mobile Gaming', 'Retro Gaming', 'Gaming Hardware'],
174 education: ['Online Courses', 'Language Learning', 'Math Tutorials', 'Science Experiments', 'History Lessons', 'Study Tips', 'Test Preparation', 'Educational Kids Content'],
175 entertainment: ['Movie Reviews', 'Comedy Skits', 'Reaction Videos', 'Celebrity News', 'TV Show Recaps', 'Stand-up Comedy', 'Viral Challenges', 'Pop Culture'],
176 lifestyle: ['Home Decor', 'Organization Tips', 'Minimalism', 'Self Improvement', 'Productivity', 'Morning Routines', 'Life Hacks', 'Personal Development'],
177 fitness: ['Workout Routines', 'Nutrition Tips', 'Weight Loss', 'Yoga', 'Bodybuilding', 'Running', 'Mental Health', 'Healthy Recipes'],
81 </label>
82 <input type="text" id="customSubNiche" name="customSubNiche"
83 placeholder="e.g., React tutorials, Vegan recipes..."
84 class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
85 </div>
275 gaming: ['Game Reviews', 'Let\'s Play', 'Gaming News', 'Esports', 'Game Development', 'Mobile Gaming', 'Retro Gaming', 'Gaming Hardware'],
276 education: ['Online Courses', 'Language Learning', 'Math Tutorials', 'Science Experiments', 'History Lessons', 'Study Tips', 'Test Preparation', 'Educational Kids Content'],
277 entertainment: ['Movie Reviews', 'Comedy Skits', 'Reaction Videos', 'Celebrity News', 'TV Show Recaps', 'Stand-up Comedy', 'Viral Challenges', 'Pop Culture'],
278 lifestyle: ['Home Decor', 'Organization Tips', 'Minimalism', 'Self Improvement', 'Productivity', 'Morning Routines', 'Life Hacks', 'Personal Development'],
279 fitness: ['Workout Routines', 'Nutrition Tips', 'Weight Loss', 'Yoga', 'Bodybuilding', 'Running', 'Mental Health', 'Healthy Recipes'],
129 </label>
130 <input type="text" id="customSubNiche" name="customSubNiche"
131 placeholder="e.g., React tutorials, Vegan recipes..."
132 class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
133 </div>
436 gaming: ['Game Reviews', 'Let\'s Play', 'Gaming News', 'Esports', 'Game Development', 'Mobile Gaming', 'Retro Gaming', 'Gaming Hardware'],
437 education: ['Online Courses', 'Language Learning', 'Math Tutorials', 'Science Experiments', 'History Lessons', 'Study Tips', 'Test Preparation', 'Educational Kids Content'],
438 entertainment: ['Movie Reviews', 'Comedy Skits', 'Reaction Videos', 'Celebrity News', 'TV Show Recaps', 'Stand-up Comedy', 'Viral Challenges', 'Pop Culture'],
439 lifestyle: ['Home Decor', 'Organization Tips', 'Minimalism', 'Self Improvement', 'Productivity', 'Morning Routines', 'Life Hacks', 'Personal Development'],
440 fitness: ['Workout Routines', 'Nutrition Tips', 'Weight Loss', 'Yoga', 'Bodybuilding', 'Running', 'Mental Health', 'Healthy Recipes'],
59 </label>
60 <input type="text" id="customSubNiche" name="customSubNiche"
61 placeholder="e.g., React tutorials, Vegan recipes..."
62 class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
63 </div>
285 'Movie Reviews',
286 'Comedy Skits',
287 'Reaction Videos',
288 'Celebrity News',
289 'TV Show Recaps',
34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### โ favicon.svg
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5const cities = [
1/** @jsxImportSource https://esm.sh/preact */
2import { boomboxData } from "./boombox.js";
3import { ImageResponse } from "npm:@vercel/og";
168 <title>Prerequisite Tree Generator</title>
169 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>๐ณ</text></svg>">
170 <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
171 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
172 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
173 <link rel="preconnect" href="https://fonts.googleapis.com">
342<div id="root"></div>
343<script type="text/babel">
344 const { useState, useEffect, useCallback } = React;
345
346 const API_BASE_URL = '${sourceUrl}';
527
528 const container = document.getElementById('root');
529 const root = ReactDOM.createRoot(container);
530 root.render(<App />);
531</script>
45โ โโโ routes/ # Route definitions and HTTP handling
46โ โ โโโ api/ # API endpoints
47โ โ โโโ glimpse/ # Glimpse routes (enhanced with React frontend)
48โ โ โโโ tasks/ # Task-related routes
49โ โ โโโ views/ # User-facing views
50โ โ โโโ authCheck.ts # Authentication middleware
51โ โโโ services/ # External service integrations
52โโโ frontend/ # React frontend assets
53โ โโโ glimpse.html # HTML template for glimpse views
54โ โโโ glimpse.tsx # React entry point
55โ โโโ components/ # React components
56โ โ โโโ GlimpseView.tsx # Main glimpse display component
57โ โ โโโ NotionBlock.tsx # Notion block renderer
120### Data Access Routes
121- `GET /views/glimpse/:id` - Get complete page data with blocks by Notion page ID (JSON only)
122- `GET /glimpse/:id` - **Enhanced with React Frontend** - Content negotiation based on Accept header:
123 - **Browser requests** (`Accept: text/html`): Returns rich React frontend with interactive Notion content display
124 - **API requests** (`Accept: application/json`): Returns raw JSON data (same as before)
125 - **Fallback**: If HTML template fails to load, automatically serves JSON
126
127### React Frontend Features
128
129The `/glimpse/:id` endpoint now includes a rich React frontend when accessed via browser:
130
131#### **Content Rendering**
153- **Content Negotiation**: Single endpoint serves both HTML and JSON
154- **Static File Serving**: Frontend assets served via `/frontend/*` route
155- **React 18.2.0**: Pinned version for consistency
156- **TypeScript Support**: Shared types for Notion data structures
157- **Prism.js Integration**: Advanced syntax highlighting with automatic language detection, line numbers, and support for 30+ programming languages including JavaScript, TypeScript, Python, Java, C++, and more (performance-optimized with non-blocking script loading)
158
159**Note:** The glimpse endpoints now provide both programmatic access (JSON) and user-friendly viewing (React frontend) from the same URL, maintaining backward compatibility while adding rich content display capabilities.
160
161### Demo API Endpoints
