Skip to content

Instantly share code, notes, and snippets.

View leemartin's full-sized avatar

Lee Martin leemartin

View GitHub Profile
@leemartin
leemartin / downloadBlob.ts
Created January 29, 2025 16:12
Download blob util for Vue written in Typescript
export default function (blob: Blob, name: string) {
// Create object url
let data = window.URL.createObjectURL(blob)
// Create a element
let link = document.createElement('a')
// Add properties
link.href = data
link.download = name
@leemartin
leemartin / loadImage.ts
Created January 29, 2025 15:29
Load image util for Vue written in Typescript
export default (url: string): Promise<HTMLImageElement> => {
// Promise
return new Promise((resolve, revoke) => {
// Image
let img = new Image()
// On load
img.onload = () => {
// Resolve
resolve(img)
@leemartin
leemartin / useCamera.ts
Created January 29, 2025 15:07
Camera composable for Vue written in Typescript
export const useCamera = () => {
// State
const cameraFacing = useState<ConstrainDOMString | undefined>("cameraFacing", () => 'environment')
const cameraStream = useState<MediaStream | undefined>("cameraStream", () => undefined)
// Start camera
// ----------
const start = async () => {
// Promise
return new Promise(async (resolve, revoke) => {
@leemartin
leemartin / ProgressCircle.vue
Created March 24, 2024 15:40
A progress circle Vue component powered by CSS conic gradient
<template>
<div class="h-full rounded-full w-full" :style="conicGradient"></div>
</template>
<script setup>
// Props
const props = defineProps({
color: {
type: String,
default: '#000000'
@leemartin
leemartin / PanelTransition.vue
Created December 20, 2023 16:43
Vue Sci-Fi Blinking Panel Transition
<template>
<Transition :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" mode="out-in">
<slot></slot>
</Transition>
</template>
<script>
import gsap from 'gsap'
export default {
@leemartin
leemartin / Marquee.vue
Created August 10, 2023 15:31
Vue Marquee Component
<template>
<div id="marquee">
<div class="inner">
<div class="message">{{ message }}</div>
<div class="message">{{ message }}</div>
</div>
</div>
</template>
<script setup>
@leemartin
leemartin / weather.js
Created June 26, 2022 13:54
Apple WeatherKit REST API Netlify Function
const axios = require("axios")
const jwt = require("jsonwebtoken")
const handler = async (event) => {
try {
// Decode private key
const privateKey = Buffer.from(process.env.WEATHERKIT_KEY, 'base64').toString()
// Get team, key, and app id
const teamId = process.env.WEATHERKIT_TEAM_ID
@leemartin
leemartin / encode.js
Last active June 26, 2022 13:55
Encode Apple Private Key as Base64 String
// Require file system module
const fs = require("fs")
// Read private key from file
const privateKey = fs.readFileSync("AuthKey_0000000000.p8").toString()
// Encode private key into Base64 string
const buff = Buffer.from(privateKey).toString('base64')
@leemartin
leemartin / PanelTransition.vue
Created June 22, 2022 13:22
Planet Zero Observer Panel Blink Transition
<template>
<Transition :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" mode="out-in">
<slot></slot>
</Transition>
</template>
<script>
import gsap from 'gsap'
export default {
@leemartin
leemartin / desaturate.js
Created February 21, 2022 18:00
Desaturate Canvas
let desaturate = (canvas) => {
// Get canvas image data
let imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height)
// Get all pixels
let pixels = imageData.data
// Loop through pixels
for (let i = 0; i < pixels.length; i += 4) {
// Adjust lightness