Skip to content

Instantly share code, notes, and snippets.

View doubleedesign's full-sized avatar

Leesa Ward doubleedesign

View GitHub Profile
@doubleedesign
doubleedesign / 1-local-to-herd.ps1
Last active June 25, 2025 12:41
Local by Flywheel + Laravel Herd, best of both worlds! Use Local for pushing and pulling and Herd for local development (so you can use the Dumps window and test emails). If you put these in your herd bin folder, you can run "local-to-herd" from anywhere to transfer the site's database and link the install to Herd's server, and "local-export-db"…
# This is a custom script that automates the transition of a WordPress site
# from Local by Flywheel to Laravel Herd for local development.
# When placed in your user directory -> .config/herd/bin alongside a .bat file to run it,
# you can run it from anywhere using the command "local-to-herd" in PowerShell.
param(
[string]$SiteName
)
# Function to check if a command exists
@doubleedesign
doubleedesign / manager.ts
Created December 30, 2024 09:32
Log all Storybook events to the browser console for debugging
import { addons } from '@storybook/manager-api';
import events from '@storybook/core-events';
addons.register('my-manager-addon', () => {
const channel = addons.getChannel();
Object.values(events).forEach((event) => {
channel.on(event, (data) => {
console.log(event, data);
});
@doubleedesign
doubleedesign / xdebug-markup.js
Created November 17, 2024 02:47
Customised Xdebug output styling
/**
* Customise some of the HTML output of xdebug + add highlightjs + hackily customise that
* Requires:
* - HighlightJS: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js
* - HighlightJS PHP: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/php.min.js
* - Optionally, a base theme, e.g., https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css
**/
document.addEventListener('DOMContentLoaded', function () {
const codeBlocks = document.querySelectorAll('.xdebug-error td:nth-of-type(4)');
if(codeBlocks.length) {
# ZSH Theme based on Solus (https://gist.github.com/cloudnull/4cc7890acaae6cb809e811e09e9eaade#file-solus-zsh-theme)
# Modified with custom colours
# See https://coderwall.com/p/pb1uzq/z-shell-colors for colour codes
if [[ $UID -eq 0 ]]; then
local user_symbol='%F{196}#%f'
else
local user_symbol='%F{226}$%f'
fi
@doubleedesign
doubleedesign / previous-sibling.scss
Last active January 28, 2024 10:47
CSS previous sibling selector example
// I have sections (called blocks here) that should have top and bottom padding,
// unless two of the same kind with the same background colour are together -
// in which case I want them to be right up next to each other - no padding between them.
// In the HTML it looks something like this:
// <section class="block my-special-block has-primary-background-color">
.block {
padding-top: map-get($spacing, 'lg');
padding-bottom: map-get($spacing, 'lg');
}
@doubleedesign
doubleedesign / App.vue
Created December 17, 2023 01:24
Vue component with customisable HTML element using "as" prop
<script setup lang="ts">
import Drawer from './components/Drawer.vue';
</script>
<template>
<div class="app-wrapper">
<Drawer position="left" :open="true" as="header">
<p>Stuff goes here</p>
</Drawer>
<main class="page-content">
@doubleedesign
doubleedesign / class-admin-ui.php
Last active December 16, 2023 06:49
Rename a WordPress admin menu item without knowing its index (because they can change!)
<?php
// Note: it's not mandatory to put this in a class, it's just how I write my plugins
class Doublee_Admin_UI {
public function __construct() {
add_action('admin_menu', array($this, 'rename_menu_items'));
// ...other function calls
}
/**
@doubleedesign
doubleedesign / markup.php
Created September 23, 2023 11:45
Alter output of WordPress TinyMCE field content
<?php
/**
* Add spans and icons to buttons added by applying custom link classes in the WYSIWYG editor
* @param $content
* @return string
*/
function wapr_add_icons_to_buttons($content): string {
return preg_replace_callback('/<a class="btn btn--(?:.*) btn--icon" href="(?:.*)">(.*)<\/a>/', function($match) {
return str_replace($match[1], '<span>'.$match[1].'</span><i class="fa-regular fa-chevron-right"></i>', $match[0]);
}, $content);
@doubleedesign
doubleedesign / useTruncatedText.ts
Last active August 7, 2023 01:27
React hook to keep text on one line, truncating it with an ellpisis if it's longer than its container's width. Demo: https://codesandbox.io/s/morning-butterfly-x8rxwy?file=/src/App.tsx
import { useState, useEffect, useMemo, MutableRefObject } from 'react';
import { useVisibleSize } from './useVisibleSize.ts';
export function useTruncatedText(outerRef: MutableRefObject<any>, innerRef: MutableRefObject<any>) {
const { width: outerWidth } = useVisibleSize(outerRef.current);
const { width: innerWidth } = useVisibleSize(innerRef.current);
useEffect(() => {
if (innerRef.current) {
innerRef.current.style.whiteSpace = "nowrap";
@doubleedesign
doubleedesign / ThemeUtils.ts
Last active April 7, 2023 01:33
Shortcut function for choosing text colour based on background colour using Styled Components + Polished
import { meetsContrastGuidelines } from 'polished';
import { ContrastScores } from 'polished/lib/types/color';
type WCAGLevel = keyof ContrastScores;
export function contrastTextColour(color: string, wcag: WCAGLevel = 'AA') {
const scores = meetsContrastGuidelines(color, '#fff');
if(scores[wcag]) {
return '#fff';
}