Skip to content

Instantly share code, notes, and snippets.

View jinsley8's full-sized avatar

Jon Insley jinsley8

View GitHub Profile
@jinsley8
jinsley8 / preload-featured.php
Last active July 12, 2024 20:13
Preload featured image in WordPress
@jinsley8
jinsley8 / framer-formspark.tsx
Last active June 8, 2024 01:41
Custom Formspark form for Framer
// Button background gradient has been hard-coded in the form below
import { addPropertyControls, ControlType, RenderTarget, withCSS } from "framer"
import { HTMLMotionProps, motion } from "framer-motion"
import * as React from "react"
import {
containerStyles,
usePadding,
useRadius,
paddingControl,
@jinsley8
jinsley8 / index.html
Created May 27, 2024 20:00
SVG Line Animation
<svg width="236" height="68" viewBox="0 0 236 68" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H89C90.6569 0.5 92 1.84315 92 3.5V29C92 30.6569 93.3431 32 95 32H148.5C150.157 32 151.5 33.3431 151.5 35V64C151.5 65.6569 152.843 67 154.5 67H235.5" stroke="url(#paint0_linear)"></path><defs><linearGradient id="paint0_linear" gradientUnits="userSpaceOnUse" x1="272.78000000000065" y1="0" x2="390.99050000000085" y2="49.05000000000008"><stop stop-color="#2EB9DF" stop-opacity="0"></stop><stop stop-color="#2EB9DF"></stop><stop offset="1" stop-color="#9E00FF" stop-opacity="0"></stop></linearGradient></defs></svg>
@jinsley8
jinsley8 / nixpacks.toml
Last active April 18, 2024 04:28
Use the latest version of Bun in Railway deployment (bun v1.1.3)
[phases.setup]
nixpkgsArchive = '0e2e5ebac4c621a80f14c3bb3671697e960f7faf'
@jinsley8
jinsley8 / zod-parse.ts
Last active September 19, 2023 20:53
Zod Parsing Errors
import { ZodTypeAny } from 'zod';
/*
* .safeParse
*/
interface ZodResponseSuccess<T> {
success: true;
data: T;
}
@jinsley8
jinsley8 / isMetamaskInstalled.ts
Last active January 10, 2023 05:36
Check if MetaMask is installed on the browser in React
import { useEffect, useState } from 'react';
const [isMetamaskInstalled, setIsMetamaskInstalled] = useState<boolean>(false);
// Check if Metamask wallet is installed and window.ethereum exists
useEffect(() => {
if (typeof (window as any)?.ethereum !== 'undefined' && (window as any)?.ethereum?.isMetaMask) {
setIsMetamaskInstalled(true);
} else {
setIsMetamaskInstalled(false);
@jinsley8
jinsley8 / useIntersectionObserver.ts
Created November 29, 2022 22:20
A hook to observe when the uses has scrolled to on page
import React, { useEffect } from 'react';
interface IntersectionObserverProps {
root?: React.RefObject<Element | null>;
target: React.MutableRefObject<HTMLElement | null>;
onIntersect: () => void;
threshold?: number | number[];
rootMargin?: string;
enabled?: boolean;
}
@jinsley8
jinsley8 / useFetch.ts
Created November 29, 2022 22:18
A hook that uses fetch to fetch data
enum Method {
GET = 'GET',
POST = 'POST',
PUT = 'PUT',
PATCH = 'PATCH',
DELETE = 'DELETE',
}
const useFetch = (endpoint: string, apiKey?: object) => {
const defaultHeader = {
@jinsley8
jinsley8 / useDebounce.ts
Created November 29, 2022 22:18
A hook to debounce input data
import { useEffect, useState } from 'react';
export default function useDebounce<T>(value: T, delay: number): T {
// State and setters for debounced value
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(
() => {
// Update debounced value after delay
const handler = setTimeout(() => {
@jinsley8
jinsley8 / useAxios.ts
Created November 29, 2022 22:16
A hook that uses axios to fetch data
import axios, { AxiosRequestConfig } from 'axios';
import { useEffect, useState } from 'react';
axios.defaults.baseURL = `${process.env.NEXT_PUBLIC_SITE_URL}/api/${process.env.NEXT_PUBLIC_API_VERSION}`;
export const useAxiosFetch = (params: AxiosRequestConfig<any>) => {
const [data, setData] = useState<any>(null);
const [error, setError] = useState<any>(null);
const [loading, setLoading] = useState<boolean>(true);