Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓
Building Blitz.js + Full-time RVer

Brandon Bayer flybayer

🤓
Building Blitz.js + Full-time RVer
View GitHub Profile
@flybayer
flybayer / blitz-image-upload-rfc.md
Last active Mar 16, 2021 — forked from cstrnt/blitz-image-upload-rfc.md
[RFC] Add easy image uploads to Blitz
View blitz-image-upload-rfc.md

Problem

As of right now it's not trivial to upload images in Blitz. People either use external services like Cloudinary to handle this stuff. Creating your own solution includes knowledge in the fields of form parsing and some really low level libraries like busboy.

Solution

The goal is to create a hook which allows easy image uploads. There will also be a api route which takes care of the parsing part and then allows saving the file to the disk or uploading it a S3 etc. I'm the creator of imghop and I plan on using the same / similar api for this functionality. Example:

@flybayer
flybayer / 1-BEFORE.ts
Last active Jan 27, 2021
Production Blitz.js Code Before & After New Pipe Utilities
View 1-BEFORE.ts
// app/test-results/queries/getTestResult.ts
import { Ctx, NotFoundError } from "blitz"
import db, { Prisma, TestResult as TestResultBase } from "db"
import { ReportData } from "../types"
type GetTestResultInput = {
id: number
}
type TestResult = TestResultBase & {
View updatePassword.ts
import { SessionContext } from "blitz"
import db from "db"
import { authenticateUser, hashPassword } from "app/auth/auth-utils"
import * as z from "zod"
// --------------------------------------------
// PROTECT UTIL
type Ctx = { session: SessionContext }
type ProtectArgs<T> = { schema: T; authorize?: boolean }
@flybayer
flybayer / env.ts
Created Sep 15, 2020
zod env validation
View env.ts
// config/env.ts
import assert from "utils/assert"
import * as z from "zod"
assert(typeof window === "undefined",
"The config/env.ts file cannot be used in the browser")
const isProduction = process.env.NODE_ENV === "production"
const isDevelopment = process.env.NODE_ENV === "development"
const isTest = process.env.NODE_ENV === "test"
@flybayer
flybayer / Link.tsx
Last active Jul 1, 2021
Much nicer and more intuitive Next.js Link abstraction
View Link.tsx
View example.js
const res = await fetch(action, {
method,
body: data,
headers: {
Accept: 'application/json',
},
})
View machine.js
const checkoutAppMachine = Machine(
{
id: "checkoutApp",
initial: "studentEntry",
strict: true,
context: {
currentStepNumber: 0,
account: {
authenticated: false,
},
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View .hyper.js
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 14,
// font family with optional fallbacks
fontFamily: '"Source Code Pro for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: 'rgba(248,28,229,0.8)',