Skip to content

Instantly share code, notes, and snippets.

View magicspon's full-sized avatar
🤘

Dave Stockley magicspon

🤘
View GitHub Profile
@magicspon
magicspon / PayloadImage.tsx
Created February 5, 2026 16:11
Payload Image
import type { Media } from '@spon/payload-types'
import * as React from 'react'
type TElementProps = Omit<
React.ComponentProps<'img'>,
'src' | 'width' | 'height' | 'alt' | 'srcSet'
>
export type TPayloadImageProps = TElementProps & {
media: Media | null | string
@magicspon
magicspon / Form.client.tsx
Created February 5, 2026 15:53
payload mega form
import { FieldRender } from './FieldRender'
import { buildDefaultValues, createZodSchema } from './form.utils'
import { useConditionalFields } from './useConditionalFields'
import { RichText } from '@payloadcms/richtext-lexical/react'
import type { Form as FormProps } from '@spon/payload-types'
import { Stack } from '@spon/ui/layout/Stack'
import { useForm } from '@tanstack/react-form'
import { useMutation } from '@tanstack/react-query'
import * as React from 'react'
import { withQueryProvider } from '~/providers/QueryProvider'
@magicspon
magicspon / issue.md
Created February 5, 2026 13:49
usesend local docker composer issue

Description

When running the usesend/usesend:latest Docker image locally for development, GitHub OAuth authentication fails with a "State cookie was missing" error. This prevents users from logging in or creating accounts when running UseSend in a local Docker environment.

Steps to Reproduce

  1. Set up UseSend using Docker Compose with the following configuration:
@magicspon
magicspon / helper.ts
Last active January 22, 2026 16:16
Payload DangerouslyExpandRelations
type HasObject<T> = T extends object ? (T extends null ? false : true) : false
// Remove string from union if it contains both string and object types
type RemoveStringIfHasObject<T> = string extends T
? true extends HasObject<T>
? Exclude<T, string>
: T
: T
// Recursive helper that handles arrays / readonly arrays and objects
@magicspon
magicspon / create-page.tsx
Last active February 18, 2025 19:38 — forked from Pagebakers/create-page.tsx
Next.js createPage helper with loader pattern
// https://saas-ui.dev/blog/nextjs-create-page-helper-with-loader-pattern
// source: https://gist.github.com/magicspon/c1647cf91909808be0a1eed5448bb56d
// updated by @magicspon
import type { Metadata, ResolvingMetadata } from 'next'
import { unstable_cache as cache } from 'next/cache'
import { draftMode } from 'next/headers'
import type { AnyZodObject, z } from 'zod'
const DEFAULT_REVALIDATE_TIME = 60 * 60 * 24 // 1 DAY
@magicspon
magicspon / server.js
Created November 7, 2018 09:48
using https with next
const https = require('https')
const { parse } = require('url')
const next = require('next')
const fs = require('fs')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const options = {
@magicspon
magicspon / views.js
Created September 28, 2016 12:46
barba.js page transitions
import Barba from 'barba.js';
import mud from '../loader/behaviour';
import events from '../helpers/events';
import { transitionEnd, css3 } from '../helpers/prefix';
import Tweezer from 'tweezer.js';
export const views = () => {
const heroClassName = 'is-page-with-hero';
const heroWithOutClassName = 'is-page-without-hero';
@magicspon
magicspon / sso-login.ts
Last active April 20, 2023 09:19 — forked from jorgemasta/sso-login.ts
SSO Login to BigCommerce using a (Next) API Route
import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
import jwt from 'jsonwebtoken';
import {v4 as uuidv4} from 'uuid';
import concatHeader from '../utils/concat-cookie'
import getConfig from '../utils/get-config'
function getSsoLoginUrl(customerId: number, storeHash: string, storeUrl: string, clientId: string, clientSecret: string) {
const dateCreated = Math.round((new Date()). getTime() / 1000);
const payload = {
"iss": clientId,
@magicspon
magicspon / parseRichText.ts
Last active October 31, 2021 15:51
Next/Image from html string
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import Image from 'next/image'
import Parse, {
HTMLReactParserOptions,
DOMNode,
Element,
} from 'html-react-parser'
const isElement = (domNode: DOMNode): domNode is Element => {
@magicspon
magicspon / index.tsx
Last active September 14, 2021 12:32
nextAuth/Craft/codegen usage
import * as React from 'react'
import { GetServerSideProps } from 'next'
import {
providers,
getSession,
csrfToken,
ClientSafeProvider,
} from 'next-auth/client'
import { getSdk } from '@schema/graphql'
import cmsClient from '@healthwave/utils/cms/graphqlClient'