Include an icon for scheduled webhook messages

Author: MattIPv4

.dev.vars.example

@@ -4,6 +4,7 @@ DISCORD_CLIENT_SECRET=<discord_client_secret>
 # DISCORD_GUILD_ID=<discord_guild_id>
 # DISCORD_SUMMARY_WEBHOOK=<discord_webhook_url>
 # DISCORD_MILESTONE_WEBHOOK=<discord_webhook_url>
+# WORKER_BASE_URL=<worker_base_url>
 
 STATS_API_ENDPOINT=https://dashboard.jinglejam.co.uk/api/tiltify
 # STATS_API_ENDPOINT=https://develop.jingle-jam-tracker.pages.dev/api/tiltify

README.md

@@ -23,7 +23,7 @@ Ensure that the environment in `wrangler.toml` has been updated with your chosen
 
 Ensure that the KV namespaces are created for staging/production environments and are configured in `wrangler.toml`. Use `npx wrangler kv:namespace create "STORE" -e <staging/production>`.
 
-You'll also want to set `DISCORD_PUBLIC_KEY` + `STATS_API_ENDPOINT` + `DISCORD_SUMMARY_WEBHOOK` + `DISCORD_MILESTONE_WEBHOOK` as secrets for the worker, which you can do with `npx wrangler secret put <var name> -e <staging/production>` (the webhook secrets can contain multiple webhooks, separated by a comma).
+You'll also want to set `DISCORD_CLIENT_ID` + `DISCORD_PUBLIC_KEY` + `STATS_API_ENDPOINT` (optionally, `DISCORD_SUMMARY_WEBHOOK` + `DISCORD_MILESTONE_WEBHOOK` + `WORKER_BASE_URL`) as secrets for the worker, which you can do with `npx wrangler secret put <var name> -e <staging/production>` (the webhook secrets can contain multiple webhooks, separated by a comma).
 
 If you're deploying for local, make sure that you've got the appropriate environment variables set for `DISCORD_CLIENT_ID`, `DISCORD_CLIENT_SECRET` + `DISCORD_GUILD_ID` (otherwise, they'll default to the values in `.dev.vars`).
 

src/assets/assets.d.ts

@@ -0,0 +1,9 @@
+declare module "*.png" {
+    const content: Uint8Array;
+    export default content;
+}
+
+declare module "*.svg" {
+    const content: string;
+    export default content;
+}

src/assets/icon.png

@@ -1,8 +1,10 @@
 export interface Env {
+    DISCORD_CLIENT_ID: string;
     DISCORD_PUBLIC_KEY: string;
     STATS_API_ENDPOINT: string;
     DISCORD_SUMMARY_WEBHOOK?: string;
     DISCORD_MILESTONE_WEBHOOK?: string;
+    WORKER_BASE_URL?: string;
     STORE: KVNamespace;
 }
 

src/assets/icon.svg

@@ -5,6 +5,8 @@ import totalCommand from "./commands/total";
 import causesCommand from "./commands/causes";
 import summaryScheduled from "./scheduled/summary";
 import milestoneScheduled from "./scheduled/milestone";
+import iconAssetPNG from "./assets/icon.png";
+import iconAssetSVG from "./assets/icon.svg";
 import type { CtxWithEnv, Env } from "./env";
 
 let handler: ReturnType<typeof createHandler<CtxWithEnv>>;
@@ -24,6 +26,29 @@ const worker: ExportedHandler<Env> = {
         const resp = await handler(request, ctx as CtxWithEnv);
         if (resp) return resp;
 
+        // Parse the URL
+        const url = new URL(request.url);
+
+        // Provide a direct link to invite the app
+        if (request.method === "GET" && url.pathname === "/invite") {
+            return Response.redirect(
+                `https://discord.com/oauth2/authorize?client_id=${env.DISCORD_CLIENT_ID}&scope=applications.commands`,
+                302,
+            );
+        }
+
+        // Serve the icon for the scheduled webhook messages
+        if (request.method === "GET" && url.pathname === "/icon.png") {
+            return new Response(iconAssetPNG, {
+                headers: { "Content-Type": "image/png" },
+            });
+        }
+        if (request.method === "GET" && url.pathname === "/icon.svg") {
+            return new Response(iconAssetSVG, {
+                headers: { "Content-Type": "image/svg+xml" },
+            });
+        }
+
         // Fallback for any requests not handled by the handler
         return new Response("Not found", { status: 404 });
     },

src/env.ts

@@ -61,7 +61,13 @@ const milestoneScheduled = async (
     ctx.waitUntil(
         Promise.all(
             webhooks.map((webhook) =>
-                sendWebhook(webhook, { content }).catch(console.error),
+                sendWebhook(webhook, {
+                    content,
+                    username: "JingleBot",
+                    avatar_url: env.WORKER_BASE_URL
+                        ? `${env.WORKER_BASE_URL}/icon.png`
+                        : undefined,
+                }).catch(console.error),
             ),
         ),
     );

src/index.ts

@@ -84,7 +84,13 @@ const summaryScheduled = async (
     ctx.waitUntil(
         Promise.all(
             webhooks.map((webhook) =>
-                sendWebhook(webhook, { content }).catch(console.error),
+                sendWebhook(webhook, {
+                    content,
+                    username: "JingleBot",
+                    avatar_url: env.WORKER_BASE_URL
+                        ? `${env.WORKER_BASE_URL}/icon.png`
+                        : undefined,
+                }).catch(console.error),
             ),
         ),
     );

src/scheduled/milestone.ts

@@ -8,20 +8,13 @@ const sendWebhook = async (
     const url = new URL(hook);
     url.searchParams.set("wait", "true");
 
-    // Force a standard username for the webhook
-    const payload: RESTPostAPIWebhookWithTokenJSONBody = {
-        ...data,
-        username: "JingleBot",
-        // TODO: avatar_url
-    };
-
     // Make the request and check for any errors
     const res = await fetch(url, {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
-        body: JSON.stringify(payload),
+        body: JSON.stringify(data),
     });
 
     if (!res.ok) {

src/scheduled/summary.ts

@@ -9,13 +9,17 @@ import causesCommand from "./src/commands/causes";
 dotenv.config({ path: ".dev.vars" });
 
 export default defineConfig({
+    // Generate a single ESM file for the worker
+    // Include type definitions so we check them when building
+    // Include source maps to help with debugging in development
     entry: ["src/index.ts"],
     format: ["esm"],
     dts: true,
     sourcemap: true,
     clean: true,
     outDir: "dist",
     outExtension: () => ({ js: ".js" }),
+    // Register the commands once the worker is built
     onSuccess: async () => {
         await registerCommands(
             process.env.DISCORD_CLIENT_ID!,
@@ -25,4 +29,13 @@ export default defineConfig({
             process.env.DISCORD_GUILD_ID,
         );
     },
+    // Allow importing of PNG and SVG files
+    // Set platform to browser so esbuild uses `atob`, not `Buffer`
+    loader: {
+        ".png": "binary",
+        ".svg": "text",
+    },
+    esbuildOptions: (options) => {
+        options.platform = "browser";
+    },
 });