Avatar

@maxm

7 likes5 public vals
Joined January 12, 2023

Render a PNG

This tiny smiley face is rendered by this val:

The image response is cached by the CDN, so make sure to change the image name if you make code changes. Any name with a .png extension will work: https://maxm-smileypng.web.val.run/-.png

Readme
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const smileyPNG = async (request: Request) => {
const { encode } = await import("https://deno.land/x/pngs/mod.ts");
// Dimensions of the image
const [width, height] = [10, 10];
// Create our PNG canvas
const imageData = new Uint8Array(width * height * 4);
const y = [255, 255, 0, 255]; // Yellow
const b = [0, 0, 0, 255]; // Black
const t = [0, 0, 0, 0]; // Transparent
// dprint-ignore
const smileyFace = [
t, t, y, y, y, y, y, y, t, t,
t, y, y, y, y, y, y, y, y, t,
y, y, y, y, y, y, y, y, y, y,
y, y, b, y, y, y, y, b, y, y,
y, y, y, y, y, y, y, y, y, y,
y, y, y, y, y, y, y, y, y, y,
y, y, b, y, y, y, y, b, y, y,
y, y, y, b, b, b, b, y, y, y,
t, y, y, y, y, y, y, y, y, t,
t, t, y, y, y, y, y, y, t, t,
];
// Move around the bytes and encode the image
const smileyFaceData = [].concat(...smileyFace);
for (let i = 0; i < width * height * 4; i++) {
imageData[i] = smileyFaceData[i];
}
const png = encode(imageData, 10, 10);
return new Response(png, { headers: { "Content-Type": "image/png" } });
};

Self Editing Website

Visit and edit at: https://maxm-selfeditingwebsite.web.val.run/

Readme
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { set } from "https://esm.town/v/std/set?v=11";
let { selfEditingWebsiteBody } = await import("https://esm.town/v/maxm/selfEditingWebsiteBody");
export const selfEditingWebsite = async (request: Request) => {
if (request == null) {
return "not invoked correctly";
}
// Otherwise, someone has submitted a form so let's handle that
if (selfEditingWebsiteBody === undefined) {
let defaultBody = `<h1>Edit Me!</h1>`;
selfEditingWebsiteBody = defaultBody;
}
if (request.method == "POST") {
let formData = await request.formData();
if (formData.get("source") !== undefined) {
selfEditingWebsiteBody = formData.get("source").toString();
await set("selfEditingWebsiteBody", selfEditingWebsiteBody);
}
}
let body = selfEditingWebsiteBody;
const form = `
<div style="border: 1px solid #999;">
<form action="" method="POST">
<label for="source">Edit the source of this web page:</label>
<textarea id="source" name="source" required>${body}</textarea>
<br>
<input type="submit" value="Submit">
</form>
</div>`;
return new Response(
`<!DOCTYPE html>
<html>
<head>
<title>I am a self-editing website!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js" integrity="sha512-2359y3bpxFfJ9xZw1r2IHM0WlZjZLI8gjLuhTGOVtRPzro3dOFy4AyEEl9ECwVbQ/riLXMeCNy0h6HMt2WUtYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></s
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy=
</head>
<body>
${body}
${form}
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('source'), {
mode: "html",
lineNumbers: true,
});
editor.save();
</script>
</body>
</html>`,
{ headers: { "Content-Type": "text/html" } },

Retro Visit Counter

You are visitor number:

How special!

Want a retro visitor counter for your myspace page or geocities website? Fork this val and add the image link to your website:

<img src="https://maxm-retrovisitcounter.web.val.run/counter.png">
<!-- Make sure you swap this subdomain out with the subdomain of your forked val --> 
<img src="https://[CHANGE ME!].web.val.run/counter.png">
Readme
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { sqlite } from "https://esm.town/v/std/sqlite";
await sqlite.execute(`create table if not exists counter(
name text,
counter integer
)`);
async function getCurrentCount(): Promise<number> {
let counter = await sqlite.execute(`select counter from counter where name = 'retro'`);
if (counter.rows.length === 0) {
await sqlite.execute(`insert into counter (name, counter) values ('retro', 1)`);
}
let [currentCount] = (counter.rows[0] as unknown) as number[];
await sqlite.execute(`update counter set counter = counter + 1 where name = 'retro'`);
return currentCount;
}
export const retroVisitCounter = async (request: Request) => {
const count = await getCurrentCount();
const { encode } = await import("https://deno.land/x/pngs/mod.ts");
if (request.url.endsWith("favicon.ico"))
return new Response("not found", { status: 404 });
// Set up all of our configured constants.
const numberPixelHeight = 7;
const numberPixelWidth = 5;
const pixelMultiplier = 3;
const numberPlaces = 6;
const padding = 1;
const B = [0, 0, 0, 255]; // Black
const _ = [153, 153, 153, 255]; // Transparent
// dprint-ignore
const numbers = [
[
_, B, B, B, _,
B, _, _, _, B,
B, _, _, B, B,
B, _, B, _, B,
B, B, _, _, B,
B, _, _, _, B,
_, B, B, B, _,
],
[
_, _, B, _, _,
_, B, B, _, _,
_, _, B, _, _,
_, _, B, _, _,
_, _, B, _, _,
_, _, B, _, _,
B, B, B, B, B,
],
[

Self Editing Website - GPT Version

Visit and ask ChatGPT to edit the site at: https://maxm-selfeditingwebsitegpt.web.val.run/

Readme
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { gpt4 } from "https://esm.town/v/maxm/gpt4";
import { set } from "https://esm.town/v/std/set?v=11";
let { selfEditingWebsiteBodyGPT } = await import("https://esm.town/v/maxm/selfEditingWebsiteBodyGPT");
export const selfEditingWebsiteGPT = async (request: Request) => {
if (request == null) {
return "not invoked correctly";
}
// Otherwise, someone has submitted a form so let's handle that
if (selfEditingWebsiteBodyGPT === undefined) {
let defaultBody = `<h1>Edit Me!</h1>`;
selfEditingWebsiteBodyGPT = defaultBody;
await set("selfEditingWebsiteBodyGPT", selfEditingWebsiteBodyGPT)
}
if (request.method == "POST") {
let formData = await request.formData();
if (formData.get("edit") !== undefined) {
const editRequest = formData.get("edit").toString()
let resp = await gpt4(`The current HTML page source is`+"````"+`
${selfEditingWebsiteBodyGPT}
`+"````"+`
Replying to this prompt only with html, change the HTML page source to meet the following request: "${editRequest}"`)
// @me.selfEditingWebsiteBodyGPT = resp.choices[0].text;
selfEditingWebsiteBodyGPT = resp;
await set("selfEditingWebsiteBodyGPT", selfEditingWebsiteBodyGPT)
}
}
let body = selfEditingWebsiteBodyGPT;
const form = `
<div style="border: 1px solid #999;">
<form action="" method="POST">
<label for="edit">Describe how you want the new page to look and ChatGPT will make the change for you.</label>
<input type=text id="edit" name="edit" required />
<br>
<input type="submit" value="Submit" />
</form>
</div>`;
return new Response(
`<!DOCTYPE html>
<html>
<head>
<title>I am a self-editing website!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js" integrity="sha512-2359y3bpxFfJ9xZw1r2IHM0WlZjZLI8gjLuhTGOVtRPzro3dOFy4AyEEl9ECwVbQ/riLXMeCNy0h6HMt2WUtYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></s
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy=
</head>
<body>
${body}
${form}
1
2
3
export function quine() {
return `${quine}`;
}
Next