feat: rewrite and refactor

.vscode/settings.json

@@ -1,11 +1,28 @@
 {
   "deno.enable": true,
   "deno.unstable": true,
+  "deno.codeLens.implementations": true,
+  "deno.codeLens.references": true,
+  "deno.codeLens.referencesAllFunctions": true,
   "deno.codeLens.test": true,
+  "deno.codeLens.testArgs": [
+    "--allow-all",
+    "--no-check",
+    "--unstable"
+  ],
+  "deno.importMap": "./import_map.json",
+  "deno.config": "./deno.jsonc",
+  "[typescript][typescriptreact][javascript][javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno",
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "modificationsIfAvailable",
+    "editor.formatOnPaste": false,
+    "editor.formatOnType": false,
+  },
   "deno.suggest.imports.hosts": {
     "https://deno.land": true,
-    "https://x.nest.land": true,
-    "https://crux.land": true,
+    "https://x.nest.land": false,
+    "https://crux.land": false,
     "https://x.lcas.dev": true
   },
   "editor.minimap.enabled": false,

README.md

@@ -2,24 +2,37 @@
 
 ### Dynamic Icons + Deno Deploy
 
----  
+---
 
 ## Features
 
 - [x] Rendered just-in-time on the Edge, deployed globally in seconds.
-- [x] Supports [**the _complete_ Iconify collection**](https://github.com/iconify): **100,000+ icons in 100+ collections!**
-    - The default collection is `simple-icons`, meaning `./bmw.svg` is really `/simple-icons:bmw.svg`
-- [x] Parses colors with [**culori**](https://deno.land/x/culori) as opposed to [tinycolor2](https://github.com/bgrins/TinyColor)
-    - Accepts most CSS colors, either as a pathname: [`https://icns.ml/indianred/tabler:brand-github.svg`](https://icns.ml/indianred/tabler:brand-github.svg)
-    - Or as an additional parameter in the filename: [`https://icns.ml/tabler:brand-github:indianred.svg`](https://icns.ml/tabler:brand-github:indianred.svg)
-- [x] Experimental support for [**colorhash**](https://deno.land/x/colorhash) (deterministic colors from strings)
-    - Add a query parameter `?hash=foobar` and `foobar` will determine your icon color
-- [x] Supports a `dynamic` color option to support dark mode. (adds a small CSS media query to the SVG)
-    - Set the color to `dynamic` to enable: [`https://icns.ml/dynamic/deno.svg`](https://icns.ml/dynamic/deno.svg)
-- [x] Supports a `random` color option to render icons in a randomly generated hue.
-    - Simply set the color name to `random` (see above) and roll the dice!
-- [x] Preview icons on the homepage using slug URL fragments: [`https://icns.ml/#ph:alien-duotone:red.svg`](https://icns.ml/#ph:alien-duotone:red.svg)
-- [x] Totally useless frontend, powered by [**preact**](https://preactjs.org) and [**unocss**](https://uno.antfu.me)
+- [x] Supports
+      [**the _complete_ Iconify collection**](https://github.com/iconify):
+      **100,000+ icons in 100+ collections!**
+  - The default collection is `simple-icons`, meaning `./bmw.svg` is really
+    `/simple-icons:bmw.svg`
+- [x] Parses colors with [**culori**](https://deno.land/x/culori) as opposed to
+      [tinycolor2](https://github.com/bgrins/TinyColor)
+  - Accepts most CSS colors, either as a pathname:
+    [`https://icns.ml/indianred/tabler:brand-github.svg`](https://icns.ml/indianred/tabler:brand-github.svg)
+  - Or as an additional parameter in the filename:
+    [`https://icns.ml/tabler:brand-github:indianred.svg`](https://icns.ml/tabler:brand-github:indianred.svg)
+- [x] Experimental support for [**colorhash**](https://deno.land/x/colorhash)
+      (deterministic colors from strings)
+  - Add a query parameter `?hash=foobar` and `foobar` will determine your icon
+    color
+- [x] Supports a `dynamic` color option to support dark mode. (adds a small CSS
+      media query to the SVG)
+  - Set the color to `dynamic` to enable:
+    [`https://icns.ml/dynamic/deno.svg`](https://icns.ml/dynamic/deno.svg)
+- [x] Supports a `random` color option to render icons in a randomly generated
+      hue.
+  - Simply set the color name to `random` (see above) and roll the dice!
+- [x] Preview icons on the homepage using slug URL fragments:
+      [`https://icns.ml/#ph:alien-duotone:red.svg`](https://icns.ml/#ph:alien-duotone:red.svg)
+- [x] Totally useless frontend, powered by [**preact**](https://preactjs.org)
+      and [**unocss**](https://uno.antfu.me)
 - [x] Extremely portable and easy to deploy to your own instance
 
 ---

deno.jsonc

@@ -0,0 +1,53 @@
+{
+  "importMap": "import_map.json",
+  "compilerOptions": {
+    "lib": [
+      "deno.ns",
+      "deno.window",
+      "dom",
+      "dom.iterable",
+      "dom.asynciterable",
+      "esnext"
+    ],
+    "types": [
+      "./types.d.ts"
+    ],
+    "strict": false,
+    "allowJs": true,
+    "strictNullChecks": false,
+    "keyofStringsOnly": true,
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "jsxImportSource": "https://esm.sh/preact@10.10.1"
+  },
+  "fmt": {
+    "files": {
+      "exclude": [
+        "static",
+        "public",
+        ".git*",
+        ".vscode"
+      ]
+    }
+  },
+  "lint": {
+    "files": {
+      "exclude": [
+        "static",
+        "public",
+        "test",
+        ".git*",
+        ".vscode"
+      ]
+    },
+    "rules": {
+      "exclude": [
+        "no-explicit-any"
+      ]
+    }
+  },
+  "tasks": {
+    "dev": "deno run -A --unstable --watch=. main.tsx",
+    "test": "deno test -A --unstable --no-check=remote"
+  }
+}

deps.ts

@@ -1,50 +1,68 @@
-import {
-  type ConnInfo,
-  type Handler,
-  json,
-  jsx,
-  type PathParams,
-  type Routes,
-  serve,
-  serveStatic,
-  type VNode,
-} from "https://deno.land/x/sift@0.5.0/mod.ts";
+import { html } from "https://deno.land/x/htm@0.0.10/mod.tsx";
+
+import { UnoCSS } from "https://deno.land/x/htm@0.0.10/plugins.ts";
+
+import GOKV from "https://deno.land/x/gokv@0.0.12/mod.ts";
+
+export { default as _ } from "https://deno.land/x/911@0.0.5/mod.ts";
+
+export { json } from "https://deno.land/x/911@0.0.5/src/json.ts";
+
+import log from "https://deno.land/x/911@0.0.5/src/log.ts";
+
 import {
   formatHex,
-  parse as parseColor,
-} from "https://esm.sh/culori@2.1.0-alpha.11?dts";
-import {
-  configureUnoCSS,
-  h,
-  html,
-  type HtmlOptions,
-  type Options,
-} from "https://deno.land/x/htm@0.0.7/mod.tsx";
-import { $fetch } from "https://esm.sh/ohmyfetch@0.4.18?dts";
-import colorHash from "https://deno.land/x/color_hash@v2.0.1/mod.ts";
-import { DurableKV } from "https://deno.land/x/gokv@0.0.12/mod.ts";
+  parse,
+} from "https://deno.land/x/culori@v2.1.0-alpha.1/index.js";
 
-export type {
-  ConnInfo,
-  Handler,
-  HtmlOptions,
-  Options,
-  PathParams,
-  Routes,
-  VNode,
-};
+export * from "https://deno.land/x/culori@v2.1.0-alpha.1/index.js";
 
 export {
-  $fetch,
-  colorHash,
-  configureUnoCSS,
-  DurableKV,
-  formatHex,
-  h,
-  html,
-  json,
   jsx,
-  parseColor,
   serve,
   serveStatic,
-};
+  Status,
+  STATUS_TEXT,
+} from "https://deno.land/x/sift@0.5.0/mod.ts";
+
+export type {
+  ComponentProps,
+  Context,
+} from "https://deno.land/x/sift@0.5.0/mod.ts";
+
+export { default as colorHash } from "https://deno.land/x/color_hash@v2.0.1/mod.ts";
+
+export * from "https://esm.sh/preact@10.10.1";
+export { render as renderSSR } from "https://esm.sh/preact-render-to-string@5.2.1";
+
+// Importing the parts of NanoJSX which we are using in the application.
+// export { Helmet } from "https://deno.land/x/nano_jsx@v0.0.33/components/helmet.ts";
+// export { h } from "https://deno.land/x/nano_jsx@v0.0.33/core.ts";
+// export { Fragment } from "https://deno.land/x/nano_jsx@v0.0.33/fragment.ts";
+// export { renderSSR } from "https://deno.land/x/nano_jsx@v0.0.33/ssr.ts";
+// export { Store } from "https://deno.land/x/nano_jsx@v0.0.33/store.ts";
+// export {
+//   getState,
+//   setState,
+// } from "https://deno.land/x/nano_jsx@v0.0.33/hooks/useState.ts";
+
+// resvg WASM bindings that allow conversion of an SVG to a PNG. Open graph and
+// twitter do not support SVGs for card images.
+export { render as renderSVG } from "https://deno.land/x/resvg_wasm@0.1.0/mod.ts";
+
+html.use(UnoCSS());
+
+export { html, log };
+
+const token = Deno.env.get("GOKV_TOKEN") || null;
+const namespace = Deno.env.get("GOKV_NAMESPACE") || "icns.ml";
+try {
+  GOKV.config({ token });
+} catch (err) {
+  log.error("Unable to configure GOKV", err.toString());
+}
+
+export const $kv = GOKV.KV({ namespace });
+export const $dkv = GOKV.DurableKV({ namespace });
+
+export const parseAndFormatHex = (c: string) => formatHex(parse(c));

import_map.json

@@ -1,7 +1,9 @@
 {
   "imports": {
-    "~/": "./",
     "./": "./",
-    "std/": "https://deno.land/std@0.145.0/"
+    "~/": "./",
+    "@/": "./",
+    "/": "./",
+    "std/": "https://deno.land/std@0.151.0/"
   }
 }