Skip to content

Instantly share code, notes, and snippets.

View gavinmcfarland's full-sized avatar

Gavin McFarland gavinmcfarland

80 followers · 51 following
View GitHub Profile
@gavinmcfarland
gavinmcfarland / leading-trim.css
Last active March 24, 2020 14:56
For removing spacing above and below the first and last lines of a block of text
* {
--cap-height: 0.75;
--leading-trim-over-adjustment: 0em;
--leading-trim-under-adjustment: 0em;
--line-height: 1.5;
--unset: unset;
--leading-trim: var(--unset);
--leading-trim-over: var(--unset);
--leading-trim-under: var(--unset);
@gavinmcfarland
gavinmcfarland / codesandbox.js
Last active March 24, 2020 14:06
An example of a Codesandbox embed block for Sanity
import React from "react";
const CodeSandboxPreview = ({ value }) => {
const { url = "test", theme = "light", view } = value;
if (!url) {
return (<div>Add a URL</div>)
}
var viewString = ""
@gavinmcfarland
gavinmcfarland / leading-trim.md
Last active March 23, 2020 18:23
Leading Trim Toggle

Leading Trim Toggle

Below is a CSS snippet you can use to turn leading trimming on and off per element. Otherwise known as line-height crop or text crop.

/* leading-trim.css */

* {
  --line-height: 1.5;
  --cap-height: 0.75;
@gavinmcfarland
gavinmcfarland / figma.js
Created March 19, 2020 19:08
An example of a Figma embed block for Sanity
import React from "react";
const FigmaPreview = ({ value }) => {
const { url } = value;
const host = `gavinmcfarland.co.uk;` // Change to your host/domain
const regex = /https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/
if (regex.test(url)) {
const embedUrl = `https://www.figma.com/embed?embed_host=${host}&url=${url}`;
return (<iframe
@gavinmcfarland
gavinmcfarland / issues.md
Last active October 18, 2019 09:29
Proposal for abstract design specification

How to lookup properties?

red: #FF0000;

color: {
  red: #CD0000;
  blue: #001AFF;
  green: #00FF19;
}
@gavinmcfarland
gavinmcfarland / example-use.marko
Last active September 25, 2019 21:20
Experimenting with a Markdown component in Marko
<Markdown># Hello ${input.name}</Markdown>
@gavinmcfarland
gavinmcfarland / now.json
Created September 21, 2019 22:15
Example for using marko-webpack with Now
{
"name": "test",
"version": 2,
"builds": [{
"src": "dist/server/main.js",
"use": "@now/node-server"
}, {
"src": "dist/client/**",
"use": "@now/static"
}],
@gavinmcfarland
gavinmcfarland / getAdjValues.js
Last active August 22, 2019 00:05
Get values of all adjacent properties at a specific level
function getAdjValues(thing, depth) {
function iterValue(thing, depth, i = -1) {
i++
let targetDepth = depth - 1
_.each(thing, function(value, property) {
let newThing = {}
if (Array.isArray(value)) {
if (value.length === 1) {
@gavinmcfarland
gavinmcfarland / smtl.md
Created August 20, 2019 17:29
Super Minimallistic Templating Language

An idea for a super minimalistic templating language

.<rule.abbr><modifier> {        # for rule, modifier, prop, value in rules
	<prop>: >> <value> <<;
}
// css/class.template
@gavinmcfarland
gavinmcfarland / plugin-architecture.md
Last active August 13, 2019 12:22
Plugin architecture

Option 1: Using constructor

Adding plugin inline

// index.js
import { mole, Model } from 'mole'

mole.add(
	new Model('model-name', (data, theme) =&gt; {