21## Technical Details
22
23- Built with React 18.2.0 and TailwindCSS
24- Handles ICS file parsing and display
25- No data persistence (events are stored in memory only)
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// List of web-safe and popular fonts, now including monospace
62 const canvasRef = useRef<HTMLCanvasElement>(null);
63
64 const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
65 const file = e.target.files?.[0];
66 if (file) {
133 };
134
135 const startDrag = (id: string, e: React.MouseEvent<HTMLCanvasElement>) => {
136 setDraggedNode(id);
137 const canvas = canvasRef.current;
158 };
159
160 const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
161 if (!draggedNode) return;
162
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// List of web-safe and popular fonts, now including monospace
62 const canvasRef = useRef<HTMLCanvasElement>(null);
63
64 const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
65 const file = e.target.files?.[0];
66 if (file) {
133 };
134
135 const startDrag = (id: string, e: React.MouseEvent<HTMLCanvasElement>) => {
136 setDraggedNode(id);
137 const canvas = canvasRef.current;
158 };
159
160 const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
161 if (!draggedNode) return;
162
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";
3import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1";
4import React, { ErrorInfo, StrictMode, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
5import remarkGfm from "https://esm.sh/remark-gfm@4.0.0";
6
19
20// New ErrorBoundary component
21class ErrorBoundary extends React.Component<
22 { children: React.ReactNode },
23 { hasError: boolean; error?: Error }
24>
25{
26 constructor(props: { children: React.ReactNode }) {
27 super(props);
28 this.state = { hasError: false };
226 };
227
228 const handleSubmit = async (e: React.FormEvent) => {
229 e.preventDefault();
230 setResponse("");
330 }}
331 >
332 <ReactMarkdown
333 remarkPlugins={[remarkGfm]}
334 components={{
358 >
359 {response}
360 </ReactMarkdown>
361 </div>
362 )}
536 <h2>{selectedSermon.theme}</h2>
537 <small>{new Date(selectedSermon.createdAt).toLocaleString()}</small>
538 <ReactMarkdown
539 remarkPlugins={[remarkGfm]}
540 components={{
564 >
565 {selectedSermon.content}
566 </ReactMarkdown>
567 </div>
568 );
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function linearRegression(x: number[], y: number[]) {
6
7Versions 0-17 of this val were done with Hono and server-rendering.
8Versions 18+ were generated with Townie and use client-side React.
9
10To use this val, fork it to your account.
