import { fetch } from "https://esm.town/v/std/fetch";
export let canvasText = async (req: Request) => {
const query = new URL(req.url).searchParams;
const { loadImage, createCanvas } = await import(
"https://deno.land/x/canvas/mod.ts"
);
const canvas = createCanvas(1200, 675);
const ctx = canvas.getContext("2d");
let canvasWidth = canvas.width;
let canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
const librelightres = await fetch(
`https://tomcritchlow.com/fonts/LibreFranklin-Light.ttf`,
);
const librelight = await librelightres.arrayBuffer();
canvas.loadFont(librelight, {
family: "Libre Franklin",
weight: "300",
});
const libresemiboldres = await fetch(
`https://tomcritchlow.com/fonts/LibreFranklin-SemiBold.ttf`,
);
const libresemibold = await libresemiboldres.arrayBuffer();
canvas.loadFont(libresemibold, {
family: "Libre Franklin",
weight: "600",
});
const headline = query.get("headline");
const subheadline = query.get("subheadline");
const date = query.get("date");
const hasHeadline = headline && headline.trim().length > 0;
const hasSubheadline = subheadline && subheadline.trim().length > 0;
const hasDate = date && date.trim().length > 0;
ctx.fillStyle = "#f1f1f1";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
if (hasDate) {
ctx.fillStyle = "#212121";
ctx.font = "20px Courier New";
ctx.fillText(query.get("date"), 50, 100);
}
ctx.strokeStyle = "#02AD28";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50, 120);
ctx.lineTo(1150, 120);
ctx.stroke();
if (hasHeadline) {
ctx.fillStyle = "#212121";
ctx.font = "600 55px Libre Franklin";
ctx.fillText(query.get("headline"), 50, 350);
}
if (hasSubheadline) {
ctx.fillStyle = "#212121";
ctx.font = "300 35px Libre Franklin";
ctx.fillText(query.get("subheadline"), 50, 400);
}
ctx.fillStyle = "#02AD28";
ctx.font = "600 18px Libre Franklin";
ctx.fillText("TOMCRITCHLOW.COM", 50, 600);
return new Response(canvas.toBuffer(), {
headers: {
"Content-Type": "image/png",
},
});
};