doubleedesign

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

/** 
 * 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) {

doubleedesign

# 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

// 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

<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

<?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

<?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

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

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

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