alexanderson1993

import { AwsClient } from "aws4fetch";

const sesEndpoint = "email.us-east-1.amazonaws.com";

export function makeEmailSender({
  accessKeyId,
  secretAccessKey,
  defaultFromAddress,
}: {
  accessKeyId: string;

alexanderson1993

import type { UploadHandlerPart } from "@remix-run/cloudflare";

export class MaxPartSizeExceededError extends Error {
  constructor(public field: string, public maxBytes: number) {
    super(`Field "${field}" exceeded upload size of ${maxBytes} bytes.`);
  }
}

export function createR2UploadHandler({
  bucket,

alexanderson1993

migrate.mov

A handy CLI for working with the new Cloudflare D1/Prisma integration. You can read about that here: https://blog.cloudflare.com/prisma-orm-and-d1

Getting Started

• Install wrangler, Prisma, and the other dependencies

npm install prisma@latest @prisma/client@latest @prisma/adapter-d1

alexanderson1993

This was originally written for a Remix app, but you could adapt it to work for any SSR framework.

Check the docs for these packages to learn how to use these snippets

https://www.npmjs.com/package/kysely-migration-cli https://www.npmjs.com/package/kysely-codegen https://www.npmjs.com/package/kysely#migrations

It's configured to use MySQL on Planetscale, but you could adjust it to use Postgres or SQLite if you want.

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

alexanderson1993

function CurrencyInput({
  value,
  onChange,
  max,
}: {
  value: number;
  max: number;
  onChange: (val: number) => void;
}) {
  const [error, setError] = useState('');

alexanderson1993

import fs from 'fs/promises';

console.time('Get file sizes');

const items = await fs.readdir('.');

const ignore = [
  '_templates',
  '.git',
  '.github',

alexanderson1993

// This is a React component that loads and inlines an SVG image, making it easier to style 
// with CSS. It renders an <img> first, and then renders the inline SVG once it's been loaded.

import {useState, useEffect, memo, ComponentPropsWithoutRef} from "react";

export const SVGImageLoader: React.FC<
  {url: string} & ComponentPropsWithoutRef<"img">
> = memo(({url, alt, ...props}) => {
  const [data, setData] = useState<string | null>(null);
  useEffect(() => {

alexanderson1993

import * as React from "react";

const CopyToClipboard:React.FC<{text:string} & React.HTMLAttributes<HTMLButtonElement>> = ({text, ...props}) => {
  const copyToClipboard = (event:React.MouseEvent<HTMLButtonElement>, str:string) => {
    const el = Object.assign(document.createElement('textarea'),{value:str});
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  

alexanderson1993

// Create a symbol for our proxy
let isProxy = Symbol("isProxy");


const handler = {
    get(target, key) {
      // Override access if we are checking if the object is already a proxy
      if (key === isProxy) return true;
      if (
        // Don't wrap it again if the object is already a proxy