Skip to content

Instantly share code, notes, and snippets.

View doubleedesign's full-sized avatar

Leesa Ward doubleedesign

View GitHub Profile
@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';
}
@doubleedesign
doubleedesign / ColorThemeTypedExample.styled.ts
Last active April 7, 2023 01:34
Typing styled-components props: Valid string values according to what's available in theme
import styled from 'styled-components';
import { ThemeColor } from '../../types';
interface ButtonProps {
color: ThemeColor
}
export const StyledButton = styled.button<ButtonProps>`
background: ${({ theme, color }): string => theme.colors[color]};
// more styles
@doubleedesign
doubleedesign / Button.styled.ts
Created April 7, 2023 00:10
Extend a styled component as a different HTML element
import styled from 'styled-components';
interface ButtonProps {
// Props to be used for styling below
}
export const StyledButton = styled.button<ButtonProps>`
// Styles
&:hover, &:focus, &:active {