Val Town Code SearchReturn to Val Town

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

34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### ← favicon.svg

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@19 */
2import {
3   QueryClient,
4   QueryClientProvider,
5} from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
6import {
7   createRootRouteWithContext,
11   Outlet,
12   RouterProvider,
13} from "https://esm.sh/@tanstack/react-router@^1.121.0?deps=react@19";
14import React from "https://esm.sh/react@19";
15import { createRoot } from "https://esm.sh/react-dom@19/client?deps=react@19";
16import { App } from "./App.tsx";
17

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { type PostType, usePosts } from "./posts.ts";
4

34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### ← favicon.svg