Adam Duncan adamduncan

## useRouterStatus.js
import { useState, useEffect } from 'react';
import Router from 'next/router';

export default function useRouterStatus() {
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    const start = () => {

## css-custom-properties-ponyfill.html
<script>
  /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
  !function(e){var t=function(t,o,n){"use strict";var r,a=e.document.getElementsByTagName("script")[0],c=e.document.createElement("script");return"boolean"==typeof o&&(r=n,n=o,o=r),c.src=t,c.async=!n,a.parentNode.insertBefore(c,a),o&&"function"==typeof o&&(c.onload=o),c};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);

  // Polyfill custom properties for <= IE11
  if (!window.CSS || !window.CSS.supports || !window.CSS.supports('--a', 0)) {
    loadJS('https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js', function() {
      cssVars();
    })
  }

## App.css
/* import tokens at top of App, along with any other global styles (e.g. normalize, etc.) */
@import "tokens";

## Modal.js
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import AriaModal from 'react-aria-modal';
import classNames from 'utils/namespace-classnames';

import './Modal.css';

class Modal extends React.Component {
  constructor(props) {
    super(props);

## StyledFSC.jsx
const StyledCard = styled.div`
  background-color: #eee;
  padding: 1rem;
  border-radius: 0.25rem;
`

const Card = ({ title, copy }) => {
  return (
    <StyledCard>
      <h3>{ title }</h3>

## snippets.cson
'.text.html':
    'HTML5 Starter':
      'prefix': 'html'
      'body': '
<!DOCTYPE html>\n
<html class="no-js" lang="en">\n
\t<head prefix="og: http://ogp.me/ns">\n
\t\t<meta charset="utf-8">\n
\t\t<meta http-equiv="X-UA-Compatible" content="IE=edge">\n
\t\t<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n\n

## hello-hello.js
var docEl = document.documentElement;
console.log('Hello, external');

## HistoryAPI.js
//----------------------------------------------------------------------
//	HISTORY API
//	Base Package
//----------------------------------------------------------------------

var HistoryAPI = {

	contentId: 'content',
	content: document.getElementById('content'),
	animateClass: 'history-content--animate-out',

## SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----

$doc-font-size: 16; /* 16px */
$lap: 600;
$desk: 900;

@mixin mq($point, $constraint: min, $feature: width) {
	@media screen and (#{$constraint}-#{$feature}: $point / $doc-font-size + em) {

## SassMeister-input.scss
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/*-----------------------------------------------------*/
/*--------------------- VERSION 1 ---------------------*/
/*-----------------------------------------------------*/
.link-a {
  color: red;
	import { useState, useEffect } from 'react';
	import Router from 'next/router';

	export default function useRouterStatus() {
	const [isLoading, setIsLoading] = useState(false);
	const [isError, setIsError] = useState(false);
	const [error, setError] = useState();

	useEffect(() => {
	const start = () => {
	<script>
	/! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT /
	!function(e){var t=function(t,o,n){"use strict";var r,a=e.document.getElementsByTagName("script")[0],c=e.document.createElement("script");return"boolean"==typeof o&&(r=n,n=o,o=r),c.src=t,c.async=!n,a.parentNode.insertBefore(c,a),o&&"function"==typeof o&&(c.onload=o),c};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);

	// Polyfill custom properties for <= IE11
	if (!window.CSS \|\| !window.CSS.supports \|\| !window.CSS.supports('--a', 0)) {
	loadJS('https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js', function() {
	cssVars();
	})
	}
	/* import tokens at top of App, along with any other global styles (e.g. normalize, etc.) */
	@import "tokens";
	import React, { Fragment } from 'react';
	import PropTypes from 'prop-types';
	import AriaModal from 'react-aria-modal';
	import classNames from 'utils/namespace-classnames';

	import './Modal.css';

	class Modal extends React.Component {
	constructor(props) {
	super(props);
	const StyledCard = styled.div`
	background-color: #eee;
	padding: 1rem;
	border-radius: 0.25rem;
	`

	const Card = ({ title, copy }) => {
	return (
	<StyledCard>
	<h3>{ title }</h3>
	'.text.html':
	'HTML5 Starter':
	'prefix': 'html'
	'body': '
	<!DOCTYPE html>\n
	<html class="no-js" lang="en">\n
	\t<head prefix="og: http://ogp.me/ns">\n
	\t\t<meta charset="utf-8">\n
	\t\t<meta http-equiv="X-UA-Compatible" content="IE=edge">\n
	\t\t<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n\n
	var docEl = document.documentElement;
	console.log('Hello, external');
	//----------------------------------------------------------------------
	// HISTORY API
	// Base Package
	//----------------------------------------------------------------------

	var HistoryAPI = {

	contentId: 'content',
	content: document.getElementById('content'),
	animateClass: 'history-content--animate-out',
	// ----
	// libsass (v3.2.5)
	// ----

	$doc-font-size: 16; /* 16px */
	$lap: 600;
	$desk: 900;

	@mixin mq($point, $constraint: min, $feature: width) {
	@media screen and (#{$constraint}-#{$feature}: $point / $doc-font-size + em) {
	// ----
	// Sass (v3.4.11)
	// Compass (v1.0.3)
	// ----

	/-----------------------------------------------------/
	/--------------------- VERSION 1 ---------------------/
	/-----------------------------------------------------/
	.link-a {
	color: red;