${escapeHtml(code)}

\n `;\n}\n\n// Default block detector - finds the smallest logical block containing the cursor\nasync function defaultBlockDetector(code: string, line: number, column: number): Promise<{start: number, end: number, type: string}> {\n // Simple implementation - finds function, class, or statement blocks\n const lines = code.split('\\n');\n \n // Find the current line content\n const currentLine = lines[line - 1] || '';\n \n // Simple heuristics for block detection\n if (currentLine.includes('function') || currentLine.includes('=>')) {\n return findFunctionBlock(lines, line);\n } else if (currentLine.includes('class')) {\n return findClassBlock(lines, line);\n } else if (currentLine.includes('if') || currentLine.includes('for') || currentLine.includes('while')) {\n return findControlBlock(lines, line);\n } else {\n return findStatementBlock(lines, line);\n }\n}\n\n// Default block explainer\nasync function defaultBlockExplainer(code: string, blockInfo: {start: number, end: number, type: string}): Promise {\n const lines = code.split('\\n');\n const blockCode = lines.slice(blockInfo.start - 1, blockInfo.end).join('\\n');\n \n switch (blockInfo.type) {\n case 'function':\n return `This is a function block. Functions are reusable pieces of code that perform specific tasks. This function contains ${blockInfo.end - blockInfo.start + 1} lines of code.`;\n case 'class':\n return `This is a class definition. Classes are blueprints for creating objects with shared properties and methods.`;\n case 'control':\n return `This is a control flow statement (if/for/while). It controls the execution flow of the program based on conditions or loops.`;\n case 'statement':\n return `This is a code statement. Statements are individual instructions that perform actions in the program.`;\n default:\n return `This is a code block containing ${blockInfo.end - blockInfo.start + 1} lines. It represents a logical unit of code.`;\n }\n}\n\n// Helper functions for block detection\nfunction findFunctionBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find function start\n while (start > 0 && !lines[start - 1].includes('function') && !lines[start - 1].includes('=>')) {\n start--;\n }\n \n // Find function end by counting braces\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'function' };\n}\n\nfunction findClassBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find class start\n while (start > 0 && !lines[start - 1].includes('class')) {\n start--;\n }\n \n // Find class end by counting braces\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'class' };\n}\n\nfunction findControlBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find control block end\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'control' };\n}\n\nfunction findStatementBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n return { start: startLine, end: startLine, type: 'statement' };\n}\n\nfunction escapeHtml(text: string): string {\n return text\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n\nfunction generateUsagePage(): string {\n return `\n\n\n\n \n \n Source Code Annotator - Usage Instructions\n \n \n\n\n

🔍 Source Code Annotator

Interactive source code viewer with syntax highlighting, hover effects, and explanatory popups

\n\n

✨ Features

🎨 Syntax Highlighting

Automatic syntax highlighting using Prism.js for multiple languages

🖱️ Interactive Hover

Hover over code blocks to highlight logical containing blocks

💡 Click Explanations

Click on highlighted blocks to see detailed explanations

🔧 Extensible

Override default functions with custom implementations

\n\n

🚀 Quick Start

To view annotated source code, use this URL format:

\nhttps://your-val-url.web.val.run/{username}/{valname}@{version}/{filename}\n

\n \n

Try These Examples:

\n 📦 Val Town Blob Storage\n - Simple utility functions\n

\n 🗄️ SQLite Explorer App\n - React TypeScript application\n

\n 🤖 OpenAI Integration\n - AI API wrapper\n

\n\n

🎛️ Custom Functions

Enhance the annotator with custom implementations:

\n \n

Available Examples:

\n 🤖 AI Explainer\n - Uses OpenAI for detailed code explanations\n

\n 🔍 Enhanced Detector\n - Sophisticated block detection with more code constructs\n

\n 🎨 Custom Highlighter\n - Enhanced highlighting with complexity indicators\n

\n\n

Usage with Custom Functions:

\n# With AI explanations\n/std/blob?blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts\n\n# With enhanced detection\n/std/blob?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts\n\n# With custom highlighting\n/std/blob?syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts\n\n# All together\n/std/blob?syntaxHighlighter=...&blockDetector=...&blockExplainer=...\n

\n\n

📚 Documentation

\n 📖 Full Documentation\n

Complete usage guide, API reference, and customization options

\n 🔧 Custom Functions Guide\n

Learn how to create and use custom highlighters, detectors, and explainers

\n\n

🌐 Supported Languages

TypeScript (.ts, .tsx)

JavaScript (.js, .jsx)

Python (.py)

Rust (.rs)

Go (.go)

Java (.java)

C++ (.cpp, .cc, .cxx)

C (.c)

CSS (.css)

HTML (.html)

JSON (.json)

Markdown (.md)

\n\n \n

\n\n\n `;\n}\n\n// Main route handler\napp.get(\"/*\", async (c) => {\n const path = c.req.path;\n \n // If no source is specified, show usage instructions\n if (path === \"/\" || path === \"\") {\n return c.html(generateUsagePage());\n }\n \n // Extract val path from URL\n const pathMatch = path.match(/^\\/(.+)$/);\n if (!pathMatch) {\n return c.text(\"Invalid path format\", 400);\n }\n \n const valPath = pathMatch[1];\n const sourceUrl = `https://esm.town/v/${valPath}`;\n \n try {\n // Fetch the source code\n const response = await fetch(sourceUrl);\n if (!response.ok) {\n return c.text(`Failed to fetch source: ${response.status}`, 404);\n }\n \n const sourceCode = await response.text();\n \n // Determine language from file extension\n const language = getLanguageFromPath(valPath);\n \n // Get custom function URLs from query parameters\n const syntaxHighlighterUrl = c.req.query('syntaxHighlighter');\n const blockDetectorUrl = c.req.query('blockDetector');\n const blockExplainerUrl = c.req.query('blockExplainer');\n \n // Generate the HTML page\n const html = await generateAnnotatedPage(\n sourceCode, \n language, \n valPath,\n syntaxHighlighterUrl,\n blockDetectorUrl,\n blockExplainerUrl\n );\n \n return c.html(html);\n \n } catch (error) {\n return c.text(`Error: ${error.message}`, 500);\n }\n});\n\nfunction getLanguageFromPath(path: string): string {\n const ext = path.split('.').pop()?.toLowerCase();\n switch (ext) {\n case 'ts': case 'tsx': return 'typescript';\n case 'js': case 'jsx': return 'javascript';\n case 'py': return 'python';\n case 'rs': return 'rust';\n case 'go': return 'go';\n case 'java': return 'java';\n case 'cpp': case 'cc': case 'cxx': return 'cpp';\n case 'c': return 'c';\n case 'css': return 'css';\n case 'html': return 'html';\n case 'json': return 'json';\n case 'md': return 'markdown';\n default: return 'javascript';\n }\n}\n\nasync function generateAnnotatedPage(\n sourceCode: string, \n language: string, \n valPath: string,\n syntaxHighlighterUrl?: string,\n blockDetectorUrl?: string,\n blockExplainerUrl?: string\n): Promise {\n \n const syntaxHighlightedCode = await defaultSyntaxHighlighter(sourceCode, language);\n \n return `\n\n\n \n \n Source Annotator - ${valPath}\n \n \n ${generateStyles()}\n\n\n

Source Code Annotator

Viewing: ${valPath}

Hover over code blocks to highlight them, click to see explanations

\n \n

\n ${syntaxHighlightedCode}\n

\n \n \n

\n\n ${generateJavaScript(sourceCode, syntaxHighlighterUrl, blockDetectorUrl, blockExplainerUrl)}\n\n`;\n}\n\nfunction generateStyles(): string {\n return ``;\n}\n\nfunction generateJavaScript(\n sourceCode: string,\n syntaxHighlighterUrl?: string,\n blockDetectorUrl?: string,\n blockExplainerUrl?: string\n): string {\n return ``;\n}\n\nexport default app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/curtcox/valSource/code/index.ts","extension","actionData","errors"]