Avatar

vez

elliot.website
17 public vals
Joined November 10, 2022
1
2
3
import { val } from "https://esm.town/v/todepond/val";
console.log(await val("vez.example", 3, 2));
1
2
export const sub = (a, b) => a - b;
export const add = (a, b) => a + b;

Blob Admin

This is a lightweight Blob Admin interface to view and debug your Blob data.

Screenshot 2023-12-13 at 12.51.53.png

To use it on your own Val Town Blob Storage, fork it to your account.

It uses basic authentication with your Val Town API Token as the password (leave the username field blank).

TODO

  • /new - render a page to write a new blob key and value
    • or new blob by file upload
  • /edit/:blob - render a page to edit a blob (prefilled with the existing content)
    • json validation when the existing content is json
      • checkbox to disable that
  • /delete/:blob - delete a blob and render success
1
2
3
4
5
6
7
8
9
10
11
12
13
import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth?v=38";
import { blob_admin_blob } from "https://esm.town/v/stevekrouse/blob_admin_blob";
import { blob_admin_home } from "https://esm.town/v/stevekrouse/blob_admin_home";
import { html } from "https://esm.town/v/stevekrouse/html";
import { Hono } from "npm:hono@3.9.2";
const app = new Hono();
app.get("/", async (c) => c.html(await blob_admin_home()));
app.get("/:blob", async (c) => c.html(await blob_admin_blob(c.req.param("blob"))));
app.get("/new", (c) => c.html("TODO: New Blob"));
app.get("/edit/:blob", async (c) => c.html(`TODO: Edit ${c.req.param("blob")}`));
app.get("/delete/:blob", async (c) => c.html(`TODO: Delete ${c.req.param("blob")}`));
export default basicAuth(app.fetch);

Comments (just add water)

A self-contained comments system Val. Just fork this val and you have a complete (but extremely minimal) comment system!

Call on the front-end using:

const MY_FORKED_VAL_URL = "https://vez-comments.web.val.run";

const getComments = async () => {
  const response = await fetch(MY_FORKED_VAL_URL);
  const json = await response.json();
  return json;
};

const addComment = async (str) => {
  try {
    const response = await fetch(MY_FORKED_VAL_URL, {
      method: "POST",
      body: JSON.stringify(str),
    });

    if (response.status >= 400 && response.status < 600) {
      /* error */
      return false;
    } else {
      /* success */
      return true;
    }
  } catch (e) {
    /* error */
    return false;
  }
};

Here's an example of a blog post where I used the val for the comment system: https://vezwork.github.io/polylab/dist/demo/bidirectionalParse/. Check out "view source"!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { blob } from "https://esm.town/v/std/blob?v=10";
import { email } from "https://esm.town/v/std/email?v=9";
import { Hono } from "npm:hono@3.9.2";
const KEY = import.meta.url.split("?")[0];
export async function addComment(str) {
const comments = await blob.getJSON(KEY) as Array<string> ?? [];
comments.push(str);
await blob.setJSON(KEY, comments);
await email({ text: "New Comment Alert!: " + str });
}
export async function getComments() {
return await blob.getJSON(KEY) as Array<string> ?? [];
}
const app = new Hono();
app.get("/", async (c) => c.json(await getComments()));
app.post("/", async (c) => {
const str = await c.req.json();
await addComment(str);
return c.text("Added comment!", 200);
});
export default app.fetch;
1
2
3
4
5
import { commentsDB2 } from "https://esm.town/v/vez/commentsDB2";
export function getComments2() {
return commentsDB2;
}
1
2
3
4
5
6
7
8
9
import { email } from "https://esm.town/v/std/email?v=9";
import { set } from "https://esm.town/v/std/set?v=11";
import { commentsDB2 } from "https://esm.town/v/vez/commentsDB2";
export async function addComment2(str) {
commentsDB2.push(str);
await set("commentsDB2", commentsDB2);
await email({ text: "New Comment Alert!: " + str });
}
1
2
3
4
5
import { email } from "https://esm.town/v/std/email?v=9";
export function reportComments() {
email({ text: "elliot.website reported comment alert!" });
}
1
2
3
4
5
import { commentsDB } from "https://esm.town/v/vez/commentsDB";
export function getComments() {
return commentsDB;
}
1
2
3
4
5
6
7
8
9
import { email } from "https://esm.town/v/std/email?v=9";
import { set } from "https://esm.town/v/std/set?v=11";
import { commentsDB } from "https://esm.town/v/vez/commentsDB";
export async function addComment(str) {
commentsDB.push(str);
await set("commentsDB", commentsDB);
await email({ text: "New Comment Alert!: " + str });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { figmaFramesFromURL } from "https://esm.town/v/vez/figmaFramesFromURL";
import { FigmaFrameObjectToHTML } from "https://esm.town/v/rodrigotello/FigmaFrameObjectToHTML?v=6";
export async function FigmaFrameToHTML(
req: express.Request,
res: express.Response,
) {
return res.send(
FigmaFrameObjectToHTML(
(await figmaFramesFromURL(
"https://www.figma.com/file/kljuHD3J7yYMJxXUX9zY4S/valtowntest",
))[0],
),
);
}
// Forked from @rodrigotello.FigmaFrameToHTML