1/** @jsxImportSource https://esm.sh/react@19 */
2import { useState } from "https://esm.sh/react@19";
3
4export function Example() {
6 <div class="m-5 mb-8">
7 <h1 class="text-4xl font-semibold mb-2">Mini App Starter</h1>
8 <div class="opacity-50">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div>
9 </div>
10 );
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4/**
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4// Convert emoji to codepoint
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4// Check if a color is close to white, black, or gray
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1?deps=react@18.2.0";
4import React, { useState } from "https://esm.sh/react@18.2.0";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0?deps=react@18.2.0";
6import { vscDarkPlus } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism?deps=react@18.2.0";
7
8/*******************************************
24## Introduction
25
26This is an example of a markdown article that will be rendered properly using React Markdown.
27
28### Features
76 * Renders markdown content with custom styling
77 *******************************************/
78const MarkdownArticle: React.FC = () => {
79 return (
80 <div className={styles.containers.article}>
81 <ReactMarkdown
82 components={{
83 // Custom rendering for headings
140 >
141 {markdownContent}
142 </ReactMarkdown>
143 </div>
144 );
158 * Showcases various UI components and styles
159 *******************************************/
160const ThemeDemo: React.FC = () => {
161 // Theme state management
162 const [theme, setTheme] = useState(localStorage.getItem("theme") || "retro");
188
189 // Effect to set the initial theme
190 React.useEffect(() => {
191 document.documentElement.setAttribute("data-theme", theme);
192 }, []);
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";
4import bookmarksData from "./hm_links.json" with { type: "json" };
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { formatAddress, formatJSON, MonoButtonWithStatus, Section } from "./ui.tsx";
5
1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { fetchProjectFiles } from "../utils/api.ts";
3
1import { useChat } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
2import React, { useCallback, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { playBellSound } from "../utils/soundEffects.ts";
4
99 }, [stop, pendingMessageId, soundEnabled]);
100
101 React.useEffect(() => {
102 customStopRef.current = handleStop;
103 }, [handleStop]);
104
105 React.useEffect(() => {
106 (window as any).customStopRef = customStopRef;
107 }, []);
12- [ ] make it one click to branch off like old jp townie demos
13- [ ] Figure out a convention to teach in the anthropic prompt mod where the LLM always checks the readme for the scope (if not provided) and keeps it up to take with every change
14- [ ] Rebuild as React Router?
15- [ ] opentownie as a pr bot
16- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them or use our trpc API in that tool
