This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Note: This assumes you already have the CSS set up for the classes you want to use. | |
function initCarousel() { | |
$('.my-carousel').slick({ | |
slidesToShow: 1, | |
slidesToScroll: 1, | |
autoplay: false, | |
adaptiveHeight: false, | |
fade: true, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
} | |
/** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Add reCaptcha to checkout form | |
* Note: Can't place within the payment part of the form, WooCommerce just won't show it, choose an appropriate action to add it to accordingly | |
* @param $checkout | |
*/ | |
function doublee_show_me_the_checkout_captcha($checkout) { | |
echo '<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>'; | |
} | |
add_action('woocommerce_checkout_order_review', 'doublee_show_me_the_checkout_captcha', 18); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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'); | |
} |