🐈 Loooooooooooooooong cat

longcat.ts

import { join } from "jsr:@std/path";
import { Hono } from "jsr:@hono/hono";
import { cache } from "jsr:@hono/hono/cache";
import { logger } from "jsr:@hono/hono/logger";
import { createCanvas, loadImage } from "jsr:@gfx/canvas-wasm";

const baseImageUrl =
  "https://raw.githubusercontent.com/mattn/longcat/refs/heads/master/public/themes/longcat";
const imageUrls = {
  head: join(baseImageUrl, "data01.png"),
  body: join(baseImageUrl, "data02.png"),
  tail: join(baseImageUrl, "data03.png"),
};

export default new Hono({ strict: false })
  .use(logger())
  .get(
    "/:text{lo*ngcat}",
    cache({
      cacheName: (ctx) => ctx.req.param("text"),
      wait: true,
      cacheControl: "max-age=2629746",
    }),
    async (ctx) => {
      const text = ctx.req.param("text");
      const length = text.split("").filter((char) => char === "o").length;

      console.log(`🎨 Generating ${length} long image...`);
      const buffer = await drawImage(length);

      return new Response(buffer, { headers: { "Content-Type": "image/png" } });
    },
  )
  .notFound((ctx) =>
    ctx.redirect(`/l${"o".repeat(Math.round(Math.random() * 10))}ngcat`)
  );

const drawImage = async (length: number): Promise<Uint8Array> => {
  const images = await Promise.all(
    [
      imageUrls.head,
      ...new Array<string>(length).fill(imageUrls.body),
      imageUrls.tail,
    ].map((image) => loadImage(image)),
  );

  const canvas = createCanvas(
    Math.max(...images.map((image) => image.width())),
    images.reduce((height, image) => height + image.height(), 0),
  );

  images.reduce((y, image) => {
    canvas.getContext("2d")
      .drawImage(image, (canvas.width - image.width()) / 2, y);
    return y + image.height();
  }, 0);

  return canvas.toBuffer();
};

deno serve -N https://gist.githubusercontent.com/5ouma/5f22e1065de59e86b47b80fb1db8643b/raw/longcat.ts