bennycondon Posts - Answer Overflow

bennycondon

Explore posts from servers

•Created by bennycondon on 12/16/2024 in #help

Problem resolving imports from tailwindcss npm package

I'm having a problem with Deno 2 resolving imports from the tailwindcss npm package. I've included my code as an example below. I have the following task and imports in a deno.json file:

{
  "tasks": {
    "tailwind": "deno run -A npm:tailwindcss@^3.4.15 --config=./tailwind.config.ts --input=./public/styles/input.css --output=./public/styles/output.css --minify"
  },
  "imports": {
    "@tailwindcss/forms": "npm:@tailwindcss/forms@^0.5.9",
    "tailwindcss": "npm:tailwindcss@^3.4.15"
  }
}

{
  "tasks": {
    "tailwind": "deno run -A npm:tailwindcss@^3.4.15 --config=./tailwind.config.ts --input=./public/styles/input.css --output=./public/styles/output.css --minify"
  },
  "imports": {
    "@tailwindcss/forms": "npm:@tailwindcss/forms@^0.5.9",
    "tailwindcss": "npm:tailwindcss@^3.4.15"
  }
}

I have the following tailwind.config.ts:

import defaultTheme from "tailwindcss/defaultTheme.js";
import forms from "@tailwindcss/forms/src/index.js";

export default {
  content: ["src/**/*", "public/scripts/**/*"],
  theme: {
    screens: {
      xs: "425px",
      ...defaultTheme.screens,
    },
    extend: {
      fontFamily: {
        sans: ['"Outfit"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [forms({ strategy: "base" })],
  future: {
    hoverOnlyWhenSupported: true,
  },
};

import defaultTheme from "tailwindcss/defaultTheme.js";
import forms from "@tailwindcss/forms/src/index.js";

export default {
  content: ["src/**/*", "public/scripts/**/*"],
  theme: {
    screens: {
      xs: "425px",
      ...defaultTheme.screens,
    },
    extend: {
      fontFamily: {
        sans: ['"Outfit"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [forms({ strategy: "base" })],
  future: {
    hoverOnlyWhenSupported: true,
  },
};

I run the deno task with: deno task tailwind, and I receive the following error: Error: Cannot find module 'tailwindcss/defaultTheme.js'.

1 replies

CDCloudflare Developers

•Created by bennycondon on 3/22/2023 in #workers-help

Generating images in Workers

I'm trying to generate an image in a Worker, and then store the image in an R2 bucket. My current approach (example code included below) was to: 1. Use the Canvas API to generate the image, 2. Use HTMLCanvasElement.toDataURL() and dataURItoBlob() to convert the image to a Blob, and then 3. Put the Blob in an R2 bucket. However, as document is not defined and the Canvas API is not supported (https://github.com/cloudflare/workerd/discussions/212), this approach does not work in Workers. Are there any other approaches I could try to achieve this in Workers?

interface Env {
  BUCKET: R2Bucket;
}

export const onRequest: PagesFunction<Env> = async (context) => {
  const canvas = document.createElement("canvas");

  canvas.width = 200;
  canvas.height = 200;

  const ctx = canvas.getContext("2d");

  if (ctx === null) {
    return new Response(null, { status: 500 });
  }

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("text", canvas.width / 2, canvas.width / 2);

  const dataUrl = canvas.toDataURL("image/jpeg");
  const blobData = dataURItoBlob(dataUrl);

  await context.env.BUCKET.put("my-image.jpeg", blobData);

  return new Response(null, { status: 200 });
};

function dataURItoBlob(dataURI: string) {
  const binary = Buffer.from(dataURI.split(",")[1], "base64").toString();
  const array = [];

  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
}

interface Env {
  BUCKET: R2Bucket;
}

export const onRequest: PagesFunction<Env> = async (context) => {
  const canvas = document.createElement("canvas");

  canvas.width = 200;
  canvas.height = 200;

  const ctx = canvas.getContext("2d");

  if (ctx === null) {
    return new Response(null, { status: 500 });
  }

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("text", canvas.width / 2, canvas.width / 2);

  const dataUrl = canvas.toDataURL("image/jpeg");
  const blobData = dataURItoBlob(dataUrl);

  await context.env.BUCKET.put("my-image.jpeg", blobData);

  return new Response(null, { status: 200 });
};

function dataURItoBlob(dataURI: string) {
  const binary = Buffer.from(dataURI.split(",")[1], "base64").toString();
  const array = [];

  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
}

8 replies

Gaming

Programming