Skip to content

Instantly share code, notes, and snippets.

View mathisonian's full-sized avatar

Matthew Conlen mathisonian

View GitHub Profile
@mathisonian
mathisonian / example.idyll
Last active March 30, 2020 23:18
Example question component that is only shown after a previous question is answered correctly. I haven't tested this but it should provide the basic structure.
How to use:
[var name:"q1Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test1" correct:q1Correct /]
[var name:"q2Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test2" correct:q2Correct showAfter:q1Correct /]
@mathisonian
mathisonian / GUIDE.md
Last active February 11, 2020 01:39
Loading data with Parcel

This is a quick guide to loading static files with Parcel. There are two ways to load data in JavaScript:

  • including the data in the JavaScript bundle itself
  • fetching the data as an external resource

Including data directly in the JavaScript bundle

This is the preferred way of doing things if your data payload is relatively small (<1 MB) as it will lead to fewer network requests (which often gives better perfromance).

@mathisonian
mathisonian / nav.js
Last active July 11, 2019 05:40
Nav Component
const React = require('react');
class CustomComponent extends React.Component {
render() {
const { hasError, idyll, updateProps, ...props } = this.props;
return (
<div style={{position: 'fixed', top: 0, left: 0, right: 0, display: 'flex', padding: '1em', background: '#000', justifyContent: 'space-between'}}>
<div style={{fontWeight: 'bold', fontSize: '2em', color: '#fff'}}>MY BLOG</div>
<div style={{display: 'flex'}}>
<div style={{fontSize: '1.5em', color: '#fff', marginRight: '1em'}}>A Link</div>
@mathisonian
mathisonian / youtube.js
Last active August 23, 2018 01:12
Idyll Youtube Component
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
mounted: false
}
@mathisonian
mathisonian / d3-component.js
Last active December 4, 2017 23:06
Example stepper / play / pause
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
class FilterComponent extends D3Component {
initialize(node, props) {
// instead of adding an svg, add a canvas
var canvas = d3.select(node).append("canvas")
@mathisonian
mathisonian / mycomponent.js
Created November 27, 2017 21:08
injecting props in Idyll component
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.PureComponent {
unwrapChildren() {
return this.props.children.map((c) => {
if (c => c.type.name && c.type.name.toLowerCase() === 'wrapper') {
return c.props.children[0];
}
return c;
@mathisonian
mathisonian / slideshow.js
Created August 14, 2017 18:02
slideshow
const React = require('react');
const IdyllComponent = require('idyll-component');
const Slide = require('./slide');
class Slideshow extends IdyllComponent {
getChildren(children) {
let processedChildren = [];
React.Children.forEach(children, (child) => {
if (typeof child === 'string') {
@mathisonian
mathisonian / index.md
Last active August 13, 2017 08:18
idyll vars

Setting value on a variable just defines its initial value, if you want a variable that updates derived variables are available:

[var name:"x" value:1 /]
[derived name:"dataToBeCharted" value:`[ {x: 0, y: 0.5}, {x: 3.5, y: 0.5}, {x: 4, y: x}, {x: 4.5, y: 2}, {x: 5, y: 0.5}, {x: 8, y: 0.5} ]` /]

[Range value:x min:0 max:100 step:5/]
[Display value:x /]
@mathisonian
mathisonian / spec.json
Created January 19, 2017 00:06
An example vega spec
{
"schema": {
"language": "vega",
"version": "3.0"
},
"width": 500,
"height": 200,
"padding": 5,
"data": [
{