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");
766};
767
768app.get("/api/blobs", checkAuth, async (c) => {
769  const prefix = c.req.query("prefix") || "";
770  const limit = parseInt(c.req.query("limit") || "20", 10);
775});
776
777app.get("/api/blob", checkAuth, async (c) => {
778  const key = c.req.query("key");
779  if (!key) return c.text("Missing key parameter", 400);
783});
784
785app.put("/api/blob", checkAuth, async (c) => {
786  const key = c.req.query("key");
787  if (!key) return c.text("Missing key parameter", 400);
792});
793
794app.delete("/api/blob", checkAuth, async (c) => {
795  const key = c.req.query("key");
796  if (!key) return c.text("Missing key parameter", 400);
800});
801
802app.post("/api/blob", checkAuth, async (c) => {
803  const { file, key } = await c.req.parseBody();
804  if (!file || !key) return c.text("Missing file or key", 400);

1import { api } from "https://esm.town/v/pomdtr/api";
2import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
3import { Marp } from "npm:@marp-team/marp-core";
5export default async function() {
6  const { author, name } = extractValInfo(import.meta.url);
7  const { readme } = await api(`/v1/alias/${author}/${name}`);
8
9  const marp = new Marp();

22      <meta name="viewport" content="width=device-width, initial-scale=1.0">
23      <title>DevStats Dashboard</title>
24      <link rel="preconnect" href="https://fonts.googleapis.com">
25      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
26      <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
27      <script src="https://cdn.tailwindcss.com"></script>
28      <script src="https://esm.town/v/std/catch"></script>
126type Rows = Awaited<ReturnType<typeof getRows>>
127
128app.get("/api", async function apiRoute(c) {
129  try {
130    return c.json(await getRows())

4
51. Sign up for [Cerebras](https://cloud.cerebras.ai/)
62. Get a Cerebras API Key
73. Save it in a [Val Town environment variable](https://www.val.town/settings/environment-variables) called `CEREBRAS_API_KEY`
8
9# Todos

9const STARTER_PROMPTS = [
10  "todo list app persisted in local storage",
11  "weather app using open-meteo API",
12  "interactive markdown editor with live preview",
13  "pomodoro timer with sound notifications",

1# Framer Fetch: Basic
2
3A basic example of an API endpoint to use with Framer Fetch. CORS headers are permissive by default on Val Town, so no need to set them.

2import { Parser } from "npm:xml2js";
3
4const apiBase = "https://data.rijksmuseum.nl/";
5const resolverBase = "https://id.rijksmuseum.nl/";
6
18    manifest.setMetadata(metadata);
19    manifest.setSeeAlso([{
20      id: apiBase + id + "?_profile=la-framed",
21      type: "Dataset",
22      label: { "en": ["Linked Art Framed"] },
51
52function getImageInformation(record: any) {
53  const imageApiEndpoint = record?.["rdf:RDF"]?.["svcs:Service"]?.[0]?.$?.["rdf:about"];
54  if (imageApiEndpoint) {
55    return fetch(imageApiEndpoint)
56      .then(resp => resp.json())
57      .catch((err) => console.log(`Error fetching Image Information from ${imageApiEndpoint}`, err));
58  } else return null;
59}
147    ["Accept", "application/rdf+xml"],
148  ]);
149  const url = new URL(apiBase + id);
150  const parser = new Parser();
151  return fetch(url, { headers })

8import { Wide } from 'https://esm.town/v/maxm/wide';
9
10// Use your Val Town API Token to create a session
11const wide = new Wide(await ValSession.new(Deno.env.get("valtown")))
12

1import { ValSession } from "https://esm.town/v/maxm/valSession";
2// import type { TSearchFilter, WideApi } from "https://esm.town/v/maxm/wideApi";
3type WideApi = any;
4type TSearchFilter = any;
5import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
7
8const { htmlUrl } = extractValInfo(import.meta.url);
9const _client = hc<WideApi>("https://maxm-wideapi.web.val.run/");
10
11export class Wide {
14  constructor(sessionToken: string) {
15    // TODO: can we use a global client?
16    this.#client = hc<WideApi>("https://maxm-wideapi.web.val.run/");
17    this.#sessionToken = sessionToken;
18  }
75
76export default async function(req: Request): Promise<Response> {
77  // Use your Val Town API Token to create a session
78  const wide = new Wide(await ValSession.new(Deno.env.get("valtown")));
79  await wide.write([{
98    <script>hljs.highlightAll();</script>
99    <style>
100        @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@900&family=Roboto+Mono:wght@400;700&display=swap');
101        
102        * {
196import { Wide } from 'https://esm.town/v/maxm/wide';
197
198// Use your Val Town API Token to create a session
199const wide = new Wide(await ValSession.new(Deno.env.get("valtown")))
200

4
51. Sign up for [Cerebras](https://cloud.cerebras.ai/)
62. Get a Cerebras API Key
73. Save it in a [Val Town environment variable](https://www.val.town/settings/environment-variables) called `CEREBRAS_API_KEY`
8
9# Todos