Skip to content

Instantly share code, notes, and snippets.

@jonshipman
jonshipman / background.svelte
Created May 23, 2024 21:37
Hero background component
<script lang="ts">
import { house } from '$lib/graphics';
import { page } from '$app/stores';
import type { WpPost } from '$lib/wp';
let bgMp4: string | undefined | null;
let bgWebm: string | undefined | null;
let post: WpPost | undefined;
$: post = $page.data.post;
@jonshipman
jonshipman / trim-image.mjs
Created May 6, 2024 16:25
Sharp Nodejs Trim to the bottom right pixel color
import sharp from 'sharp';
export async function trimImage(input: Buffer) {
try {
const metadata = await sharp(input).metadata();
const width = metadata.width || 0;
const height = metadata.height || 0;
if (!width || !height) return input;
@jonshipman
jonshipman / persistent-writable.ts
Created April 4, 2024 18:25 — forked from kevinsschmidt/persistent-writable.ts
Svelte Persistent Writable
import { writable, type Updater, type Writable } from 'svelte/store';
/**
* Create a writable store that persists to sessionStorage or localStorage.
*
* Usage example:
* export const colorScheme = createPersistentWritable<'system' | 'dark' | 'light'>({ storageId: 'color-scheme', useLocalStorage: true }, 'dark');
*/
export function createPersistentWritable<T>(
{ storageId, useLocalStorage }: { storageId: string; useLocalStorage?: boolean },
@jonshipman
jonshipman / tailwind.config.js
Created February 2, 2024 02:07
120 Crayola Crayons Tailwind Config
module.exports = {
theme: {
extend: {
colors: {
'almond': { DEFAULT: '#EFDBC5' },
'antique-brass': { DEFAULT: '#CD9575' },
'apricot': { DEFAULT: '#FDD9B5' },
'aquamarine': { DEFAULT: '#78DBE2' },
'asparagus': { DEFAULT: '#87A96B' },
'atomic-tangerine': { DEFAULT: '#FFA474' },
@jonshipman
jonshipman / select.svelte
Last active December 24, 2023 15:32
select
<script lang="ts">
import { Spinner } from '$lib/util';
import './select.css';
interface Option {
value: string;
label: string;
}
export let value = '';
<script lang="ts">
import { formatDateShort } from '$lib/util';
import Icon from '@iconify/svelte';
import { FilterStore, getEndDefault, getStartDefault } from './store';
$: start = $FilterStore.start;
$: end = $FilterStore.end;
let startInput: HTMLInputElement;
let endInput: HTMLInputElement;
<script lang="ts">
import { applyAction, enhance } from '$app/forms';
import { page } from '$app/stores';
import { RoofGraphic } from '$lib/graphics';
import { fade } from 'svelte/transition';
import type { ActionUpdate, Result } from './form.svelte.d';
import Button from './button.svelte';
import Field from './field.svelte';
import { EmailIcon, MessageIcon, NameIcon, PhoneIcon } from './icons';
@jonshipman
jonshipman / resize.svelte
Last active February 4, 2024 22:24
Media size dispatcher
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { ResizeStore } from './window-events';
import type { ResizeDetail } from './resize.svelte.d';
export let debounce = 0;
export let mobile: boolean | null = null;
const dispatch = createEventDispatcher<{ resize: ResizeDetail }>();
let timeout: ReturnType<typeof setTimeout>;
@jonshipman
jonshipman / custom_post_type_boilerplate.php
Created October 27, 2023 16:58
custom_post_type_boilerplate.php
<?php
/**
* Your custom post type
*
* @package Pacakge_Name
*/
/**
* Post Type.
*/
@jonshipman
jonshipman / docker-compose.yml
Last active November 11, 2023 13:00
Nginx Reverse Proxy with Acme Companion
version: '3.9'
services:
reverse-proxy:
container_name: 'reverse-proxy'
restart: 'always'
image: 'nginxproxy/nginx-proxy'
ports:
- 80:80
- 443:443
volumes: