Skip to content

Instantly share code, notes, and snippets.

View leemartin's full-sized avatar

Lee Martin leemartin

View GitHub Profile
@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 / spotify-waveform.js
Last active September 25, 2023 17:39
Spotify Waveform Data Generation from Audio Analysis API
const fs = require('fs')
const data = require('./track.json')
let duration = data.track.duration
let segments = data.segments.map(segment => {
return {
start: segment.start / duration,
duration: segment.duration / duration,
loudness: 1 - (Math.min(Math.max(segment.loudness_max, -35), 0) / -35)
@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 / 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 / musickit-token-encoder.js
Last active July 28, 2022 01:54
Apple Music API Token for MusicKit
"use strict";
const fs = require("fs");
const jwt = require("jsonwebtoken");
const privateKey = fs.readFileSync("AuthKey.p8").toString();
const teamId = "ABCDE12345";
const keyId = "ABCDE12345";
const jwtToken = jwt.sign({}, privateKey, {
@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 / 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 / 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
@leemartin
leemartin / AudioSpectrum.vue
Created February 20, 2022 17:53
Vue Paper.js Audio Spectrum Visualizer
<template>
<div id="spectrum">
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import paper from 'paper'
export default {