Skip to content

Instantly share code, notes, and snippets.

View apaleslimghost's full-sized avatar
💚
a pale slim ghost

Kara Brightwell apaleslimghost

💚
a pale slim ghost
View GitHub Profile
module.exports = new Set([
'acid',
'acorn',
'alien-fire',
'all-for-one',
'alligator-clip',
'ammo-bag',
'anchor',
'angel-wings',
'ankh',
const isPropValid = require('@emotion/is-prop-valid').default
const pickBy = require('lodash.pickby')
module.exports = props => pickBy(props, (_, key) => isPropValid(key))
import { OrderedMap } from 'immutable'
import React, { useState, useEffect } from 'react'
import { LiveBlogStream } from './stream' // imaginary
import { LiveBlogPost } from '@financial-times/x-live-blog-post'
// e.g. <LiveBlogList initialPosts={dataFromCatchupRequest} eventUrl='https://next-live-event.ft.com/?eventid=the-world/liveblogs/2020-05-05-2/' />
export function LiveBlogList({ serverConnection = false, initialPosts = [] }) {
const [posts, setPosts] = useState(
// using an OrderedMap means that new posts will be iterated
const gambit = require('@quarterto/gambit')
const scheme = {
carbon: {saturation: 15, hue: 75, lightness: 60},
steel: {saturation: 20, hue: 220, lightness: 60},
scarlet: {hue: 9},
amber: {hue: 37, lightness: 70},
lemon: {hue: 64, lightness: 80},
lime: {hue: 100, lightness: 85},
apple: {hue: 127, lightness: 80},
const {hexToHsluv, hsluvToHex} = require('hsluv')
const interpolate = (a1, a2) => x => a1.map((c, i) => c + (a2[i] - c) * x)
const range = steps => Array.from({length: steps + 1}, (_, i) => i / steps)
const stopsToHsluv = (start, end) => {
const hStart = hexToHsluv(start)
const hEnd = hexToHsluv(end)
const throughZero = Math.abs(hStart[0] - hEnd[0]) > 180
@apaleslimghost
apaleslimghost / styled-compose.js
Last active May 27, 2020 20:01
name:@quarterto/styled-compose
const {createElement: h} = require('react')
module.exports = (...styles) => styles.reduce(
(prev, component) => {
function Composed(props) {
return h(component, Object.assign({}, props, {as: prev}))
}
Composed.displayName = component.displayName || component.name
return Composed
import { render, useState, html } from 'excise'
// props is attributes
const Counter = ({initialCount = 0}) => {
const [count, setCount] = useState(initialCount)
return html`
<button onClick=${() => setCount(count + 1)}>+</button>
${count}
`
#!/usr/bin/env node
const loadPackageJson = require('@financial-times/package-json')
const { execSync } = require('child_process')
const packageJson = loadPackageJson({ filepath: './package.json' })
packageJson.requireDependency({ pkg: 'parcel-bundler', version: '^1.12.0', field: 'devDependencies' })
packageJson.setField('scripts', {
module.exports = require('lodash.sortby')
const {diffChars} = require('diff')
const c = require('ansi-colors')
const Result = require('folktale/result')
module.exports = ({ expected, value }) => (
expected === value
? Result.Ok()
: Result.Error(
c.red('- expected ') + c.green('+ actual\n') +
diffChars(expected, value)