-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (106 loc) · 6.32 KB
/
index.html
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A minimal short link service that uses the Ethereum blockchain for access control.">
<meta name="theme-color" content="#cbdff6" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#485461" media="(prefers-color-scheme: dark)">
<meta property="og:title" content="alu.bz">
<meta property="og:description" content="A minimal short link service that uses the Ethereum blockchain for access control.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://alu.bz/">
<link rel="canonical" href="https://alu.bz/">
<link rel="icon" href="data:,">
<link rel="stylesheet" href="style.css">
<title>alu.bz</title>
</head>
<body>
<header>
<h1>alu.bz</h1>
<nav>
<button id="connect" class="text-button">Connect Wallet</button>
<button id="info-button">
<svg role="img" aria-labelledby="info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title id="info">About this site</title>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
<a href="https://github.com/ardislu/alu.bz" id="github-link">
<svg role="img" aria-labelledby="github" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title id="github">GitHub repository</title>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</a>
</nav>
</header>
<main>
<form>
<div>
<label for="full-url">Long link</label>
<aside>Enter a long URL to shorten.</aside>
<input type="url" id="full-url" name="full-url" placeholder="https://example.com" required>
</div>
<div>
<label for="short-url">Custom short path</label>
<aside id="short-url-aside">Connect wallet to enable this feature.</aside>
<!-- Maximum 80 characters, valid characters are alphanumeric, hyphen (-), and underscore (_) -->
<input type="text" id="short-url" name="short-url" placeholder="example" maxlength="80" pattern="[\w\-]+" disabled>
</div>
<button type="submit" id="generate" class="text-button">Create short link</button>
<output id="status" name="status"></output>
</form>
<dialog id="info-dialog">
<form method="dialog">
<button>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</form>
<h1>Info</h1>
<h2>What is this?</h2>
<p>This site is a proof of concept <a href="https://en.wikipedia.org/wiki/URL_shortening">short link service</a> that uses the <a href="https://ethereum.org/">Ethereum blockchain</a> for its authorization backend.</p>
<p>It's free to create a short link with a random four character path.</p>
<p>Users that hold a special access <a href="https://en.wikipedia.org/wiki/Non-fungible_token"><abbr title="Non-Fungible Token">NFT</abbr></a> may create custom short paths.</p>
<p>Custom short paths may be any combination of alphanumeric characters, hyphens, and underscores, with a maximum length of 80.</p>
<h2>Why?</h2>
<p>Rolling your own auth is hard to get right. And integrating with a third-party auth provider creates complexity.</p>
<p>Using Ethereum for authorization strikes a good balance between minimizing complexity and maintaining security.</p>
<p>This website is an example minimum viable product that uses Ethereum for access control.</p>
<h2>How does it work?</h2>
<p>Many web3 projects use a frontend framework like <a href="https://ethers.org/">ethers.js</a> or <a href="https://web3js.org/">web3.js</a> to integrate with Ethereum.</p>
<p>To demonstrate the minimum required code, this project's frontend is implemented entirely in vanilla HTML, CSS, and JavaScript with no framework.
The only integrations are with the standard Ethereum Provider JavaScript API (<a href="https://eips.ethereum.org/EIPS/eip-1193">EIP-1193</a>) used by all common wallets
(e.g., <a href="https://metamask.io/">MetaMask</a> and <a href="https://www.coinbase.com/wallet">Coinbase Wallet</a>) to get user <a href="https://ethereum.org/en/glossary/#digital-signatures">signatures</a> for authorization, and
with <a href="https://eips.ethereum.org/EIPS/eip-6963">EIP-6963</a> ("Multi Injected Provider Discovery") to support multiple wallets installed simultaneously.
</p>
<p>The backend is a serverless <a href="https://workers.cloudflare.com/">Cloudflare Worker</a>, also written in vanilla JavaScript. The code to verify signatures on the backend uses Paul Miller's <a href="https://paulmillr.com/noble/">noble-crypto</a> project.</p>
<h2>Source code</h2>
<p><a href="https://github.com/ardislu/alu.bz">Click here</a> to view this project's source code on GitHub.</p>
<p>The code for both the frontend and the backend is available in the GitHub repository.</p>
<h2>Disclaimer</h2>
<p><strong>Do not rely on this service for permanent links.</strong></p>
<p>This is a personal project. Short links may be changed or deleted at any time.</p>
</dialog>
<dialog id="wallet-picker">
<form method="dialog">
<p>Select a wallet:</p>
<ul></ul>
<button class="text-button">Cancel</button>
</form>
</dialog>
<dialog id="notification">
<form method="dialog">
<p>No wallet detected. Install a wallet to connect.</p>
<button class="text-button">OK</button>
</form>
</dialog>
</main>
<script src="script.js" type="module"></script>
</body>
</html>