Back to packages list
Vals using hashids
Description from the NPM package:
Generate YouTube-like ids from numbers. Use Hashids when you do not want to expose your database ids to the user.
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { set } from "https://esm.town/v/std/set?v=11";
import { short_storage } from "https://esm.town/v/kiven/short_storage";
export let short = async (req, res) => {
const param = req.path.substring(1);
const { default: Hashids } = await import("npm:hashids");
const H = new Hashids(short_storage.salt);
if (!param) {
const { default: htm } = await import("npm:htm");
const { default: vhtml } = await import("npm:vhtml");
const html = htm.bind(vhtml);
if (req.method === "GET") {
return res.send(html`<html><head><title>URL Shortener</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://the.missing.style" />
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
</head>
<body>
<main>
<h1>Url shortener</h1>
<form class='f-row' hx-target="#result" hx-post="/">
<input style="width:100%" type="url" required name="url" />
<button type='submit'>Shorter</button>
</form>
<div id='result'></div>
</main>
<footer>
<a >Powered by Val Town</a>
<p>Okay, so let's be honest, this might actually give you a longer URL
because it's at a pretty long subdomain. But go with me here, isn’t it
cool to have such a tiny URL shortener?</p>
</footer>
</body>
</html>`);
}
else if (req.method === "POST") {
let idx;
if (short_storage.urls.includes(req.body.url)) {
idx = short_storage.urls.indexOf(req.body.url);
}
else {
idx = short_storage.urls.push(req.body.url) - 1;
await set("short_storage", short_storage);
}
const id = H.encode(idx);
return res.send(html`<div class='box ok'>
Created! <a href='https://kiven-short.express.val.run/${id}'>
https://kiven-short.express.val.run/${id}
</a><br /><button type="button"
value='https://kiven-short.express.val.run/${id}'
onclick="navigator.clipboard.writeText(this.value)
.then(() => { this.innerText = 'Copied!'; })
.catch(() => me.parentElement.remove(me));"
>Copy link</button>
</div>`);
}
}
const url = short_storage.urls[H.decode(param)];
if (!url) {
return res.end("URL not found", 404);
}
return res.redirect(url);
};
// Forked from @tmcw.short
Short URLs
A URL shortener in Val Town! This turns URLs into strings like
https://tmcw-short.express.val.run/JK
Which, well - it's not that short 🤣 but it's a start! It's pretty simple! In this case the storage is a private val because it contains some URLs. Part of the magic here is the venerable hashids module, which produces non-sequential string identifiers from an underlying serial numeric ID. So instead of huge UUIDs or fixed-length IDs like nanoid would generate, this generates short IDs, at least initially - like the example above, which is just "JK".
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
51
52
53
54
55
56
57
import { short_storage } from "https://esm.town/v/tmcw/short_storage";
export let short = async (req, res) => {
const param = req.path.substring(1);
const { default: Hashids } = await import("npm:hashids");
const H = new Hashids(short_storage.salt);
if (!param) {
const { default: htm } = await import("npm:htm");
const { default: vhtml } = await import("npm:vhtml");
const html = htm.bind(vhtml);
if (req.method === "GET") {
return res.send(html`<html><head><title>URL Shortener</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://the.missing.style" />
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
</head>
<body>
<main>
<h1>Val Town shortener</h1>
<form class='f-row' hx-target="#result" hx-post="/">
<input style="width:100%" type="url" required name="url" />
<button type='submit'>Shorter</button>
</form>
<div id='result'></div>
</main>
<footer>
<a href="https://www.val.town/v/tmcw.short">Powered by Val Town</a>
<p>Okay, so let's be honest, this might actually give you a longer URL
because it's at a pretty long subdomain. But go with me here, isn’t it
cool to have such a tiny URL shortener?</p>
</footer>
</body>
</html>`);
}
else if (req.method === "POST") {
const idx = short_storage.urls.push(req.body.url) - 1;
const id = H.encode(idx);
return res.send(html`<div class='box ok'>
Created! <a href='https://tmcw-short.express.val.run/${id}'>
https://tmcw-short.express.val.run/${id}
</a><br /><button type="button"
value='https://tmcw-short.express.val.run/${id}'
onclick="navigator.clipboard.writeText(this.value)
.then(() => { this.innerText = 'Copied!'; })
.catch(() => me.parentElement.remove(me));"
>Copy link</button>
</div>`);
}
}
const url = short_storage.urls[H.decode(param)];
if (!url) {
return res.end("URL not found", 404);
}
return res.redirect(url);
};