mathisonian

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

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

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

import React from 'react';
let YouTube;

class YoutubeComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      mounted: false
    }

mathisonian

const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');

const size = 600;

class CustomD3Component extends D3Component {

  initialize(node, props) {

mathisonian

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

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

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

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

{
  "schema": {
    "language": "vega",
    "version": "3.0"
  },
  "width": 500,
  "height": 200,
  "padding": 5,
  "data": [
    {