4import { createRoot } from "https://esm.sh/react-dom/client";
5
6function ProgressBar({ progress }) {
7 return (
8 <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-4">
16}
17
18function SiteDetails({ siteInfo }) {
19 if (!siteInfo) return null;
20
38}
39
40function App() {
41 const [siteUrl, setSiteUrl] = useState("");
42 const [siteInfo, setSiteInfo] = useState(null);
178}
179
180function client() {
181 console.log("Client function called");
182 const root = document.getElementById("root");
183 if (root) {
207}
208
209export default async function server(request: Request): Promise<Response> {
210 console.log("Server function called", request.method, request.url);
211 const { pathname, searchParams } = new URL(request.url);
212
243 <script>
244 console.log("Inline script executed");
245 window.addEventListener('load', function() {
246 console.log("Window load event fired");
247 setTimeout(function() {
248 var loadingMessage = document.getElementById('loading-message');
249 if (loadingMessage) {
8const EPG_CACHE = new Map();
9
10async function timeoutFetch(request, timeout = Config.FETCH_TIMEOUT) {
11 const controller = new AbortController();
12 const timeoutId = setTimeout(() => controller.abort(), timeout);
28}
29
30function makeRes(body, status = 200, headers = { 'access-control-allow-origin': '*' }) {
31 return new Response(body, {
32 status,
38}
39
40function formatDateTime(time = '') {
41 const now = new Date();
42 const year = now.getFullYear();
54}
55
56async function diypHandle(channel, date, request) {
57 const cacheKey = `${channel}_${date}`;
58 const cachedData = EPG_CACHE.get(cacheKey);
106}
107
108export default async function server(request: Request) {
109 const url = new URL(request.url);
110
23);
24
25function Hero({
26 prompt,
27 setPrompt,
44
45 <p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
46 Turn your ideas into fully functional apps in{" "}
47 <span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
48 less than a second
115}
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
169 });
170
171 function handleStarterPromptClick(promptItem: typeof prompts[number]) {
172 setLoading(true);
173 setTimeout(() => handleSubmit(promptItem.prompt), 0);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
225 }
226
227 function handleVersionChange(direction: "back" | "forward") {
228 const { currentVersionIndex, versions } = versionHistory;
229 if (direction === "back" && currentVersionIndex > 0) {
928);
929
930function client() {
931 const path = window.location.pathname;
932 const root = createRoot(document.getElementById("root")!);
964}
965
966function extractCodeFromFence(text: string): string {
967 const htmlMatch = text.match(/```html\n([\s\S]*?)\n```/);
968 return htmlMatch ? htmlMatch[1].trim() : text;
969}
970
971async function generateCode(prompt: string, currentCode: string) {
972 const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt);
973 if (starterPrompt) {
1004}
1005
1006export default async function gemini_coder(req: Request): Promise<Response> {
1007 // Dynamic import for SQLite to avoid client-side import
1008 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
15}
16
17function App() {
18 const [posts, setPosts] = useState<BlogPost[]>([]);
19 const [selectedPost, setSelectedPost] = useState<BlogPost | null>(null);
107}
108
109function Sidebar({ posts, onSelectPost, onNewPost }: {
110 posts: BlogPost[];
111 onSelectPost: (post: BlogPost) => void;
156}
157
158function HomePage({ posts }: { posts: BlogPost[] }) {
159 return (
160 <div>
173}
174
175function BlogPost({ post, onEdit }: { post: BlogPost; onEdit: () => void }) {
176 useEffect(() => {
177 Prism.highlightAll();
213}
214
215function PostForm({ post, onSubmit, onClose }: {
216 post?: BlogPost;
217 onSubmit: (post: Omit<BlogPost, "id" | "date">) => void;
267}
268
269function client() {
270 createRoot(document.getElementById("root")).render(<App />);
271}
275}
276
277export default async function server(request: Request): Promise<Response> {
278 const { blob } = await import("https://esm.town/v/std/blob");
279 const url = new URL(request.url);
364 <script type="module" src="${import.meta.url}"></script>
365 <script>
366 function copyToClipboard(text) {
367 navigator.clipboard.writeText(text).then(() => {
368 alert("Copied to clipboard!");
10};
11
12function PortfolioApp() {
13 const [activeSection, setActiveSection] = useState("about");
14 const [menuOpen, setMenuOpen] = useState(false);
20 <p>
21 A passionate developer creating beautiful digital experiences.
22 I love turning ideas into elegant, functional solutions.
23 </p>
24 <div className="skills-preview">
100}
101
102function client() {
103 createRoot(document.getElementById("root")).render(<PortfolioApp />);
104}
105if (typeof document !== "undefined") { client(); }
106
107export default async function server(request: Request): Promise<Response> {
108 return new Response(`
109 <html>
10};
11
12function PortfolioApp() {
13 const [activeSection, setActiveSection] = useState("about");
14 const [menuOpen, setMenuOpen] = useState(false);
20 <p>
21 A passionate developer creating beautiful digital experiences.
22 I love turning ideas into elegant, functional solutions.
23 </p>
24 <div className="skills-preview">
100}
101
102function client() {
103 createRoot(document.getElementById("root")).render(<PortfolioApp />);
104}
105if (typeof document !== "undefined") { client(); }
106
107export default async function server(request: Request): Promise<Response> {
108 return new Response(`
109 <html>
13}
14
15function Tooltip({ children, content }: TooltipProps) {
16 const [isVisible, setIsVisible] = useState(false);
17 const tooltipRef = useRef<HTMLDivElement>(null);
52}
53
54function formatBytes(bytes: number, decimals = 2) {
55 if (bytes === 0) return "0 Bytes";
56 const k = 1024;
61}
62
63function copyToClipboard(text: string) {
64 navigator.clipboard.writeText(text).then(() => {
65 console.log("Text copied to clipboard");
69}
70
71function ActionMenu({ blob, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {
72 const [isOpen, setIsOpen] = useState(false);
73 const menuRef = useRef(null);
76
77 useEffect(() => {
78 function handleClickOutside(event) {
79 if (menuRef.current && !menuRef.current.contains(event.target)) {
80 event.stopPropagation();
158}
159
160function BlobItem({ blob, onSelect, isSelected, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {
161 const [isLoading, setIsLoading] = useState(false);
162 const decodedKey = decodeURIComponent(blob.key);
219}
220
221function App({ initialEmail, initialProfile }) {
222 const encodeKey = (key: string) => encodeURIComponent(key);
223 const decodeKey = (key: string) => decodeURIComponent(key);
645}
646
647function client() {
648 const initialEmail = document.getElementById("root").getAttribute("data-email");
649 const initialProfile = JSON.parse(document.getElementById("root").getAttribute("data-profile"));
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
35- [x] add export to CSV, and JSON (CSV and JSON helper functions written in [this val](https://www.val.town/v/nbbaier/sqliteExportHelpers). Thanks to @pomdtr for merging the initial version!)
36- [x] add listener for cmd+enter to submit query
2
3// Shared HTML components
4function getPageHeader(pageTitle: string) {
5 return `
6 <!DOCTYPE html>
54}
55
56function getPageFooter() {
57 return `
58 <footer id="page-footer">
65
66// Page handlers
67async function handleHomePage() {
68 const { blob } = await import("https://esm.town/v/std/blob");
69 const userMessages = await blob.getJSON(MESSAGE_STORAGE_KEY) || [];
101}
102
103function handleAboutPage() {
104 return new Response(
105 `
117}
118
119function handleContactPage() {
120 return new Response(
121 `
137}
138
139function handleLocationPage() {
140 return new Response(
141 `
153}
154
155function handleHelpPage() {
156 return new Response(
157 `
162 <li id="faq-item-1">
163 <h3 id="faq-question-1">What is Val Town?</h3>
164 <p id="faq-answer-1">Val Town is a platform for creating and sharing JavaScript functions and applications.</p>
165 </li>
166 <li id="faq-item-2">
182}
183
184async function handleMessageSubmission(request: Request) {
185 const { blob } = await import("https://esm.town/v/std/blob");
186 const formData = await request.formData();
197}
198
199function handleTimeApi() {
200 return new Response(JSON.stringify({ currentTime: new Date().toISOString() }), {
201 headers: { "Content-Type": "application/json" },
203}
204
205async function handleMessagesApi() {
206 const { blob } = await import("https://esm.town/v/std/blob");
207 const userMessages = await blob.getJSON(MESSAGE_STORAGE_KEY) || [];
211}
212
213function handleNotFoundPage() {
214 return new Response(
215 `
228}
229
230export default async function handleRequest(request: Request): Promise<Response> {
231 const url = new URL(request.url);
232 const path = url.pathname;
24);
25
26function Hero({
27 prompt,
28 setPrompt,
45
46 <p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
47 Turn your ideas into fully functional apps in{" "}
48 <span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
49 less than a second
116}
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
170 });
171
172 function handleStarterPromptClick(promptItem: typeof prompts[number]) {
173 setLoading(true);
174 setTimeout(() => handleSubmit(promptItem.prompt), 0);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
226 }
227
228 function handleVersionChange(direction: "back" | "forward") {
229 const { currentVersionIndex, versions } = versionHistory;
230 if (direction === "back" && currentVersionIndex > 0) {
974);
975
976function client() {
977 const path = window.location.pathname;
978 const root = createRoot(document.getElementById("root")!);
1010}
1011
1012function extractCodeFromFence(text: string): string {
1013 const htmlMatch = text.match(/```html\n([\s\S]*?)\n```/);
1014 return htmlMatch ? htmlMatch[1].trim() : text;
1015}
1016
1017async function generateCode(prompt: string, currentCode: string) {
1018 const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt);
1019 if (starterPrompt) {
1060}
1061
1062export default async function cerebras_coder(req: Request): Promise<Response> {
1063 // Dynamic import for SQLite to avoid client-side import
1064 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
1163 <meta property="og:site_name" content="Cerebras Coder">
1164 <meta property="og:url" content="https://cerebrascoder.com"/>
1165 <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166 <meta property="og:type" content="website">
1167 <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
