diff --git a/.prettierrc b/.prettierrc index 233afa3..12e87cd 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,13 @@ "semi": false, "trailingComma": "all", "useTabs": true, - "printWidth": 80 + "printWidth": 80, + "overrides": [ + { + "files": "src/*.html", + "options": { + "printWidth": 140 + } + } + ] } diff --git a/README.md b/README.md index 7a70e8e..7ef7cfc 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,12 @@ For debuggging, you can use `yarn dev` (Which runs `wrangler dev --local`). To c You can also debug on the edge with `wrangler dev`, though you will need to first configure a prepview namespace in `wrangler.toml` and add the `WORKERLINKS_SECRET` secret to the Worker. +## (Optional) User Interface + +If `ENABLE_INDEX_FORM` is enabled in `wrangler.toml`, an optional UI form is available when visiting the Worker in a browser, allowing easy creation of links: + +![](https://up.erisa.uk/firefox_qFWwv7NIqf.png) + ## Usage Once deployed, interacting with the API should be rather simple. It's based on headers, specifically with the `Authorization` and `URL` headers. diff --git a/package.json b/package.json index 7f45a5c..1891a4c 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "Erisa A", "license": "MIT", "scripts": { - "format": "prettier --write '**/*.{ts,js,css,json,md}'", + "format": "prettier --write '**/*.{ts,js,css,json,md,html}'", "deploy": "wrangler publish", "dev": "wrangler dev", "addsecret": "wrangler secret put WORKERLINKS_SECRET", diff --git a/src/form.html b/src/form.html new file mode 100644 index 0000000..cd72886 --- /dev/null +++ b/src/form.html @@ -0,0 +1,106 @@ + + + + Shorten a URL + + + + + +
+ +

+ +

+ +

+

+
+
+ +
+ + diff --git a/src/html.d.ts b/src/html.d.ts new file mode 100644 index 0000000..c25ff28 --- /dev/null +++ b/src/html.d.ts @@ -0,0 +1,4 @@ +declare module '*.html' { + const value: string + export default value +} diff --git a/src/index.ts b/src/index.ts index 02baf19..d8adb8a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,9 @@ import { Context as HonoContext, Env as HonoEnv, Hono } from 'hono' import * as st from 'simple-runtypes' +// html.d.ts tells typescript that this is a normal thing to do +import creationPageHtml from './form.html' + type Variables = { path: string key: string @@ -12,6 +15,7 @@ type Bindings = { PLAUSIBLE_HOST?: string KV: KVNamespace kv: KVNamespace + ENABLE_INDEX_FORM: boolean } const url = st.runtype((v) => { @@ -107,6 +111,10 @@ app.get('/', async (c) => { })), }) } else { + const urlResult = await c.env.KV.get(c.get('key')) + if (urlResult == null && c.env.ENABLE_INDEX_FORM) { + return c.html(creationPageHtml) + } return handleGetHead(c) } }) diff --git a/wrangler.toml b/wrangler.toml index f356aaf..606c3f0 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -14,3 +14,6 @@ compatibility_date = "2023-03-05" # Remove or comment out the route line if using workers_dev workers_dev = false route = { pattern = "erisa.link/*", zone_name = "erisa.link" } + +[vars] +ENABLE_INDEX_FORM = true