Skip to content

Instantly share code, notes, and snippets.

View KyleAMathews's full-sized avatar

Kyle Mathews KyleAMathews

3.5k followers · 113 following
View GitHub Profile
@KyleAMathews
KyleAMathews / gatsby.html
Created April 10, 2018 01:30
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preload" href="/static/ftn45-webfont.c2439033.woff2" as="font" crossOrigin="anonymous" />
<link rel="preload" href="/static/spectral-latin-400.d9fdfd34.woff2" as="font" crossOrigin="anonymous" />
<link rel="preload" href="/static/ftn65-webfont.0ddc10d2.woff2" as="font" crossOrigin="anonymous" />
<link rel="preload" href="/component---src-layouts-index-js-33d257af54723bdfb1d0.js" as="script" />
<link rel="preload" href="/component---src-pages-index-js-3cdb402769c1c5fdd896.js" as="script" />
<link rel="preload" href="/path---index-2cb2fde3f8c5288ad40e.js" as="script" />
@KyleAMathews
KyleAMathews / links.md
Created March 23, 2017 14:31
css-in-js links
@KyleAMathews
KyleAMathews / gen-routes.js
Created January 5, 2017 16:28
const _ = require('lodash')
const fs = require('fs')
const templates = [
`template-blog-post`,
`template-article-page`,
`template-cheeseburger`,
`blahblahblahlbah`,
`blahblahblahlbah1`,
`blahblahblahlbah2`,
@KyleAMathews
KyleAMathews / gatsby-1-rfc.md
Last active September 3, 2016 02:02

Hi folks, Gatsby is now 1.25 years old — seems high time we push for a 1.0 :-)

I've been thinking about what Gatsby could/should be for many months now and more recently have been prototyping these ideas. This issue is an description of where my thinking is at. It's intended to kickstart a discussion of what Gatsby 1.0 can be. There's a lot of open questions still and I'd love feedback on my ideas to this point.

@KyleAMathews
KyleAMathews / hot-reloading-typography.js
Created June 18, 2016 20:04
import ReactDOM from 'react-dom/server'
import React from 'react'
import Typography from '../../src/'
import GoogleFont from '../../src/components/GoogleFont'
import theme from '../../src/themes/us-web-design-standard'
const typography = new Typography(theme)
// Hot reload typography in development.
@KyleAMathews
KyleAMathews / typography.js-talk-propsal.md
Created June 2, 2016 17:10

Typography.js — An opinionated toolkit for building websites with beautiful typography

Typography in CSS seems like a dark art. Most resign themselves to using foundational css from a library. But this is wrong! Typography is just Math! Typography.js puts you in control of you theme and gives you powerful but simple tools for building beautiful, unique websites and apps.

@KyleAMathews
KyleAMathews / gist:c9c4feeff99c4581132a
Last active December 12, 2015 18:38

Gatsby brings all the goodies from the React world (React-Router, Webpack, open source components, etc.) to the world of static web sites. This talk will show you how you can use Gatsby to quickly build incredibly fast websites using the same tools and techniques you use on your react.js web apps.

Gatsby features:

  • No-reload page transitions
  • Hot reload editing. Tweak your pages, templates, and styles and see changes in real time.
  • Make React.js component model and ecosystem available for building static sites
  • Intuitive directory-based URLs. The URL of a page is derived from its spot on the file system.
  • Support starters — install starter sites directly from Github. Use open sourced starters or build your own.
@KyleAMathews
KyleAMathews / RelayNetworkLayer.coffee
Created October 21, 2015 20:32
request = require 'superagent-bluebird-promise'
Promise = require 'bluebird'
history = require '../history'
module.exports = class RelayNetworkLayer
constructor: (options = {}) ->
@token = options.token
@host = options.host
sendMutation: (requests) ->
@KyleAMathews
KyleAMathews / posts_index.js
Created September 14, 2015 02:41
viewer: () => Relay.QL`
fragment on User {
id
allPosts(first: $first) {
edges {
node {
post_id
title
body
created_at
@KyleAMathews
KyleAMathews / Post.js
Created September 11, 2015 22:43
export default Relay.createContainer(Post, {
initialVariables: {
post_id: null,
id: btoa('Post:' + 1),
},
prepareVariables: prevVariables => {
return {
...prevVariables,
id: btoa('Post:' + prevVariables.post_id),