Val Town Code SearchReturn to Val Town

73  const menuRef = useRef(null);
74  const isPublic = blob.key.startsWith("__public/");
75  const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
76
77  useEffect(() => {
237    setLoading(true);
238    try {
239      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
240      const data = await response.json();
241      setBlobs(data);
264      setBlobContentLoading(true);
265      try {
266        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
267        const content = await response.text();
268        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
278  const handleSave = async () => {
279    try {
280      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
281        method: "PUT",
282        body: editContent,
290  const handleDelete = async (key) => {
291    try {
292      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
293      setBlobs(blobs.filter(b => b.key !== key));
294      if (selectedBlob && selectedBlob.key === key) {
307        const key = `${searchPrefix}${file.name}`;
308        formData.append("key", encodeKey(key));
309        await fetch("/api/blob", { method: "POST", body: formData });
310        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
311        setBlobs([newBlob, ...blobs]);
329      try {
330        const fullKey = `${searchPrefix}${key}`;
331        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
332          method: "PUT",
333          body: "",
344  const handleDownload = async (key) => {
345    try {
346      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
347      const blob = await response.blob();
348      const url = window.URL.createObjectURL(blob);
363    if (newKey && newKey !== oldKey) {
364      try {
365        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
366        const content = await response.blob();
367        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
368          method: "PUT",
369          body: content,
370        });
371        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
372        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
373        if (selectedBlob && selectedBlob.key === oldKey) {
383    const newKey = `__public/${key}`;
384    try {
385      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
386      const content = await response.blob();
387      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
388        method: "PUT",
389        body: content,
390      });
391      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
392      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
393      if (selectedBlob && selectedBlob.key === key) {
402    const newKey = key.slice(9); // Remove "__public/" prefix
403    try {
404      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
405      const content = await response.blob();
406      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
407        method: "PUT",
408        body: content,
409      });
410      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
411      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
412      if (selectedBlob && selectedBlob.key === key) {
557                        onClick={() =>
558                          copyToClipboard(
559                            `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
560                          )}
561                        className="text-blue-400 hover:text-blue-300 text-sm"
580                        >
581                          <img
582                            src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
583                            alt="Blob content"
584                            className="max-w-full h-auto"
660
661// Public route without authentication
662app.get("/api/public/:id", async (c) => {
663  const key = `__public/${c.req.param("id")}`;
664  const { blob } = await import("https://esm.town/v/std/blob");
778};
779
780app.get("/api/blobs", checkAuth, async (c) => {
781  const prefix = c.req.query("prefix") || "";
782  const limit = parseInt(c.req.query("limit") || "20", 10);
787});
788
789app.get("/api/blob", checkAuth, async (c) => {
790  const key = c.req.query("key");
791  if (!key) return c.text("Missing key parameter", 400);
795});
796
797app.put("/api/blob", checkAuth, async (c) => {
798  const key = c.req.query("key");
799  if (!key) return c.text("Missing key parameter", 400);
804});
805
806app.delete("/api/blob", checkAuth, async (c) => {
807  const key = c.req.query("key");
808  if (!key) return c.text("Missing key parameter", 400);
812});
813
814app.post("/api/blob", checkAuth, async (c) => {
815  const { file, key } = await c.req.parseBody();
816  if (!file || !key) return c.text("Missing file or key", 400);

13
14  async function fetchProfiles() {
15    const response = await fetch('/api/profiles');
16    const data = await response.json();
17    setProfiles(data);
19
20  async function createProfile(profile) {
21    const response = await fetch('/api/profiles', {
22      method: 'POST',
23      headers: { 'Content-Type': 'application/json' },
160  `);
161
162  if (request.method === 'POST' && new URL(request.url).pathname === '/api/profiles') {
163    const profile = await request.json();
164    await sqlite.execute(
172  }
173
174  if (request.method === 'GET' && new URL(request.url).pathname === '/api/profiles') {
175    const profiles = await sqlite.execute(
176      `SELECT * FROM ${KEY}_profiles_${SCHEMA_VERSION} LIMIT 10`

11  },
12  {
13    "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14    "title": "Weather App",
15    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>NYC Weather</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n    <style>\n        .weather-icon {\n            font-size: 48px;\n            margin-bottom: 16px;\n        }\n    </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n    <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n        <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n        <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n            <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n            <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n            <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n            <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n            <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n        </div>\n    </div>\n    <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n        Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n    </p>\n\n    <script>\n        // Sample weather data\n        const weatherData = {\n            temperature: 75,\n            condition: 'Sunny',\n            humidity: 60,\n            wind: 10,\n            icon: 'sun'\n        };\n\n        document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n        document.getElementById('condition').innerText = weatherData.condition;\n        document.getElementById('humidity-value').innerText = weatherData.humidity;\n        document.getElementById('wind-value').innerText = weatherData.wind;\n\n        // Map weather icon\n        const weatherIcons = {\n            'sun': '&#9728;',\n            'cloud': '&#9728;',\n            'rain': '&#9731;',\n            'snow': '&#9732;'\n        };\n\n        document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n    </script>\n</body>\n</html>",

8
91. Sign up for [Cerebras](https://cloud.cerebras.ai/)
102. Get a Cerebras API Key
113. Save it in your project env variable called `CEREBRAS_API_KEY`

5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6      <title>CerebrasCoder</title>
7      <link rel="preconnect" href="https://fonts.googleapis.com" />
8      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9      <link
10        href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
11        rel="stylesheet"
12      />
21      <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."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

211    } catch (error) {
212      Toastify({
213        text: "We may have hit our Cerebras Usage limits. Try again later or fork this and use your own API key.",
214        position: "center",
215        duration: 3000,

16    };
17  } else {
18    const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY") });
19    const completion = await client.chat.completions.create({
20      messages: [

7 * Optimisitically types the values we expect in our environment and context:
8 *
9 * - `Bindings` determines env vars, accessed via `c.env.NAME_OF_VAR` in api handlers
10 * - `Variables` determines context vars, accessed via `c.get("NAME_OF_VAR")` in api handlers
11 */
12export type AppType = {

1import { createFiberplane, createOpenAPISpec } from "https://esm.sh/@fiberplane/hono@0.4.4";
2
3export { createFiberplane, createOpenAPISpec };

11 * Optimisitically types the values we expect in our environment and context:
12 *
13 * - `Bindings` determines env vars, accessed via `c.env.NAME_OF_VAR` in api handlers
14 * - `Variables` determines context vars, accessed via `c.get("NAME_OF_VAR")` in api handlers
15 */
16export type AppType = {