Val Shot

Generate val source code screenshot using sourcecodeshots.com

⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs

📣 Special thanks to @pomdtr for their help and contributions!

Usage

https://vladimyr-valshot.web.val.run/v/<author>/<val>

Example

Readme
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
// SPDX-License-Identifier: 0BSD
import { fetchVal } from "https://esm.town/v/vladimyr/fetchVal";
import { serveReadme } from "https://esm.town/v/vladimyr/serveReadme";
import { toHonoHandler } from "https://esm.town/v/vladimyr/toHonoHandler";
import { Hono } from "npm:hono";
import ky from "npm:ky";
const router = new Hono();
router.get("/", toHonoHandler(serveReadme(import.meta.url)));
router.get("/v/:author/:name", async (c) => {
const { author, name } = c.req.param();
const query = c.req.query();
const { code } = await fetchVal(author, name);
const imageURL = await createScreenshot(code, query.theme);
return c.redirect(imageURL.href);
});
export default router.fetch;
export async function createScreenshot(code: string, theme: string = "dark-plus"): Promise<URL> {
const apiUrl = "https://sourcecodeshots.com/api/image/permalink";
const { url } = await ky.post(apiUrl, {
json: {
code,
settings: { language: "tsx", theme },
},
}).json();
return new URL(url);
}
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.
Comments
pomdtr avatar

Wdyt of using the pathname instead of query params for passing the val ?

https://val.town/v/vladimyr/valshot => https://vladimyr-valshot.web.val.run/v/vladimyr/valshot

vladimyr avatar

Sure, why not? Usually, I do it that way but because there are other query params (theme) I opted for param 🤷

pomdtr avatar

I like to use the path for required parameters, and query for optional ones.

https://vladimyr-valshot.web.val.run/v/vladimyr/valshot?theme=github-light looks good to me.

pomdtr avatar

I'll create a pr :)

vladimyr avatar

@pomdtr Thanks for PR, merged! Is your pomdtr/readme val private cause it is failing?

pomdtr avatar

it is, this is now fixed :)

vladimyr avatar

Great, removed my temporary shim :)